Skip to content

Commit d3a1cd0

Browse files
joshuaellisjoshuaellis
committed
docs: add documentation around icons & symbols
1 parent 9e6cd0d commit d3a1cd0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+411
-178
lines changed

‎docs/.storybook/main.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ const config: StorybookConfig = {
1212
allowSyntheticDefaultImports: false,
1313
esModuleInterop: false,
1414
},
15+
propFilter: () => {
16+
return true;
17+
},
1518
},
1619
},
1720
viteFinal: (config) => {
@@ -40,10 +43,6 @@ const config: StorybookConfig = {
4043
name: getAbsolutePath('@storybook/react-vite'),
4144
options: {},
4245
},
43-
44-
docs: {
45-
autodocs: true,
46-
},
4746
};
4847

4948
function getAbsolutePath<T extends string>(value: T): T {

‎docs/.storybook/preview.tsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,18 @@ const preview: Preview = {
2626
parameters: {
2727
options: {
2828
storySort: {
29-
order: ['Design System', ['Primitives', 'Technical Components', 'Components']],
29+
order: [
30+
'Foundations',
31+
['Icons', ['Overview', '*']],
32+
'Design System',
33+
['Primitives', 'Technical Components', 'Components'],
34+
],
3035
},
3136
},
3237
actions: { argTypesRegex: '^on[A-Z].*' },
38+
controls: {
39+
expanded: true,
40+
},
3341
darkMode: {
3442
// Override the default dark theme
3543
dark: createCustomTheme({ theme: darkTheme, asStorybookTheme: false }),

‎docs/stories/Accordion.mdx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Meta, Canvas, ArgsTable } from '@storybook/blocks';
1+
import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
22
import { Accordion, AccordionGroup, AccordionToggle } from '@strapi/design-system';
33

44
import * as AccordionStories from './Accordion.stories';
@@ -51,12 +51,12 @@ The Accordion component can also be open by default using the parameter `expande
5151

5252
## Accordion props
5353

54-
<ArgsTable of={Accordion} />
54+
<ArgTypes of={Accordion} />
5555

5656
## AccordionGroup props
5757

58-
<ArgsTable of={AccordionGroup} />
58+
<ArgTypes of={AccordionGroup} />
5959

6060
## AccordionToggle props
6161

62-
<ArgsTable of={AccordionToggle} />
62+
<ArgTypes of={AccordionToggle} />

‎docs/stories/Breadcrumbs.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, StoryObj } from '@storybook/react';
22
import { Flex, Breadcrumbs, Crumb, CrumbLink, CrumbSimpleMenu, MenuItem } from '@strapi/design-system';
3-
import { CollectionType } from '@strapi/icons';
3+
import { CollectionType } from '@strapi/icons/symbols';
44

55
const meta: Meta<typeof Breadcrumbs> = {
66
title: 'Design System/Components/Breadcrumbs',

‎docs/stories/Field.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as React from 'react';
22

33
import { Meta, StoryObj } from '@storybook/react';
44
import { FieldLabel, FieldHint, FieldError, FieldInput, Field, Flex, FieldAction } from '@strapi/design-system';
5-
import { PasswordField } from '@strapi/icons';
5+
import { PasswordField } from '@strapi/icons/symbols';
66

77
const meta: Meta<typeof Field> = {
88
title: 'Design System/Components/Field',

‎docs/stories/Link.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Meta, StoryObj } from '@storybook/react';
22
import { Flex, Link } from '@strapi/design-system';
3-
import { Strapi } from '@strapi/icons';
3+
import { Strapi } from '@strapi/icons/symbols';
44

55
const meta: Meta<typeof Link> = {
66
title: 'Design System/Components/Link',

‎docs/stories/foundations/icons/Icons.mdx

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Canvas, Meta, Title, Subtitle, Controls } from '@storybook/blocks';
2+
3+
import * as IconsStories from './Icons.stories';
4+
5+
<Meta of={IconsStories} name="Docs" />
6+
7+
<Title>Icons</Title>
8+
9+
They by default, do not have a `width` or `height` set, but the default viewBox is set to `0 0 32 32` which means they
10+
will scale to fit the parent container whatever that may be. The default `fill` is `currentColor` meaning they will
11+
inherit the `color` of the parent container. It's not advised to overwrite the `viewBox` property.
12+
13+
<Subtitle>Usage</Subtitle>
14+
15+
```tsx
16+
import { Icon } from '@strapi/design-system';
17+
import { ICON_NAME } from '@strapi/icons';
18+
19+
const MyComponent = () => {
20+
return <Icon as={ICON_NAME} color="primary700" />;
21+
};
22+
```
23+
24+
<Subtitle>All Icons</Subtitle>
25+
26+
Click on an icon to copy it's import statement.
27+
28+
<Controls of={IconsStories.All} />
29+
30+
<Canvas of={IconsStories.All} />

‎docs/stories/foundations/icons/Icons.stories.tsx

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { Icon, Typography, lightTheme } from '@strapi/design-system';
2+
import * as Icons from '@strapi/icons';
3+
import styled, { DefaultTheme } from 'styled-components';
4+
5+
import type { Meta, StoryObj } from '@storybook/react';
6+
7+
interface AllIconsProps {
8+
/**
9+
* Color of the icons
10+
*/
11+
color: keyof DefaultTheme['colors'];
12+
/**
13+
* Size of the icons in px
14+
*/
15+
size: number;
16+
}
17+
18+
const AllIcons = ({ color, size }: AllIconsProps) => {
19+
const gridSize = Math.max(size * 10 * 0.5, 160);
20+
21+
const copy = async (value: string) => {
22+
try {
23+
await navigator.clipboard.writeText(value);
24+
} catch (error) {
25+
console.error('failed to copy');
26+
console.error(error);
27+
}
28+
};
29+
30+
const handleClick = (name: string) => () => {
31+
copy(`import { ${name} } from '@strapi/icons';`);
32+
};
33+
34+
return (
35+
<IconGrid
36+
style={{
37+
gridTemplateColumns: `repeat(auto-fill, ${gridSize}px)`,
38+
gridTemplateRows: `repeat(auto-fill, ${gridSize}px)`,
39+
}}
40+
>
41+
{Object.entries(Icons).map(([name, Component]) => (
42+
<IconGridItem key={name} style={{ width: gridSize, height: gridSize }} onClick={handleClick(name)}>
43+
<Icon color={color} as={Component} width={`${size}px`} height={`${size}px`} />
44+
<IconTitle variant="pi">{name}</IconTitle>
45+
</IconGridItem>
46+
))}
47+
</IconGrid>
48+
);
49+
};
50+
51+
const IconGrid = styled.ul`
52+
display: grid;
53+
grid-template-rows: repeat(auto-fill, 16rem);
54+
grid-gap: 1.2rem;
55+
`;
56+
57+
const IconGridItem = styled.li`
58+
display: flex;
59+
flex-direction: column;
60+
align-items: center;
61+
justify-content: center;
62+
gap: 1.6rem;
63+
transition: background-color 200ms ease-out;
64+
cursor: pointer;
65+
66+
&:hover {
67+
background-color: ${({ theme }) => theme.colors.neutral100};
68+
border-radius: ${({ theme }) => theme.borderRadius};
69+
}
70+
`;
71+
72+
const IconTitle = styled(Typography)`
73+
word-break: break-all;
74+
`;
75+
76+
const meta: Meta<typeof AllIcons> = {
77+
component: AllIcons,
78+
title: 'Foundations/Icons/Icons',
79+
};
80+
81+
export default meta;
82+
type Story = StoryObj<typeof AllIcons>;
83+
84+
export const All: Story = {
85+
argTypes: {
86+
color: {
87+
control: 'select',
88+
options: [...Object.keys(lightTheme.colors)],
89+
},
90+
},
91+
args: {
92+
color: 'neutral900',
93+
size: 32,
94+
},
95+
};

‎docs/stories/foundations/icons/Symbols.mdx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Canvas, Meta, Title, Subtitle, Controls } from '@storybook/blocks';
2+
3+
import * as SymbolsStories from './Symbols.stories';
4+
5+
<Meta of={SymbolsStories} name="Docs" />
6+
7+
<Title>Symbols</Title>
8+
9+
Symbols are a lot stricter, they have pre-set colors and should only have their `width` and `height` set to accomodate the design you're trying to achieve.
10+
11+
<Subtitle>Usage</Subtitle>
12+
13+
```tsx
14+
import { SYMBOL_NAME } from '@strapi/icons/symbol';
15+
16+
const MyComponent = () => {
17+
return <SYMBOL_NAME width="14rem" />;
18+
};
19+
```
20+
21+
<Subtitle>All Symbols</Subtitle>
22+
23+
Click on a symbol to copy it's import statement.
24+
25+
<Controls of={SymbolsStories.All} />
26+
27+
<Canvas of={SymbolsStories.All} />

‎docs/stories/foundations/icons/Symbols.stories.tsx

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { Typography } from '@strapi/design-system';
2+
import * as Icons from '@strapi/icons/symbols';
3+
import styled from 'styled-components';
4+
5+
import type { Meta, StoryObj } from '@storybook/react';
6+
7+
interface AllIconsProps {
8+
/**
9+
* Size of the icons in px
10+
*/
11+
size: number;
12+
}
13+
14+
const AllIcons = ({ size }: AllIconsProps) => {
15+
const gridSize = Math.max(size * 10 * 0.5, 160);
16+
17+
const copy = async (value: string) => {
18+
try {
19+
await navigator.clipboard.writeText(value);
20+
} catch (error) {
21+
console.error('failed to copy');
22+
console.error(error);
23+
}
24+
};
25+
26+
const handleClick = (name: string) => () => {
27+
copy(`import { ${name} } from '@strapi/icons/symbols';`);
28+
};
29+
30+
return (
31+
<IconGrid
32+
style={{
33+
gridTemplateColumns: `repeat(auto-fill, ${gridSize}px)`,
34+
gridTemplateRows: `repeat(auto-fill, ${gridSize}px)`,
35+
}}
36+
>
37+
{Object.entries(Icons).map(([name, Component]) => (
38+
<IconGridItem key={name} style={{ width: gridSize, height: gridSize }} onClick={handleClick(name)}>
39+
<Component width={`${size}px`} height={`${size}px`} />
40+
<IconTitle variant="pi">{name}</IconTitle>
41+
</IconGridItem>
42+
))}
43+
</IconGrid>
44+
);
45+
};
46+
47+
const IconGrid = styled.ul`
48+
display: grid;
49+
grid-template-rows: repeat(auto-fill, 16rem);
50+
grid-gap: 1.2rem;
51+
`;
52+
53+
const IconGridItem = styled.li`
54+
display: flex;
55+
flex-direction: column;
56+
align-items: center;
57+
justify-content: center;
58+
gap: 1.6rem;
59+
transition: background-color 200ms ease-out;
60+
cursor: pointer;
61+
62+
&:hover {
63+
background-color: ${({ theme }) => theme.colors.neutral100};
64+
border-radius: ${({ theme }) => theme.borderRadius};
65+
}
66+
`;
67+
68+
const IconTitle = styled(Typography)`
69+
word-break: break-all;
70+
`;
71+
72+
const meta: Meta<typeof AllIcons> = {
73+
component: AllIcons,
74+
title: 'Foundations/Icons/Symbols',
75+
};
76+
77+
export default meta;
78+
type Story = StoryObj<typeof AllIcons>;
79+
80+
export const All: Story = {
81+
args: {
82+
size: 32,
83+
},
84+
};

0 commit comments

Comments
 (0)