diff --git a/packages/web/src/components/gcds-button/stories/gcds-button.stories.js b/packages/web/src/components/gcds-button/stories/gcds-button.stories.js index 7d361d6b9..5b6db23a5 100644 --- a/packages/web/src/components/gcds-button/stories/gcds-button.stories.js +++ b/packages/web/src/components/gcds-button/stories/gcds-button.stories.js @@ -1,3 +1,5 @@ +import { eventProp } from '../../../utils/storybook/component-properties'; + export default { title: 'Components/Button', @@ -115,27 +117,19 @@ export default { // Events gcdsClick: { action: 'click', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; @@ -149,7 +143,8 @@ const Template = args => args.size != 'regular' ? `size="${args.size}"` : null } ${args.disabled ? `disabled` : null} ${ args.name ? `name="${args.name}"` : null - } ${ args.value ? `value="${args.value}"` : null + } ${ + args.value ? `value="${args.value}"` : null } ${args.type == 'link' && args.href ? `href="${args.href}"` : null} ${ args.type == 'link' && args.rel ? `rel="${args.rel}"` : null } ${args.type == 'link' && args.target ? `target="${args.target}"` : null} ${ @@ -165,7 +160,8 @@ const Template = args => args.size != 'regular' ? `size="${args.size}"` : null } ${args.disabled ? `disabled` : null} ${ args.name ? `name="${args.name}"` : null - } ${ args.value ? `value="${args.value}"` : null + } ${ + args.value ? `value="${args.value}"` : null } ${args.type == 'link' && args.href ? `href="${args.href}"` : null} ${ args.type == 'link' && args.rel ? `rel="${args.rel}"` : null } ${args.type == 'link' && args.target ? `target="${args.target}"` : null} ${ diff --git a/packages/web/src/components/gcds-card/stories/gcds-card.stories.tsx b/packages/web/src/components/gcds-card/stories/gcds-card.stories.tsx index 11858348e..b8cb3936a 100644 --- a/packages/web/src/components/gcds-card/stories/gcds-card.stories.tsx +++ b/packages/web/src/components/gcds-card/stories/gcds-card.stories.tsx @@ -1,4 +1,7 @@ -import { langProp } from '../../../utils/storybook/component-properties'; +import { + langProp, + eventProp, +} from '../../../utils/storybook/component-properties'; export default { title: 'Components/Card', @@ -79,24 +82,18 @@ export default { }, }, - // Events + // Events gcdsClick: { action: 'click', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; @@ -155,8 +152,7 @@ Default.args = { href: '#', cardTitleTag: 'a', badge: 'badge', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: '', imgAlt: '', default: '', @@ -169,8 +165,7 @@ Description.args = { href: '#', cardTitleTag: 'a', badge: '', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: '', imgAlt: '', default: '', @@ -186,9 +181,8 @@ Slot.args = { description: '', imgSrc: '', imgAlt: '', - default: - 'Description or supporting text relating to the headline.', - lang: 'en', + default: 'Description or supporting text relating to the headline.', + lang: 'en', }; export const Badge = Template.bind({}); @@ -197,8 +191,7 @@ Badge.args = { href: '#', cardTitleTag: 'a', badge: 'Badge', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: '', imgAlt: '', default: '', @@ -211,8 +204,7 @@ Image.args = { href: '#', cardTitleTag: 'a', badge: '', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: 'https://picsum.photos/480/270', imgAlt: 'An image with the card component', default: '', @@ -225,8 +217,7 @@ Props.args = { href: '#', cardTitleTag: 'a', badge: 'badge', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: '', imgAlt: '', default: '', @@ -239,8 +230,7 @@ Playground.args = { href: '#', cardTitleTag: 'a', badge: '', - description: - 'Description or supporting text relating to the headline.', + description: 'Description or supporting text relating to the headline.', imgSrc: '', imgAlt: '', default: '', diff --git a/packages/web/src/components/gcds-checkbox/stories/gcds-checkbox.stories.tsx b/packages/web/src/components/gcds-checkbox/stories/gcds-checkbox.stories.tsx index 523ed681d..cc173edbc 100644 --- a/packages/web/src/components/gcds-checkbox/stories/gcds-checkbox.stories.tsx +++ b/packages/web/src/components/gcds-checkbox/stories/gcds-checkbox.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -98,21 +99,15 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx b/packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx index 9fab7cda4..8385cc5d8 100644 --- a/packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx +++ b/packages/web/src/components/gcds-date-input/stories/gcds-date-input.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -86,27 +87,19 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsInput: { action: 'input', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-fieldset/stories/gcds-fieldset.stories.tsx b/packages/web/src/components/gcds-fieldset/stories/gcds-fieldset.stories.tsx index 5eab78d69..4b0de35ac 100644 --- a/packages/web/src/components/gcds-fieldset/stories/gcds-fieldset.stories.tsx +++ b/packages/web/src/components/gcds-fieldset/stories/gcds-fieldset.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -73,15 +74,11 @@ export default { // Events gcdsGroupError: { action: 'GroupError', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsGroupErrorClear: { action: 'GroupErrorClear', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-file-uploader/stories/gcds-file-uploader.stories.tsx b/packages/web/src/components/gcds-file-uploader/stories/gcds-file-uploader.stories.tsx index 96d56a78b..6178ad982 100644 --- a/packages/web/src/components/gcds-file-uploader/stories/gcds-file-uploader.stories.tsx +++ b/packages/web/src/components/gcds-file-uploader/stories/gcds-file-uploader.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -106,21 +107,15 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx b/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx index 055ec98a3..fdce19a61 100644 --- a/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx +++ b/packages/web/src/components/gcds-input/stories/gcds-input.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -123,21 +124,15 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-radio-group/stories/gcds-radio-group.stories.tsx b/packages/web/src/components/gcds-radio-group/stories/gcds-radio-group.stories.tsx index ef1e016ae..d3670e34c 100644 --- a/packages/web/src/components/gcds-radio-group/stories/gcds-radio-group.stories.tsx +++ b/packages/web/src/components/gcds-radio-group/stories/gcds-radio-group.stories.tsx @@ -1,4 +1,7 @@ -import { langProp } from '../../../utils/storybook/component-properties'; +import { + langProp, + eventProp, +} from '../../../utils/storybook/component-properties'; export default { title: 'Components/Radio Group', @@ -49,21 +52,15 @@ export default { // Events gcdsRadioChange: { action: 'RadioChange', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-select/stories/gcds-select.stories.tsx b/packages/web/src/components/gcds-select/stories/gcds-select.stories.tsx index 7208fcd3c..ff0316f7a 100644 --- a/packages/web/src/components/gcds-select/stories/gcds-select.stories.tsx +++ b/packages/web/src/components/gcds-select/stories/gcds-select.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -99,21 +100,15 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/components/gcds-textarea/stories/gcds-textarea.stories.tsx b/packages/web/src/components/gcds-textarea/stories/gcds-textarea.stories.tsx index b9b75a921..1ec368442 100644 --- a/packages/web/src/components/gcds-textarea/stories/gcds-textarea.stories.tsx +++ b/packages/web/src/components/gcds-textarea/stories/gcds-textarea.stories.tsx @@ -1,6 +1,7 @@ import { langProp, validatorProps, + eventProp, } from '../../../utils/storybook/component-properties'; export default { @@ -115,21 +116,15 @@ export default { // Events gcdsChange: { action: 'change', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsFocus: { action: 'focus', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, gcdsBlur: { action: 'blur', - table: { - category: 'Events | Événements', - }, + ...eventProp, }, }, }; diff --git a/packages/web/src/utils/storybook/component-properties.js b/packages/web/src/utils/storybook/component-properties.js index 7132b7eea..b869460cd 100644 --- a/packages/web/src/utils/storybook/component-properties.js +++ b/packages/web/src/utils/storybook/component-properties.js @@ -69,3 +69,12 @@ export const validatorProps = { }, }, }; + +export const eventProp = { + control: { + type: {}, + }, + table: { + category: 'Events | Événements', + }, +};