diff --git a/packages/documentation/src/shared/snapshots/schemes.ts b/packages/documentation/src/shared/snapshots/schemes.ts new file mode 100644 index 0000000000..2a9adac2a3 --- /dev/null +++ b/packages/documentation/src/shared/snapshots/schemes.ts @@ -0,0 +1,24 @@ +import { html, TemplateResult } from 'lit'; + +interface IOptions { + filter?: (scheme: string) => boolean; + additionalSchemes?: string[]; +} + +export const COLOR_SCHEMES = { + light: 'light', + // dark: 'dark', +}; + +export function schemes(renderFn: (scheme: string) => TemplateResult, options: IOptions = {}) { + const filter = options.filter || (() => true); + const additionalSchemes = options.additionalSchemes ?? []; + + return html`${[...additionalSchemes, ...Object.values(COLOR_SCHEMES)] + .filter(filter) + .map( + scheme => html`
+ ${renderFn(scheme)} +
`, + )}`; +} diff --git a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts index 29aad4d04b..e8dd649650 100644 --- a/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/accordion/accordion.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryContext, StoryObj } from '@storybook/web-components'; import meta from './accordion.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -16,16 +17,10 @@ export const Accordion: Story = { _args: HTMLPostAccordionElement, context: StoryContext, ) => { - return html` -
- ${['bg-white', 'bg-light', 'bg-dark'].map( - bg => html` -
- ${meta.render?.({ ...context.args }, context)} -
- `, - )} -
- `; + return schemes( + () => html` +
${meta.render?.({ ...context.args }, context)}
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.snapshot.stories.ts b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.snapshot.stories.ts index 16d315c8e9..1c98ccb69a 100644 --- a/packages/documentation/src/stories/components/app-store-badge/app-store-badge.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/app-store-badge/app-store-badge.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/web-components'; import meta, { renderBadge } from './app-store-badge.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -13,29 +14,21 @@ type Story = StoryObj; export const AppStoreBadge: Story = { render: () => { - const appStoreLightBadge = '/assets/images/apple-store-badge-white.svg'; - - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bg === 'bg-white' - ? renderBadge('apple-store') - : html` - - Apple App Store badge (white) - - - `} - ${renderBadge('google-play')} -
- `, - )} -
- `; + return schemes( + scheme => html` + ${scheme === 'light' + ? renderBadge('apple-store') + : html` + + Apple App Store badge (white) + + + `} + ${renderBadge('google-play')} + `, + ); }, }; diff --git a/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts index 76cade1247..4979531ccd 100644 --- a/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/avatar/avatar.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './avatar.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -10,43 +11,38 @@ export default { title: 'Snapshots', }; -type Story = StoryObj; +type Story = StoryObj; export const AvatarPicture: Story = { - render: (args: Args, context: StoryContext) => { - return html` -
-

Avatar

