From a08291b1586858fc894a27d56f55f87a88f8dbd3 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Wed, 20 Apr 2022 19:24:21 +0200 Subject: refactor(storybook): reorganize design system Add more stories for each components and change some components categories for better organization. --- src/components/atoms/icons/arrow.stories.tsx | 8 +++++++- src/components/atoms/icons/career.stories.tsx | 8 +++++++- src/components/atoms/icons/cc-by-sa.stories.tsx | 19 +++++++++++++++---- src/components/atoms/icons/close.stories.tsx | 8 +++++++- src/components/atoms/icons/cog.stories.tsx | 8 +++++++- .../atoms/icons/computer-screen.stories.tsx | 8 +++++++- src/components/atoms/icons/envelop.stories.tsx | 8 +++++++- src/components/atoms/icons/hamburger.stories.tsx | 8 +++++++- src/components/atoms/icons/home.stories.tsx | 8 +++++++- .../atoms/icons/magnifying-glass.stories.tsx | 8 +++++++- src/components/atoms/icons/moon.stories.tsx | 8 +++++++- src/components/atoms/icons/plus-minus.stories.tsx | 8 +++++++- src/components/atoms/icons/posts-stack.stories.tsx | 8 +++++++- src/components/atoms/icons/sun.stories.tsx | 8 +++++++- 14 files changed, 106 insertions(+), 17 deletions(-) (limited to 'src/components/atoms/icons') diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx index 96ce1d8..1941479 100644 --- a/src/components/atoms/icons/arrow.stories.tsx +++ b/src/components/atoms/icons/arrow.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import ArrowIcon from './arrow'; +/** + * Arrow icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: ArrowIcon, argTypes: { className: { @@ -36,6 +39,9 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Arrow + */ export const Arrow = Template.bind({}); Arrow.args = { direction: 'right', diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx index 8575cb9..7b11bb8 100644 --- a/src/components/atoms/icons/career.stories.tsx +++ b/src/components/atoms/icons/career.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import CareerIcon from './career'; +/** + * Career icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: CareerIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Career + */ export const Career = Template.bind({}); diff --git a/src/components/atoms/icons/cc-by-sa.stories.tsx b/src/components/atoms/icons/cc-by-sa.stories.tsx index 21d6cd5..f2bc8f0 100644 --- a/src/components/atoms/icons/cc-by-sa.stories.tsx +++ b/src/components/atoms/icons/cc-by-sa.stories.tsx @@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import CCBySAIcon from './cc-by-sa'; +/** + * CC BY SA icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: CCBySAIcon, argTypes: { className: { @@ -20,12 +23,20 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Icons Stories - CC BY SA + */ export const CCBySA = Template.bind({}); diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx index b1d88cd..f9628db 100644 --- a/src/components/atoms/icons/close.stories.tsx +++ b/src/components/atoms/icons/close.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import CloseIcon from './close'; +/** + * Close icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: CloseIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Close + */ export const Close = Template.bind({}); diff --git a/src/components/atoms/icons/cog.stories.tsx b/src/components/atoms/icons/cog.stories.tsx index ee883d8..631f30d 100644 --- a/src/components/atoms/icons/cog.stories.tsx +++ b/src/components/atoms/icons/cog.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import CogIcon from './cog'; +/** + * Cogs icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: CogIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Cogs + */ export const Cog = Template.bind({}); diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx index 46e3ad4..19649ad 100644 --- a/src/components/atoms/icons/computer-screen.stories.tsx +++ b/src/components/atoms/icons/computer-screen.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import ComputerScreenIcon from './computer-screen'; +/** + * Computer Screen icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: ComputerScreenIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Computer Screen + */ export const ComputerScreen = Template.bind({}); diff --git a/src/components/atoms/icons/envelop.stories.tsx b/src/components/atoms/icons/envelop.stories.tsx index 9139b44..efa94dd 100644 --- a/src/components/atoms/icons/envelop.stories.tsx +++ b/src/components/atoms/icons/envelop.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import EnvelopIcon from './envelop'; +/** + * Envelop icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: EnvelopIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Envelop + */ export const Envelop = Template.bind({}); diff --git a/src/components/atoms/icons/hamburger.stories.tsx b/src/components/atoms/icons/hamburger.stories.tsx index c753e69..0a8a8cc 100644 --- a/src/components/atoms/icons/hamburger.stories.tsx +++ b/src/components/atoms/icons/hamburger.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import HamburgerIcon from './hamburger'; +/** + * Hamburger icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: HamburgerIcon, argTypes: { className: { @@ -38,4 +41,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Hamburger + */ export const Hamburger = Template.bind({}); diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx index b1c995c..ffb3061 100644 --- a/src/components/atoms/icons/home.stories.tsx +++ b/src/components/atoms/icons/home.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import HomeIcon from './home'; +/** + * Home icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: HomeIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Home + */ export const Home = Template.bind({}); diff --git a/src/components/atoms/icons/magnifying-glass.stories.tsx b/src/components/atoms/icons/magnifying-glass.stories.tsx index 80e183e..3e33deb 100644 --- a/src/components/atoms/icons/magnifying-glass.stories.tsx +++ b/src/components/atoms/icons/magnifying-glass.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import MagnifyingGlassIcon from './magnifying-glass'; +/** + * Magnifying Glass icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: MagnifyingGlassIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Magnifying Glass + */ export const MagnifyingGlass = Template.bind({}); diff --git a/src/components/atoms/icons/moon.stories.tsx b/src/components/atoms/icons/moon.stories.tsx index 4d2fb9a..e8b34de 100644 --- a/src/components/atoms/icons/moon.stories.tsx +++ b/src/components/atoms/icons/moon.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import MoonIcon from './moon'; +/** + * Moon icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: MoonIcon, argTypes: { className: { @@ -38,4 +41,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Moon + */ export const Moon = Template.bind({}); diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx index ffa28f2..f7e55f8 100644 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ b/src/components/atoms/icons/plus-minus.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import PlusMinusIcon from './plus-minus'; +/** + * Plus/Minus icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: PlusMinusIcon, argTypes: { className: { @@ -37,6 +40,9 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Plus/Minus + */ export const PlusMinus = Template.bind({}); PlusMinus.args = { state: 'plus', diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx index 46bb39f..1990b98 100644 --- a/src/components/atoms/icons/posts-stack.stories.tsx +++ b/src/components/atoms/icons/posts-stack.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import PostsStackIcon from './posts-stack'; +/** + * Posts Stack icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: PostsStackIcon, argTypes: { className: { @@ -25,4 +28,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Posts Stack + */ export const PostsStack = Template.bind({}); diff --git a/src/components/atoms/icons/sun.stories.tsx b/src/components/atoms/icons/sun.stories.tsx index 23c5b27..60af648 100644 --- a/src/components/atoms/icons/sun.stories.tsx +++ b/src/components/atoms/icons/sun.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import SunIcon from './sun'; +/** + * Sun icon - Storybook Meta + */ export default { - title: 'Atoms/Icons', + title: 'Atoms/Illustrations/Icons', component: SunIcon, argTypes: { className: { @@ -38,4 +41,7 @@ const Template: ComponentStory = (args) => ( ); +/** + * Icons Stories - Sun + */ export const Sun = Template.bind({}); -- cgit v1.2.3