From fa54a5f7212be8f6897aaa1c22bd87a1806cc784 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Mon, 8 Jul 2024 17:58:28 +0200
Subject: [PATCH 1/3] test: implement visual spec for radio-button

---
 .../radio-button-group.visual.spec.ts         | 106 ++++++++++++++++
 .../radio-button-panel.visual.spec.ts         | 114 ++++++++++++++++++
 .../radio-button/radio-button.visual.spec.ts  |  43 +++++++
 3 files changed, 263 insertions(+)
 create mode 100644 src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
 create mode 100644 src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
 create mode 100644 src/elements/radio-button/radio-button/radio-button.visual.spec.ts

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
new file mode 100644
index 0000000000..9ace550450
--- /dev/null
+++ b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
@@ -0,0 +1,106 @@
+import { html, type TemplateResult } from 'lit';
+import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
+
+import {
+  describeEach,
+  describeViewports,
+  visualDiffDefault,
+  visualDiffFocus,
+} from '../../core/testing/private.js';
+
+import '../../card/card-badge.js';
+import '../../form-error.js';
+import '../../icon.js';
+import '../../radio-button.js';
+
+const cases = {
+  disabled: [false, true],
+  orientation: ['vertical', 'horizontal'],
+  size: ['m', 's'],
+};
+
+const suffixStyle: Readonly<StyleInfo> = {
+  display: 'flex',
+  alignItems: 'center',
+  marginInline: 'var(--sbb-spacing-fixed-2x)',
+};
+
+const suffixAndSubtext = (): TemplateResult => html`
+  <span slot="subtext">Subtext</span>
+  <span slot="suffix" style="margin-inline-start: auto;">
+    <span style=${styleMap(suffixStyle)}>
+      <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
+      <span class="sbb-text-m sbb-text--bold">CHF 8.00</span>
+    </span>
+  </span>
+  <sbb-card-badge>%</sbb-card-badge>
+`;
+
+const radioButtons = (): TemplateResult => html`
+  <sbb-radio-button value="Value one">Value one</sbb-radio-button>
+  <sbb-radio-button value="Value two">Value two</sbb-radio-button>
+  <sbb-radio-button value="Value three" disabled> Value three </sbb-radio-button>
+  <sbb-radio-button value="Value four">Value four</sbb-radio-button>
+`;
+
+const radioButtonPanels = (): TemplateResult => html`
+  <sbb-radio-button-panel value="Value one">Value 1 ${suffixAndSubtext()}</sbb-radio-button-panel>
+  <sbb-radio-button-panel value="Value two">Value 2 ${suffixAndSubtext()}</sbb-radio-button-panel>
+`;
+
+const variants: { name: string; template: TemplateResult }[] = [
+  { name: 'radio-button', template: radioButtons() },
+  { name: 'radio-button-panel', template: radioButtonPanels() },
+];
+
+describe(`sbb-radio-button-group`, () => {
+  describeViewports({ viewports: ['small', 'medium'] }, () => {
+    describeEach(cases, ({ orientation, size, disabled }) => {
+      for (const variant of variants) {
+        for (const state of [visualDiffDefault, visualDiffFocus]) {
+          (disabled && state === visualDiffFocus ? it.skip : it)(
+            `${variant.name} ${state.name}`,
+            state.with(async (setup) => {
+              await setup.withFixture(html`
+                <sbb-radio-button-group
+                  orientation=${orientation}
+                  size=${size}
+                  ?disabled=${disabled}
+                  value="Value one"
+                >
+                  ${variant.template}
+                </sbb-radio-button-group>
+              `);
+            }),
+          );
+        }
+      }
+    });
+    for (const variant of variants) {
+      it(
+        `allow-empty-selection=true with ${variant.name}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-radio-button-group allow-empty-selection>
+              ${variant.template}
+            </sbb-radio-button-group>`,
+          );
+        }),
+      );
+    }
+
+    for (const variant of ['vertical', 'horizontal']) {
+      it(
+        `error message ${variant}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(
+            html`<sbb-radio-button-group allow-empty-selection orientation=${variant}>
+              ${variants[0].template}
+              <sbb-form-error slot="error">This is a required field.</sbb-form-error>
+            </sbb-radio-button-group>`,
+          );
+        }),
+      );
+    }
+  });
+});
diff --git a/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts b/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
new file mode 100644
index 0000000000..514561da7f
--- /dev/null
+++ b/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
@@ -0,0 +1,114 @@
+import { html } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../../icon.js';
+import '../radio-button-panel.js';
+
+const cases = {
+  checked: [true, false],
+  disabled: [false, true],
+  size: ['m', 's'],
+};
+
+describe(`sbb-radio-button-panel`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    describeEach(cases, ({ checked, disabled, size }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button-panel ?checked=${checked} ?disabled=${disabled} size=${size}>
+              Value
+              <span slot="subtext">Subtext</span>
+              <span slot="suffix" style="margin-inline-start: auto;">
+                <span style="display:flex;align-items:center;">
+                  <sbb-icon
+                    name="diamond-small"
+                    style="margin-inline: var(--sbb-spacing-fixed-2x);"
+                    data-namespace="default"
+                    role="img"
+                    aria-hidden="true"
+                  ></sbb-icon>
+                  <span class="sbb-text-${size} sbb-text--bold"> CHF 40.00 </span>
+                </span>
+              </span>
+            </sbb-radio-button-panel>
+          `);
+        }),
+      );
+    });
+
+    it(
+      'color=milk',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-radio-button-panel checked color="milk">
+            Value
+            <span slot="subtext">Subtext</span>
+            <span slot="suffix" style="margin-inline-start: auto;">
+              <span style="display:flex;align-items:center;">
+                <sbb-icon
+                  name="diamond-small"
+                  style="margin-inline: var(--sbb-spacing-fixed-2x);"
+                  data-namespace="default"
+                  role="img"
+                  aria-hidden="true"
+                ></sbb-icon>
+                <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
+              </span>
+            </span>
+          </sbb-radio-button-panel>
+        `);
+      }),
+    );
+
+    for (const color of ['white', 'milk']) {
+      it(
+        `color=${color} borderless=true`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button-panel borderless color=${color}>
+              Value
+              <span slot="subtext">Subtext</span>
+              <span slot="suffix" style="margin-inline-start: auto;">
+                <span style="display:flex;align-items:center;">
+                  <sbb-icon
+                    name="diamond-small"
+                    style="margin-inline: var(--sbb-spacing-fixed-2x);"
+                  ></sbb-icon>
+                  <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
+                </span>
+              </span>
+            </sbb-radio-button-panel>
+          `);
+        }),
+      );
+    }
+
+    it(
+      'with bold label',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(
+          html` <sbb-radio-button-panel>
+            <span class="sbb-text--bold">Value</span>
+            <span slot="subtext">Subtext</span>
+            <span slot="suffix" style="margin-inline-start: auto;">
+              <span style="display:flex;align-items:center;">
+                <sbb-icon
+                  name="diamond-small"
+                  style="margin-inline: var(--sbb-spacing-fixed-2x);"
+                  data-namespace="default"
+                  role="img"
+                  aria-hidden="true"
+                ></sbb-icon>
+                <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
+              </span>
+            </span>
+          </sbb-radio-button-panel>`,
+        );
+      }),
+    );
+    // Focus state is tested in the radio-button-group
+  });
+});
diff --git a/src/elements/radio-button/radio-button/radio-button.visual.spec.ts b/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
new file mode 100644
index 0000000000..fabda73fb3
--- /dev/null
+++ b/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
@@ -0,0 +1,43 @@
+import { html, nothing } from 'lit';
+
+import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
+
+import '../radio-button.js';
+
+const cases = {
+  size: ['m', 's'],
+  checked: [true, false],
+  disabled: [false, true],
+  bold: [false, true],
+};
+
+const longLabel =
+  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
+
+describe(`sbb-radio-button`, () => {
+  describeViewports({ viewports: ['zero', 'medium'] }, () => {
+    describeEach(cases, ({ size, checked, disabled, bold }) => {
+      it(
+        visualDiffDefault.name,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-radio-button ?checked=${checked} ?disabled=${disabled} size=${size}>
+              <span class=${bold ? 'sbb-text--bold' : nothing}>Value</span>
+            </sbb-radio-button>
+          `);
+        }),
+      );
+    });
+
+    it(
+      'long label',
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <sbb-radio-button checked> ${longLabel} </sbb-radio-button>
+        `);
+      }),
+    );
+
+    // Focus state is tested in the radio-button-group
+  });
+});

