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. --- .../organisms/modals/search-modal.stories.tsx | 42 +++++++++++++++++----- .../organisms/modals/settings-modal.stories.tsx | 30 ++++++++++++++-- 2 files changed, 61 insertions(+), 11 deletions(-) (limited to 'src/components/organisms/modals') diff --git a/src/components/organisms/modals/search-modal.stories.tsx b/src/components/organisms/modals/search-modal.stories.tsx index b35c841..3ad6abd 100644 --- a/src/components/organisms/modals/search-modal.stories.tsx +++ b/src/components/organisms/modals/search-modal.stories.tsx @@ -1,16 +1,42 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import SearchModalComponent from './search-modal'; +import SearchModal from './search-modal'; +/** + * SearchModal - Storybook Meta + */ export default { title: 'Organisms/Modals', - component: SearchModalComponent, -} as ComponentMeta; + component: SearchModal, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the search modal wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + }, + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const SearchModal = Template.bind({}); +/** + * Modals Stories - Search + */ +export const Search = Template.bind({}); diff --git a/src/components/organisms/modals/settings-modal.stories.tsx b/src/components/organisms/modals/settings-modal.stories.tsx index c19a6d7..0abe004 100644 --- a/src/components/organisms/modals/settings-modal.stories.tsx +++ b/src/components/organisms/modals/settings-modal.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SettingsModal from './settings-modal'; +/** + * SettingsModal - Storybook Meta + */ export default { title: 'Organisms/Modals', component: SettingsModal, @@ -19,13 +22,34 @@ export default { required: false, }, }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Modals Stories - Settings + */ export const Settings = Template.bind({}); -- cgit v1.2.3