- ${['bg-white', 'bg-dark'].map( - bg => html` -
-
- ${bombArgs({ - lastname: [null, 'Source'], - firstname: ['Open'], - }).map( - (bombArgs: Args) => - html`
- ${Default.render?.({ ...context.args, ...bombArgs }, context)} -
`, - )} + render: (args: Args, context: StoryContext) => { + return schemes( + () => html` +
+
+ ${bombArgs({ + lastname: [null, 'Source'], + firstname: ['Open'], + }).map( + (bombArgs: Args) => + html`
+ ${Default.render?.({ ...context.args, ...bombArgs }, context)} +
`, + )} -
- ${Default.render?.({ ...args, email: 'oss@post.ch' }, context)} -
+
+ ${Default.render?.({ ...args, email: 'oss@post.ch' }, context)} +
-
- ${Default.render?.( - { ...args, imageSrc: '/assets/images/logo-swisspost.svg' }, - context, - )} -
-
+
+ ${Default.render?.( + { ...args, imageSrc: '/assets/images/logo-swisspost.svg' }, + context, + )}
- `, - )} -
- `; +
+
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts index 1390d53715..33fcf6f4e8 100644 --- a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './badge.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,22 +15,18 @@ type Story = StoryObj; export const Badge: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - showNumber: [true, false], - size: context.argTypes.size.options, - background: context.argTypes.background.options, - }) - .filter(args => !(!args.showNumber && args.size === 'small')) - .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + showNumber: [true, false], + size: context.argTypes.size.options, + background: context.argTypes.background.options, + }) + .filter(args => !(!args.showNumber && args.size === 'small')) + .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/banner/banner.snapshot.stories.ts b/packages/documentation/src/stories/components/banner/banner.snapshot.stories.ts index f77d8364af..424d5fff8b 100644 --- a/packages/documentation/src/stories/components/banner/banner.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/banner/banner.snapshot.stories.ts @@ -1,5 +1,6 @@ import { Args, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; import bannerMeta from './standard-html/banner.stories'; import { getBannerClasses } from './standard-html/getBannerClasses'; @@ -17,125 +18,116 @@ export default { type Story = StoryObj; export const Banner: Story = { - render: () => html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - type: bannerMeta?.argTypes?.type?.options, - icon: ['no-icon', undefined, '1001'], - action: [true, false], - dismissible: [true, false], + render: () => { + return schemes( + () => html` +
+ ${bombArgs({ + type: bannerMeta?.argTypes?.type?.options, + icon: ['no-icon', undefined, '1001'], + action: [true, false], + dismissible: [true, false], + }) + .map(args => { + if (args.icon === 'no-icon') { + args.noIcon = true; + } + return { ...args, show: true } as Args; }) - .map(args => { - if (args.icon === 'no-icon') { - args.noIcon = true; - } - return { ...args, show: true } as Args; - }) - .map( - args => html` - - `, +
+ ` + : html` + +

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis + temporibus blanditiis expedita inventore atque. Numquam velit aut eveniet + cumque non? +

+ `} + ${args.action + ? html` + + ` + : null} +
+ `, + )} +
+ `, + ); + }, }; export const PostBanner: Story = { render: () => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - type: ['neutral', 'success', 'error', 'warning', 'info'], - icon: ['none', undefined, '1001'], - dismissible: [true, false], - hasButtons: [true, false], - }).map( - args => html` - -

Heading

-

- Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis temporibus - blanditiis expedita inventore atque. Numquam velit aut eveniet cumque non? -

- ${args.hasButtons - ? html` ` - : ''} - - `, - )} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + type: ['neutral', 'success', 'error', 'warning', 'info'], + icon: ['none', undefined, '1001'], + dismissible: [true, false], + hasButtons: [true, false], + }).map( + args => html` + +

Heading

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis temporibus + blanditiis expedita inventore atque. Numquam velit aut eveniet cumque non? +

+ ${args.hasButtons + ? html` ` + : ''} + + `, + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts index c4828fcb8a..d53f229937 100644 --- a/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/blockquote/blockquote.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './blockquote.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,36 +15,26 @@ type Story = StoryObj; export const Blockquote: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${[ - { scheme: 'light', bg: 'white' }, - { scheme: 'dark', bg: 'dark' }, - ].map( - ({ scheme, bg }) => html` -
- ${bombArgs({ - text: [ - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia. Sequi excepturi quia voluptate nesciunt cum veritatis? Quas molestias nostrum temporibus saepe porro facilis tempora natus non modi fugiat, vitae facere quos placeat maiores incidunt illo itaque sequi dolore! Temporibus recusandae, veritatis eos vitae optio porro magni rem culpa enim provident sed. Libero blanditiis delectus voluptatibus, temporibus alias laudantium ad tempora iure, sunt minima maiores qui ut? Aliquam quis obcaecati id, officiis accusamus voluptas rerum magnam, est a culpa voluptatum tenetur ab, asperiores vel dolor ipsum alias tempore sint aliquid? Eum architecto laboriosam dolor inventore deleniti? Repellat perferendis ratione dolorem, amet deleniti minima repudiandae eos iure maiores, dicta sequi architecto ipsa sit ab laudantium praesentium maxime asperiores molestiae ad nulla ullam est saepe vero. Qui ratione vero dicta nisi molestiae rem consectetur, natus ipsam facilis repellendus animi ullam debitis temporibus sapiente quam.', - ], - language: context.argTypes.language.options, - caption: [false, true], - captionAuthor: ['Author'], - captionSource: ['Source'], - }) - .map((args: Args) => ({ - ...args, - text: `${args.language.toUpperCase()}: ${args.text}`, - })) - .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + text: [ + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia. Sequi excepturi quia voluptate nesciunt cum veritatis? Quas molestias nostrum temporibus saepe porro facilis tempora natus non modi fugiat, vitae facere quos placeat maiores incidunt illo itaque sequi dolore! Temporibus recusandae, veritatis eos vitae optio porro magni rem culpa enim provident sed. Libero blanditiis delectus voluptatibus, temporibus alias laudantium ad tempora iure, sunt minima maiores qui ut? Aliquam quis obcaecati id, officiis accusamus voluptas rerum magnam, est a culpa voluptatum tenetur ab, asperiores vel dolor ipsum alias tempore sint aliquid? Eum architecto laboriosam dolor inventore deleniti? Repellat perferendis ratione dolorem, amet deleniti minima repudiandae eos iure maiores, dicta sequi architecto ipsa sit ab laudantium praesentium maxime asperiores molestiae ad nulla ullam est saepe vero. Qui ratione vero dicta nisi molestiae rem consectetur, natus ipsam facilis repellendus animi ullam debitis temporibus sapiente quam.', + ], + language: context.argTypes.language.options, + caption: [false, true], + captionAuthor: ['Author'], + captionSource: ['Source'], + }) + .map((args: Args) => ({ + ...args, + text: `${args.language.toUpperCase()}: ${args.text}`, + })) + .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/button-close/button-close.snapshot.stories.ts b/packages/documentation/src/stories/components/button-close/button-close.snapshot.stories.ts index 87e7a5bea9..fa407a03a7 100644 --- a/packages/documentation/src/stories/components/button-close/button-close.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/button-close/button-close.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './button-close.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -13,14 +14,6 @@ type Story = StoryObj; export const PostClosebutton: Story = { render: (_args: Args, context: StoryContext) => { - return html` - ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${Default.render?.({ ...context.args }, context)} -
- `, - )} - `; + return schemes(() => html` ${Default.render?.({ ...context.args }, context)} `); }, }; diff --git a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts index 803fb14eeb..7e57e339de 100644 --- a/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/button-group/button-group.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './button-group.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,35 +15,28 @@ type Story = StoryObj; export const ButtonGroup: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - size: context.argTypes.size.options, - element: context.argTypes.element.options, - checked: context.argTypes.checked.options, - }).map((args: Args) => { - // Substitue checked with selected when element is checkbox - if (args.element === 'checkbox') { - args.selected = [args.checked]; - delete args.checked; - } + return schemes( + scheme => html` +
+ ${bombArgs({ + size: context.argTypes.size.options, + element: context.argTypes.element.options, + checked: context.argTypes.checked.options, + }).map((args: Args) => { + // Substitue checked with selected when element is checkbox + if (args.element === 'checkbox') { + args.selected = [args.checked]; + delete args.checked; + } - const contextName = Object.values({ bg, ...args }) - .map(val => val.toString().trim()) - .join('_'); + const contextName = Object.values({ scheme, ...args }) + .map(val => val.toString().trim()) + .join('_'); - return meta.render?.( - { ...context.args, ...args }, - { ...context, name: contextName }, - ); - })} -
- `, - )} -
- `; + return meta.render?.({ ...context.args, ...args }, { ...context, name: contextName }); + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts index b795381a5e..17912cd817 100644 --- a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './button.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,40 +15,33 @@ type Story = StoryObj; export const Button: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - variant: context.argTypes.variant.options, - size: context.argTypes.size.options, - tag: context.argTypes.tag.options, - disabled: [false, true], - iconOnly: [false, true], - icon: ['null', '2069'], - iconPosition: context.argTypes.iconPosition.options, - }) - .filter( - (args: Args) => - !( - args.iconOnly === true && - (args.icon === 'null' || args.iconPosition === 'end' || args.tag === 'input') - ), - ) - .filter(args => !(args.icon === 'null' && args.iconPosition === 'end')) - .filter(args => !(args.icon !== 'null' && args.tag === 'input')) - .map((args: Args) => (args.tag === 'input' ? { ...args, type: 'button' } : args)) - .map((args: Args) => - Default.render?.({ ...context.args, ...args, animated: false }, context), - )} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + variant: context.argTypes.variant.options, + size: context.argTypes.size.options, + tag: context.argTypes.tag.options, + disabled: [false, true], + iconOnly: [false, true], + icon: ['null', '2069'], + iconPosition: context.argTypes.iconPosition.options, + }) + .filter( + (args: Args) => + !( + args.iconOnly === true && + (args.icon === 'null' || args.iconPosition === 'end' || args.tag === 'input') + ), + ) + .filter(args => !(args.icon === 'null' && args.iconPosition === 'end')) + .filter(args => !(args.icon !== 'null' && args.tag === 'input')) + .map((args: Args) => (args.tag === 'input' ? { ...args, type: 'button' } : args)) + .map((args: Args) => + Default.render?.({ ...context.args, ...args, animated: false }, context), + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.snapshot.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.snapshot.stories.ts index dd0bfef944..fc771a02cb 100644 --- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.snapshot.stories.ts @@ -1,5 +1,6 @@ import { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; import meta, { Default } from './card-control.stories'; @@ -25,16 +26,12 @@ const bombedArgs = bombArgs({ export const CardControl: StoryObj = { render: () => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombedArgs.map(args => html`
${Default.render(args)}
`)} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombedArgs.map(args => html`
${Default.render(args)}
`)} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.snapshot.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.snapshot.stories.ts index e5e72e2c66..77f6f51e69 100644 --- a/packages/documentation/src/stories/components/card-control/web-component/card-control.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './card-control.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,38 +15,31 @@ type Story = StoryObj; export const PostCardControl: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
-

CardControl

- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${context.argTypes.type.options.map( - (type: string) => html` -
-

type: ${type}

- ${bombArgs({ - icon: ['1001'], - validity: ['null', true, false], - disabled: [false, true], - checked: [false, true], - type: [type], - label: ['Label'], - }).map((args: Args) => { - const description = Object.entries(args) - .filter(([key]) => !['label', 'type', 'icon'].includes(key)) - .map(([key, value]) => `${key}: ${value}`) - .join(', '); + return schemes( + () => html` + ${context.argTypes.type.options?.map( + (type: string) => html` +
+

type: ${type}

+ ${bombArgs({ + icon: ['1001'], + validity: ['null', true, false], + disabled: [false, true], + checked: [false, true], + type: [type], + label: ['Label'], + }).map((args: Args) => { + const description = Object.entries(args) + .filter(([key]) => !['label', 'type', 'icon'].includes(key)) + .map(([key, value]) => `${key}: ${value}`) + .join(', '); - return Default.render?.({ ...context.args, ...args, description }, context); - })} -
- `, - )} + return Default.render?.({ ...context.args, ...args, description }, context); + })}
`, )} -
- `; + `, + ); }, }; diff --git a/packages/documentation/src/stories/components/card-product/card-product.snapshot.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.snapshot.stories.ts index 1d2181119e..43cd603674 100644 --- a/packages/documentation/src/stories/components/card-product/card-product.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/card-product/card-product.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default, Groupped, Multipart } from './card-product.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; import ProductCardSyncHeights from './card-product.sample.js?raw'; @@ -43,20 +44,16 @@ export const ProductCard: Story = { ); // Render all variants on white and dark background - return html` -
- ${['white', 'dark'].map( - bg => html` -
-
${defaultTemplateVariants}
- ${customTemplateVariants} -
- `, - )} - -
- `; + return schemes( + () => html` +
+
${defaultTemplateVariants}
+ ${customTemplateVariants} + +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/card/card.snapshot.stories.ts b/packages/documentation/src/stories/components/card/card.snapshot.stories.ts index 7f6e727964..69cd12ade7 100644 --- a/packages/documentation/src/stories/components/card/card.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/card/card.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default, CustomContent, CardGroup } from './card.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -81,14 +82,8 @@ export const Card: Story = { ); // Render all variants on white and dark background - return html` -
- ${['white', 'dark'].map( - bg => html` -
${defaultTemplateVariants} ${customTemplateVariants}
- `, - )} -
- `; + return schemes( + () => html`
${defaultTemplateVariants} ${customTemplateVariants}
`, + ); }, }; diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts index 7560deda08..a3bc447d70 100644 --- a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Inline } from './checkbox.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -21,51 +22,44 @@ export const Checkbox: Story = { input.indeterminate = true; }); }); - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${[ - ...bombArgs({ - checked: ['indeterminate'], - }), - ...bombArgs({ - label: ['Label', longText], - validation: context.argTypes.validation.options, - checked: ['unchecked', 'checked'], - size: ['null', 'form-check-sm'], - hiddenLabel: [false, true], - disabled: [false, true], - }) - .filter( - (args: Args) => - (args.validation === 'null' || !args.disabled) && - (!args.hiddenLabel || !args.disabled) && - (args.validation === 'null' || args.hiddenLabel), - ) - .filter( - (args: Args) => - (args.validation === 'null' && !args.disabled && !args.hiddenLabel) || - args.label !== longText, - ), - ].map((args: Args) => { - context.id = `a-${crypto.randomUUID()}`; - return html` - - ${meta.render?.({ ...context.args, ...args }, context)} - - `; - })} -
- ${Inline.render?.({ ...context.args, ...Inline.args }, context)} -
- `, - )} -
- `; + return schemes( + scheme => html` +
+ ${[ + ...bombArgs({ + checked: ['indeterminate'], + }), + ...bombArgs({ + label: ['Label', longText], + validation: context.argTypes.validation.options, + checked: ['unchecked', 'checked'], + size: ['null', 'form-check-sm'], + hiddenLabel: [false, true], + disabled: [false, true], + }) + .filter( + (args: Args) => + (args.validation === 'null' || !args.disabled) && + (!args.hiddenLabel || !args.disabled) && + (args.validation === 'null' || args.hiddenLabel), + ) + .filter( + (args: Args) => + (args.validation === 'null' && !args.disabled && !args.hiddenLabel) || + args.label !== longText, + ), + ].map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return html` + + ${meta.render?.({ ...context.args, ...args }, context)} + + `; + })} +
+ ${Inline.render?.({ ...context.args, ...Inline.args }, context)} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts b/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts index 4614405661..505a9c2ab3 100644 --- a/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/chip/chip.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './chip.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,30 +15,26 @@ type Story = StoryObj; export const Chip: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - text: [ - 'Malakceptebla Insigno', - 'Contentus momentus vero siteos et accusam iretea et justo.', - ], - size: context.argTypes.size.options, - type: context.argTypes.type.options, - badge: [false, true], - active: [false, true], - disabled: [false, true], - dismissed: [false], - }) - .filter(args => !(args.type !== 'filter' && args.active === true)) - .filter(args => !(args.type !== 'filter' && args.badge === true)) - .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + text: [ + 'Malakceptebla Insigno', + 'Contentus momentus vero siteos et accusam iretea et justo.', + ], + size: context.argTypes.size.options, + type: context.argTypes.type.options, + badge: [false, true], + active: [false, true], + disabled: [false, true], + dismissed: [false], + }) + .filter(args => !(args.type !== 'filter' && args.active === true)) + .filter(args => !(args.type !== 'filter' && args.badge === true)) + .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts index c04cbbea2d..fd6ef7d3f4 100644 --- a/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/collapsible/collapsible.snapshot.stories.ts @@ -1,4 +1,5 @@ import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import { bombArgs } from '@/utils'; @@ -15,28 +16,24 @@ type Story = StoryObj; export const Collapsible: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['white', 'dark'].map( - bg => html` -
- ${bombArgs({ - collapsed: [false, true], - }).map( - (args: Args, i: number) => html` -
-

collapsed: ${args.collapsed}

- ${meta.render?.( - { ...context.args, ...args }, - { ...context, id: `${context.id}-${bg}-${i}` }, - )} -
- `, - )} -
- `, - )} -
- `; + return schemes( + scheme => html` +
+ ${bombArgs({ + collapsed: [false, true], + }).map( + (args: Args, i: number) => html` +
+

collapsed: ${args.collapsed}

+ ${meta.render?.( + { ...context.args, ...args }, + { ...context, id: `${context.id}-${scheme}-${i}` }, + )} +
+ `, + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts index 9160ab7f2d..5f05c52cfe 100644 --- a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts @@ -1,5 +1,6 @@ import meta, { Default } from './dialog.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; @@ -14,27 +15,29 @@ type Story = StoryObj; export const Dialog: Story = { render: (_args: Args, context: StoryContext) => { - return html` - -
- ${bombArgs({ - backgroundColor: ['bg-white', 'bg-primary'], - size: context.argTypes.size.options, - icon: ['none', '1034'], - closeButton: [true, false], - content: [ - 'Content', - 'Contentus momentus vero siteos et accusam iretea et justo. Contentus momentus vero siteos et accusam iretea et justo.', - ], - open: [true], - }).map((args: Args) => Default.render?.({ ...context.args, ...args }, context))} -
- `; + return schemes( + () => html` + +
+ ${bombArgs({ + backgroundColor: ['bg-white', 'bg-primary'], + size: context.argTypes.size.options, + icon: ['none', '1034'], + closeButton: [true, false], + content: [ + 'Content', + 'Contentus momentus vero siteos et accusam iretea et justo. Contentus momentus vero siteos et accusam iretea et justo.', + ], + open: [true], + }).map((args: Args) => Default.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/form-footer/form-footer.snapshot.stories.ts b/packages/documentation/src/stories/components/form-footer/form-footer.snapshot.stories.ts index da48af311d..4a6cf44760 100644 --- a/packages/documentation/src/stories/components/form-footer/form-footer.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/form-footer/form-footer.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/web-components'; import meta, { FooterArgs } from './form-footer.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,57 +15,51 @@ type Story = StoryObj; export const FormFooter: Story = { render: () => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - showPrimaryButton: [true, false], - showSecondaryButton: [true, false], - showTertiaryButton: [true, false], - }).map(args => { - const primaryButton = args.showPrimaryButton - ? html`` - : null; - const secondaryButton = args.showSecondaryButton - ? html`` - : null; + return schemes( + () => html` +
+ ${bombArgs({ + showPrimaryButton: [true, false], + showSecondaryButton: [true, false], + showTertiaryButton: [true, false], + }).map(args => { + const primaryButton = args.showPrimaryButton + ? html`` + : null; + const secondaryButton = args.showSecondaryButton + ? html`` + : null; - return html` -
- ${args.showPrimaryButton || args.showSecondaryButton - ? html` -
- ${primaryButton} ${secondaryButton} -
- ` - : null} - ${args.showTertiaryButton - ? html` - - ` - : null} -
- `; - })} -
- `, - )} -
- `; + return html` +
+ ${args.showPrimaryButton || args.showSecondaryButton + ? html` +
+ ${primaryButton} ${secondaryButton} +
+ ` + : null} + ${args.showTertiaryButton + ? html` + + ` + : null} +
+ `; + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts index a1580109d0..3a7b7f52ca 100644 --- a/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/heading/heading.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './heading.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,34 +15,30 @@ type Story = StoryObj; export const Heading: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - title: [ - 'Lorem ipsum dolor sit', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, libero. Dolore possimus ut atque quaerat nobis iusto vero, reiciendis sapiente', - ], - level: context.argTypes.level.options, - showSubtitle: [false, true], - subtitle: [ - 'Lorem ipsum dolor sit amet', - 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam veniam inventore nulla saepe veritatis ut', - ], - }) - .filter((args: Args) => !(!args.showSubtitle && args.subtitle.length > 30)) - .map((args: Args) => - Default.render?.( - { ...context.args, ...args, title: `${args.level} - ${args.title}` }, - context, - ), - )} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + title: [ + 'Lorem ipsum dolor sit', + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, libero. Dolore possimus ut atque quaerat nobis iusto vero, reiciendis sapiente', + ], + level: context.argTypes.level.options, + showSubtitle: [false, true], + subtitle: [ + 'Lorem ipsum dolor sit amet', + 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam veniam inventore nulla saepe veritatis ut', + ], + }) + .filter((args: Args) => !(!args.showSubtitle && args.subtitle.length > 30)) + .map((args: Args) => + Default.render?.( + { ...context.args, ...args, title: `${args.level} - ${args.title}` }, + context, + ), + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/input/input.snapshot.stories.ts b/packages/documentation/src/stories/components/input/input.snapshot.stories.ts index 9523aa24bf..18440709cf 100644 --- a/packages/documentation/src/stories/components/input/input.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/input/input.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './input.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { COMBINATIONS, getCombinations } from '@/utils/inputComponentsGetCombinations'; const { id, ...metaWithoutId } = meta; @@ -23,47 +24,38 @@ function renderInputSnapshot(_args: Args, context: StoryContext) { value: 'Lorem Ipsum', }, ]; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
-

Standard

- ${getCombinations('floatingLabel', [false], combinations) - .filter( - (args: Args) => - !args.value || - (args.value && - (context.args.type === 'text' || context.args.type === 'password')), - ) - .map((args: Args) => { - context.id = `a-${crypto.randomUUID()}`; - return html` -
-
${meta.render?.({ ...context.args, ...args }, context)}
-
- `; - })} -

Floating Label

- ${getCombinations('floatingLabel', [true], combinations) - .filter( - (args: Args) => - !args.value || - (args.value && - (context.args.type === 'text' || context.args.type === 'password')), - ) - .map((args: Args) => { - context.id = `${bg}-${crypto.randomUUID()}`; - return html`
${meta.render?.({ ...context.args, ...args }, context)}
`; - })} -
- `, - )} -
- `; + return schemes( + scheme => html` +
+

Standard

+ ${getCombinations('floatingLabel', [false], combinations) + .filter( + (args: Args) => + !args.value || + (args.value && (context.args.type === 'text' || context.args.type === 'password')), + ) + .map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return html` +
+
${meta.render?.({ ...context.args, ...args }, context)}
+
+ `; + })} +