From 30f85273775a4ff4b3969e166210d4072766fec7 Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Tue, 9 Jul 2024 10:54:31 +0200
Subject: [PATCH 2/3] fix: review comments

---
 .../radio-button-group.visual.spec.ts         | 53 ++++++-------
 .../radio-button-panel.visual.spec.ts         | 75 +++----------------
 .../radio-button/radio-button.visual.spec.ts  |  7 +-
 3 files changed, 38 insertions(+), 97 deletions(-)

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
index 9ace550450..d0be43aff7 100644
--- a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
+++ b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
@@ -1,5 +1,4 @@
 import { html, type TemplateResult } from 'lit';
-import { styleMap, type StyleInfo } from 'lit/directives/style-map.js';
 
 import {
   describeEach,
@@ -19,19 +18,11 @@ const cases = {
   size: ['m', 's'],
 };
 
-const suffixStyle: Readonly<StyleInfo> = {
-  display: 'flex',
-  alignItems: 'center',
-  marginInline: 'var(--sbb-spacing-fixed-2x)',
-};
-
 const suffixAndSubtext = (): TemplateResult => html`
   <span slot="subtext">Subtext</span>
-  <span slot="suffix" style="margin-inline-start: auto;">
-    <span style=${styleMap(suffixStyle)}>
-      <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
-      <span class="sbb-text-m sbb-text--bold">CHF 8.00</span>
-    </span>
+  <span slot="suffix" style="margin-inline-start: auto; display:flex; align-items:center;">
+    <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
+    <span class="sbb-text-m sbb-text--bold">CHF 8.00</span>
   </span>
   <sbb-card-badge>%</sbb-card-badge>
 `;
@@ -57,23 +48,27 @@ describe(`sbb-radio-button-group`, () => {
   describeViewports({ viewports: ['small', 'medium'] }, () => {
     describeEach(cases, ({ orientation, size, disabled }) => {
       for (const variant of variants) {
-        for (const state of [visualDiffDefault, visualDiffFocus]) {
-          (disabled && state === visualDiffFocus ? it.skip : it)(
-            `${variant.name} ${state.name}`,
-            state.with(async (setup) => {
-              await setup.withFixture(html`
-                <sbb-radio-button-group
-                  orientation=${orientation}
-                  size=${size}
-                  ?disabled=${disabled}
-                  value="Value one"
-                >
-                  ${variant.template}
-                </sbb-radio-button-group>
-              `);
-            }),
-          );
-        }
+        describe(variant.name, () => {
+          for (const state of [visualDiffDefault, visualDiffFocus]) {
+            if (!(disabled && state === visualDiffFocus)) {
+              it(
+                state.name,
+                state.with(async (setup) => {
+                  await setup.withFixture(html`
+                    <sbb-radio-button-group
+                      orientation=${orientation}
+                      size=${size}
+                      ?disabled=${disabled}
+                      value="Value one"
+                    >
+                      ${variant.template}
+                    </sbb-radio-button-group>
+                  `);
+                }),
+              );
+            }
+          }
+        });
       }
     });
     for (const variant of variants) {
diff --git a/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts b/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
index 514561da7f..2624163107 100644
--- a/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
+++ b/src/elements/radio-button/radio-button-panel/radio-button-panel.visual.spec.ts
@@ -1,4 +1,4 @@
-import { html } from 'lit';
+import { html, type TemplateResult } from 'lit';
 
 import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
 
@@ -11,6 +11,13 @@ const cases = {
   size: ['m', 's'],
 };
 
+const suffixAndSubtext = (size: 's' | 'm' = 'm'): TemplateResult =>
+  html`<span slot="subtext">Subtext</span>
+    <span slot="suffix" style="margin-inline-start: auto; display:flex; align-items:center;">
+      <sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
+      <span class="sbb-text-${size} sbb-text--bold"> CHF 40.00 </span>
+    </span>`;
+
 describe(`sbb-radio-button-panel`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     describeEach(cases, ({ checked, disabled, size }) => {
@@ -19,20 +26,7 @@ describe(`sbb-radio-button-panel`, () => {
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-radio-button-panel ?checked=${checked} ?disabled=${disabled} size=${size}>
-              Value
-              <span slot="subtext">Subtext</span>
-              <span slot="suffix" style="margin-inline-start: auto;">
-                <span style="display:flex;align-items:center;">
-                  <sbb-icon
-                    name="diamond-small"
-                    style="margin-inline: var(--sbb-spacing-fixed-2x);"
-                    data-namespace="default"
-                    role="img"
-                    aria-hidden="true"
-                  ></sbb-icon>
-                  <span class="sbb-text-${size} sbb-text--bold"> CHF 40.00 </span>
-                </span>
-              </span>
+              Value ${suffixAndSubtext(size as 's' | 'm')}
             </sbb-radio-button-panel>
           `);
         }),
@@ -44,20 +38,7 @@ describe(`sbb-radio-button-panel`, () => {
       visualDiffDefault.with(async (setup) => {
         await setup.withFixture(html`
           <sbb-radio-button-panel checked color="milk">
-            Value
-            <span slot="subtext">Subtext</span>
-            <span slot="suffix" style="margin-inline-start: auto;">
-              <span style="display:flex;align-items:center;">
-                <sbb-icon
-                  name="diamond-small"
-                  style="margin-inline: var(--sbb-spacing-fixed-2x);"
-                  data-namespace="default"
-                  role="img"
-                  aria-hidden="true"
-                ></sbb-icon>
-                <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
-              </span>
-            </span>
+            Value ${suffixAndSubtext()}
           </sbb-radio-button-panel>
         `);
       }),
@@ -69,46 +50,12 @@ describe(`sbb-radio-button-panel`, () => {
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-radio-button-panel borderless color=${color}>
-              Value
-              <span slot="subtext">Subtext</span>
-              <span slot="suffix" style="margin-inline-start: auto;">
-                <span style="display:flex;align-items:center;">
-                  <sbb-icon
-                    name="diamond-small"
-                    style="margin-inline: var(--sbb-spacing-fixed-2x);"
-                  ></sbb-icon>
-                  <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
-                </span>
-              </span>
+              Value ${suffixAndSubtext()}
             </sbb-radio-button-panel>
           `);
         }),
       );
     }
-
-    it(
-      'with bold label',
-      visualDiffDefault.with(async (setup) => {
-        await setup.withFixture(
-          html` <sbb-radio-button-panel>
-            <span class="sbb-text--bold">Value</span>
-            <span slot="subtext">Subtext</span>
-            <span slot="suffix" style="margin-inline-start: auto;">
-              <span style="display:flex;align-items:center;">
-                <sbb-icon
-                  name="diamond-small"
-                  style="margin-inline: var(--sbb-spacing-fixed-2x);"
-                  data-namespace="default"
-                  role="img"
-                  aria-hidden="true"
-                ></sbb-icon>
-                <span class="sbb-text-m sbb-text--bold"> CHF 40.00 </span>
-              </span>
-            </span>
-          </sbb-radio-button-panel>`,
-        );
-      }),
-    );
     // Focus state is tested in the radio-button-group
   });
 });
diff --git a/src/elements/radio-button/radio-button/radio-button.visual.spec.ts b/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
index fabda73fb3..87b24bc5ad 100644
--- a/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
+++ b/src/elements/radio-button/radio-button/radio-button.visual.spec.ts
@@ -1,4 +1,4 @@
-import { html, nothing } from 'lit';
+import { html } from 'lit';
 
 import { describeEach, describeViewports, visualDiffDefault } from '../../core/testing/private.js';
 
@@ -8,7 +8,6 @@ const cases = {
   size: ['m', 's'],
   checked: [true, false],
   disabled: [false, true],
-  bold: [false, true],
 };
 
 const longLabel =
@@ -16,13 +15,13 @@ const longLabel =
 
 describe(`sbb-radio-button`, () => {
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
-    describeEach(cases, ({ size, checked, disabled, bold }) => {
+    describeEach(cases, ({ size, checked, disabled }) => {
       it(
         visualDiffDefault.name,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(html`
             <sbb-radio-button ?checked=${checked} ?disabled=${disabled} size=${size}>
-              <span class=${bold ? 'sbb-text--bold' : nothing}>Value</span>
+              Value
             </sbb-radio-button>
           `);
         }),

From d3c0e8dff4901f8346aa0820977d774da256377f Mon Sep 17 00:00:00 2001
From: Mario Castigliano <mario.castigliano@finconsgroup.com>
Date: Tue, 9 Jul 2024 13:03:04 +0200
Subject: [PATCH 3/3] fix: review comments part two

---
 .../radio-button-group.visual.spec.ts         | 27 +++++++++++++++----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
index d0be43aff7..93971675fc 100644
--- a/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
+++ b/src/elements/radio-button/radio-button-group/radio-button-group.visual.spec.ts
@@ -84,18 +84,35 @@ describe(`sbb-radio-button-group`, () => {
       );
     }
 
-    for (const variant of ['vertical', 'horizontal']) {
+    for (const variant of variants) {
       it(
-        `error message ${variant}`,
+        `horizontal-from=medium with ${variant.name}`,
         visualDiffDefault.with(async (setup) => {
           await setup.withFixture(
-            html`<sbb-radio-button-group allow-empty-selection orientation=${variant}>
-              ${variants[0].template}
-              <sbb-form-error slot="error">This is a required field.</sbb-form-error>
+            html`<sbb-radio-button-group orientation="vertical" horizontal-from="medium">
+              ${variant.template}
             </sbb-radio-button-group>`,
           );
         }),
       );
     }
+
+    for (const variant of variants) {
+      describe(variant.name, () => {
+        for (const orientation of ['vertical', 'horizontal']) {
+          it(
+            `error message orientation=${orientation}`,
+            visualDiffDefault.with(async (setup) => {
+              await setup.withFixture(
+                html`<sbb-radio-button-group allow-empty-selection orientation=${orientation}>
+                  ${variant.template}
+                  <sbb-form-error slot="error">This is a required field.</sbb-form-error>
+                </sbb-radio-button-group>`,
+              );
+            }),
+          );
+        }
+      });
+    }
   });
 });