fix(docs): add checkbox and radio button card code snippet (#1917)

.changeset/fifty-spiders-own.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a code snippet for patching missing `:has` selector support in Firefox in the Checkbox- and Radiobutton-Card stories.

packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx

@@ -1,6 +1,7 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as CheckboxCardStories from './checkbox-card.stories';
 import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import firefoxFallbackSnippet from './firefox-fallback.ts?raw';
 
 <Meta of={CheckboxCardStories} />
 
@@ -11,12 +12,20 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
   services.
 </div>
 
+<Canvas of={CheckboxCardStories.Default} />
+<div className="hide-col-default">
+  <Controls of={CheckboxCardStories.Default} />
+</div>
+
+## Firefox fallback
+
 <div className="alert alert-info">
-  <h2 class="h5">Firefox fallback classes</h2>
-  Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
-  the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
-</a>. As a fallback, the following states have to be mirrored on the top level element in the form
-  of classes:
+  Firefox currently does not support{' '}
+  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
+    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+  </a>
+  . As a fallback, the following states have to be mirrored on the top level element in the form of
+  classes (see below for a snippet):
   <ul>
     <li>
       <code>checked</code>
@@ -31,13 +40,13 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
       <code>is-invalid</code>
     </li>
   </ul>
-  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the fallback.
+  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the
+  fallback.
 </div>
 
-<Canvas of={CheckboxCardStories.Default} />
-<div className="hide-col-default">
-  <Controls of={CheckboxCardStories.Default} />
-</div>
+This snippet adds a global event listener to mirror the `focused` and `checked` states to the parent of the input. This fallback has to be applied as long as Firefox does not support the `:has` selector.
+
+<Source code={firefoxFallbackSnippet} dark={true} language="typescript" />
 
 ## Grouping
 
@@ -48,4 +57,4 @@ Checkbox cards can be grouped together. Use a `fieldset`/`legend` combination to
   <Controls of={CheckboxCardStories.Group} />
 </div>
 
-<StylesPackageImport components={["choice-control-card"]} />
+<StylesPackageImport components={['choice-control-card']} />

packages/documentation/src/stories/components/choice-card/firefox-fallback.ts

@@ -0,0 +1,18 @@
+['focusin', 'focusout', 'input'].forEach(t =>
+  document.addEventListener(t, e => {
+    if (!(e.target instanceof Element) || e.target.nodeName !== 'input') return;
+    const parent = e.target.parentElement;
+    if (!parent?.classList.contains('radio-button-card')) return;
+    switch (e.type) {
+      case 'focusin':
+        parent.classList.add('focused');
+        break;
+      case 'focusout':
+        parent.classList.remove('focused');
+        break;
+      case 'input':
+        parent.classList.toggle('checked', (e.target as HTMLInputElement).checked);
+        break;
+    }
+  }),
+);

packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx

@@ -1,6 +1,7 @@
-import { Canvas, Controls, Meta } from '@storybook/blocks';
+import { Meta, Canvas, Controls, Source } from '@storybook/blocks';
 import * as RadiobuttonCardStories from './radiobutton-card.stories';
 import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import firefoxFallbackSnippet from './firefox-fallback.ts?raw';
 
 <Meta of={RadiobuttonCardStories} />
 
@@ -11,12 +12,20 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
   selecting services.
 </div>
 
+<Canvas of={RadiobuttonCardStories.Default} />
+<div className="hide-col-default">
+  <Controls of={RadiobuttonCardStories.Default} />
+</div>
+
+## Firefox fallback
+
 <div className="alert alert-info">
-  <h2 class="h5">Firefox fallback classes</h2>
-  Firefox currently does not support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
-  the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
-</a>. As a fallback, the following states have to be mirrored on the top level element in the form
-  of classes:
+  Firefox currently does not support{' '}
+  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has">
+    the new <abbr title="Cascading Style Sheets">CSS</abbr> :has pseudo-selector
+  </a>
+  . As a fallback, the following states have to be mirrored on the top level element in the form of
+  classes:
   <ul>
     <li>
       <code>checked</code>
@@ -31,13 +40,13 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
       <code>is-invalid</code>
     </li>
   </ul>
-  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the fallback.
+  Check <a href="https://caniuse.com/css-has">caniuse :has()</a> to check if you still need the
+  fallback.
 </div>
 
-<Canvas of={RadiobuttonCardStories.Default} />
-<div className="hide-col-default">
-  <Controls of={RadiobuttonCardStories.Default} />
-</div>
+This snippet adds a global event listener to mirror the `focused` and `checked` states to the parent of the input. This fallback has to be applied as long as Firefox does not support the `:has` selector.
+
+<Source code={firefoxFallbackSnippet} dark={true} language="typescript" />
 
 ## Grouping
 
@@ -48,4 +57,4 @@ Radiobutton cards can be grouped together. Use a `fieldset`/`legend` combination
   <Controls of={RadiobuttonCardStories.Group} />
 </div>
 
-<StylesPackageImport components={["choice-control-card"]} />
+<StylesPackageImport components={['choice-control-card']} />