From 58d52f12364cc4176fed74c39feb7fe4a34366bd Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Wed, 13 Sep 2023 08:39:51 +0200
Subject: [PATCH] fix(docs): add checkbox and radio button card code snippet
 (#1917)

---
 .changeset/fifty-spiders-own.md               |  5 +++
 .../choice-card/checkbox-card.docs.mdx        | 33 ++++++++++++-------
 .../choice-card/firefox-fallback.ts           | 18 ++++++++++
 .../choice-card/radiobutton-card.docs.mdx     | 33 ++++++++++++-------
 4 files changed, 65 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/fifty-spiders-own.md
 create mode 100644 packages/documentation/src/stories/components/choice-card/firefox-fallback.ts

diff --git a/.changeset/fifty-spiders-own.md b/.changeset/fifty-spiders-own.md
new file mode 100644
index 0000000000..29dfa04ba9
--- /dev/null
+++ b/.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.
diff --git a/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
index 0e7fa6d090..b99e088741 100644
--- a/packages/documentation/src/stories/components/choice-card/checkbox-card.docs.mdx
+++ b/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']} />
diff --git a/packages/documentation/src/stories/components/choice-card/firefox-fallback.ts b/packages/documentation/src/stories/components/choice-card/firefox-fallback.ts
new file mode 100644
index 0000000000..94640a0b61
--- /dev/null
+++ b/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;
+    }
+  }),
+);
diff --git a/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx b/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
index ef12565fe6..5253531f5c 100644
--- a/packages/documentation/src/stories/components/choice-card/radiobutton-card.docs.mdx
+++ b/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']} />