diff options
Diffstat (limited to 'src/components/organisms/toolbar')
4 files changed, 128 insertions, 39 deletions
diff --git a/src/components/organisms/toolbar/main-nav.stories.tsx b/src/components/organisms/toolbar/main-nav.stories.tsx index 27387c0..04b22cb 100644 --- a/src/components/organisms/toolbar/main-nav.stories.tsx +++ b/src/components/organisms/toolbar/main-nav.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import MainNavComponent from './main-nav'; +import MainNav from './main-nav'; +/** + * MainNav - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: MainNavComponent, + title: 'Organisms/Toolbar/MainNav', + component: MainNav, argTypes: { className: { control: { @@ -49,27 +52,45 @@ export default { }, }, }, -} as ComponentMeta<typeof MainNavComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof MainNav>; -const Template: ComponentStory<typeof MainNavComponent> = ({ +const Template: ComponentStory<typeof MainNav> = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return ( - <IntlProvider locale="en"> - <MainNavComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> - </IntlProvider> - ); + return <MainNav isActive={isOpen} setIsActive={setIsOpen} {...args} />; }; -export const MainNav = Template.bind({}); -MainNav.args = { +/** + * MainNav Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, items: [ { id: 'home', label: 'Home', href: '#' }, { id: 'contact', label: 'Contact', href: '#' }, ], }; + +/** + * MainNav Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, + items: [ + { id: 'home', label: 'Home', href: '#' }, + { id: 'contact', label: 'Contact', href: '#' }, + ], +}; diff --git a/src/components/organisms/toolbar/search.stories.tsx b/src/components/organisms/toolbar/search.stories.tsx index 8c2e871..0421c8c 100644 --- a/src/components/organisms/toolbar/search.stories.tsx +++ b/src/components/organisms/toolbar/search.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SearchComponent from './search'; +import Search from './search'; +/** + * Search - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: SearchComponent, + title: 'Organisms/Toolbar/Search', + component: Search, argTypes: { className: { control: { @@ -41,23 +44,37 @@ export default { }, }, }, -} as ComponentMeta<typeof SearchComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Search>; -const Template: ComponentStory<typeof SearchComponent> = ({ +const Template: ComponentStory<typeof Search> = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return ( - <IntlProvider locale="en"> - <SearchComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> - </IntlProvider> - ); + return <Search isActive={isOpen} setIsActive={setIsOpen} {...args} />; }; -export const Search = Template.bind({}); -Search.args = { +/** + * Search Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, }; + +/** + * Search Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, +}; diff --git a/src/components/organisms/toolbar/settings.stories.tsx b/src/components/organisms/toolbar/settings.stories.tsx index f01e772..1ec0897 100644 --- a/src/components/organisms/toolbar/settings.stories.tsx +++ b/src/components/organisms/toolbar/settings.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SettingsComponent from './settings'; +import Settings from './settings'; +/** + * Settings - Storybook Meta + */ export default { - title: 'Organisms/Toolbar', - component: SettingsComponent, + title: 'Organisms/Toolbar/Settings', + component: Settings, argTypes: { className: { control: { @@ -54,23 +57,37 @@ export default { }, }, }, -} as ComponentMeta<typeof SettingsComponent>; + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], +} as ComponentMeta<typeof Settings>; -const Template: ComponentStory<typeof SettingsComponent> = ({ +const Template: ComponentStory<typeof Settings> = ({ isActive, setIsActive: _setIsActive, ...args }) => { const [isOpen, setIsOpen] = useState<boolean>(isActive); - return ( - <IntlProvider locale="en"> - <SettingsComponent isActive={isOpen} setIsActive={setIsOpen} {...args} /> - </IntlProvider> - ); + return <Settings isActive={isOpen} setIsActive={setIsOpen} {...args} />; }; -export const Settings = Template.bind({}); -Settings.args = { +/** + * Settings Stories - Inactive + */ +export const Inactive = Template.bind({}); +Inactive.args = { isActive: false, }; + +/** + * Settings Stories - Active + */ +export const Active = Template.bind({}); +Active.args = { + isActive: true, +}; diff --git a/src/components/organisms/toolbar/toolbar.stories.tsx b/src/components/organisms/toolbar/toolbar.stories.tsx index 75d70d8..de94e31 100644 --- a/src/components/organisms/toolbar/toolbar.stories.tsx +++ b/src/components/organisms/toolbar/toolbar.stories.tsx @@ -2,15 +2,46 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import ToolbarComponent from './toolbar'; +/** + * Toolbar - Storybook Meta + */ export default { title: 'Organisms/Toolbar', component: ToolbarComponent, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the toolbar wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + nav: { + description: 'The main nav items.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof ToolbarComponent>; const Template: ComponentStory<typeof ToolbarComponent> = (args) => ( - <IntlProvider locale="en"> - <ToolbarComponent {...args} /> - </IntlProvider> + <ToolbarComponent {...args} /> ); const nav = [ @@ -20,6 +51,9 @@ const nav = [ { id: 'contact-link', href: '#', label: 'Contact' }, ]; +/** + * Toolbar Story + */ export const Toolbar = Template.bind({}); Toolbar.args = { nav, |