@madgex/design-system 14.1.0 → 14.2.0

package/src/components/consent-gate/consent-store.spec.js

@@ -0,0 +1,164 @@
+/* eslint-disable n/no-unsupported-features/node-builtins -- jsdom test env */
+// eslint-disable-next-line n/no-unpublished-import
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { has, grant, revoke, subscribe, setConsentAdapter } from './consent-store.js';
+
+const STORAGE_KEY = 'mds-consent';
+
+function resetStore() {
+  localStorage.clear();
+  setConsentAdapter(null);
+}
+
+describe('consent-store', () => {
+  beforeEach(() => {
+    resetStore();
+  });
+
+  afterEach(() => {
+    resetStore();
+  });
+
+  describe('default backend', () => {
+    it('has() is false for unknown category', () => {
+      expect(has('unknown')).toBe(false);
+    });
+
+    it('has() is true after grant', () => {
+      grant('videos');
+      expect(has('videos')).toBe(true);
+    });
+
+    it('has() is false after revoke', () => {
+      grant('videos');
+      revoke('videos');
+      expect(has('videos')).toBe(false);
+    });
+
+    it('persists to localStorage and reloads into a fresh backend', () => {
+      grant('persist-cat');
+      expect(JSON.parse(localStorage.getItem(STORAGE_KEY))).toEqual({ 'persist-cat': true });
+      setConsentAdapter(null);
+      expect(has('persist-cat')).toBe(true);
+    });
+
+    it('survives corrupt localStorage JSON when backend is recreated', () => {
+      localStorage.setItem(STORAGE_KEY, 'not-json');
+      setConsentAdapter(null);
+      expect(has('any')).toBe(false);
+    });
+
+    it('grant is idempotent (no second notification)', () => {
+      const calls = [];
+      const off = subscribe((category, granted) => calls.push({ category, granted }));
+      grant('dup');
+      grant('dup');
+      off();
+      expect(calls).toEqual([{ category: 'dup', granted: true }]);
+    });
+
+    it('revoke is idempotent', () => {
+      const calls = [];
+      const off = subscribe((category, granted) => calls.push({ category, granted }));
+      revoke('none');
+      off();
+      expect(calls).toEqual([]);
+    });
+
+    it('categories are independent', () => {
+      grant('a');
+      expect(has('a')).toBe(true);
+      expect(has('b')).toBe(false);
+    });
+  });
+
+  describe('subscribe', () => {
+    it('notified with (category, granted) on grant and revoke', () => {
+      const calls = [];
+      const off = subscribe((c, g) => calls.push([c, g]));
+      grant('c1');
+      revoke('c1');
+      off();
+      expect(calls).toEqual([
+        ['c1', true],
+        ['c1', false],
+      ]);
+    });
+
+    it('teardown stops notifications', () => {
+      const calls = [];
+      const off = subscribe((c, g) => calls.push([c, g]));
+      off();
+      grant('after');
+      expect(calls).toEqual([]);
+    });
+
+    it('multiple subscribers receive events', () => {
+      const a = [];
+      const b = [];
+      const offA = subscribe((c, g) => a.push(g));
+      const offB = subscribe((c, g) => b.push(g));
+      grant('multi');
+      offA();
+      offB();
+      expect(a).toEqual([true]);
+      expect(b).toEqual([true]);
+    });
+  });
+
+  describe('mds-consent:change window event', () => {
+    it('dispatches with detail { category, granted }', () => {
+      const spy = vi.spyOn(window, 'dispatchEvent');
+      grant('win-cat');
+      const evt = spy.mock.calls.find((args) => args[0]?.type === 'mds-consent:change')?.[0];
+      expect(evt).toBeInstanceOf(CustomEvent);
+      expect(evt.detail).toEqual({ category: 'win-cat', granted: true });
+      spy.mockRestore();
+    });
+  });
+
+  describe('setConsentAdapter', () => {
+    it('forwards module subscribe to custom adapter notifications', () => {
+      const subs = new Set();
+      /** @type {Record<string, boolean>} */
+      const state = {};
+      setConsentAdapter({
+        has: (cat) => state[cat] === true,
+        grant: (cat) => {
+          if (state[cat]) return;
+          state[cat] = true;
+          for (const fn of subs) fn(cat, true);
+        },
+        revoke: (cat) => {
+          if (!state[cat]) return;
+          delete state[cat];
+          for (const fn of subs) fn(cat, false);
+        },
+        subscribe: (fn) => {
+          subs.add(fn);
+          return () => subs.delete(fn);
+        },
+      });
+
+      const calls = [];
+      const off = subscribe((c, g) => calls.push([c, g]));
+      grant('adapter-cat');
+      expect(has('adapter-cat')).toBe(true);
+      expect(calls).toEqual([['adapter-cat', true]]);
+      off();
+    });
+
+    it('setConsentAdapter(null) restores localStorage backend', () => {
+      setConsentAdapter({
+        has: () => false,
+        grant: () => {},
+        revoke: () => {},
+        subscribe: () => () => {},
+      });
+      setConsentAdapter(null);
+      grant('back');
+      expect(has('back')).toBe(true);
+      expect(localStorage.getItem(STORAGE_KEY)).toContain('back');
+    });
+  });
+});

