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)' },
+ );
+ }),
+ );
});
});