Floating Label

+ ${getCombinations('floatingLabel', [true], combinations) + .filter( + (args: Args) => + !args.value || + (args.value && (context.args.type === 'text' || context.args.type === 'password')), + ) + .map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return html`
${meta.render?.({ ...context.args, ...args }, context)}
`; + })} +
+ `, + ); } type Story = StoryObj; diff --git a/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts b/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts index d359e3bd4b..c2490f10c9 100644 --- a/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/list-group/list-group.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryObj } from '@storybook/web-components'; import meta, { renderListGroup } from './list-group.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,22 +15,18 @@ type Story = StoryObj; export const ListGroup: Story = { render: () => { - return html` - ${['white', 'dark'].map( - bg => html` -
- ${bombArgs({ - listType: ['link', 'document', 'switch'], - label: [ - 'Label', - 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - ], - }).map((args: Args) => { - return renderListGroup(args); - })} -
- `, - )} - `; + return schemes( + () => html` +
+ ${bombArgs({ + listType: ['link', 'document', 'switch'], + label: [ + 'Label', + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + ], + }).map((args: Args) => renderListGroup(args))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts b/packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts index a0c13b59ea..c07d996acb 100644 --- a/packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/radio/radio.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './radio.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,41 +15,34 @@ type Story = StoryObj; export const Radio: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${[ - ...bombArgs({ - label: [ - 'Label', - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', - ], - checked: [false, true], - disabled: [false, true], - size: ['null', 'form-check-sm'], - validation: context.argTypes.validation.options, - }), - ...bombArgs({ - hiddenLabel: [true], - disabled: [false, true], - validation: context.argTypes.validation.options, - }), - ] - // remove disabled & validated examples - .filter((args: Args) => !(args.disabled && args.validation !== 'null')) - .map((args: Args) => { - context.id = `${bg}-${crypto.randomUUID()}`; - return meta.render?.({ ...context.args, ...args }, context); - })} -
- `, - )} -
- `; + return schemes( + scheme => html` +
+ ${[ + ...bombArgs({ + label: [ + 'Label', + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', + ], + checked: [false, true], + disabled: [false, true], + size: ['null', 'form-check-sm'], + validation: context.argTypes.validation.options, + }), + ...bombArgs({ + hiddenLabel: [true], + disabled: [false, true], + validation: context.argTypes.validation.options, + }), + ] + // remove disabled & validated examples + .filter((args: Args) => !(args.disabled && args.validation !== 'null')) + .map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return meta.render?.({ ...context.args, ...args }, context); + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts index b918d5a351..6b43d11484 100644 --- a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './post-rating.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils/bomb-args'; const { id, ...metaWithoutId } = meta; @@ -14,43 +15,31 @@ type Story = StoryObj; export const Rating: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
-
-
- readonly: - 
false
+ return schemes( + () => html` +
+
readonly: false
+
readonly: true
+
+ ${bombArgs({ + stars: [3, 5, 10], + currentRating: [0, 1, 3, 5, 7, 10], + }) + .filter((args: Args) => args.currentRating <= args.stars) + .map( + (args: Args) => + html` +
+
+ ${meta.render?.({ ...context.args, ...args, readonly: false }, context)} +
+
+ ${meta.render?.({ ...context.args, ...args, readonly: true }, context)} +
-
- readonly: - 
true
-
-
- ${bombArgs({ - stars: [3, 5, 10], - currentRating: [0, 1, 3, 5, 7, 10], - }) - .filter((args: Args) => args.currentRating <= args.stars) - .map( - (args: Args) => - html` -
-
- ${meta.render?.({ ...context.args, ...args, readonly: false }, context)} -
-
- ${meta.render?.({ ...context.args, ...args, readonly: true }, context)} -
-
- `, - )} -
- `, - )} -
- `; + `, + )} + `, + ); }, }; diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts index 81ec733eff..309d2a5182 100644 --- a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/web-components'; import meta from './segmented-button.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -14,35 +15,30 @@ type Story = StoryObj; export const SegmentedButton: Story = { render: () => { const labelCounts = [2, 4, 6, 8]; - const themes = ['bg-light', 'bg-dark']; - return html` -
- ${themes.map( - (theme) => html` -
- ${labelCounts.map((count) => { - const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`); + return schemes( + scheme => html` +
+ ${labelCounts.map(count => { + const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`); - return html` -
-
- ${labels.map( - (label) => html` - - ` - )} -
-
- `; - })} -
- ` - )} -
- `; + return html` +
+
+ ${labels.map( + label => html` + + `, + )} +
+
+ `; + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/select/select.snapshot.stories.ts b/packages/documentation/src/stories/components/select/select.snapshot.stories.ts index ec96e6c1aa..65f4ac2c05 100644 --- a/packages/documentation/src/stories/components/select/select.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/select/select.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default, FloatingLabel } from './select.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -66,67 +67,60 @@ export const Select: Story = { .filter((args: Args) => !(args.disabled && args.validation !== 'null')) .map(args => ({ ...args, id: `a-${crypto.randomUUID()}` })); - return html` -
- ${['bg-white', 'bg-dark'].map(bg => { - return html` -
-

Floating Label

- ${bombArgsGeneratedDefault.map( - (args: Args) => - html` -
- ${FloatingLabel.render?.( - { ...context.args, ...FloatingLabel.args, ...args }, - { ...context, id: args.id }, - )} -
- `, - )} -

Default

- ${bombArgsGeneratedDefault - .map((args: Args) => ({ ...args, floatingLabel: false })) - .map((args: Args) => { - return html` -
- ${Default.render?.( - { ...context.args, ...Default.args, ...args }, - { ...context, id: args.id }, - )} -
- `; - })} -

Multiple - Floating Label

- ${bombArgsGeneratedMultiple.map( - (args: Args) => - html` -
- ${FloatingLabel.render?.( - { ...context.args, ...FloatingLabel.args, ...args }, - { ...context, id: args.id }, - )} -
- `, - )} -

Multiple - Default

- ${bombArgsGeneratedMultiple.map( - (args: Args) => - html` -
- ${Default.render?.( - { ...context.args, ...Default.args, ...args }, - { ...context, id: args.id }, - )} -
- `, - )} -
- `; - })} -
- `; + return schemes( + () => html` +
+