package/src/components/consent-gate/mds-consent-gate-standalone.js

@@ -0,0 +1,40 @@
+/**
+ * Standalone Web Component build entry — wired into `vite.config.js` as the
+ * `js/components/mds-consent-gate-standalone` rollup input. Produces a
+ * hashed, side-effectful ESM bundle that any page can load independently.
+ *
+ * Wraps `MdsConsentGate` in shadow DOM with bundled CSS. The authored heading
+ * element is re-parented into `[part="heading-wrap"]` in the shadow root by the
+ * base class. A fallback slot is appended to the shadow root so authored fallback
+ * content is projected from light DOM into the shadow tree.
+ */
+import { MdsConsentGate } from './consent-gate.js';
+// stripped DS CSS via purgecss, used as a base
+import css from './consent-gate-standalone.scss?purgecss=./consent-gate.js&inline';
+// component-specific CSS, kept in full
+import cssConsentGate from './consent-gate.scss?inline';
+
+class MdsConsentGateStandalone extends MdsConsentGate {
+  constructor(...args) {
+    super(...args);
+    const root = this.attachShadow({ mode: 'open' });
+
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
+      * { border: 0; outline: 0; padding: 0; margin: 0; box-sizing: border-box; }
+      ${css}
+      ${cssConsentGate}
+    `);
+    root.adoptedStyleSheets = [sheet];
+
+    const fallbackSlot = document.createElement('slot');
+    fallbackSlot.name = 'fallback';
+    root.append(fallbackSlot);
+  }
+}
+
+if (typeof customElements !== 'undefined' && !customElements.get('mds-consent-gate-standalone')) {
+  customElements.define('mds-consent-gate-standalone', MdsConsentGateStandalone);
+}
+
+export { grant, revoke, has, subscribe, setConsentAdapter } from './consent-store.js';

package/src/helpers/fluid-video/README.md

@@ -1,3 +1,11 @@
 ## Helpers
 
+> **Deprecated for new YouTube/Vimeo embeds.** Use the
+> [`mds-consent-gate`](../../components/consent-gate/README.md) custom element
+> instead — it loads zero third-party requests until the user opts in (VPPA),
+> handles responsive sizing internally, and exposes a privacy-enhanced iframe.
+> `mds-fluid-video` remains for non-video iframes (maps, charts, legacy
+> content) and is automatically skipped by the prose helper for any iframe
+> nested inside `mds-consent-gate`.
+
 Use the class `mds-fluid-video` wrapping the iframe from the video provider to make it responsive.

package/src/helpers/prose/prose.js

@@ -1,6 +1,11 @@
 const prose = {
   setFluidVideos: () => {
-    const elements = Array.from(document.querySelectorAll('.mds-prose iframe, .mds-prose embed, .mds-prose object'));
+    // Skip iframes that are descendants of `mds-consent-gate` — that custom
+    // element manages its own aspect-ratio/responsive sizing inside its
+    // shadow DOM, so wrapping them in `.mds-fluid-video` would double-up.
+    const elements = Array.from(
+      document.querySelectorAll('.mds-prose iframe, .mds-prose embed, .mds-prose object'),
+    ).filter((el) => !el.closest('mds-consent-gate'));
 
     elements.forEach((element) => {
       const newHtml = document.createElement('div');

package/src/js/index.js

@@ -16,6 +16,8 @@ import { MdsConditionalSection } from '../components/conditional-section/conditi
 import { MdsImageCropper } from '../components/image-cropper/image-cropper';
 import { MdsCategoryPicker } from '../components/inputs/category-picker/category-picker';
 import { MdsScrollSpy } from '../components/scroll-spy/scroll-spy';
+import { MdsConsentGate } from '../components/consent-gate/consent-gate.js';
+export { setConsentAdapter } from '../components/consent-gate/consent-gate.js';
 
 if (!window.customElements.get('mds-dropdown-nav')) {
   window.customElements.define('mds-dropdown-nav', MdsDropdownNav);
@@ -41,6 +43,9 @@ if (!window.customElements.get('mds-category-picker')) {
 if (!window.customElements.get('mds-scroll-spy')) {
   window.customElements.define('mds-scroll-spy', MdsScrollSpy);
 }
+if (!window.customElements.get('mds-consent-gate')) {
+  window.customElements.define('mds-consent-gate', MdsConsentGate);
+}
 
 const initAll = () => {
   tabs.init();

package/src/scss/components/__index.scss

@@ -21,3 +21,4 @@
 @import '../../components/media-block/media-block';
 @import '../../components/timeout-dialog/timeout-dialog';
 @import '../../components/image-cropper/image-cropper';
+@import '../../components/consent-gate/consent-gate';