From a07729064790df13324dbe7f4d1629892070558b Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 15 Apr 2022 17:13:21 +0200 Subject: chore: add a SharingWidget component --- .../organisms/widgets/sharing.stories.tsx | 78 ++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 src/components/organisms/widgets/sharing.stories.tsx (limited to 'src/components/organisms/widgets/sharing.stories.tsx') diff --git a/src/components/organisms/widgets/sharing.stories.tsx b/src/components/organisms/widgets/sharing.stories.tsx new file mode 100644 index 0000000..be20b84 --- /dev/null +++ b/src/components/organisms/widgets/sharing.stories.tsx @@ -0,0 +1,78 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { IntlProvider } from 'react-intl'; +import SharingWidget from './sharing'; + +export default { + title: 'Organisms/Widgets', + component: SharingWidget, + argTypes: { + data: { + description: 'The page data.', + type: { + name: 'object', + required: true, + value: {}, + }, + }, + expanded: { + control: { + type: null, + }, + description: 'Default widget state (expanded or collapsed).', + type: { + name: 'boolean', + required: true, + }, + }, + level: { + control: { + type: 'number', + }, + description: 'The heading level.', + type: { + name: 'number', + required: true, + }, + }, + media: { + control: { + type: null, + }, + description: 'An array of active and ordered sharing medium.', + type: { + name: 'string', + required: true, + }, + }, + title: { + control: { + type: 'text', + }, + description: 'The widget title.', + type: { + name: 'string', + required: true, + }, + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + + + +); + +export const Sharing = Template.bind({}); +Sharing.args = { + expanded: true, + data: { + excerpt: + 'Alias similique eius ducimus laudantium aspernatur. Est rem ut eum temporibus sit reprehenderit aut non molestias. Vel dolorem expedita labore quo inventore aliquid nihil nam. Possimus nobis enim quas corporis eos.', + title: 'Accusantium totam nostrum', + url: 'https://www.example.test', + }, + level: 2, + media: ['diaspora', 'facebook', 'linkedin', 'twitter', 'email'], + title: 'Sharing', +}; -- cgit v1.2.3 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. --- .storybook/main.js | 14 ++- .../atoms/buttons/button-link.stories.tsx | 46 +++++++-- src/components/atoms/buttons/button-link.tsx | 2 +- src/components/atoms/buttons/button.stories.tsx | 42 ++++++-- src/components/atoms/buttons/buttons.module.scss | 5 +- src/components/atoms/forms/checkbox.stories.tsx | 6 ++ src/components/atoms/forms/field.stories.tsx | 74 ++++++++++++-- src/components/atoms/forms/label.stories.tsx | 6 ++ src/components/atoms/forms/select.stories.tsx | 6 ++ src/components/atoms/headings/heading.stories.tsx | 72 ++++++++++++-- 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 +- src/components/atoms/images/logo.stories.tsx | 8 +- src/components/atoms/layout/copyright.stories.tsx | 17 +++- src/components/atoms/layout/main.stories.tsx | 6 ++ src/components/atoms/layout/no-script.stories.tsx | 32 ++++-- src/components/atoms/layout/notice.stories.tsx | 39 +++++++- src/components/atoms/layout/section.stories.tsx | 33 +++++-- src/components/atoms/links/link.stories.tsx | 43 +++++++-- src/components/atoms/links/nav-link.stories.tsx | 8 +- .../atoms/links/sharing-link.stories.tsx | 57 ++++++++++- src/components/atoms/links/social-link.stories.tsx | 49 ++++++++-- .../atoms/lists/description-list.stories.tsx | 8 +- src/components/atoms/lists/list.stories.tsx | 21 ++-- .../atoms/loaders/progress-bar.stories.tsx | 19 +++- src/components/atoms/loaders/spinner.stories.tsx | 27 +++++- .../molecules/buttons/back-to-top.stories.tsx | 17 +++- .../molecules/buttons/heading-button.stories.tsx | 78 +++++++++++++-- .../molecules/buttons/help-button.stories.tsx | 17 +++- .../molecules/forms/ackee-select.stories.tsx | 57 +++++++++-- .../molecules/forms/labelled-field.stories.tsx | 107 +++++++++++++++++++-- .../molecules/forms/labelled-select.stories.tsx | 69 ++++++++++--- .../molecules/forms/motion-toggle.stories.tsx | 36 +++++-- .../molecules/forms/prism-theme-toggle.stories.tsx | 44 +++++++-- .../forms/select-with-tooltip.stories.tsx | 35 ++++--- .../molecules/forms/theme-toggle.stories.tsx | 44 +++++++-- src/components/molecules/forms/toggle.stories.tsx | 24 +++-- .../molecules/images/flipping-logo.module.scss | 59 ++++++++++++ .../molecules/images/flipping-logo.stories.tsx | 75 +++++++++++++++ .../molecules/images/flipping-logo.test.tsx | 25 +++++ src/components/molecules/images/flipping-logo.tsx | 55 +++++++++++ .../molecules/images/responsive-image.module.scss | 2 +- .../molecules/images/responsive-image.stories.tsx | 63 ++++++++++-- .../molecules/layout/branding.stories.tsx | 46 +++++++-- src/components/molecules/layout/branding.tsx | 4 +- src/components/molecules/layout/card.module.scss | 5 +- src/components/molecules/layout/card.stories.tsx | 69 +++++++++++-- src/components/molecules/layout/card.tsx | 2 +- .../molecules/layout/flipping-logo.module.scss | 59 ------------ .../molecules/layout/flipping-logo.stories.tsx | 66 ------------- .../molecules/layout/flipping-logo.test.tsx | 25 ----- src/components/molecules/layout/flipping-logo.tsx | 48 --------- src/components/molecules/layout/meta.stories.tsx | 11 ++- src/components/molecules/layout/widget.module.scss | 5 + src/components/molecules/layout/widget.stories.tsx | 46 ++++++--- src/components/molecules/modals/modal.stories.tsx | 32 ++++-- .../molecules/modals/tooltip.stories.tsx | 22 +++-- .../molecules/nav/breadcrumb.stories.tsx | 60 +++++++++--- src/components/molecules/nav/nav.stories.tsx | 42 +++++--- .../organisms/forms/comment-form.stories.tsx | 31 ++++-- .../organisms/forms/contact-form.stories.tsx | 29 ++++-- .../organisms/forms/search-form.stories.tsx | 46 +++++++-- .../organisms/layout/cards-list.stories.tsx | 30 ++++++ src/components/organisms/layout/footer.stories.tsx | 17 +++- .../organisms/layout/overview.stories.tsx | 37 +++++-- .../organisms/layout/summary.module.scss | 1 + .../organisms/layout/summary.stories.tsx | 60 +++++++++--- src/components/organisms/layout/summary.tsx | 4 +- .../organisms/modals/search-modal.stories.tsx | 42 ++++++-- .../organisms/modals/settings-modal.stories.tsx | 30 +++++- .../organisms/toolbar/main-nav.stories.tsx | 45 ++++++--- .../organisms/toolbar/search.stories.tsx | 41 +++++--- .../organisms/toolbar/settings.stories.tsx | 41 +++++--- .../organisms/toolbar/toolbar.stories.tsx | 40 +++++++- .../organisms/widgets/image-widget.module.scss | 1 - .../organisms/widgets/image-widget.stories.tsx | 71 ++++++++++++-- .../widgets/links-list-widget.stories.tsx | 37 +++++-- .../organisms/widgets/sharing.stories.tsx | 19 +++- src/components/organisms/widgets/sharing.tsx | 2 +- .../organisms/widgets/social-media.stories.tsx | 19 +++- 92 files changed, 2117 insertions(+), 638 deletions(-) create mode 100644 src/components/molecules/images/flipping-logo.module.scss create mode 100644 src/components/molecules/images/flipping-logo.stories.tsx create mode 100644 src/components/molecules/images/flipping-logo.test.tsx create mode 100644 src/components/molecules/images/flipping-logo.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.module.scss delete mode 100644 src/components/molecules/layout/flipping-logo.stories.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.test.tsx delete mode 100644 src/components/molecules/layout/flipping-logo.tsx (limited to 'src/components/organisms/widgets/sharing.stories.tsx') diff --git a/.storybook/main.js b/.storybook/main.js index 05aa578..bedbd0e 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,5 +1,9 @@ const path = require('path'); +/** + * @typedef {import('webpack').Configuration} WebpackConfig + */ + const storybookConfig = { stories: ['../src/**/*.stories.@(md|mdx|js|jsx|ts|tsx)'], addons: [ @@ -12,6 +16,11 @@ const storybookConfig = { core: { builder: 'webpack5', }, + staticDirs: ['../public'], + /** + * @param {WebpackConfig} config + * @return {Promise} + */ webpackFinal: async (config) => { // Use SVGR for SVG files. See: https://medium.com/@derek_19900/config-storybook-4-to-use-svgr-webpack-plugin-22cb1152f004 const rules = config.module.rules; @@ -22,6 +31,9 @@ const storybookConfig = { use: [{ loader: '@svgr/webpack', options: { dimensions: false } }], }); + /** @type {import('next').NextConfig} */ + const nextConfig = require('../next.config'); + // Set modules aliases. config.resolve.alias = { ...config.resolve.alias, @@ -35,7 +47,7 @@ const storybookConfig = { '@utils': path.resolve(__dirname, '../src/utils'), }; - return config; + return { ...config, ...nextConfig.webpack }; }, }; 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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (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; +} as ComponentMeta; -const Template: ComponentStory = (args) => { +const Template: ComponentStory = (args) => { const { children, type, ...props } = args; const getBody = () => { @@ -139,10 +141,32 @@ const Template: ComponentStory = (args) => { }; return ( - + ); }; -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 = ({ ); }; +/** + * 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; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState(''); - return ; + return ; }; -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 = ({ ...args }) => {children}; +/** + * 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 = ({ return ; }; +/** + * 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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (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 = (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({}); 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 = (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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (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 = (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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( +