Floating Label

+ ${bombArgsGeneratedDefault.map( + (args: Args) => + html` +
+ ${FloatingLabel.render?.( + { ...context.args, ...FloatingLabel.args, ...args }, + { ...context, id: args.id }, + )} +
+ `, + )} +

Default

+ ${bombArgsGeneratedDefault + .map((args: Args) => ({ ...args, floatingLabel: false })) + .map((args: Args) => { + return html` +
+ ${Default.render?.( + { ...context.args, ...Default.args, ...args }, + { ...context, id: args.id }, + )} +
+ `; + })} +

Multiple - Floating Label

+ ${bombArgsGeneratedMultiple.map( + (args: Args) => + html` +
+ ${FloatingLabel.render?.( + { ...context.args, ...FloatingLabel.args, ...args }, + { ...context, id: args.id }, + )} +
+ `, + )} +

Multiple - Default

+ ${bombArgsGeneratedMultiple.map( + (args: Args) => + html` +
+ ${Default.render?.( + { ...context.args, ...Default.args, ...args }, + { ...context, id: args.id }, + )} +
+ `, + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts b/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts index b676a7e7d7..7cf1697106 100644 --- a/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/skiplinks/skiplinks.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryObj } from '@storybook/web-components'; import meta, { renderSkiplinks } from './skiplinks.stories'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -13,6 +14,8 @@ type Story = StoryObj; export const Skiplinks: Story = { render: () => { - return html`
${renderSkiplinks()}
`; + return schemes(() => html`
${renderSkiplinks()}
`, { + filter: scheme => scheme === COLOR_SCHEMES.light, + }); }, }; diff --git a/packages/documentation/src/stories/components/slider/slider.snapshot.stories.ts b/packages/documentation/src/stories/components/slider/slider.snapshot.stories.ts index 0aeff5518d..a2ea3124dc 100644 --- a/packages/documentation/src/stories/components/slider/slider.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/slider/slider.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './slider.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,49 +15,42 @@ type Story = StoryObj; export const Slider: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${[ - ...bombArgs({ - label: [ - 'Label', + return schemes( + scheme => html` +
+ ${[ + ...bombArgs({ + label: [ + 'Label', + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', + ], + disabled: [false, true], + validation: context.argTypes.validation.options, + showValue: context.argTypes.showValue.options, + }) + //makes sure only one of those 3 Properties has a non default value + .filter( + (args: Args) => + (!args.disabled || args.validation === 'null') && + (!args.disabled || args.showValue === 'none') && + (args.validation === 'null' || args.showValue === 'none'), + ) + // makes sure only one label with long text + .filter( + (args: Args) => + (args.validation === 'null' && args.showValue === 'none' && !args.disabled) || + args.label !== 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', - ], - disabled: [false, true], - validation: context.argTypes.validation.options, - showValue: context.argTypes.showValue.options, - }) - //makes sure only one of those 3 Properties has a non default value - .filter( - (args: Args) => - (!args.disabled || args.validation === 'null') && - (!args.disabled || args.showValue === 'none') && - (args.validation === 'null' || args.showValue === 'none'), - ) - // makes sure only one label with long text - .filter( - (args: Args) => - (args.validation === 'null' && args.showValue === 'none' && !args.disabled) || - args.label !== - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', - ), - ...bombArgs({ - hiddenLabel: [true], - }), - ].map((args: Args) => { - context.id = `${bg}-${crypto.randomUUID()}`; - return meta.render?.({ ...context.args, ...args }, context); - })} -
- `, - )} -
- `; + ), + ...bombArgs({ + hiddenLabel: [true], + }), + ].map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return meta.render?.({ ...context.args, ...args }, context); + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts index 4a5f7c51a2..92054b3ee5 100644 --- a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './spinner.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,22 +15,18 @@ type Story = StoryObj; export const Spinner: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - size: context.argTypes.size.options, - }).map((args: Args) => { - return html`
- ${meta.render?.({ ...context.args, ...args }, context)} -
`; - })} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + size: context.argTypes.size.options, + }).map((args: Args) => { + return html`
+ ${meta.render?.({ ...context.args, ...args }, context)} +
`; + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts index e69c32af22..b398b30b68 100644 --- a/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/stepper/stepper.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './stepper.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -20,19 +21,15 @@ export const Stepper: Story = { 'Nam pretium nec neque sed vulputate. Sed non augue libero. Vivamus consequat mauris id ligula cursus, sit amet faucibus ipsum.', 'Sed vulputate lacinia eros, sit amet mattis sem luctus sit amet. Vestibulum pharetra tortor a laoreet malesuada.', ]; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - currentStepNumber: meta.argTypes?.currentStepNumber?.options, - }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} - ${meta.render?.({ ...context.args, ...{ steps: longSteps } }, context)} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + currentStepNumber: meta.argTypes?.currentStepNumber?.options, + }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} + ${meta.render?.({ ...context.args, ...{ steps: longSteps } }, context)} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts index 76e0ed99bf..209858814b 100644 --- a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './subnavigation.stories'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,17 +15,22 @@ type Story = StoryObj; export const Subnavigation: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${bombArgs({ - backgroundColor: ['default', 'bg-light', 'bg-dark'], - badges: [false, true], - itemCount: [2, 5], - }) - .filter(args => !(args.backgroundColor !== 'default' && args.badges === true)) - .filter(args => !(args.itemCount !== 5 && args.badges === true)) - .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + backgroundColor: ['default', 'bg-light', 'bg-dark'], + badges: [false, true], + itemCount: [2, 5], + }) + .filter(args => !(args.backgroundColor !== 'default' && args.badges === true)) + .filter(args => !(args.itemCount !== 5 && args.badges === true)) + .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + { + filter: scheme => scheme === COLOR_SCHEMES.light, + }, + ); }, }; diff --git a/packages/documentation/src/stories/components/switch/switch.snapshot.stories.ts b/packages/documentation/src/stories/components/switch/switch.snapshot.stories.ts index 73fdc01d6a..e140657065 100644 --- a/packages/documentation/src/stories/components/switch/switch.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/switch/switch.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './switch.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -16,7 +17,7 @@ export const Switch: Story = { render: (_args: Args, context: StoryContext) => { const longerText = 'Longa etikedo kiu plej versajne ne taugas sur unu linio kaj tial devas esti envolvita. Kaj nur por esti sur la sekura flanko, ni simple aldonu unu plian tre sencelan frazon ci tie. Vi neniam scias...'; - const templateVariants = (bg: string) => + const templateVariants = (scheme: string) => bombArgs({ labelPosition: ['before', 'after'], label: ['Notifications', longerText], @@ -26,7 +27,7 @@ export const Switch: Story = { validation: ['null', 'is-valid', 'is-invalid'], }) .filter((args: Args) => !(args.labelPosition == 'before' && args.label === longerText)) - .map(args => ({ ...args, id: `${bg}-${crypto.randomUUID()}` })) + .map(args => ({ ...args, id: `${scheme}-${crypto.randomUUID()}` })) .map( (args: Args) => html` @@ -36,12 +37,6 @@ export const Switch: Story = { `, ); - return html` -
- ${['white', 'dark'].map( - bg => html`
${templateVariants(bg)}
`, - )} -
- `; + return schemes(scheme => html`
${templateVariants(scheme)}
`); }, }; diff --git a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts index 8f607015ef..8dfdd98881 100644 --- a/packages/documentation/src/stories/components/table/table.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/table/table.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './table.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -16,158 +17,153 @@ export const Table: Story = { render: (_args: Args, context: StoryContext) => { const longCaption = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia. Sequi excepturi quia voluptate nesciunt cum veritatis? Quas molestias nostrum temporibus saepe porro facilis tempora natus non modi fugiat, vitae facere quos placeat maiores incidunt illo itaque sequi dolore! Temporibus recusandae, veritatis eos vitae optio porro magni rem culpa enim provident sed. Libero blanditiis delectus voluptatibus, temporibus alias laudantium ad tempora iure, sunt minima maiores qui ut? Aliquam quis obcaecati id, officiis accusamus voluptas rerum magnam, est a culpa voluptatum tenetur ab, asperiores vel dolor ipsum alias tempore sint aliquid? Eum architecto laboriosam dolor inventore deleniti? Repellat perferendis ratione dolorem, amet deleniti minima repudiandae eos iure maiores, dicta sequi architecto ipsa sit ab laudantium praesentium maxime asperiores molestiae ad nulla ullam est saepe vero. Qui ratione vero dicta nisi molestiae rem consectetur, natus ipsam facilis repellendus animi ullam debitis temporibus sapiente quam.'; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${[ - ...bombArgs({ - content: [ - html` - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 4 - Someone - - else -
- entirely - - @twitter - - `, - ], - caption: [ - 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', - longCaption, - ], - captionPlacement: context.argTypes.captionPlacement.options, - borderStyle: context.argTypes.borderStyle.options, - alignment: context.argTypes.alignment.options, - }) /* - prevents combinations with changed borderStyle and changed - alignement also prevents their respective duplicate hiddens - */ - .filter( - (args: Args) => - (args.borderStyle === 'null' || args.alignment === 'align-top') && - (args.captionPlacement === 'bottom' || args.alignment === 'align-top') && - (args.borderStyle === 'null' || args.captionPlacement === 'bottom'), - ) - /* - prevents more long text captions than neccessary - */ - .filter( - (args: Args) => - (args.borderStyle === 'null' && - args.alignment === 'align-top' && - args.captionPlacement !== 'hidden') || - args.caption !== longCaption, - ), - ...bombArgs({ - content: [ - html` - - 1 - Mark - Otto - @mdo - - - 2 - Jacob - Thornton - @fat - - - 4 - Someone - - else -
- entirely - - @twitter - - `, - html` - - 1 - Mark - Otto - - - - - - - 2 - Jacob - Thornton - - - - - - - 3 - Larry - the Bird - - - - - - `, - ], - borderStyle: ['null', 'table-bordered', 'table-borderless'], - alignment: ['align-top'], - variant: [ - ['table-hover'], - ['table-sm'], - ['table-striped'], - ['table-mono'], - ['table-sm', 'table-striped'], - ], - }), - ].map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${[ + ...bombArgs({ + content: [ + html` + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 4 + Someone + + else +
+ entirely + + @twitter + + `, + ], + caption: [ + 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.', + longCaption, + ], + captionPlacement: context.argTypes.captionPlacement.options, + borderStyle: context.argTypes.borderStyle.options, + alignment: context.argTypes.alignment.options, + }) /* + prevents combinations with changed borderStyle and changed + alignement also prevents their respective duplicate hiddens + */ + .filter( + (args: Args) => + (args.borderStyle === 'null' || args.alignment === 'align-top') && + (args.captionPlacement === 'bottom' || args.alignment === 'align-top') && + (args.borderStyle === 'null' || args.captionPlacement === 'bottom'), + ) + /* + prevents more long text captions than neccessary + */ + .filter( + (args: Args) => + (args.borderStyle === 'null' && + args.alignment === 'align-top' && + args.captionPlacement !== 'hidden') || + args.caption !== longCaption, + ), + ...bombArgs({ + content: [ + html` + + 1 + Mark + Otto + @mdo + + + 2 + Jacob + Thornton + @fat + + + 4 + Someone + + else +
+ entirely + + @twitter + + `, + html` + + 1 + Mark + Otto + + + + + + + 2 + Jacob + Thornton + + + + + + + 3 + Larry + the Bird + + + + + + `, + ], + borderStyle: ['null', 'table-bordered', 'table-borderless'], + alignment: ['align-top'], + variant: [ + ['table-hover'], + ['table-sm'], + ['table-striped'], + ['table-mono'], + ['table-sm', 'table-striped'], + ], + }), + ].map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts index 80cfbea95e..1b03583a8a 100644 --- a/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/tabs/tabs.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './tabs.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,18 +15,14 @@ type Story = StoryObj; export const Tabs: Story = { render: (_args: HTMLPostTabsElement, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - activePanel: [undefined, 'tria'], - }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + activePanel: [undefined, 'tria'], + }).map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/tag/standard-html/tag.snapshot.stories.ts b/packages/documentation/src/stories/components/tag/standard-html/tag.snapshot.stories.ts new file mode 100644 index 0000000000..bf647a475c --- /dev/null +++ b/packages/documentation/src/stories/components/tag/standard-html/tag.snapshot.stories.ts @@ -0,0 +1,49 @@ +import { Args, StoryObj, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; +import { bombArgs } from '@/utils'; +import meta from './tag.stories'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const Tag: Story = { + render: (args: Args, context: StoryContext) => { + return schemes( + () => html` + ${bombArgs({ + size: context.argTypes.size.options, + markup: [ + 'Short text', + 'Long text - Lorem ipsum dolor sit amet consectetur.', + 'With markup italic bold ', + ], + showIcon: [false, true], + }).map( + (bombArgs: Args) => + html`
+ ${context.argTypes.variant.options + .filter((v: string) => v !== 'null') + .map((variant: string) => + meta.render?.( + { + ...args, + ...bombArgs, + variant, + icon: '1001', + }, + context, + ), + )} +
`, + )} + `, + ); + }, +}; diff --git a/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts b/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts deleted file mode 100644 index f76130514d..0000000000 --- a/packages/documentation/src/stories/components/tag/standard-html/tag.snapshots.stories.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { Args, StoryObj, StoryContext } from '@storybook/web-components'; -import { html } from 'lit'; -import { bombArgs } from '@/utils'; -import meta from './tag.stories'; - -const { id, ...metaWithoutId } = meta; - -export default { - ...metaWithoutId, - title: 'Snapshots', -}; - -type Story = StoryObj; - -export const Tag: Story = { - render: (args: Args, context: StoryContext) => html` - ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - size: context.argTypes.size.options, - markup: [ - 'Short text', - 'Long text - Lorem ipsum dolor sit amet consectetur.', - 'With markup italic bold ', - ], - showIcon: [false, true], - }).map( - (bombArgs: Args) => - html`
- ${context.argTypes.variant.options - .filter((v: string) => v !== 'null') - .map((variant: string) => - meta.render?.( - { - ...args, - ...bombArgs, - variant, - icon: '1001', - }, - context, - ), - )} -
`, - )} -
- `, - )} - `, -}; diff --git a/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshot.stories.ts b/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshot.stories.ts new file mode 100644 index 0000000000..1c5c903806 --- /dev/null +++ b/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshot.stories.ts @@ -0,0 +1,48 @@ +import { Args, StoryObj, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; +import { bombArgs } from '@/utils'; +import meta from './post-tag.stories'; + +const { id, ...metaWithoutId } = meta; + +export default { + ...metaWithoutId, + title: 'Snapshots', +}; + +type Story = StoryObj; + +export const PostTag: Story = { + render: (args: Args, context: StoryContext) => { + return schemes( + () => html` + ${bombArgs({ + 'size': context.argTypes.size.options, + 'icon': ['', '1001'], + 'slots-default': [ + 'Short text', + 'Long text - Lorem ipsum dolor sit amet consectetur.', + 'With markup italic bold bla', + ], + }).map( + (bombArgs: Args) => + html`
+ ${context.argTypes.variant.options + .filter((v: string) => v !== 'null') + .map((variant: string) => + meta.render?.( + { + ...args, + ...bombArgs, + variant, + }, + context, + ), + )} +
`, + )} + `, + ); + }, +}; diff --git a/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts b/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts deleted file mode 100644 index 348cee0718..0000000000 --- a/packages/documentation/src/stories/components/tag/web-component/post-tag.snapshots.stories.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { Args, StoryObj, StoryContext } from '@storybook/web-components'; -import { html } from 'lit'; -import { bombArgs } from '@/utils'; -import meta from './post-tag.stories'; - -const { id, ...metaWithoutId } = meta; - -export default { - ...metaWithoutId, - title: 'Snapshots', -}; - -type Story = StoryObj; - -export const PostTag: Story = { - render: (args: Args, context: StoryContext) => - html` ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - 'size': context.argTypes.size.options, - 'icon': ['', '1001'], - 'slots-default': [ - 'Short text', - 'Long text - Lorem ipsum dolor sit amet consectetur.', - 'With markup italic bold bla', - ], - }).map( - (bombArgs: Args) => - html`
- ${context.argTypes.variant.options - .filter((v: string) => v !== 'null') - .map((variant: string) => - meta.render?.( - { - ...args, - ...bombArgs, - variant, - }, - context, - ), - )} -
`, - )} -
- `, - )}`, -}; diff --git a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts index b71f41a0d6..2dc5e70bbb 100644 --- a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './textarea.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { COMBINATIONS, getCombinations } from '@/utils/inputComponentsGetCombinations'; const { id, ...metaWithoutId } = meta; @@ -35,43 +36,36 @@ export const Textarea: Story = { }, ]; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
-

Sizes

- ${getCombinations('size', context.argTypes.size.options, combinations).map( - (args: Args) => { - context.id = `${bg}-${crypto.randomUUID()}`; - return html` -
- ${args.title !== undefined && args.title - ? html` -

- ${Object.entries(context.argTypes.size.control.labels) - .filter(([key]) => key === args.size) - .map(s => s[1])} -

- ` - : ''} -
${meta.render?.({ ...context.args, ...args }, context)}
-
- `; - }, - )} -

Floating Label

- ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => { - context.id = `${bg}-${crypto.randomUUID()}`; - return html`
${meta.render?.({ ...context.args, ...args }, context)}
`; - })} -
- `, - )} -
- `; + return schemes( + scheme => html` +
+

