From 60c284c7ad7383313886c5f4716589cb6c180693 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 31 Mar 2022 23:19:53 +0200 Subject: chore: add a posts stack svg icon component --- src/components/atoms/icons/posts-stack.stories.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/components/atoms/icons/posts-stack.stories.tsx (limited to 'src/components/atoms/icons/posts-stack.stories.tsx') diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx new file mode 100644 index 0000000..e2206c2 --- /dev/null +++ b/src/components/atoms/icons/posts-stack.stories.tsx @@ -0,0 +1,13 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import PostsStackIcon from './posts-stack'; + +export default { + title: 'Atoms/Icons', + component: PostsStackIcon, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +export const PostsStack = Template.bind({}); -- cgit v1.2.3 From 5c75a302c2203cb3ebf31233121026b4775662cf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 8 Apr 2022 19:32:58 +0200 Subject: chore(icons): accept a classname as prop --- src/components/atoms/icons/arrow.stories.tsx | 19 ++++++++++-- src/components/atoms/icons/arrow.test.tsx | 4 +-- src/components/atoms/icons/arrow.tsx | 16 ++++++---- src/components/atoms/icons/career.stories.tsx | 15 +++++++++ src/components/atoms/icons/career.tsx | 13 ++++++-- src/components/atoms/icons/cc-by-sa.stories.tsx | 15 +++++++++ src/components/atoms/icons/cc-by-sa.test.tsx | 6 ++-- src/components/atoms/icons/cc-by-sa.tsx | 13 ++++++-- src/components/atoms/icons/close.stories.tsx | 15 +++++++++ src/components/atoms/icons/close.tsx | 13 ++++++-- src/components/atoms/icons/cog.stories.tsx | 15 +++++++++ src/components/atoms/icons/cog.tsx | 13 ++++++-- .../atoms/icons/computer-screen.stories.tsx | 15 +++++++++ src/components/atoms/icons/computer-screen.tsx | 13 ++++++-- src/components/atoms/icons/envelop.stories.tsx | 15 +++++++++ src/components/atoms/icons/envelop.tsx | 13 ++++++-- src/components/atoms/icons/hamburger.stories.tsx | 13 ++++++++ src/components/atoms/icons/hamburger.tsx | 11 +++++-- src/components/atoms/icons/home.stories.tsx | 15 +++++++++ src/components/atoms/icons/home.tsx | 13 ++++++-- .../atoms/icons/magnifying-glass.stories.tsx | 15 +++++++++ src/components/atoms/icons/magnifying-glass.tsx | 13 ++++++-- src/components/atoms/icons/moon.stories.tsx | 28 +++++++++++++++++ src/components/atoms/icons/moon.tsx | 13 ++++++-- src/components/atoms/icons/plus-minus.stories.tsx | 36 ++-------------------- src/components/atoms/icons/plus-minus.test.tsx | 15 +++------ src/components/atoms/icons/plus-minus.tsx | 24 +++------------ src/components/atoms/icons/posts-stack.stories.tsx | 15 +++++++++ src/components/atoms/icons/posts-stack.tsx | 13 ++++++-- src/components/atoms/icons/sun.stories.tsx | 28 +++++++++++++++++ src/components/atoms/icons/sun.tsx | 10 ++++-- 31 files changed, 363 insertions(+), 112 deletions(-) (limited to 'src/components/atoms/icons/posts-stack.stories.tsx') diff --git a/src/components/atoms/icons/arrow.stories.tsx b/src/components/atoms/icons/arrow.stories.tsx index 52b5126..96ce1d8 100644 --- a/src/components/atoms/icons/arrow.stories.tsx +++ b/src/components/atoms/icons/arrow.stories.tsx @@ -5,15 +5,25 @@ export default { title: 'Atoms/Icons', component: ArrowIcon, argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, direction: { control: { type: 'select', }, description: 'An arrow icon.', options: ['bottom', 'left', 'right', 'top'], - table: { - defaultValue: { summary: 'right' }, - }, type: { name: 'string', required: false, @@ -27,3 +37,6 @@ const Template: ComponentStory = (args) => ( ); export const Arrow = Template.bind({}); +Arrow.args = { + direction: 'right', +}; diff --git a/src/components/atoms/icons/arrow.test.tsx b/src/components/atoms/icons/arrow.test.tsx index 01813ce..502dcc1 100644 --- a/src/components/atoms/icons/arrow.test.tsx +++ b/src/components/atoms/icons/arrow.test.tsx @@ -2,8 +2,8 @@ import { render } from '@test-utils'; import Arrow from './arrow'; describe('Arrow', () => { - it('renders an arrow icon', () => { - const { container } = render(); + it('renders an arrow icon oriented to the right', () => { + const { container } = render(); expect(container).toBeDefined(); }); }); diff --git a/src/components/atoms/icons/arrow.tsx b/src/components/atoms/icons/arrow.tsx index f50d117..5f3c460 100644 --- a/src/components/atoms/icons/arrow.tsx +++ b/src/components/atoms/icons/arrow.tsx @@ -1,13 +1,17 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './arrow.module.scss'; -type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; +export type ArrowDirection = 'top' | 'right' | 'bottom' | 'left'; -type ArrowProps = { +export type ArrowProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; /** * The arrow direction. Default: right. */ - direction?: ArrowDirection; + direction: ArrowDirection; }; /** @@ -15,9 +19,9 @@ type ArrowProps = { * * Render a svg arrow icon. */ -const Arrow: FC = ({ direction = 'right' }) => { +const Arrow: VFC = ({ className = '', direction }) => { const directionClass = styles[`icon--${direction}`]; - const classes = `${styles.icon} ${directionClass}`; + const classes = `${styles.icon} ${directionClass} ${className}`; if (direction === 'top') { return ( diff --git a/src/components/atoms/icons/career.stories.tsx b/src/components/atoms/icons/career.stories.tsx index 2c1d93a..8575cb9 100644 --- a/src/components/atoms/icons/career.stories.tsx +++ b/src/components/atoms/icons/career.stories.tsx @@ -4,6 +4,21 @@ import CareerIcon from './career'; export default { title: 'Atoms/Icons', component: CareerIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/career.tsx b/src/components/atoms/icons/career.tsx index aecab1e..28edcc7 100644 --- a/src/components/atoms/icons/career.tsx +++ b/src/components/atoms/icons/career.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './career.module.scss'; +export type CareerProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Career Component * * Render a career svg icon. */ -const Career: FC = () => { +const Career: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/cc-by-sa.test.tsx b/src/components/atoms/icons/cc-by-sa.test.tsx index 03d54f7..adb03e4 100644 --- a/src/components/atoms/icons/cc-by-sa.test.tsx +++ b/src/components/atoms/icons/cc-by-sa.test.tsx @@ -1,9 +1,9 @@ -import { render } from '@test-utils'; +import { render, screen } from '@test-utils'; import CCBySA from './cc-by-sa'; describe('CCBySA', () => { it('renders a CC BY SA icon', () => { - const { container } = render(); - expect(container).toBeDefined(); + render(); + expect(screen.getByTitle('CC BY SA')).toBeInTheDocument(); }); }); diff --git a/src/components/atoms/icons/cc-by-sa.tsx b/src/components/atoms/icons/cc-by-sa.tsx index adc8b79..552504e 100644 --- a/src/components/atoms/icons/cc-by-sa.tsx +++ b/src/components/atoms/icons/cc-by-sa.tsx @@ -1,18 +1,25 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import { useIntl } from 'react-intl'; import styles from './cc-by-sa.module.scss'; +export type CCBySAProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * CCBySA component * * Render a CC BY SA svg icon. */ -const CCBySA: FC = () => { +const CCBySA: VFC = ({ className = '' }) => { const intl = useIntl(); return ( diff --git a/src/components/atoms/icons/close.stories.tsx b/src/components/atoms/icons/close.stories.tsx index 265df7a..b1d88cd 100644 --- a/src/components/atoms/icons/close.stories.tsx +++ b/src/components/atoms/icons/close.stories.tsx @@ -4,6 +4,21 @@ import CloseIcon from './close'; export default { title: 'Atoms/Icons', component: CloseIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/close.tsx b/src/components/atoms/icons/close.tsx index 80d904e..eb9ce7c 100644 --- a/src/components/atoms/icons/close.tsx +++ b/src/components/atoms/icons/close.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './close.module.scss'; +export type CloseProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Close component * * Render a close svg icon. */ -const Close: FC = () => { +const Close: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/cog.tsx b/src/components/atoms/icons/cog.tsx index bed19ce..df6d54d 100644 --- a/src/components/atoms/icons/cog.tsx +++ b/src/components/atoms/icons/cog.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './cog.module.scss'; +export type CogProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Cog component * * Render a cog svg icon. */ -const Cog: FC = () => { +const Cog: VFC = ({ className = '' }) => { return ( diff --git a/src/components/atoms/icons/computer-screen.stories.tsx b/src/components/atoms/icons/computer-screen.stories.tsx index 317b4b6..46e3ad4 100644 --- a/src/components/atoms/icons/computer-screen.stories.tsx +++ b/src/components/atoms/icons/computer-screen.stories.tsx @@ -4,6 +4,21 @@ import ComputerScreenIcon from './computer-screen'; export default { title: 'Atoms/Icons', component: ComputerScreenIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/computer-screen.tsx b/src/components/atoms/icons/computer-screen.tsx index c9c869d..310836f 100644 --- a/src/components/atoms/icons/computer-screen.tsx +++ b/src/components/atoms/icons/computer-screen.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './computer-screen.module.scss'; +export type ComputerScreenProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * ComputerScreen component * * Render a computer screen svg icon. */ -const ComputerScreen: FC = () => { +const ComputerScreen: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/envelop.tsx b/src/components/atoms/icons/envelop.tsx index a846a45..7b50d1d 100644 --- a/src/components/atoms/icons/envelop.tsx +++ b/src/components/atoms/icons/envelop.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './envelop.module.scss'; +export type EnvelopProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Envelop Component * * Render an envelop svg icon. */ -const Envelop: FC = () => { +const Envelop: VFC = ({ className = '' }) => { return ( = ({ isActive }) => { +const Hamburger: FC = ({ className = '', isActive }) => { const stateClass = isActive ? `${styles['icon--active']}` : ''; - const iconClasses = `${styles.icon} ${stateClass}`; + const iconClasses = `${styles.icon} ${stateClass} ${className}`; return ; }; diff --git a/src/components/atoms/icons/home.stories.tsx b/src/components/atoms/icons/home.stories.tsx index 59eb477..b1c995c 100644 --- a/src/components/atoms/icons/home.stories.tsx +++ b/src/components/atoms/icons/home.stories.tsx @@ -4,6 +4,21 @@ import HomeIcon from './home'; export default { title: 'Atoms/Icons', component: HomeIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/home.tsx b/src/components/atoms/icons/home.tsx index 90d3a14..71bbc4a 100644 --- a/src/components/atoms/icons/home.tsx +++ b/src/components/atoms/icons/home.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './home.module.scss'; +export type HomeProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Home component. * * Render a home svg icon. */ -const Home: FC = () => { +const Home: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/magnifying-glass.tsx b/src/components/atoms/icons/magnifying-glass.tsx index 547dd00..445ef10 100644 --- a/src/components/atoms/icons/magnifying-glass.tsx +++ b/src/components/atoms/icons/magnifying-glass.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './magnifying-glass.module.scss'; +export type MagnifyingGlassProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * MagnifyingGlass component * * Render a magnifying glass svg icon. */ -const MagnifyingGlass: FC = () => { +const MagnifyingGlass: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/moon.tsx b/src/components/atoms/icons/moon.tsx index 82b0ef6..4f52319 100644 --- a/src/components/atoms/icons/moon.tsx +++ b/src/components/atoms/icons/moon.tsx @@ -1,14 +1,21 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './moon.module.scss'; type MoonProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; + /** + * The SVG title. + */ title?: string; }; -const Moon: FC = ({ title }) => { +const Moon: VFC = ({ className = '', title }) => { return ( diff --git a/src/components/atoms/icons/plus-minus.stories.tsx b/src/components/atoms/icons/plus-minus.stories.tsx index 1b5086a..ffa28f2 100644 --- a/src/components/atoms/icons/plus-minus.stories.tsx +++ b/src/components/atoms/icons/plus-minus.stories.tsx @@ -4,44 +4,14 @@ import PlusMinusIcon from './plus-minus'; export default { title: 'Atoms/Icons', component: PlusMinusIcon, - args: { - ariaHidden: true, - }, argTypes: { - additionalClasses: { - control: { - type: 'text', - }, - description: 'Set additional classes.', - table: { - category: 'Options', - }, - type: { - name: 'string', - required: false, - }, - }, - ariaHidden: { - control: { - type: 'boolean', - }, - description: 'Should be hidden for accessibility.', - table: { - category: 'Options', - defaultValue: { summary: true }, - }, - type: { - name: 'boolean', - required: false, - }, - }, - ariaLabel: { + className: { control: { type: 'text', }, - description: 'An accessible name.', + description: 'Set additional classnames.', table: { - category: 'Options', + category: 'Styles', }, type: { name: 'string', diff --git a/src/components/atoms/icons/plus-minus.test.tsx b/src/components/atoms/icons/plus-minus.test.tsx index 96c2ad0..6903c7a 100644 --- a/src/components/atoms/icons/plus-minus.test.tsx +++ b/src/components/atoms/icons/plus-minus.test.tsx @@ -1,16 +1,9 @@ -import { render, screen } from '@test-utils'; +import { render } from '@test-utils'; import PlusMinus from './plus-minus'; describe('PlusMinus', () => { - it('renders a plus icon', () => { - render(); - expect(screen.getByLabelText('Plus icon')).toHaveClass('icon--plus'); - }); - - it('renders a minus icon', () => { - render( - - ); - expect(screen.getByLabelText('Minus icon')).toHaveClass('icon--minus'); + it('renders a plus/minus icon', () => { + const { container } = render(); + expect(container).toBeDefined(); }); }); diff --git a/src/components/atoms/icons/plus-minus.tsx b/src/components/atoms/icons/plus-minus.tsx index 1a6f7b0..78aa14a 100644 --- a/src/components/atoms/icons/plus-minus.tsx +++ b/src/components/atoms/icons/plus-minus.tsx @@ -3,17 +3,9 @@ import styles from './plus-minus.module.scss'; type PlusMinusProps = { /** - * Adds additional classes. + * Set additional classnames to the icon. */ - additionalClasses?: string; - /** - * An accessible name. - */ - ariaLabel?: string; - /** - * Should be hidden for accessibility. Default: true. - */ - ariaHidden?: boolean; + className?: string; /** * Which state should be displayed. */ @@ -25,19 +17,13 @@ type PlusMinusProps = { * * Render a plus or a minus icon. */ -const PlusMinus: FC = ({ - additionalClasses, - ariaHidden = true, - ariaLabel, - state, -}) => { +const PlusMinus: FC = ({ className, state }) => { const stateClass = `icon--${state}`; return (
); }; diff --git a/src/components/atoms/icons/posts-stack.stories.tsx b/src/components/atoms/icons/posts-stack.stories.tsx index e2206c2..46bb39f 100644 --- a/src/components/atoms/icons/posts-stack.stories.tsx +++ b/src/components/atoms/icons/posts-stack.stories.tsx @@ -4,6 +4,21 @@ import PostsStackIcon from './posts-stack'; export default { title: 'Atoms/Icons', component: PostsStackIcon, + argTypes: { + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + }, } as ComponentMeta; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/posts-stack.tsx b/src/components/atoms/icons/posts-stack.tsx index 22069ac..1998d25 100644 --- a/src/components/atoms/icons/posts-stack.tsx +++ b/src/components/atoms/icons/posts-stack.tsx @@ -1,17 +1,24 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './posts-stack.module.scss'; +export type PostsStackProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; +}; + /** * Posts stack component. * * Render a posts stack svg icon. */ -const PostsStack: FC = () => { +const PostsStack: VFC = ({ className = '' }) => { return ( ; const Template: ComponentStory = (args) => ( diff --git a/src/components/atoms/icons/sun.tsx b/src/components/atoms/icons/sun.tsx index 6caad9c..fa9d922 100644 --- a/src/components/atoms/icons/sun.tsx +++ b/src/components/atoms/icons/sun.tsx @@ -1,7 +1,11 @@ -import { FC } from 'react'; +import { VFC } from 'react'; import styles from './sun.module.scss'; type SunProps = { + /** + * Set additional classnames to the icon. + */ + className?: string; /** * The SVG title. */ @@ -13,10 +17,10 @@ type SunProps = { * * Render a svg sun icon. */ -const Sun: FC = ({ title }) => { +const Sun: VFC = ({ className = '', title }) => { return ( -- 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/atoms/icons/posts-stack.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) => ( + ); -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 = (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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - -); +const Template: ComponentStory = (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 = (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 = (args) => ( ); -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; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (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 = (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) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (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...', +}; diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index fe58293..7d4bc39 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import BackToTopComponent from './back-to-top'; +/** + * BackToTop - Storybook Meta + */ export default { title: 'Molecules/Buttons', component: BackToTopComponent, @@ -30,14 +33,22 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Buttons Stories - Back to top + */ export const BackToTop = Template.bind({}); BackToTop.args = { target: 'top', diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx index 0a23b08..b0e1465 100644 --- a/src/components/molecules/buttons/heading-button.stories.tsx +++ b/src/components/molecules/buttons/heading-button.stories.tsx @@ -3,8 +3,11 @@ import { useState } from 'react'; import { IntlProvider } from 'react-intl'; import HeadingButtonComponent from './heading-button'; +/** + * HeadingButton - Storybook Meta + */ export default { - title: 'Molecules/Buttons', + title: 'Molecules/Buttons/HeadingButton', component: HeadingButtonComponent, argTypes: { expanded: { @@ -20,6 +23,8 @@ export default { level: { control: { type: 'number', + min: 1, + max: 6, }, description: 'Heading level.', type: { @@ -48,6 +53,13 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = ({ @@ -58,18 +70,64 @@ const Template: ComponentStory = ({ const [isExpanded, setIsExpanded] = useState(expanded); return ( - - - + ); }; -export const HeadingButton = Template.bind({}); -HeadingButton.args = { +/** + * Heading Button Stories - Level 1 + */ +export const Level1 = Template.bind({}); +Level1.args = { + level: 1, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 2 + */ +export const Level2 = Template.bind({}); +Level2.args = { level: 2, title: 'Your title', }; + +/** + * Heading Button Stories - Level 3 + */ +export const Level3 = Template.bind({}); +Level3.args = { + level: 3, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 4 + */ +export const Level4 = Template.bind({}); +Level4.args = { + level: 4, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 5 + */ +export const Level5 = Template.bind({}); +Level5.args = { + level: 5, + title: 'Your title', +}; + +/** + * Heading Button Stories - Level 6 + */ +export const Level6 = Template.bind({}); +Level6.args = { + level: 6, + title: 'Your title', +}; diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index cfc1b0b..cfc603e 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -2,6 +2,9 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import HelpButtonComponent from './help-button'; +/** + * HelpButton - Storybook Meta + */ export default { title: 'Molecules/Buttons', component: HelpButtonComponent, @@ -33,12 +36,20 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); +/** + * Help Button Stories - Level 1 + */ export const HelpButton = Template.bind({}); diff --git a/src/components/molecules/forms/ackee-select.stories.tsx b/src/components/molecules/forms/ackee-select.stories.tsx index a59bfa9..4e6adf1 100644 --- a/src/components/molecules/forms/ackee-select.stories.tsx +++ b/src/components/molecules/forms/ackee-select.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import AckeeSelectComponent from './ackee-select'; +import AckeeSelect from './ackee-select'; +/** + * AckeeSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: AckeeSelectComponent, + title: 'Molecules/Forms/Select', + component: AckeeSelect, argTypes: { initialValue: { control: { @@ -17,16 +20,50 @@ export default { required: true, }, }, + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, + tooltipClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the tooltip wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const AckeeSelect = Template.bind({}); -AckeeSelect.args = { +/** + * Select Stories - Ackee select + */ +export const Ackee = Template.bind({}); +Ackee.args = { initialValue: 'full', }; diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx index b77d71e..56eef00 100644 --- a/src/components/molecules/forms/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -1,16 +1,45 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledFieldComponent from './labelled-field'; +import LabelledField from './labelled-field'; +/** + * LabelledField - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledFieldComponent, + title: 'Molecules/Forms/Field', + component: LabelledField, args: { disabled: false, labelPosition: 'top', required: false, }, argTypes: { + 'aria-labelledby': { + control: { + type: 'text', + }, + description: 'One or more ids that refers to the field name.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the field.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, disabled: { control: { type: 'boolean', @@ -35,6 +64,20 @@ export default { required: true, }, }, + hideLabel: { + control: { + type: 'boolean', + }, + description: 'Visually hide the field label.', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, label: { control: { type: 'text', @@ -181,20 +224,68 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [value, setValue] = useState(''); - return ; + return ; +}; + +/** + * Labelled Field Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'left', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + labelPosition: 'top', + name: 'labelled-field-storybook', +}; + +/** + * Labelled Field Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', + required: true, +}; + +/** + * Labelled Field Stories - Hidden label + */ +export const HiddenLabel = Template.bind({}); +HiddenLabel.args = { + hideLabel: true, + id: 'labelled-field-storybook', + label: 'Labelled field', + name: 'labelled-field-storybook', }; -export const LabelledField = Template.bind({}); -LabelledField.args = { +/** + * Labelled Field Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, id: 'labelled-field-storybook', label: 'Labelled field', name: 'labelled-field-storybook', diff --git a/src/components/molecules/forms/labelled-select.stories.tsx b/src/components/molecules/forms/labelled-select.stories.tsx index 0c569f5..d02732c 100644 --- a/src/components/molecules/forms/labelled-select.stories.tsx +++ b/src/components/molecules/forms/labelled-select.stories.tsx @@ -1,6 +1,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import LabelledSelectComponent from './labelled-select'; +import LabelledSelect from './labelled-select'; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -8,9 +8,12 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; +/** + * LabelledSelect - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: LabelledSelectComponent, + title: 'Molecules/Forms/Select', + component: LabelledSelect, args: { disabled: false, labelPosition: 'top', @@ -167,29 +170,67 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState(value); - return ( - - ); + return ; }; -export const LabelledSelect = Template.bind({}); -LabelledSelect.args = { +/** + * Labelled Select Stories - Left + */ +export const Left = Template.bind({}); +Left.args = { id: 'labelled-select-storybook', label: 'Labelled select', + labelPosition: 'left', name: 'labelled-select-storybook', options: selectOptions, value: 'option1', }; + +/** + * Labelled Select Stories - Top + */ +export const Top = Template.bind({}); +Top.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Disabled + */ +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + id: 'labelled-select-storybook', + label: 'Labelled select', + name: 'labelled-select-storybook', + options: selectOptions, + value: 'option1', +}; + +/** + * Labelled Select Stories - Required + */ +export const Required = Template.bind({}); +Required.args = { + id: 'labelled-select-storybook', + label: 'Labelled select', + labelPosition: 'top', + name: 'labelled-select-storybook', + options: selectOptions, + required: true, + value: 'option1', +}; diff --git a/src/components/molecules/forms/motion-toggle.stories.tsx b/src/components/molecules/forms/motion-toggle.stories.tsx index dc4d2a9..dcfc68d 100644 --- a/src/components/molecules/forms/motion-toggle.stories.tsx +++ b/src/components/molecules/forms/motion-toggle.stories.tsx @@ -2,10 +2,26 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; import MotionToggleComponent from './motion-toggle'; +/** + * MotionToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', + title: 'Molecules/Forms/Toggle', component: MotionToggleComponent, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, + decorators: [ + (Story) => ( + + + + ), + ], } as ComponentMeta; const Template: ComponentStory = (args) => ( - - - + ); -export const MotionToggle = Template.bind({}); -MotionToggle.args = { +/** + * Toggle Stories - Motion + */ +export const Motion = Template.bind({}); +Motion.args = { value: false, }; diff --git a/src/components/molecules/forms/prism-theme-toggle.stories.tsx b/src/components/molecules/forms/prism-theme-toggle.stories.tsx index dc9090b..513ebfc 100644 --- a/src/components/molecules/forms/prism-theme-toggle.stories.tsx +++ b/src/components/molecules/forms/prism-theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import PrismThemeToggleComponent from './prism-theme-toggle'; +import PrismThemeToggle from './prism-theme-toggle'; +/** + * PrismThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: PrismThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: PrismThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const PrismThemeToggle = Template.bind({}); -PrismThemeToggle.args = { +/** + * Toggle Stories - Prism theme + */ +export const PrismTheme = Template.bind({}); +PrismTheme.args = { value: false, }; diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx index c63e9b8..d757b2b 100644 --- a/src/components/molecules/forms/select-with-tooltip.stories.tsx +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -1,11 +1,14 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import { IntlProvider } from 'react-intl'; -import SelectWithTooltipComponent from './select-with-tooltip'; +import SelectWithTooltip from './select-with-tooltip'; +/** + * SelectWithTooltip - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: SelectWithTooltipComponent, + title: 'Molecules/Forms/Select', + component: SelectWithTooltip, argTypes: { content: { control: { @@ -175,7 +178,14 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; const selectOptions = [ { id: 'option1', name: 'Option 1', value: 'option1' }, @@ -183,25 +193,22 @@ const selectOptions = [ { id: 'option3', name: 'Option 3', value: 'option3' }, ]; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [selected, setSelected] = useState('option1'); return ( - - - + ); }; -export const SelectWithTooltip = Template.bind({}); -SelectWithTooltip.args = { +/** + * Select Stories - With tooltip + */ +export const WithTooltip = Template.bind({}); +WithTooltip.args = { content: 'Illo voluptatibus quia minima placeat sit nostrum excepturi.', title: 'Possimus quidem dolor', id: 'storybook-select', diff --git a/src/components/molecules/forms/theme-toggle.stories.tsx b/src/components/molecules/forms/theme-toggle.stories.tsx index a9bcf73..05d94b9 100644 --- a/src/components/molecules/forms/theme-toggle.stories.tsx +++ b/src/components/molecules/forms/theme-toggle.stories.tsx @@ -1,11 +1,27 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import ThemeToggleComponent from './theme-toggle'; +import ThemeToggle from './theme-toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ThemeToggleComponent, + title: 'Molecules/Forms/Toggle', + component: ThemeToggle, argTypes: { + labelClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the label wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, value: { control: { type: null, @@ -17,15 +33,23 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const ThemeToggle = Template.bind({}); -ThemeToggle.args = { +/** + * Toggle Stories - Theme + */ +export const Theme = Template.bind({}); +Theme.args = { value: false, }; diff --git a/src/components/molecules/forms/toggle.stories.tsx b/src/components/molecules/forms/toggle.stories.tsx index 078a34c..0351ab7 100644 --- a/src/components/molecules/forms/toggle.stories.tsx +++ b/src/components/molecules/forms/toggle.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import ToggleComponent from './toggle'; +import Toggle from './toggle'; +/** + * ThemeToggle - Storybook Meta + */ export default { - title: 'Molecules/Forms', - component: ToggleComponent, + title: 'Molecules/Forms/Toggle', + component: Toggle, argTypes: { choices: { description: 'The toggle choices.', @@ -92,21 +95,22 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = ({ +const Template: ComponentStory = ({ value: _value, setValue: _setValue, ...args }) => { const [isChecked, setIsChecked] = useState(false); - return ( - - ); + return ; }; -export const Toggle = Template.bind({}); -Toggle.args = { +/** + * Toggle Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { choices: { left: 'On', right: 'Off', diff --git a/src/components/molecules/images/flipping-logo.module.scss b/src/components/molecules/images/flipping-logo.module.scss new file mode 100644 index 0000000..89b9499 --- /dev/null +++ b/src/components/molecules/images/flipping-logo.module.scss @@ -0,0 +1,59 @@ +@use "@styles/abstracts/functions" as fun; + +.logo { + width: var(--logo-size, fun.convert-px(100)); + height: var(--logo-size, fun.convert-px(100)); + position: relative; + border-radius: 50%; + transform-style: preserve-3d; + transition: all 0.6s linear 0s; + + &__front, + &__back { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + backface-visibility: hidden; + background: var(--color-bg); + border: fun.convert-px(2) solid var(--color-primary-dark); + border-radius: 50%; + transition: all 0.6s linear 0s; + + svg, + img { + // !important is required to override next/image styles... + padding: fun.convert-px(2) !important; + border-radius: 50%; + } + } + + &__front { + box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 + var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 + var(--color-shadow-light); + } + + &__back { + transform: rotateY(180deg); + } + + &:hover { + transform: rotateY(180deg); + } + + &:hover & { + &__front { + box-shadow: none; + } + + &__back { + box-shadow: fun.convert-px(1) fun.convert-px(2) fun.convert-px(1) 0 + var(--color-shadow-light), + fun.convert-px(2) fun.convert-px(3) fun.convert-px(3) 0 + var(--color-shadow-light); + } + } +} diff --git a/src/components/molecules/images/flipping-logo.stories.tsx b/src/components/molecules/images/flipping-logo.stories.tsx new file mode 100644 index 0000000..40a4c49 --- /dev/null +++ b/src/components/molecules/images/flipping-logo.stories.tsx @@ -0,0 +1,75 @@ +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import FlippingLogoComponent from './flipping-logo'; + +/** + * FlippingLogo - Storybook Meta + */ +export default { + title: 'Molecules/Images', + component: FlippingLogoComponent, + argTypes: { + altText: { + control: { + type: 'text', + }, + description: 'Photo alternative text.', + type: { + name: 'string', + required: true, + }, + }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the logo wrapper.', + table: { + category: 'Options', + }, + type: { + name: 'string', + required: false, + }, + }, + logoTitle: { + control: { + type: 'text', + }, + description: 'An accessible name for the logo.', + table: { + category: 'Accessibility', + }, + type: { + name: 'string', + required: false, + }, + }, + photo: { + control: { + type: 'text', + }, + description: 'Photo url.', + type: { + name: 'string', + required: true, + }, + }, + unoptimized: { table: { disable: true } }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( + +); + +/** + * Images Stories - Flipping Logo + */ +export const FlippingLogo = Template.bind({}); +FlippingLogo.args = { + altText: 'Website picture', + logoTitle: 'Website logo', + photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, +}; diff --git a/src/components/molecules/images/flipping-logo.test.tsx b/src/components/molecules/images/flipping-logo.test.tsx new file mode 100644 index 0000000..806fdbe --- /dev/null +++ b/src/components/molecules/images/flipping-logo.test.tsx @@ -0,0 +1,25 @@ +import { render, screen } from '@test-utils'; +import FlippingLogo from './flipping-logo'; + +describe('FlippingLogo', () => { + it('renders a photo', () => { + render( + + ); + expect(screen.getByAltText('Alternative text')).toBeInTheDocument(); + }); + + it('renders a logo', () => { + render( + + ); + expect(screen.getByTitle('A logo title')).toBeInTheDocument(); + }); +}); diff --git a/src/components/molecules/images/flipping-logo.tsx b/src/components/molecules/images/flipping-logo.tsx new file mode 100644 index 0000000..0d31fa3 --- /dev/null +++ b/src/components/molecules/images/flipping-logo.tsx @@ -0,0 +1,55 @@ +import Logo, { type LogoProps } from '@components/atoms/images/logo'; +import Image from 'next/image'; +import { FC } from 'react'; +import styles from './flipping-logo.module.scss'; + +export type FlippingLogoProps = { + /** + * Set additional classnames to the logo wrapper. + */ + className?: string; + /** + * Photo alternative text. + */ + altText: string; + /** + * Logo image title. + */ + logoTitle?: LogoProps['title']; + /** + * Photo url. + */ + photo: string; +}; + +/** + * FlippingLogo component + * + * Render a logo and a photo with a flipping effect. + */ +const FlippingLogo: FC = ({ + className = '', + altText, + logoTitle, + photo, + ...props +}) => { + return ( +
+
+ {altText} +
+
+ +
+
+ ); +}; + +export default FlippingLogo; diff --git a/src/components/molecules/images/responsive-image.module.scss b/src/components/molecules/images/responsive-image.module.scss index 83e8d10..3566421 100644 --- a/src/components/molecules/images/responsive-image.module.scss +++ b/src/components/molecules/images/responsive-image.module.scss @@ -5,7 +5,7 @@ flex-flow: column; width: 100%; max-width: max-content; - margin: var(--spacing-sm) auto; + margin: 0; position: relative; text-align: center; } diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index f9c1d2b..a1f5295 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -1,9 +1,12 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import ResponsiveImageComponent from './responsive-image'; +import ResponsiveImage from './responsive-image'; +/** + * ResponsiveImage - Storybook Meta + */ export default { - title: 'Molecules/Images', - component: ResponsiveImageComponent, + title: 'Molecules/Images/ResponsiveImage', + component: ResponsiveImage, argTypes: { alt: { control: { @@ -72,16 +75,60 @@ export default { }, }, }, -} as ComponentMeta; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - +const Template: ComponentStory = (args) => ( + ); -export const ResponsiveImage = Template.bind({}); -ResponsiveImage.args = { +/** + * Responsive Image Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { alt: 'An example', src: 'http://placeimg.com/640/480/transport', width: 640, height: 480, + unoptimized: true, +}; + +/** + * Responsive Image Stories - With link + */ +export const WithLink = Template.bind({}); +WithLink.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + unoptimized: true, + target: '#', +}; + +/** + * Responsive Image Stories - With caption + */ +export const WithCaption = Template.bind({}); +WithCaption.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + caption: 'Omnis nulla labore', + unoptimized: true, +}; + +/** + * Responsive Image Stories - With caption and link + */ +export const WithCaptionAndLink = Template.bind({}); +WithCaptionAndLink.args = { + alt: 'An example', + src: 'http://placeimg.com/640/480/transport', + width: 640, + height: 480, + caption: 'Omnis nulla labore', + target: '#', + unoptimized: true, }; diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx index 726ba26..1637c99 100644 --- a/src/components/molecules/layout/branding.stories.tsx +++ b/src/components/molecules/layout/branding.stories.tsx @@ -1,10 +1,13 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { IntlProvider } from 'react-intl'; -import BrandingComponent from './branding'; +import Branding from './branding'; +/** + * Branding - Storybook Meta + */ export default { - title: 'Molecules/Layout', - component: BrandingComponent, + title: 'Molecules/Layout/Branding', + component: Branding, args: { isHome: false, }, @@ -53,6 +56,7 @@ export default { required: true, }, }, + unoptimized: { table: { disable: true } }, withLink: { control: { type: 'boolean', @@ -68,16 +72,38 @@ export default { }, }, }, -} as ComponentMeta; + decorators: [ + (Story) => ( + + + + ), + ], +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - - - +const Template: ComponentStory = (args) => ( + ); -export const Branding = Template.bind({}); -Branding.args = { +/** + * Branding Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { title: 'Website title', photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, +}; + +/** + * Branding Stories - With baseline + */ +export const WithBaseline = Template.bind({}); +WithBaseline.args = { + title: 'Website title', + baseline: 'Maiores corporis qui', + photo: 'http://placeimg.com/640/480', + // @ts-ignore - Needed because of the placeholder image. + unoptimized: true, }; diff --git a/src/components/molecules/layout/branding.tsx b/src/components/molecules/layout/branding.tsx index 9fe89e7..423c54f 100644 --- a/src/components/molecules/layout/branding.tsx +++ b/src/components/molecules/layout/branding.tsx @@ -2,8 +2,8 @@ import Heading from '@components/atoms/headings/heading'; import Link from 'next/link'; import { FC } from 'react'; import { useIntl } from 'react-intl'; +import FlippingLogo, { type FlippingLogoProps } from '../images/flipping-logo'; import styles from './branding.module.scss'; -import FlippingLogo, { type FlippingLogoProps } from './flipping-logo'; export type BrandingProps = Pick & { /** @@ -35,6 +35,7 @@ const Branding: FC = ({ photo, title, withLink = false, + ...props }) => { const intl = useIntl(); const altText = intl.formatMessage( @@ -61,6 +62,7 @@ const Branding: FC = ({ altText={altText} logoTitle={logoTitle} photo={photo} + {...props} /> ; +} as ComponentMeta; -const Template: ComponentStory = (args) => ( - -); +const Template: ComponentStory = (args) => ; const cover = { alt: 'A picture', height: 480, src: 'http://placeimg.com/640/480', width: 640, + unoptimized: true, }; const meta = [ @@ -92,10 +96,57 @@ const meta = [ }, ]; -export const Card = Template.bind({}); -Card.args = { +/** + * Card Stories - Default + */ +export const Default = Template.bind({}); +Default.args = { + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With cover + */ +export const WithCover = Template.bind({}); +WithCover.args = { + cover, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With meta + */ +export const WithMeta = Template.bind({}); +WithMeta.args = { + meta, + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With tagline + */ +export const WithTagline = Template.bind({}); +WithTagline.args = { + tagline: 'Ullam accusantium ipsa', + title: 'Veritatis dicta quod', + titleLevel: 2, + url: '#', +}; + +/** + * Card Stories - With all data + */ +export const WithAll = Template.bind({}); +WithAll.args = { cover, meta, + tagline: 'Ullam accusantium ipsa', title: 'Veritatis dicta quod', titleLevel: 2, url: '#', diff --git a/src/components/molecules/layout/card.tsx b/src/components/molecules/layout/card.tsx index 89f100e..15927e9 100644 --- a/src/components/molecules/layout/card.tsx +++ b/src/components/molecules/layout/card.tsx @@ -93,7 +93,7 @@ const Card: FC = ({ {title} -
{tagline}
+ {tagline &&
{tagline}
} {meta && (