diff options
Diffstat (limited to 'src/components/atoms')
37 files changed, 636 insertions, 113 deletions
diff --git a/src/components/atoms/buttons/button-link.stories.tsx b/src/components/atoms/buttons/button-link.stories.tsx index 92b7521..2e1c040 100644 --- a/src/components/atoms/buttons/button-link.stories.tsx +++ b/src/components/atoms/buttons/button-link.stories.tsx @@ -1,9 +1,15 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ButtonLinkComponent from './button-link'; +import ButtonLink from './button-link'; +/** + * ButtonLink - Storybook Meta + */ export default { - title: 'Atoms/Buttons', - component: ButtonLinkComponent, + title: 'Atoms/Buttons/ButtonLink', + component: ButtonLink, + args: { + shape: 'rectangle', + }, argTypes: { 'aria-label': { control: { @@ -82,14 +88,38 @@ export default { }, }, }, -} as ComponentMeta<typeof ButtonLinkComponent>; +} as ComponentMeta<typeof ButtonLink>; -const Template: ComponentStory<typeof ButtonLinkComponent> = (args) => ( - <ButtonLinkComponent {...args} /> +const Template: ComponentStory<typeof ButtonLink> = (args) => ( + <ButtonLink {...args} /> ); -export const ButtonLink = Template.bind({}); -ButtonLink.args = { +/** + * ButtonLink Story - Primary + */ +export const Primary = Template.bind({}); +Primary.args = { + children: 'Link', + kind: 'primary', + target: '#', +}; + +/** + * ButtonLink Story - Secondary + */ +export const Secondary = Template.bind({}); +Secondary.args = { + children: 'Link', + kind: 'secondary', + target: '#', +}; + +/** + * ButtonLink Story - Tertiary + */ +export const Tertiary = Template.bind({}); +Tertiary.args = { children: 'Link', + kind: 'tertiary', target: '#', }; diff --git a/src/components/atoms/buttons/button-link.tsx b/src/components/atoms/buttons/button-link.tsx index 906fa76..64e0afd 100644 --- a/src/components/atoms/buttons/button-link.tsx +++ b/src/components/atoms/buttons/button-link.tsx @@ -22,7 +22,7 @@ export type ButtonLinkProps = { /** * ButtonLink kind. Default: secondary. */ - kind?: 'primary' | 'secondary'; + kind?: 'primary' | 'secondary' | 'tertiary'; /** * ButtonLink shape. Default: rectangle. */ diff --git a/src/components/atoms/buttons/button.stories.tsx b/src/components/atoms/buttons/button.stories.tsx index d47a1ea..6803706 100644 --- a/src/components/atoms/buttons/button.stories.tsx +++ b/src/components/atoms/buttons/button.stories.tsx @@ -1,12 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ButtonComponent from './button'; +import Button from './button'; +/** + * Button - Storybook Meta + */ export default { - title: 'Atoms/Buttons', - component: ButtonComponent, + title: 'Atoms/Buttons/Button', + component: Button, args: { disabled: false, - kind: 'secondary', type: 'button', }, argTypes: { @@ -119,9 +121,9 @@ export default { }, }, }, -} as ComponentMeta<typeof ButtonComponent>; +} as ComponentMeta<typeof Button>; -const Template: ComponentStory<typeof ButtonComponent> = (args) => { +const Template: ComponentStory<typeof Button> = (args) => { const { children, type, ...props } = args; const getBody = () => { @@ -139,10 +141,32 @@ const Template: ComponentStory<typeof ButtonComponent> = (args) => { }; return ( - <ButtonComponent type={type} {...props}> + <Button type={type} {...props}> {getBody()} - </ButtonComponent> + </Button> ); }; -export const Button = Template.bind({}); +/** + * Button Story - Primary + */ +export const Primary = Template.bind({}); +Primary.args = { + kind: 'primary', +}; + +/** + * Button Story - Secondary + */ +export const Secondary = Template.bind({}); +Secondary.args = { + kind: 'secondary', +}; + +/** + * Button Story - Tertiary + */ +export const Tertiary = Template.bind({}); +Tertiary.args = { + kind: 'tertiary', +}; diff --git a/src/components/atoms/buttons/buttons.module.scss b/src/components/atoms/buttons/buttons.module.scss index 8e3e196..36c66b6 100644 --- a/src/components/atoms/buttons/buttons.module.scss +++ b/src/components/atoms/buttons/buttons.module.scss @@ -8,6 +8,7 @@ border-radius: fun.convert-px(5); font-size: var(--font-size-md); font-weight: 600; + text-decoration: none; transition: all 0.3s ease-in-out 0s; &--initial { @@ -44,7 +45,6 @@ fun.convert-px(2) fun.convert-px(2) 0 fun.convert-px(3) var(--color-primary-dark); color: var(--color-fg-inverted); - text-decoration: none; text-shadow: fun.convert-px(2) fun.convert-px(2) 0 var(--color-shadow); &:disabled { @@ -91,7 +91,6 @@ fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow); color: var(--color-primary); - text-decoration: underline transparent 0; &:disabled { border-color: var(--color-border-dark); @@ -122,7 +121,7 @@ border-color: var(--color-primary-dark); box-shadow: 0 0 0 0 var(--color-shadow); color: var(--color-primary-dark); - text-decoration: underline transparent 0; + text-decoration: none; transform: scale(var(--scale-down, 0.94)); } } diff --git a/src/components/atoms/forms/checkbox.stories.tsx b/src/components/atoms/forms/checkbox.stories.tsx index 7faf343..588fdcc 100644 --- a/src/components/atoms/forms/checkbox.stories.tsx +++ b/src/components/atoms/forms/checkbox.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import CheckboxComponent from './checkbox'; +/** + * Checkbox - Storybook Meta + */ export default { title: 'Atoms/Forms', component: CheckboxComponent, @@ -88,6 +91,9 @@ const Template: ComponentStory<typeof CheckboxComponent> = ({ ); }; +/** + * Checkbox Story + */ export const Checkbox = Template.bind({}); Checkbox.args = { id: 'storybook-checkbox', diff --git a/src/components/atoms/forms/field.stories.tsx b/src/components/atoms/forms/field.stories.tsx index ec81922..00a183d 100644 --- a/src/components/atoms/forms/field.stories.tsx +++ b/src/components/atoms/forms/field.stories.tsx @@ -1,14 +1,16 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import FieldComponent from './field'; +import Field from './field'; +/** + * Field - Storybook Meta + */ export default { - title: 'Atoms/Forms', - component: FieldComponent, + title: 'Atoms/Forms/Fields', + component: Field, args: { disabled: false, required: false, - type: 'text', }, argTypes: { 'aria-labelledby': { @@ -182,20 +184,74 @@ export default { }, }, }, -} as ComponentMeta<typeof FieldComponent>; +} as ComponentMeta<typeof Field>; -const Template: ComponentStory<typeof FieldComponent> = ({ +const Template: ComponentStory<typeof Field> = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState<string>(''); - return <FieldComponent value={value} setValue={setValue} {...args} />; + return <Field value={value} setValue={setValue} {...args} />; }; -export const Field = Template.bind({}); -Field.args = { +/** + * Field Story - DateTime + */ +export const DateTime = Template.bind({}); +DateTime.args = { id: 'field-storybook', name: 'field-storybook', + type: 'datetime-local', +}; + +/** + * Field Story - Email + */ +export const Email = Template.bind({}); +Email.args = { + id: 'field-storybook', + name: 'field-storybook', + type: 'email', +}; + +/** + * Field Story - Text + */ +export const Text = Template.bind({}); +Text.args = { + id: 'field-storybook', + name: 'field-storybook', + type: 'text', +}; + +/** + * Field Story - Number + */ +export const Number = Template.bind({}); +Number.args = { + id: 'field-storybook', + name: 'field-storybook', + type: 'number', +}; + +/** + * Field Story - TextArea + */ +export const TextArea = Template.bind({}); +TextArea.args = { + id: 'field-storybook', + name: 'field-storybook', + type: 'textarea', +}; + +/** + * Field Story - Time + */ +export const Time = Template.bind({}); +Time.args = { + id: 'field-storybook', + name: 'field-storybook', + type: 'time', }; diff --git a/src/components/atoms/forms/label.stories.tsx b/src/components/atoms/forms/label.stories.tsx index 463e8ac..79f1a34 100644 --- a/src/components/atoms/forms/label.stories.tsx +++ b/src/components/atoms/forms/label.stories.tsx @@ -1,6 +1,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import LabelComponent from './label'; +/** + * Label - Storybook Meta + */ export default { title: 'Atoms/Forms', component: LabelComponent, @@ -79,6 +82,9 @@ const Template: ComponentStory<typeof LabelComponent> = ({ ...args }) => <LabelComponent {...args}>{children}</LabelComponent>; +/** + * Label Story + */ export const Label = Template.bind({}); Label.args = { children: 'A label', diff --git a/src/components/atoms/forms/select.stories.tsx b/src/components/atoms/forms/select.stories.tsx index c2fb8c6..7127597 100644 --- a/src/components/atoms/forms/select.stories.tsx +++ b/src/components/atoms/forms/select.stories.tsx @@ -8,6 +8,9 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; +/** + * Select - Storybook Meta + */ export default { title: 'Atoms/Forms', component: SelectComponent, @@ -136,6 +139,9 @@ const Template: ComponentStory<typeof SelectComponent> = ({ return <SelectComponent value={selected} setValue={setSelected} {...args} />; }; +/** + * Select Story + */ export const Select = Template.bind({}); Select.args = { id: 'storybook-select', diff --git a/src/components/atoms/headings/heading.stories.tsx b/src/components/atoms/headings/heading.stories.tsx index 66a84dc..da5a718 100644 --- a/src/components/atoms/headings/heading.stories.tsx +++ b/src/components/atoms/headings/heading.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import HeadingComponent from './heading'; +import Heading from './heading'; +/** + * Heading - Storybook Meta + */ export default { - title: 'Atoms/Headings', - component: HeadingComponent, + title: 'Atoms/Typography/Headings', + component: Heading, args: { isFake: false, withMargin: true, @@ -45,10 +48,11 @@ export default { }, level: { control: { - type: 'select', + type: 'number', + min: 1, + max: 6, }, description: 'Heading level.', - options: [1, 2, 3, 4, 5, 6], type: { name: 'number', required: true, @@ -69,14 +73,62 @@ export default { }, }, }, -} as ComponentMeta<typeof HeadingComponent>; +} as ComponentMeta<typeof Heading>; -const Template: ComponentStory<typeof HeadingComponent> = (args) => ( - <HeadingComponent {...args} /> +const Template: ComponentStory<typeof Heading> = (args) => ( + <Heading {...args} /> ); -export const Heading = Template.bind({}); -Heading.args = { +/** + * Heading Story - h1 + */ +export const H1 = Template.bind({}); +H1.args = { children: 'Your title', level: 1, }; + +/** + * Heading Story - h2 + */ +export const H2 = Template.bind({}); +H2.args = { + children: 'Your title', + level: 2, +}; + +/** + * Heading Story - h3 + */ +export const H3 = Template.bind({}); +H3.args = { + children: 'Your title', + level: 3, +}; + +/** + * Heading Story - h4 + */ +export const H4 = Template.bind({}); +H4.args = { + children: 'Your title', + level: 4, +}; + +/** + * Heading Story - h5 + */ +export const H5 = Template.bind({}); +H5.args = { + children: 'Your title', + level: 5, +}; + +/** + * Heading Story - h6 + */ +export const H6 = Template.bind({}); +H6.args = { + children: 'Your title', + level: 6, +}; 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<typeof ArrowIcon> = (args) => ( <ArrowIcon {...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<typeof CareerIcon> = (args) => ( <CareerIcon {...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) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof CCBySAIcon>; const Template: ComponentStory<typeof CCBySAIcon> = (args) => ( - <IntlProvider locale="en"> - <CCBySAIcon {...args} /> - </IntlProvider> + <CCBySAIcon {...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<typeof CloseIcon> = (args) => ( <CloseIcon {...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<typeof CogIcon> = (args) => ( <CogIcon {...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<typeof ComputerScreenIcon> = (args) => ( <ComputerScreenIcon {...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<typeof EnvelopIcon> = (args) => ( <EnvelopIcon {...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<typeof HamburgerIcon> = (args) => ( <HamburgerIcon {...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<typeof HomeIcon> = (args) => ( <HomeIcon {...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<typeof MagnifyingGlassIcon> = (args) => ( <MagnifyingGlassIcon {...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<typeof MoonIcon> = (args) => ( <MoonIcon {...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<typeof PlusMinusIcon> = (args) => ( <PlusMinusIcon {...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<typeof PostsStackIcon> = (args) => ( <PostsStackIcon {...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<typeof SunIcon> = (args) => ( <SunIcon {...args} /> ); +/** + * Icons Stories - Sun + */ export const Sun = Template.bind({}); diff --git a/src/components/atoms/images/logo.stories.tsx b/src/components/atoms/images/logo.stories.tsx index fbc7501..458ec08 100644 --- a/src/components/atoms/images/logo.stories.tsx +++ b/src/components/atoms/images/logo.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import LogoComponent from './logo'; +/** + * Logo - Storybook Meta + */ export default { - title: 'Atoms/Images', + title: 'Atoms/Illustrations/Images', component: LogoComponent, argTypes: { title: { @@ -25,4 +28,7 @@ const Template: ComponentStory<typeof LogoComponent> = (args) => ( <LogoComponent {...args} /> ); +/** + * Images Stories - Logo + */ export const Logo = Template.bind({}); diff --git a/src/components/atoms/layout/copyright.stories.tsx b/src/components/atoms/layout/copyright.stories.tsx index 3b315fa..b988165 100644 --- a/src/components/atoms/layout/copyright.stories.tsx +++ b/src/components/atoms/layout/copyright.stories.tsx @@ -3,6 +3,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import CopyrightComponent from './copyright'; +/** + * Copyright - Storybook Meta + */ export default { title: 'Atoms/Layout', component: CopyrightComponent, @@ -36,14 +39,22 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof CopyrightComponent>; const Template: ComponentStory<typeof CopyrightComponent> = (args) => ( - <IntlProvider locale="en"> - <CopyrightComponent {...args} /> - </IntlProvider> + <CopyrightComponent {...args} /> ); +/** + * Layout Stories - Copyright + */ export const Copyright = Template.bind({}); Copyright.args = { dates: { diff --git a/src/components/atoms/layout/main.stories.tsx b/src/components/atoms/layout/main.stories.tsx index 64df890..5bde475 100644 --- a/src/components/atoms/layout/main.stories.tsx +++ b/src/components/atoms/layout/main.stories.tsx @@ -1,6 +1,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import MainComponent from './main'; +/** + * Main - Storybook Meta + */ export default { title: 'Atoms/Layout', component: MainComponent, @@ -45,6 +48,9 @@ const Template: ComponentStory<typeof MainComponent> = (args) => ( <MainComponent {...args} /> ); +/** + * Layout Stories - Main + */ export const Main = Template.bind({}); Main.args = { children: 'The main content.', diff --git a/src/components/atoms/layout/no-script.stories.tsx b/src/components/atoms/layout/no-script.stories.tsx index 474e2fb..22d2fea 100644 --- a/src/components/atoms/layout/no-script.stories.tsx +++ b/src/components/atoms/layout/no-script.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import NoScriptComponent from './no-script'; +import NoScript from './no-script'; +/** + * NoScript - Storybook Meta + */ export default { - title: 'Atoms/Layout', - component: NoScriptComponent, + title: 'Atoms/Layout/NoScript', + component: NoScript, args: { position: 'initial', }, @@ -34,13 +37,26 @@ export default { }, }, }, -} as ComponentMeta<typeof NoScriptComponent>; +} as ComponentMeta<typeof NoScript>; -const Template: ComponentStory<typeof NoScriptComponent> = (args) => ( - <NoScriptComponent {...args} /> +const Template: ComponentStory<typeof NoScript> = (args) => ( + <NoScript {...args} /> ); -export const NoScript = Template.bind({}); -NoScript.args = { +/** + * NoScript Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { message: 'A noscript only message.', + position: 'initial', +}; + +/** + * NoScript Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + message: 'A noscript only message.', + position: 'top', }; diff --git a/src/components/atoms/layout/notice.stories.tsx b/src/components/atoms/layout/notice.stories.tsx index 0555a2e..62f4cba 100644 --- a/src/components/atoms/layout/notice.stories.tsx +++ b/src/components/atoms/layout/notice.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import NoticeComponent from './notice'; +/** + * Notice - Storybook Meta + */ export default { - title: 'Atoms/Layout', + title: 'Atoms/Layout/Notice', component: NoticeComponent, argTypes: { kind: { @@ -33,8 +36,38 @@ const Template: ComponentStory<typeof NoticeComponent> = (args) => ( <NoticeComponent {...args} /> ); -export const Notice = Template.bind({}); -Notice.args = { +/** + * Notice stories - Error + */ +export const Error = Template.bind({}); +Error.args = { + kind: 'error', + message: 'Nisi provident sapiente.', +}; + +/** + * Notice stories - Info + */ +export const Info = Template.bind({}); +Info.args = { kind: 'info', message: 'Nisi provident sapiente.', }; + +/** + * Notice stories - Success + */ +export const Success = Template.bind({}); +Success.args = { + kind: 'success', + message: 'Nisi provident sapiente.', +}; + +/** + * Notice stories - Warning + */ +export const Warning = Template.bind({}); +Warning.args = { + kind: 'warning', + message: 'Nisi provident sapiente.', +}; diff --git a/src/components/atoms/layout/section.stories.tsx b/src/components/atoms/layout/section.stories.tsx index abbbeed..530b2a0 100644 --- a/src/components/atoms/layout/section.stories.tsx +++ b/src/components/atoms/layout/section.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SectionComponent from './section'; +import Section from './section'; +/** + * Section - Storybook Meta + */ export default { - title: 'Atoms/Layout', - component: SectionComponent, + title: 'Atoms/Layout/Section', + component: Section, args: { variant: 'dark', withBorder: true, @@ -72,14 +75,28 @@ export default { }, }, }, -} as ComponentMeta<typeof SectionComponent>; +} as ComponentMeta<typeof Section>; -const Template: ComponentStory<typeof SectionComponent> = (args) => ( - <SectionComponent {...args} /> +const Template: ComponentStory<typeof Section> = (args) => ( + <Section {...args} /> ); -export const Section = Template.bind({}); -Section.args = { +/** + * Section Stories - Light + */ +export const Light = Template.bind({}); +Light.args = { title: 'A title', content: 'The content.', + variant: 'light', +}; + +/** + * Section Stories - Dark + */ +export const Dark = Template.bind({}); +Dark.args = { + title: 'A title', + content: 'The content.', + variant: 'dark', }; diff --git a/src/components/atoms/links/link.stories.tsx b/src/components/atoms/links/link.stories.tsx index 569c874..c3b3465 100644 --- a/src/components/atoms/links/link.stories.tsx +++ b/src/components/atoms/links/link.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import LinkComponent from './link'; +import Link from './link'; +/** + * Link - Storybook Meta + */ export default { - title: 'Atoms/Links', - component: LinkComponent, + title: 'Atoms/Typography/Links', + component: Link, argTypes: { children: { control: { @@ -65,15 +68,37 @@ export default { }, }, }, -} as ComponentMeta<typeof LinkComponent>; +} as ComponentMeta<typeof Link>; -const Template: ComponentStory<typeof LinkComponent> = (args) => ( - <LinkComponent {...args} /> -); +const Template: ComponentStory<typeof Link> = (args) => <Link {...args} />; -export const Link = Template.bind({}); -Link.args = { +/** + * Links Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { children: 'A link', href: '#', external: false, }; + +/** + * Links Stories - External + */ +export const External = Template.bind({}); +External.args = { + children: 'A link', + href: '#', + external: true, +}; + +/** + * Links Stories - External With Lang + */ +export const ExternalWithLang = Template.bind({}); +ExternalWithLang.args = { + children: 'A link', + href: '#', + external: true, + lang: 'en', +}; diff --git a/src/components/atoms/links/nav-link.stories.tsx b/src/components/atoms/links/nav-link.stories.tsx index 08553be..7f7a334 100644 --- a/src/components/atoms/links/nav-link.stories.tsx +++ b/src/components/atoms/links/nav-link.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import NavLinkComponent from './nav-link'; +/** + * NavLink - Storybook Meta + */ export default { - title: 'Atoms/Links', + title: 'Atoms/Typography/Links', component: NavLinkComponent, argTypes: { href: { @@ -42,6 +45,9 @@ const Template: ComponentStory<typeof NavLinkComponent> = (args) => ( <NavLinkComponent {...args} /> ); +/** + * Links Stories - Nav Link + */ export const NavLink = Template.bind({}); NavLink.args = { href: '#', diff --git a/src/components/atoms/links/sharing-link.stories.tsx b/src/components/atoms/links/sharing-link.stories.tsx index 335fa50..c91e938 100644 --- a/src/components/atoms/links/sharing-link.stories.tsx +++ b/src/components/atoms/links/sharing-link.stories.tsx @@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SharingLinkComponent from './sharing-link'; +/** + * SharingLink - Storybook Meta + */ export default { - title: 'Atoms/Links', + title: 'Atoms/Buttons/Sharing', component: SharingLinkComponent, argTypes: { medium: { @@ -43,8 +46,56 @@ const Template: ComponentStory<typeof SharingLinkComponent> = (args) => ( </IntlProvider> ); -export const SharingLink = Template.bind({}); -SharingLink.args = { +/** + * Sharing Link Stories - Diaspora + */ +export const Diaspora = Template.bind({}); +Diaspora.args = { medium: 'diaspora', url: '#', }; + +/** + * Sharing Link Stories - Email + */ +export const Email = Template.bind({}); +Email.args = { + medium: 'email', + url: '#', +}; + +/** + * Sharing Link Stories - Facebook + */ +export const Facebook = Template.bind({}); +Facebook.args = { + medium: 'facebook', + url: '#', +}; + +/** + * Sharing Link Stories - Journal du Hacker + */ +export const JournalDuHacker = Template.bind({}); +JournalDuHacker.args = { + medium: 'journal-du-hacker', + url: '#', +}; + +/** + * Sharing Link Stories - LinkedIn + */ +export const LinkedIn = Template.bind({}); +LinkedIn.args = { + medium: 'linkedin', + url: '#', +}; + +/** + * Sharing Link Stories - Twitter + */ +export const Twitter = Template.bind({}); +Twitter.args = { + medium: 'twitter', + url: '#', +}; diff --git a/src/components/atoms/links/social-link.stories.tsx b/src/components/atoms/links/social-link.stories.tsx index bd9a364..977ae6b 100644 --- a/src/components/atoms/links/social-link.stories.tsx +++ b/src/components/atoms/links/social-link.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import SocialLinkComponent from './social-link'; +import SocialLink from './social-link'; +/** + * SocialLink - Storybook Meta + */ export default { - title: 'Atoms/Links', - component: SocialLinkComponent, + title: 'Atoms/Buttons/Social', + component: SocialLink, argTypes: { name: { control: { @@ -27,14 +30,44 @@ export default { }, }, }, -} as ComponentMeta<typeof SocialLinkComponent>; +} as ComponentMeta<typeof SocialLink>; -const Template: ComponentStory<typeof SocialLinkComponent> = (args) => ( - <SocialLinkComponent {...args} /> +const Template: ComponentStory<typeof SocialLink> = (args) => ( + <SocialLink {...args} /> ); -export const SocialLink = Template.bind({}); -SocialLink.args = { +/** + * Social Link Stories - Github + */ +export const Github = Template.bind({}); +Github.args = { name: 'Github', url: '#', }; + +/** + * Social Link Stories - Gitlab + */ +export const Gitlab = Template.bind({}); +Gitlab.args = { + name: 'Gitlab', + url: '#', +}; + +/** + * Social Link Stories - LinkedIn + */ +export const LinkedIn = Template.bind({}); +LinkedIn.args = { + name: 'LinkedIn', + url: '#', +}; + +/** + * Social Link Stories - Twitter + */ +export const Twitter = Template.bind({}); +Twitter.args = { + name: 'Twitter', + url: '#', +}; diff --git a/src/components/atoms/lists/description-list.stories.tsx b/src/components/atoms/lists/description-list.stories.tsx index 66d94af..43ee66e 100644 --- a/src/components/atoms/lists/description-list.stories.tsx +++ b/src/components/atoms/lists/description-list.stories.tsx @@ -3,8 +3,11 @@ import DescriptionListComponent, { DescriptionListItem, } from './description-list'; +/** + * DescriptionList - Storybook Meta + */ export default { - title: 'Atoms/Lists', + title: 'Atoms/Typography/Lists', component: DescriptionListComponent, args: { layout: 'column', @@ -67,6 +70,9 @@ const items: DescriptionListItem[] = [ { id: 'term-4', term: 'Term 4:', value: ['Value for term 4'] }, ]; +/** + * List Stories - Description list + */ export const DescriptionList = Template.bind({}); DescriptionList.args = { items, diff --git a/src/components/atoms/lists/list.stories.tsx b/src/components/atoms/lists/list.stories.tsx index 30079cb..3a80962 100644 --- a/src/components/atoms/lists/list.stories.tsx +++ b/src/components/atoms/lists/list.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import ListComponent, { type ListItem } from './list'; +/** + * List - Storybook Meta + */ export default { - title: 'Atoms/Lists', + title: 'Atoms/Typography/Lists', component: ListComponent, args: { kind: 'unordered', @@ -68,13 +71,19 @@ const items: ListItem[] = [ { id: 'item-4', value: 'Item 4' }, ]; -export const Unordered = Template.bind({}); -Unordered.args = { - items, -}; - +/** + * List Stories - Ordered list + */ export const Ordered = Template.bind({}); Ordered.args = { items, kind: 'ordered', }; + +/** + * List Stories - Unordered list + */ +export const Unordered = Template.bind({}); +Unordered.args = { + items, +}; diff --git a/src/components/atoms/loaders/progress-bar.stories.tsx b/src/components/atoms/loaders/progress-bar.stories.tsx index 4fde5a7..fcd631c 100644 --- a/src/components/atoms/loaders/progress-bar.stories.tsx +++ b/src/components/atoms/loaders/progress-bar.stories.tsx @@ -1,8 +1,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import ProgressBarComponent from './progress-bar'; +/** + * ProgressBar - Storybook Meta + */ export default { - title: 'Atoms/Loaders', + title: 'Atoms/Loaders/ProgressBar', component: ProgressBarComponent, argTypes: { 'aria-label': { @@ -68,9 +71,23 @@ const Template: ComponentStory<typeof ProgressBarComponent> = (args) => ( <ProgressBarComponent {...args} /> ); +/** + * Loaders Stories - Default Progress bar + */ export const ProgressBar = Template.bind({}); ProgressBar.args = { current: 10, min: 0, max: 50, }; + +/** + * Loaders Stories - Progress bar With Info + */ +export const ProgressBarWithInfo = Template.bind({}); +ProgressBarWithInfo.args = { + current: 10, + info: 'Loaded: 10 / 50', + min: 0, + max: 50, +}; diff --git a/src/components/atoms/loaders/spinner.stories.tsx b/src/components/atoms/loaders/spinner.stories.tsx index 5006ce4..dc577dc 100644 --- a/src/components/atoms/loaders/spinner.stories.tsx +++ b/src/components/atoms/loaders/spinner.stories.tsx @@ -2,8 +2,11 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import SpinnerComponent from './spinner'; +/** + * Spinner - Storybook Meta + */ export default { - title: 'Atoms/Loaders', + title: 'Atoms/Loaders/Spinner', component: SpinnerComponent, argTypes: { message: { @@ -20,12 +23,28 @@ export default { }, }, }, + decorators: [ + (Story) => ( + <IntlProvider locale="en"> + <Story /> + </IntlProvider> + ), + ], } as ComponentMeta<typeof SpinnerComponent>; const Template: ComponentStory<typeof SpinnerComponent> = (args) => ( - <IntlProvider locale="en"> - <SpinnerComponent {...args} /> - </IntlProvider> + <SpinnerComponent {...args} /> ); +/** + * Loaders Stories - Default Spinner + */ export const Spinner = Template.bind({}); + +/** + * Loaders Stories - Spinner with custom message + */ +export const SpinnerCustomMessage = Template.bind({}); +SpinnerCustomMessage.args = { + message: 'Submitting...', +}; |