Skip to content

Commit efe97a6

Browse files
estyxxestyxx
authored
Add illustrations stories (#92)
1 parent bc292ac commit efe97a6

File tree

8 files changed

+385
-49
lines changed

8 files changed

+385
-49
lines changed

‎README.md

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
11
# Python Italia's component library for PyCon Italia (and related events)
22

3-
## TODO: instructions on how to use it
3+
We use [Storybook](https://storybook.js.org/) to generate a UI component style guide that you can use on the Python Italia websites.
4+
5+
## Getting Started
6+
7+
```shell
8+
pnpm install
9+
10+
pnpm storybook
11+
```
12+
13+
Open [http://localhost:6006](http://localhost:6006) with your browser to see the result.

‎src/illustrations/illustration.stories.tsx

+76-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
import React from "react";
2-
import { SnakeCouple } from "./snake-couple";
3-
import { SnakeDNA } from "./snake-dna";
2+
import { Cathedral } from "./cathedral";
3+
import { Florence } from "./florence";
4+
import { Florence2 } from "./florence2";
5+
import { HandWithSnakeInside } from "./hand-with-snake-inside";
46
import { Snake1 } from "./snake-1";
57
import { Snake2 } from "./snake-2";
6-
import { SnakeTail } from "./snake-tail";
78
import { Snake4 } from "./snake-4";
89
import { Snake5 } from "./snake-5";
9-
import { Cathedral } from "./cathedral";
10-
import { Florence } from "./florence";
10+
import { SnakeBody } from "./snake-body";
11+
import { SnakeCouple } from "./snake-couple";
12+
import { SnakeDNA } from "./snake-dna";
13+
import { SnakeHead } from "./snake-head";
14+
import { SnakeInDragon } from "./snake-in-dragon";
15+
import { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
16+
import { SnakeLetter } from "./snake-letter";
17+
import { SnakeLongNeck } from "./snake-long-neck";
18+
import { SnakePencil } from "./snake-pencil";
19+
import { SnakeTail } from "./snake-tail";
20+
import { SnakeWithBalloon } from "./snake-with-balloon";
21+
import { SnakeWithContacts } from "./snake-with-contacts";
22+
import { SnakesWithBanner } from "./snakes-with-banner";
23+
import { SnakesWithCocktail } from "./snakes-with-cocktail";
24+
import { SnakesWithDirections } from "./snakes-with-directions";
25+
import { SnakesWithOutlines } from "./snakes-with-outlines";
1126
import { TripleSnakes } from "./triple-snakes";
1227

1328
export default {
@@ -19,11 +34,17 @@ const Template = ({ component: Component }) => {
1934
};
2035
Template.args = { component: SnakeCouple };
2136

22-
export const SnakeCoupleStory = Template.bind({});
23-
SnakeCoupleStory.args = { component: SnakeCouple };
37+
export const CathedralStory = Template.bind({});
38+
CathedralStory.args = { component: Cathedral };
2439

25-
export const SnakeDNAStory = Template.bind({});
26-
SnakeDNAStory.args = { component: SnakeDNA };
40+
export const FlorenceStory = Template.bind({});
41+
FlorenceStory.args = { component: Florence };
42+
43+
export const Florence2Story = Template.bind({});
44+
Florence2Story.args = { component: Florence2 };
45+
46+
export const HandWithSnakeInsideStory = Template.bind({});
47+
HandWithSnakeInsideStory.args = { component: HandWithSnakeInside };
2748

2849
export const Snake1Story = Template.bind({});
2950
Snake1Story.args = { component: Snake1 };
@@ -40,11 +61,53 @@ Snake4Story.args = { component: Snake4 };
4061
export const Snake5Story = Template.bind({});
4162
Snake5Story.args = { component: Snake5 };
4263

43-
export const CathedralStory = Template.bind({});
44-
CathedralStory.args = { component: Cathedral };
64+
export const SnakeBodyStory = Template.bind({});
65+
SnakeBodyStory.args = { component: SnakeBody };
4566

46-
export const FlorenceStory = Template.bind({});
47-
FlorenceStory.args = { component: Florence };
67+
export const SnakeCoupleStory = Template.bind({});
68+
SnakeCoupleStory.args = { component: SnakeCouple };
69+
70+
export const SnakeDNAStory = Template.bind({});
71+
SnakeDNAStory.args = { component: SnakeDNA };
72+
73+
export const SnakeHeadStory = Template.bind({});
74+
SnakeHeadStory.args = { component: SnakeHead };
75+
76+
export const SnakeInDragonInvertedStory = Template.bind({});
77+
SnakeInDragonInvertedStory.args = { component: SnakeInDragonInverted };
78+
79+
export const SnakeInDragonStory = Template.bind({});
80+
SnakeInDragonStory.args = { component: SnakeInDragon };
81+
82+
export const SnakeLetterStory = Template.bind({});
83+
SnakeLetterStory.args = { component: SnakeLetter };
84+
85+
export const SnakeLongNeckStory = Template.bind({});
86+
SnakeLongNeckStory.args = { component: SnakeLongNeck };
87+
88+
export const SnakePencilStory = Template.bind({});
89+
SnakePencilStory.args = { component: SnakePencil };
90+
91+
export const SnakeTailStory = Template.bind({});
92+
SnakeTailStory.args = { component: SnakeTail };
93+
94+
export const SnakeWithBalloonStory = Template.bind({});
95+
SnakeWithBalloonStory.args = { component: SnakeWithBalloon };
96+
97+
export const SnakeWithContactsStory = Template.bind({});
98+
SnakeWithContactsStory.args = { component: SnakeWithContacts };
99+
100+
export const SnakesWithBannerStory = Template.bind({});
101+
SnakesWithBannerStory.args = { component: SnakesWithBanner };
102+
103+
export const SnakesWithCocktailStory = Template.bind({});
104+
SnakesWithCocktailStory.args = { component: SnakesWithCocktail };
105+
106+
export const SnakesWithDirectionsStory = Template.bind({});
107+
SnakesWithDirectionsStory.args = { component: SnakesWithDirections };
108+
109+
export const SnakesWithOutlinesStory = Template.bind({});
110+
SnakesWithOutlinesStory.args = { component: SnakesWithOutlines };
48111

49112
export const TripleSnakesStory = Template.bind({});
50113
TripleSnakesStory.args = { component: TripleSnakes };

‎src/illustrations/illustrations.ts

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import { Cathedral } from "./cathedral";
2+
import { Florence } from "./florence";
3+
import { Florence2 } from "./florence2";
4+
import { HandWithSnakeInside } from "./hand-with-snake-inside";
5+
import { Snake1 } from "./snake-1";
6+
import { Snake2 } from "./snake-2";
7+
import { Snake4 } from "./snake-4";
8+
import { Snake5 } from "./snake-5";
9+
import { SnakeBody } from "./snake-body";
10+
import { SnakeCouple } from "./snake-couple";
11+
import { SnakeDNA } from "./snake-dna";
12+
import { SnakeHead } from "./snake-head";
13+
import { SnakeInDragon } from "./snake-in-dragon";
14+
import { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
15+
import { SnakeLetter } from "./snake-letter";
16+
import { SnakeLongNeck } from "./snake-long-neck";
17+
import { SnakePencil } from "./snake-pencil";
18+
import { SnakeTail } from "./snake-tail";
19+
import { SnakeWithBalloon } from "./snake-with-balloon";
20+
import { SnakeWithContacts } from "./snake-with-contacts";
21+
import { SnakesWithBanner } from "./snakes-with-banner";
22+
import { SnakesWithCocktail } from "./snakes-with-cocktail";
23+
import { SnakesWithDirections } from "./snakes-with-directions";
24+
import { SnakesWithOutlines } from "./snakes-with-outlines";
25+
import { TripleSnakes } from "./triple-snakes";
26+
import { Illustration } from "./types";
27+
28+
export const getIllustration = (name: Illustration | undefined) => {
29+
switch (name) {
30+
case "cathedral":
31+
return Cathedral;
32+
case "florence":
33+
return Florence;
34+
case "florence2":
35+
return Florence2;
36+
case "handWithSnakeInside":
37+
return HandWithSnakeInside;
38+
case "snake1":
39+
return Snake1;
40+
case "snake2":
41+
return Snake2;
42+
case "snake4":
43+
return Snake4;
44+
case "snake5":
45+
return Snake5;
46+
case "snakeBody":
47+
return SnakeBody;
48+
case "snakeCouple":
49+
return SnakeCouple;
50+
case "snakeDNA":
51+
return SnakeDNA;
52+
case "snakeHead":
53+
return SnakeHead;
54+
case "snakeInDragon":
55+
return SnakeInDragon;
56+
case "snakeInDragonInverted":
57+
return SnakeInDragonInverted;
58+
case "snakeLetter":
59+
return SnakeLetter;
60+
case "snakeLongNeck":
61+
return SnakeLongNeck;
62+
case "snakePencil":
63+
return SnakePencil;
64+
case "snakeTail":
65+
return SnakeTail;
66+
case "snakeWithBalloon":
67+
return SnakeWithBalloon;
68+
case "snakeWithContacts":
69+
return SnakeWithContacts;
70+
case "snakesWithBanner":
71+
return SnakesWithBanner;
72+
case "snakesWithCocktail":
73+
return SnakesWithCocktail;
74+
case "snakesWithDirections":
75+
return SnakesWithDirections;
76+
case "snakesWithOutlines":
77+
return SnakesWithOutlines;
78+
case "tripleSnakes":
79+
return TripleSnakes;
80+
}
81+
return null;
82+
};

‎src/illustrations/index.ts

+16-13
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,26 @@
1-
export { SnakeCouple } from "./snake-couple";
2-
export { SnakeDNA } from "./snake-dna";
1+
2+
export { Cathedral } from "./cathedral";
3+
export { Florence } from "./florence";
4+
export { Florence2 } from "./florence2";
5+
export { HandWithSnakeInside } from "./hand-with-snake-inside";
36
export { Snake1 } from "./snake-1";
47
export { Snake2 } from "./snake-2";
5-
export { SnakeTail } from "./snake-tail";
68
export { Snake4 } from "./snake-4";
79
export { Snake5 } from "./snake-5";
8-
export { TripleSnakes } from "./triple-snakes";
9-
export { Cathedral } from "./cathedral";
10-
export { Florence } from "./florence";
10+
export { SnakeBody } from "./snake-body";
11+
export { SnakeCouple } from "./snake-couple";
12+
export { SnakeDNA } from "./snake-dna";
1113
export { SnakeHead } from "./snake-head";
14+
export { SnakeInDragon } from "./snake-in-dragon";
15+
export { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
16+
export { SnakeLetter } from "./snake-letter";
1217
export { SnakeLongNeck } from "./snake-long-neck";
1318
export { SnakePencil } from "./snake-pencil";
14-
export { HandWithSnakeInside } from "./hand-with-snake-inside";
15-
export { SnakeLetter } from "./snake-letter";
16-
export { SnakesWithDirections } from "./snakes-with-directions";
19+
export { SnakeTail } from "./snake-tail";
20+
export { SnakeWithBalloon } from "./snake-with-balloon";
21+
export { SnakeWithContacts } from "./snake-with-contacts";
1722
export { SnakesWithBanner } from "./snakes-with-banner";
1823
export { SnakesWithCocktail } from "./snakes-with-cocktail";
24+
export { SnakesWithDirections } from "./snakes-with-directions";
1925
export { SnakesWithOutlines } from "./snakes-with-outlines";
20-
export { SnakeWithBaloon } from "./snake-with-baloon";
21-
export { SnakeWithContacts } from "./snake-with-contacts";
22-
export { SnakeInDragonInverted } from "./snake-in-dragon-inverted";
23-
export { SnakeInDragon } from "./snake-in-dragon";
26+
export { TripleSnakes } from "./triple-snakes";

‎src/illustrations/snake-with-baloon.tsx renamed to ‎src/illustrations/snake-with-balloon.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from "react";
22

3-
export const SnakeWithBaloon = (props: React.SVGProps<SVGSVGElement>) => {
3+
export const SnakeWithBalloon = (props: React.SVGProps<SVGSVGElement>) => {
44
return (
55
<svg width={520} height={368} viewBox="0 0 520 368" fill="none" {...props}>
66
<g clipPath="url(#prefix__clip0_1092_52551)">

‎src/illustrations/types.ts

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
export type Illustration =
2+
| "cathedral"
3+
| "florence"
4+
| "florence2"
5+
| "handWithSnakeInside"
6+
| "snake1"
7+
| "snake2"
8+
| "snake4"
9+
| "snake5"
10+
| "snakeBody"
11+
| "snakeCouple"
12+
| "snakeDNA"
13+
| "snakeHead"
14+
| "snakeInDragon"
15+
| "snakeInDragonInverted"
16+
| "snakeLetter"
17+
| "snakeLongNeck"
18+
| "snakeTail"
19+
| "snakePencil"
20+
| "snakeWithBalloon"
21+
| "snakeWithContacts"
22+
| "snakesWithBanner"
23+
| "snakesWithCocktail"
24+
| "snakesWithDirections"
25+
| "snakesWithOutlines"
26+
| "tripleSnakes";

0 commit comments

Comments
 (0)