diff options
Diffstat (limited to 'src/components/molecules')
16 files changed, 85 insertions, 143 deletions
diff --git a/src/components/molecules/buttons/back-to-top.stories.tsx b/src/components/molecules/buttons/back-to-top.stories.tsx index 7d4bc39..a338b8b 100644 --- a/src/components/molecules/buttons/back-to-top.stories.tsx +++ b/src/components/molecules/buttons/back-to-top.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import BackToTopComponent from './back-to-top'; /** @@ -33,13 +32,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof BackToTopComponent>; const Template: ComponentStory<typeof BackToTopComponent> = (args) => ( diff --git a/src/components/molecules/buttons/heading-button.stories.tsx b/src/components/molecules/buttons/heading-button.stories.tsx index d1b5ed4..59f7be9 100644 --- a/src/components/molecules/buttons/heading-button.stories.tsx +++ b/src/components/molecules/buttons/heading-button.stories.tsx @@ -1,3 +1,4 @@ +import headingStories from '@components/atoms/headings/heading.stories'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; import HeadingButtonComponent from './heading-button'; diff --git a/src/components/molecules/buttons/help-button.stories.tsx b/src/components/molecules/buttons/help-button.stories.tsx index cfc603e..4968b27 100644 --- a/src/components/molecules/buttons/help-button.stories.tsx +++ b/src/components/molecules/buttons/help-button.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import HelpButtonComponent from './help-button'; /** @@ -36,13 +35,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof HelpButtonComponent>; const Template: ComponentStory<typeof HelpButtonComponent> = (args) => ( diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx index e351453..ccf1ebd 100644 --- a/src/components/molecules/buttons/help-button.tsx +++ b/src/components/molecules/buttons/help-button.tsx @@ -3,12 +3,7 @@ import { forwardRef, ForwardRefRenderFunction } from 'react'; import { useIntl } from 'react-intl'; import styles from './help-button.module.scss'; -export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { - /** - * Set additional classnames to the button wrapper. - */ - className?: string; -}; +export type HelpButtonProps = Pick<ButtonProps, 'className' | 'onClick'>; /** * HelpButton component @@ -18,7 +13,7 @@ export type HelpButtonProps = Pick<ButtonProps, 'onClick'> & { const HelpButton: ForwardRefRenderFunction< HTMLButtonElement, HelpButtonProps -> = ({ className = '', onClick }, ref) => { +> = ({ className = '', ...props }, ref) => { const intl = useIntl(); const text = intl.formatMessage({ defaultMessage: 'Help', @@ -29,9 +24,9 @@ const HelpButton: ForwardRefRenderFunction< return ( <Button className={`${styles.btn} ${className}`} - onClick={onClick} ref={ref} shape="circle" + {...props} > <span className="screen-reader-text">{text}</span> <span className={styles.icon}>?</span> diff --git a/src/components/molecules/forms/labelled-field.stories.tsx b/src/components/molecules/forms/labelled-field.stories.tsx index 56eef00..795e785 100644 --- a/src/components/molecules/forms/labelled-field.stories.tsx +++ b/src/components/molecules/forms/labelled-field.stories.tsx @@ -10,6 +10,7 @@ export default { component: LabelledField, args: { disabled: false, + hideLabel: false, labelPosition: 'top', required: false, }, diff --git a/src/components/molecules/forms/select-with-tooltip.stories.tsx b/src/components/molecules/forms/select-with-tooltip.stories.tsx index d757b2b..ddf5d4c 100644 --- a/src/components/molecules/forms/select-with-tooltip.stories.tsx +++ b/src/components/molecules/forms/select-with-tooltip.stories.tsx @@ -1,6 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; import { useState } from 'react'; -import { IntlProvider } from 'react-intl'; import SelectWithTooltip from './select-with-tooltip'; /** @@ -178,13 +177,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof SelectWithTooltip>; const selectOptions = [ diff --git a/src/components/molecules/images/responsive-image.stories.tsx b/src/components/molecules/images/responsive-image.stories.tsx index 4294208..ca69d4f 100644 --- a/src/components/molecules/images/responsive-image.stories.tsx +++ b/src/components/molecules/images/responsive-image.stories.tsx @@ -34,6 +34,19 @@ export default { required: false, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the image wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, height: { control: { type: 'number', diff --git a/src/components/molecules/layout/branding.stories.tsx b/src/components/molecules/layout/branding.stories.tsx index 1637c99..d2e0694 100644 --- a/src/components/molecules/layout/branding.stories.tsx +++ b/src/components/molecules/layout/branding.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import Branding from './branding'; /** @@ -10,6 +9,7 @@ export default { component: Branding, args: { isHome: false, + withLink: false, }, argTypes: { baseline: { @@ -72,13 +72,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof Branding>; const Template: ComponentStory<typeof Branding> = (args) => ( diff --git a/src/components/molecules/layout/code.stories.tsx b/src/components/molecules/layout/code.stories.tsx index a2a6b2c..ac0e98f 100644 --- a/src/components/molecules/layout/code.stories.tsx +++ b/src/components/molecules/layout/code.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import CodeComponent from './code'; /** @@ -70,13 +69,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof CodeComponent>; const Template: ComponentStory<typeof CodeComponent> = (args) => ( diff --git a/src/components/molecules/layout/code.tsx b/src/components/molecules/layout/code.tsx index f5b60b9..30351b9 100644 --- a/src/components/molecules/layout/code.tsx +++ b/src/components/molecules/layout/code.tsx @@ -1,38 +1,10 @@ -import usePrism, { OptionalPrismPlugin } from '@utils/hooks/use-prism'; +import usePrism, { + type OptionalPrismPlugin, + type PrismLanguage, +} from '@utils/hooks/use-prism'; import { FC, useRef } from 'react'; import styles from './code.module.scss'; -export type PrismLanguage = - | 'apacheconf' - | 'bash' - | 'css' - | 'diff' - | 'docker' - | 'editorconfig' - | 'ejs' - | 'git' - | 'graphql' - | 'html' - | 'ignore' - | 'ini' - | 'javascript' - | 'jsdoc' - | 'json' - | 'jsx' - | 'makefile' - | 'markup' - | 'php' - | 'phpdoc' - | 'regex' - | 'scss' - | 'shell-session' - | 'smarty' - | 'tcl' - | 'toml' - | 'tsx' - | 'twig' - | 'yaml'; - export type CodeProps = { /** * The code to highlight. diff --git a/src/components/molecules/layout/meta.stories.tsx b/src/components/molecules/layout/meta.stories.tsx index a1755a0..c33680f 100644 --- a/src/components/molecules/layout/meta.stories.tsx +++ b/src/components/molecules/layout/meta.stories.tsx @@ -1,3 +1,5 @@ +import descriptionListItemStories from '@components/atoms/lists/description-list-item.stories'; +import descriptionListStories from '@components/atoms/lists/description-list.stories'; import { ComponentMeta, ComponentStory } from '@storybook/react'; import MetaComponent, { MetaData } from './meta'; @@ -7,7 +9,12 @@ import MetaComponent, { MetaData } from './meta'; export default { title: 'Molecules/Layout', component: MetaComponent, + args: { + itemsLayout: 'inline-values', + withSeparator: false, + }, argTypes: { + className: descriptionListStories.argTypes?.className, data: { description: 'The page metadata.', type: { @@ -16,34 +23,23 @@ export default { value: {}, }, }, + groupClassName: descriptionListStories.argTypes?.groupClassName, itemsLayout: { - control: { - type: 'select', - }, - description: 'The items layout.', - options: ['inline', 'inline-values', 'stacked'], + ...descriptionListItemStories.argTypes?.layout, table: { - category: 'Options', + ...descriptionListItemStories.argTypes?.layout?.table, defaultValue: { summary: 'inline-values' }, }, - type: { - name: 'string', - required: false, - }, }, + labelClassName: descriptionListStories.argTypes?.labelClassName, + layout: descriptionListStories.argTypes?.layout, + valueClassName: descriptionListStories.argTypes?.valueClassName, withSeparator: { - control: { - type: 'boolean', - }, - description: 'Add a slash as separator between multiple values.', + ...descriptionListStories.argTypes?.withSeparator, table: { - category: 'Options', + ...descriptionListStories.argTypes?.withSeparator?.table, defaultValue: { summary: true }, }, - type: { - name: 'boolean', - required: true, - }, }, }, } as ComponentMeta<typeof MetaComponent>; diff --git a/src/components/molecules/layout/widget.stories.tsx b/src/components/molecules/layout/widget.stories.tsx index c113db9..dd5a30b 100644 --- a/src/components/molecules/layout/widget.stories.tsx +++ b/src/components/molecules/layout/widget.stories.tsx @@ -1,5 +1,5 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; +import headingButtonStories from '../buttons/heading-button.stories'; import Widget from './widget'; /** @@ -10,6 +10,7 @@ export default { component: Widget, args: { withBorders: false, + withScroll: false, }, argTypes: { children: { @@ -22,6 +23,19 @@ export default { required: true, }, }, + className: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the widget wrapper.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, expanded: { control: { type: 'boolean', @@ -36,18 +50,7 @@ export default { required: false, }, }, - level: { - control: { - type: 'number', - min: 1, - max: 6, - }, - description: 'The heading level.', - type: { - name: 'number', - required: true, - }, - }, + level: headingButtonStories.argTypes?.level, title: { control: { type: 'text', @@ -72,14 +75,21 @@ export default { required: false, }, }, + withScroll: { + control: { + type: 'boolean', + }, + description: 'Define if the widget should be scrollable', + table: { + category: 'Options', + defaultValue: { summary: false }, + }, + type: { + name: 'boolean', + required: false, + }, + }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof Widget>; const Template: ComponentStory<typeof Widget> = (args) => <Widget {...args} />; diff --git a/src/components/molecules/modals/modal.stories.tsx b/src/components/molecules/modals/modal.stories.tsx index 55b7677..f6dd364 100644 --- a/src/components/molecules/modals/modal.stories.tsx +++ b/src/components/molecules/modals/modal.stories.tsx @@ -31,6 +31,19 @@ export default { required: false, }, }, + headingClassName: { + control: { + type: 'text', + }, + description: 'Set additional classnames to the modal heading.', + table: { + category: 'Styles', + }, + type: { + name: 'string', + required: false, + }, + }, icon: { control: { type: 'select', diff --git a/src/components/molecules/nav/breadcrumb.stories.tsx b/src/components/molecules/nav/breadcrumb.stories.tsx index e26b480..cf67e60 100644 --- a/src/components/molecules/nav/breadcrumb.stories.tsx +++ b/src/components/molecules/nav/breadcrumb.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import Breadcrumb from './breadcrumb'; /** @@ -44,13 +43,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof Breadcrumb>; const Template: ComponentStory<typeof Breadcrumb> = (args) => ( diff --git a/src/components/molecules/nav/nav.stories.tsx b/src/components/molecules/nav/nav.stories.tsx index 5cef5f0..f3a29a6 100644 --- a/src/components/molecules/nav/nav.stories.tsx +++ b/src/components/molecules/nav/nav.stories.tsx @@ -1,7 +1,6 @@ import Envelop from '@components/atoms/icons/envelop'; import Home from '@components/atoms/icons/home'; import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import NavComponent, { type NavItem } from './nav'; /** @@ -73,13 +72,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof NavComponent>; const Template: ComponentStory<typeof NavComponent> = (args) => ( diff --git a/src/components/molecules/nav/pagination.stories.tsx b/src/components/molecules/nav/pagination.stories.tsx index b31c2b5..2e86db4 100644 --- a/src/components/molecules/nav/pagination.stories.tsx +++ b/src/components/molecules/nav/pagination.stories.tsx @@ -1,5 +1,4 @@ import { ComponentMeta, ComponentStory } from '@storybook/react'; -import { IntlProvider } from 'react-intl'; import PaginationComponent from './pagination'; /** @@ -8,6 +7,10 @@ import PaginationComponent from './pagination'; export default { title: 'Molecules/Navigation/Pagination', component: PaginationComponent, + args: { + baseUrl: '/page/', + siblings: 1, + }, argTypes: { 'aria-label': { control: { @@ -95,13 +98,6 @@ export default { }, }, }, - decorators: [ - (Story) => ( - <IntlProvider locale="en"> - <Story /> - </IntlProvider> - ), - ], } as ComponentMeta<typeof PaginationComponent>; const Template: ComponentStory<typeof PaginationComponent> = (args) => ( |