diff --git a/src/elements/card/card/card.stories.ts b/src/elements/card/card/card.stories.ts index 1d5ea2e24e..f8cbaf6a34 100644 --- a/src/elements/card/card/card.stories.ts +++ b/src/elements/card/card/card.stories.ts @@ -66,17 +66,6 @@ const TemplateCardAction = ({ size, color, label, ...args }: Args): TemplateResu `; -const TemplateCardActionFixedHeight = ({ - size, - color, - label, - ...args -}: Args): TemplateResult => html` - - ${TemplateAction({ label, ...args })} ${Content()} - -`; - const TemplateCardActionWithBadge = ({ size, color, label, ...args }: Args): TemplateResult => html` ${TemplateAction({ label, ...args })} @@ -264,107 +253,15 @@ const defaultArgsButton = { value: 'Value', }; -// TODO: Stories can be simplified - -export const ColorWhite: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - }, -}; - -export const ColorMilk: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - color: color.options![1], - }, -}; - -export const ColorTransparent: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - color: color.options![2], - }, -}; - -export const ColorTransparentBorderedDashed: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - color: color.options![3], - }, -}; - -export const SizeXS: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![0], - }, -}; - -export const SizeS: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![1], - }, -}; - -export const SizeM: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![2], - }, -}; - -export const SizeL: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![3], - }, -}; - -export const SizeXL: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![4], - }, -}; - -export const SizeXXL: StoryObj = { +export const Default: StoryObj = { render: Template, argTypes: defaultArgTypes, args: { ...defaultArgs, - size: size.options![5], }, }; -export const SizeXXXL: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![6], - }, -}; - -export const SizeMWithBadge: StoryObj = { +export const WithBadge: StoryObj = { render: TemplateWithBadge, argTypes: defaultArgTypes, args: { @@ -373,42 +270,6 @@ export const SizeMWithBadge: StoryObj = { }, }; -export const SizeLWithBadge: StoryObj = { - render: TemplateWithBadge, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![3], - }, -}; - -export const SizeXLWithBadge: StoryObj = { - render: TemplateWithBadge, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![4], - }, -}; - -export const SizeXXLWithBadge: StoryObj = { - render: TemplateWithBadge, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![5], - }, -}; - -export const SizeXXXLWithBadge: StoryObj = { - render: TemplateWithBadge, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - size: size.options![6], - }, -}; - export const Link: StoryObj = { render: TemplateCardAction, argTypes: defaultArgTypesLink, @@ -421,66 +282,6 @@ export const Button: StoryObj = { args: { ...defaultArgsButton }, }; -export const ButtonActive: StoryObj = { - render: TemplateCardAction, - argTypes: defaultArgTypesButton, - args: { ...defaultArgsButton, active: true }, -}; - -export const ButtonActiveMilk: StoryObj = { - render: TemplateCardAction, - argTypes: defaultArgTypesButton, - args: { - ...defaultArgsButton, - color: color.options![1], - active: true, - }, -}; - -export const ButtonActiveTransparentBordered: StoryObj = { - render: TemplateCardAction, - argTypes: defaultArgTypesButton, - args: { - ...defaultArgsButton, - color: color.options![2], - active: true, - }, -}; - -export const ButtonActiveTransparentBorderedDashed: StoryObj = { - render: TemplateCardAction, - argTypes: defaultArgTypesButton, - args: { - ...defaultArgsButton, - color: color.options![3], - active: true, - }, -}; - -export const ButtonWithSbbBadge: StoryObj = { - render: TemplateCardActionWithBadge, - argTypes: defaultArgTypesButton, - args: { ...defaultArgsButton }, -}; - -export const LinkWithSbbBadge: StoryObj = { - render: TemplateCardActionWithBadge, - argTypes: defaultArgTypesLink, - args: { ...defaultArgsLink }, -}; - -export const LinkActiveWithSbbBadge: StoryObj = { - render: TemplateCardActionWithBadge, - argTypes: defaultArgTypesLink, - args: { ...defaultArgsLink, active: true }, -}; - -export const FixedHeight: StoryObj = { - render: TemplateCardActionFixedHeight, - argTypes: defaultArgTypesButton, - args: { ...defaultArgsButton }, -}; - export const Multiple: StoryObj = { render: TemplateCardActionMultipleCards, argTypes: defaultArgTypesLink, diff --git a/src/elements/card/card/card.visual.spec.ts b/src/elements/card/card/card.visual.spec.ts index 1af2c75579..f8db9bb674 100644 --- a/src/elements/card/card/card.visual.spec.ts +++ b/src/elements/card/card/card.visual.spec.ts @@ -19,7 +19,10 @@ describe(`sbb-card`, () => { badge: ['none', 'charcoal', 'white'], }; - const sizeCases = ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl']; + const sizeCases = { + size: ['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'], + badge: ['none', 'charcoal'], + }; describeViewports({ viewports: ['zero', 'medium'] }, () => { // Main test cases @@ -49,7 +52,7 @@ describe(`sbb-card`, () => { }); it( - visualDiffDefault.name, + '', visualDiffDefault.with((setup) => { setup.withSnapshotElement(root); }), @@ -57,26 +60,50 @@ describe(`sbb-card`, () => { }); // Size test cases - for (const size of sizeCases) { - it( - `size=${size}`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo. - + describeEach(sizeCases, ({ size, badge }) => { + beforeEach(async function () { + root = await visualRegressionFixture( + html` + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo. + - - % from CHF 19.99 - - - `, - { backgroundColor: 'var(--sbb-color-milk)' }, - ); + ${badge !== 'none' + ? html` + + % from CHF 19.99 + + ` + : nothing} + + `, + { + backgroundColor: 'var(--sbb-color-milk)', + }, + ); + }); + + it( + '', + visualDiffDefault.with((setup) => { + setup.withSnapshotElement(root); }), ); - } + }); + + it( + 'fixed height', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo. + + `, + { backgroundColor: 'var(--sbb-color-milk)' }, + ); + }), + ); }); });