Sizes

+ ${getCombinations('size', context.argTypes.size.options, combinations).map( + (args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return html` +
+ ${args.title !== undefined && args.title + ? html` +

+ ${Object.entries(context.argTypes.size.control.labels) + .filter(([key]) => key === args.size) + .map(s => s[1])} +

+ ` + : ''} +
${meta.render?.({ ...context.args, ...args }, context)}
+
+ `; + }, + )} +

Floating Label

+ ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => { + context.id = `${scheme}-${crypto.randomUUID()}`; + return html`
${meta.render?.({ ...context.args, ...args }, context)}
`; + })} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts index 624a1e9ea3..62de919be4 100644 --- a/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts +++ b/packages/documentation/src/stories/components/toast/toast.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta from './toast.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -18,31 +19,24 @@ export const Toast: Story = { 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero mollitia magnam quo quam saepe. Aliquam tempore non deleniti culpa reprehenderit.'; const longText = 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem maxime eius aut quae ducimus dignissimos pariatur suscipit distinctio, accusamus laudantium, sint quibusdam nisi optio? Ut quae obcaecati, harum ullam quos beatae, ipsam enim, placeat eligendi dolores excepturi. Quia quod eligendi ab voluptas modi id distinctio iure vel possimus deserunt, amet, dolores laboriosam quas qui aut laborum? Et numquam esse laboriosam totam quod sapiente recusandae consectetur optio, quaerat quia. Sequi excepturi quia voluptate nesciunt cum veritatis? Quas molestias nostrum temporibus saepe porro facilis tempora natus non modi fugiat, vitae facere quos placeat maiores incidunt illo itaque sequi dolore! Temporibus recusandae, veritatis eos vitae optio porro magni rem culpa enim provident sed. Libero blanditiis delectus voluptatibus, temporibus alias laudantium ad tempora iure, sunt minima maiores qui ut? Aliquam quis obcaecati id, officiis accusamus voluptas rerum magnam, est a culpa voluptatum tenetur ab, asperiores vel dolor ipsum alias tempore sint aliquid? Eum architecto laboriosam dolor inventore deleniti? Repellat perferendis ratione dolorem, amet deleniti minima repudiandae eos iure maiores, dicta sequi architecto ipsa sit ab laudantium praesentium maxime asperiores molestiae ad nulla ullam est saepe vero. Qui ratione vero dicta nisi molestiae rem consectetur, natus ipsam facilis repellendus animi ullam debitis temporibus sapiente quam.'; - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - title: ['Title', shortText], - content: [shortText, longText], - variant: context.argTypes.variant.options, - noIcon: [false, true], - dismissible: [false, true], - }) - .filter( - (args: Args) => - (args.title === 'Title' && args.content === shortText) || - (args.title === shortText && args.content === longText), - ) - .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + title: ['Title', shortText], + content: [shortText, longText], + variant: context.argTypes.variant.options, + noIcon: [false, true], + dismissible: [false, true], + }) + .filter( + (args: Args) => + (args.title === 'Title' && args.content === shortText) || + (args.title === shortText && args.content === longText), + ) + .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts index 31f0b1c98a..95fb494fab 100644 --- a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts +++ b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryContext, StoryObj } from '@storybook/web-components'; import meta from './logo.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -13,31 +14,29 @@ type Story = StoryObj; export const PostLogo: Story = { render: (_args: Partial, context: StoryContext) => { - return html` -
- ${['', 'https://www.post.ch'].map( - url => html` -
-

${url ? 'Links' : 'Images'}

-
- ${['white', 'dark'].map( - color => html` -
- ${['big', 'huge', 'giant'].map( - (height, i) => html` -
- ${meta.render?.({ ...context.args, url }, context)} -
- `, - )} -
- `, - )} + return schemes( + () => html` +
+ ${['', 'https://www.post.ch'].map( + url => html` +
+

${url ? 'Links' : 'Images'}

+
+
+ ${['big', 'huge', 'giant'].map( + (height, i) => html` +
+ ${meta.render?.({ ...context.args, url }, context)} +
+ `, + )} +
+
-
- `, - )} -
- `; + `, + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/foundations/palettes/palettes.snapshot.stories.ts b/packages/documentation/src/stories/foundations/palettes/palettes.snapshot.stories.ts index 5cea6adb60..70ab2f11de 100644 --- a/packages/documentation/src/stories/foundations/palettes/palettes.snapshot.stories.ts +++ b/packages/documentation/src/stories/foundations/palettes/palettes.snapshot.stories.ts @@ -1,5 +1,6 @@ -import type { StoryObj } from '@storybook/web-components'; +import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import meta from './palettes.stories'; const { id, ...metaWithoutId } = meta; @@ -12,24 +13,21 @@ export default { type Story = StoryObj; export const Palette: Story = { - render: () => { - return html`${['light', 'dark'].map( - mainScheme => html` -
- ${['', 'light', 'dark'].map( - paletteScheme => html` -
-

Palette scheme: ${paletteScheme || 'none'}

-
- ${meta.argTypes.palette.options.map(palette => - meta.render({ palette, colorScheme: paletteScheme }), - )} -
-
- `, - )} + render: (args: Args, context: StoryContext) => { + return schemes( + scheme => html` +
+

Palette scheme: ${scheme}

+
+ ${meta.argTypes?.palette?.options?.map(palette => + meta.render({ palette, colorScheme: scheme }, context), + )} +
`, - )}`; + { + additionalSchemes: ['none'], + }, + ); }, }; diff --git a/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts b/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts index 8c82117d55..37ad539715 100644 --- a/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts +++ b/packages/documentation/src/stories/foundations/typography/link/link.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import meta, { Default } from './link.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -14,27 +15,20 @@ type Story = StoryObj; export const Link: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${bombArgs({ - text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'], - href: ['https://example.com', 'https://imgur.com/FKmX7dt'], - }).map((args: Args) => - Default.render?.( - { ...context.args, ...args, text: `${args.text}`, href: `${args.href}` }, - context, - ), - )} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${bombArgs({ + text: ['Link Text', 'Lorem ipsum dolor sit amet consectetur'], + href: ['https://example.com', 'https://imgur.com/FKmX7dt'], + }).map((args: Args) => + Default.render?.( + { ...context.args, ...args, text: `${args.text}`, href: `${args.href}` }, + context, + ), + )} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/raw-components/language-option/language-option.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/language-option/language-option.snapshot.stories.ts index f8a62ccbb6..451971eb42 100644 --- a/packages/documentation/src/stories/raw-components/language-option/language-option.snapshot.stories.ts +++ b/packages/documentation/src/stories/raw-components/language-option/language-option.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { StoryContext, StoryObj } from '@storybook/web-components'; import meta from './language-option.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; const { id, ...metaWithoutId } = meta; @@ -17,20 +18,12 @@ export const LanguageOption: Story = { _args: HTMLPostLanguageOptionElement, context: StoryContext, ) => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${meta.render?.({ ...context.args }, context)} -
- `, - )} -
- `; + return schemes( + () => html` +
+ ${meta.render?.({ ...context.args }, context)} +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts b/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts index 139a1c4123..99b2c75069 100644 --- a/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts +++ b/packages/documentation/src/stories/raw-components/list/list.snapshot.stories.ts @@ -1,6 +1,7 @@ import type { Args, StoryContext, StoryObj, StoryFn } from '@storybook/web-components'; import meta from './list.stories'; import { html } from 'lit'; +import { schemes } from '@/shared/snapshots/schemes'; import { bombArgs } from '@/utils'; const { id, ...metaWithoutId } = meta; @@ -45,52 +46,44 @@ export const PostList: Story = { }, decorators: [ (story: StoryFn, context: StoryContext) => { - const storyTemplate = html`
${story(context.args, context)}
`; - return storyTemplate; + return schemes(() => html`
${story(context.args, context)}
`); }, ], }; export const List: Story = { render: () => { - return html` -
- ${['bg-white', 'bg-dark'].map( - bg => html` -
-
    -
  1. This is an ordered list.
    2. -
  2. It appears in its default style.
    3. -
  3. - Therefore it should be rendered with sequential numbers at the beginning of each - list item. -
    4. -
  4. - Nested list: -
      -
    1. This is a nested list
      2. -
    2. It is further indented, depending on the depth of nesting.
      3. -
    3. Nested lists numbers are independent form the numbers of their parents.
      4. -
    - After nested list item -
    5. -
  5. - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor - incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud - exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute - irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla - pariatur -
    6. -
  6. Ordered list item
    7. -
  7. Ordered list item
    8. -
  8. Ordered list item
    9. -
  9. Ordered list item
    10. -
  10. Ordered list item
    11. -
-
- `, - )} -
- `; + return schemes( + () => html` +
    +
  1. This is an ordered list.
    2. +
  2. It appears in its default style.
    3. +
  3. + Therefore it should be rendered with sequential numbers at the beginning of each list + item. +
    4. +
  4. + Nested list: +
      +
    1. This is a nested list
      2. +
    2. It is further indented, depending on the depth of nesting.
      3. +
    3. Nested lists numbers are independent form the numbers of their parents.
      4. +
    + After nested list item +
    5. +
  5. + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor + incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure + dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur +
    6. +
  6. Ordered list item
    7. +
  7. Ordered list item
    8. +
  8. Ordered list item
    9. +
  9. Ordered list item
    10. +
  10. Ordered list item
    11. +
+ `, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts index 6600a7ed1c..fbcd4b1011 100644 --- a/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/display/display.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './display.stories'; import { displayOptions } from './display.docs.mdx'; import './display.styles.scss'; @@ -15,17 +16,20 @@ type Story = StoryObj; export const Display: Story = { render: () => { - return html` -
- ${displayOptions.map( - display => html` -
-
${display}
-
${display}
-
- `, - )} -
- `; + return schemes( + () => html` +
+ ${displayOptions.map( + display => html` +
+

display: ${display}

+
${display}
+
+ `, + )} +
+ `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss index eb981a09ce..3bf9067e93 100644 --- a/packages/documentation/src/stories/utilities/display/display.styles.scss +++ b/packages/documentation/src/stories/utilities/display/display.styles.scss @@ -4,7 +4,7 @@ .display-container { border: post.$border-width solid post.$border-color; - > * { + > div { border: post.$border-width solid post.$border-color; background-color: color.adjust(post.$border-color, $lightness: 15%); } diff --git a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts index 4dc2b239ae..1add5d5375 100644 --- a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './flex.stories'; import './flex.styles.scss'; import { @@ -152,23 +153,26 @@ function getFlex(type: string) { export const Flex: Story = { render: () => { - return html`
- ${[ - 'Direction', - 'Align Items', - 'Justify Content', - 'Align Self', - 'Grow / Shrink', - 'Align Content', - 'Wrap', - 'Order', - 'Fill', - ].map( - val => html` -

${val}

-
${getFlex(val)}
- `, - )} -
`; + return schemes( + () => html`
+ ${[ + 'Direction', + 'Align Items', + 'Justify Content', + 'Align Self', + 'Grow / Shrink', + 'Align Content', + 'Wrap', + 'Order', + 'Fill', + ].map( + val => html` +

${val}

+
${getFlex(val)}
+ `, + )} +
`, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts index dde6949a31..6f52cc5320 100644 --- a/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/float/float.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './float.stories'; import { bombArgs } from '@/utils'; @@ -14,33 +15,31 @@ type Story = StoryObj; export const Float: Story = { render: (_args: Args, context: StoryContext) => { - return html` -
-

Snapshot with Float

- ${['bg-white', 'bg-dark'].map( - bg => html` -
- ${(meta.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => { - return html` -

Breakpoint ${breakpoint}

-
- ${bombArgs({ - floatPosition: [...(meta.argTypes?.floatPosition?.options ?? [])], - floatBreakPoint: [breakpoint], - }).map((args: Args) => { - return html` -
- ${meta.render?.({ ...context.args, ...args, breakpoint }, context)} -
- `; - })} -
- `; - })} -
- `, - )} -
- `; + return schemes( + () => html` +
+

Snapshot with Float

+ + ${(meta.argTypes?.floatBreakPoint?.options ?? []).map((breakpoint: string) => { + return html` +

Breakpoint ${breakpoint}

+
+ ${bombArgs({ + floatPosition: [...(meta.argTypes?.floatPosition?.options ?? [])], + floatBreakPoint: [breakpoint], + }).map((args: Args) => { + return html` +
+ ${meta.render?.({ ...context.args, ...args, breakpoint }, context)} +
+ `; + })} +
+ `; + })} +
+ `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/opacity/opacity.snapshot.stories.ts b/packages/documentation/src/stories/utilities/opacity/opacity.snapshot.stories.ts index 766d3ec8d7..1c4c788af1 100644 --- a/packages/documentation/src/stories/utilities/opacity/opacity.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/opacity/opacity.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './opacity.stories'; import './opacity.styles.scss'; @@ -16,8 +17,12 @@ export const Opacity: Story = { render: (_args: Args, context: StoryContext) => { // Access opacity options from context const opacityOptions: string[] = context.argTypes.opacity.options as string[]; - return html` - ${opacityOptions.map(opacity => meta.render?.({ ...meta.args, opacity }, context))} - `; + + return schemes( + () => html` + ${opacityOptions.map(opacity => meta.render?.({ ...meta.args, opacity }, context))} + `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/opacity/opacity.styles.scss b/packages/documentation/src/stories/utilities/opacity/opacity.styles.scss index cceaa8e33a..3d1ad0261c 100644 --- a/packages/documentation/src/stories/utilities/opacity/opacity.styles.scss +++ b/packages/documentation/src/stories/utilities/opacity/opacity.styles.scss @@ -1,6 +1,6 @@ @use '@swisspost/design-system-styles/core' as post; -.opacity-example > div { +.opacity-example [class|='opacity'] { display: flex; align-items: center; justify-content: center; diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.snapshot.stories.ts b/packages/documentation/src/stories/utilities/overflow/overflow.snapshot.stories.ts index b03ec7991e..4fbb7b5fb1 100644 --- a/packages/documentation/src/stories/utilities/overflow/overflow.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/overflow/overflow.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './overflow.stories'; import './overflow.styles.scss'; @@ -14,13 +15,16 @@ type Story = StoryObj; export const Overflow: Story = { render: () => { - return html` -
-

Overflow

- ${getContent('Overflow', 'overflow')} ${getContent('Overflow X', 'overflow-x')} - ${getContent('Overflow Y', 'overflow-y')} -
- `; + return schemes( + () => html` +
+

Overflow

+ ${getContent('Overflow', 'overflow')} ${getContent('Overflow X', 'overflow-x')} + ${getContent('Overflow Y', 'overflow-y')} +
+ `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts index ae8276ebb8..6b0f55e069 100644 --- a/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/spacing/spacing.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { Args, StoryContext, StoryObj } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta, { MarginAndPadding as MandP, Gap as G } from './spacing.stories'; import './spacing.styles.scss'; @@ -20,11 +21,14 @@ export const MarginAndPadding: Story = { breakpointClasses: 'm-md-48 p-md-32', }; - return html` -
- ${MandP.render?.({ ...MandP.args, ...snapshotArgs }, context)} -
- `; + return schemes( + () => html` +
+ ${MandP.render?.({ ...MandP.args, ...snapshotArgs }, context)} +
+ `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; @@ -35,8 +39,11 @@ export const Gap: Story = { breakpointClass: 'gap-md-48', }; - return html` -
${G.render?.({ ...G.args, ...snapshotArgs }, context)}
- `; + return schemes( + () => html` +
${G.render?.({ ...G.args, ...snapshotArgs }, context)}
+ `, + { filter: scheme => scheme === COLOR_SCHEMES.light }, + ); }, }; diff --git a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts index 31e346cb88..8f5da3f9e9 100644 --- a/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts +++ b/packages/documentation/src/stories/utilities/vertical-align/vertical-align.snapshot.stories.ts @@ -1,5 +1,6 @@ import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; import { html } from 'lit'; +import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes'; import meta from './vertical-align.stories'; import './vertical-align.styles.scss'; @@ -26,8 +27,9 @@ export const VerticalAlign: Story = { }, decorators: [ (story: StoryFn, context: StoryContext) => { - const storyTemplate = html`
${story(context.args, context)}
`; - return storyTemplate; + return schemes(() => html`
${story(context.args, context)}
`, { + filter: scheme => scheme === COLOR_SCHEMES.light, + }); }, ], };