Add button-group snapshots pseudoclass variants

swisspost · Nov 6, 2023 · 200addf · 200addf
1 parent 0b87300
commit 200addf
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
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
@@ -21,6 +21,7 @@ export const ButtonGroup: Story = {
                 size: context.argTypes.size.options,
                 element: context.argTypes.element.options,
                 checked: context.argTypes.checked.options,
+                pseudoClass: ['null', 'hover', 'focus-visible'],
               }).map((args: Args) => {
                 // Substitue checked with selected when element is checkbox
                 if (args.element === 'checkbox') {

diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -1,7 +1,9 @@
 import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { BADGE } from '../../../../.storybook/constants';
+import { serializeSimulatedPseudoClass } from '../../../utils/pseudo-class';
+import { appendClass } from '../../../utils';
 
 const meta: Meta = {
   title: 'Components/Button Group',
@@ -147,14 +149,15 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
   const id = `btngroup_${context.name}_${position}`;
   const name = `btngroup_${context.name}`;
   const label = args[`label_${position}`];
+  const pseudoClassClass = serializeSimulatedPseudoClass(args.pseudoClass);
 
   switch (args.element) {
     case 'checkbox': {
       const isSelected = args.selected?.includes(position) ?? false;
       return html`
         <input
           type="checkbox"
-          class="btn-check"
+          class="btn-check${isSelected ? appendClass(pseudoClassClass) : ''}"
           id="${id}"
           autocomplete="off"
           ?checked="${isSelected}"
@@ -181,7 +184,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
       return html`
         <input
           type="radio"
-          class="btn-check"
+          class="btn-check${isChecked ? appendClass(pseudoClassClass) : ''}"
           name="${name}"
           id="${id}"
           autocomplete="off"
@@ -196,12 +199,26 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
     }
     case 'link':
       return html`
-        <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a>
+        <a
+          href="#"
+          class="${`btn ${args.size} btn-secondary${
+            index === 0 ? appendClass(pseudoClassClass) : ''
+          }`}"
+        >
+          ${label}
+        </a>
       `;
     case 'button':
     default:
       return html`
-        <button type="button" class="${`btn ${args.size} btn-secondary`}">${label}</button>
+        <button
+          type="button"
+          class="${`btn ${args.size} btn-secondary${
+            index === 0 ? appendClass(pseudoClassClass) : ''
+          }`}"
+        >
+          ${label}
+        </button>
       `;
   }
 }