From dd8d644f0e160e7f744bfd22e95498b74f0c4d95 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Thu, 21 Nov 2024 10:51:46 +0100
Subject: [PATCH] docs(sbb-card): cleanup stories and visual tests (#3225)

---
 src/elements/card/card/card.stories.ts     | 203 +--------------------
 src/elements/card/card/card.visual.spec.ts |  67 +++++--
 2 files changed, 49 insertions(+), 221 deletions(-)

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
   </sbb-card>
 `;
 
-const TemplateCardActionFixedHeight = ({
-  size,
-  color,
-  label,
-  ...args
-}: Args): TemplateResult => html`
-  <sbb-card ${sbbSpread({ size, color })} style=${styleMap({ height: '250px' })}>
-    ${TemplateAction({ label, ...args })} ${Content()}
-  </sbb-card>
-`;
-
 const TemplateCardActionWithBadge = ({ size, color, label, ...args }: Args): TemplateResult => html`
   <sbb-card ${sbbSpread({ size, color })}>
     ${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`
-              <sbb-card size=${size}>
-                <span class="sbb-text-m">
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
-                </span>
+    describeEach(sizeCases, ({ size, badge }) => {
+      beforeEach(async function () {
+        root = await visualRegressionFixture(
+          html`
+            <sbb-card size=${size}>
+              <span class="sbb-text-m">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
+              </span>
 
-                <sbb-card-badge>
-                  <span>% from CHF 19.99</span>
-                </sbb-card-badge>
-              </sbb-card>
-            `,
-            { backgroundColor: 'var(--sbb-color-milk)' },
-          );
+              ${badge !== 'none'
+                ? html`
+                    <sbb-card-badge color=${badge}>
+                      <span>% from CHF 19.99</span>
+                    </sbb-card-badge>
+                  `
+                : nothing}
+            </sbb-card>
+          `,
+          {
+            backgroundColor: 'var(--sbb-color-milk)',
+          },
+        );
+      });
+
+      it(
+        '',
+        visualDiffDefault.with((setup) => {
+          setup.withSnapshotElement(root);
         }),
       );
-    }
+    });
+
+    it(
+      'fixed height',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html`
+            <sbb-card style="height: 250px;">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. justo.
+            </sbb-card>
+          `,
+          { backgroundColor: 'var(--sbb-color-milk)' },
+        );
+      }),
+    );
   });
 });