@madgex/design-system 14.3.1 → 14.4.1

package/src/components/accordion/_template.njk

@@ -1,39 +1,41 @@
 {%- from "../icons/_macro.njk" import MdsIcon -%}
 
-<details
-  class="mds-accordion
-  {%- if params.nonClosing %} mds-accordion--non-closing{% endif -%}
-  {%- if params.leftAligned %} mds-accordion--left-aligned{% endif -%}
-  {%- if params.breakpoint %} mds-accordion--breakpoint{% endif -%}
-  {%- if params.contentFirst %} mds-accordion--content-first{% endif -%}"
+<mds-accordion>
+  <details
+    class="mds-accordion
+    {%- if params.nonClosing %} mds-accordion--non-closing{% endif -%}
+    {%- if params.leftAligned %} mds-accordion--left-aligned{% endif -%}
+    {%- if params.breakpoint %} mds-accordion--breakpoint{% endif -%}
+    {%- if params.contentFirst %} mds-accordion--content-first{% endif -%}"
 
-  {%- if params.breakpoint %} data-bp="{{ params.breakpoint }}"{% endif -%}
-  {%- if params.startsOpen %} open{% endif -%}
->
-  <summary class="mds-button mds-button--plain mds-padding-x-b0 {{ params.labelClasses }}">
-    {%- if not params.noIcon -%}
-      {{- MdsIcon({ iconName: params.icon | default('triangle-right'), classes: "mds-accordion__icon" }) -}}
-      {{- MdsIcon({ iconName: params.iconOpen | default('triangle-down'), classes: "mds-accordion__icon--open" }) -}}
-    {%- endif -%}
-    <span class="mds-accordion__label">{{ params.label | safe }}</span>{#
-    #}<span class="mds-accordion__label--open">{{ params.labelOpen | default(params.label) | safe }}</span>
-  </summary>
-
-  <div data-test="accordion-content">
-    {{- caller() -}}
-  </div>
-
-  {%- if params.contentFirst -%}
-    <button
-      type="button"
-      class="mds-accordion__label mds-button mds-button--plain mds-padding-x-b0 {{ params.labelClasses }}"
-      aria-expanded="true"
-    >
+    {%- if params.breakpoint %} data-bp="{{ params.breakpoint }}"{% endif -%}
+    {%- if params.startsOpen %} open{% endif -%}
+  >
+    <summary class="mds-button mds-button--plain mds-padding-x-b0 {{ params.labelClasses }}">
       {%- if not params.noIcon -%}
-        {{- MdsIcon({ iconName: params.iconOpen | default('triangle-up'), classes: "mds-accordion__icon--open" }) -}}
+        {{- MdsIcon({ iconName: params.icon | default('triangle-right'), classes: "mds-accordion__icon" }) -}}
+        {{- MdsIcon({ iconName: params.iconOpen | default('triangle-down'), classes: "mds-accordion__icon--open" }) -}}
       {%- endif -%}
-      {{- params.labelOpen | default(params.label) -}}
-    </button>
-  {%- endif -%}
+      <span class="mds-accordion__label">{{ params.label | safe }}</span>{#
+      #}<span class="mds-accordion__label--open">{{ params.labelOpen | default(params.label) | safe }}</span>
+    </summary>
+
+    <div data-test="accordion-content">
+      {{- caller() -}}
+    </div>
+
+    {%- if params.contentFirst -%}
+      <button
+        type="button"
+        class="mds-accordion__label mds-accordion__close-button mds-button mds-button--plain mds-padding-x-b0 {{ params.labelClasses }}"
+        aria-expanded="true"
+      >
+        {%- if not params.noIcon -%}
+          {{- MdsIcon({ iconName: params.iconOpen | default('triangle-up'), classes: "mds-accordion__icon--open" }) -}}
+        {%- endif -%}
+        {{- params.labelOpen | default(params.label) -}}
+      </button>
+    {%- endif -%}
 
-</details>
+  </details>
+</mds-accordion>

package/src/components/accordion/accordion.config.js

@@ -2,85 +2,4 @@ module.exports = {
   title: 'Accordion',
   label: 'Accordion',
   status: 'ready',
-  context: {
-    name: 'Default',
-    label: 'View more categories',
-    labelOpen: 'View less categories',
-    content:
-      '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
-  },
-  variants: [
-    {
-      name: 'Alternative icons',
-      context: {
-        name: 'Alt Icons',
-        label: 'View more options',
-        labelOpen: 'View less options',
-        icon: 'plus-small',
-        iconOpen: 'minus',
-        leftAligned: true,
-        content:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
-      },
-    },
-    {
-      name: 'Trigger html tag',
-      context: {
-        name: 'Trigger html tag',
-        label: 'Lorem ipsum',
-        labelClasses: 'mds-font-s2',
-        content:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
-      },
-    },
-    {
-      name: 'Content above closing label',
-      context: {
-        name: 'Content above closing label',
-        label: 'Read more...',
-        labelOpen: 'Read less',
-        noIcon: true,
-        contentFirst: true,
-        content: `<ul>
-            <li><a href="https://www.example.com">Link 1</a></li>
-            <li><a href="https://www.example.com">Link 2</a></li>
-            <li><a href="https://www.example.com">Link 3</a></li>
-            <li><a href="https://www.example.com">Link 4</a></li>
-          </ul>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. Etiam semper tempor erat, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>`,
-      },
-    },
-    {
-      name: 'Non Closing',
-      context: {
-        name: 'Non Closing',
-        label: 'View more options',
-        nonClosing: true,
-        content:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. <a href="#">Etiam semper tempor erat</a>, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
-      },
-    },
-    {
-      name: 'Mobile Only',
-      context: {
-        name: 'Mobile Only',
-        label: 'View more categories',
-        labelOpen: 'View less categories',
-        breakpoint: '600px',
-        content:
-          '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
-      },
-    },
-    {
-      name: 'Starts expanded',
-      context: {
-        name: 'Starts expanded',
-        label: 'View more categories',
-        labelOpen: 'View less categories',
-        startsOpen: true,
-        content:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ligula erat, dignissim non sollicitudin ut, sagittis a sapien. Quisque eget arcu sed nulla tincidunt eleifend. Maecenas sit amet velit elit. Maecenas elementum venenatis sapien sit amet elementum. Pellentesque id mauris quis tortor suscipit posuere. Donec eu consectetur tortor. Mauris id scelerisque quam. Sed scelerisque ut est quis sollicitudin. <a href="#">Etiam semper tempor erat</a>, sed rhoncus ex malesuada non. Donec eu pellentesque odio. Vestibulum et suscipit risus, luctus semper nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu est ac libero blandit egestas ac id tellus. Suspendisse pulvinar viverra ex, a varius ligula commodo at. Vivamus dignissim neque vitae est ultrices lobortis. Cras vel pulvinar erat.</p>',
-      },
-    },
-  ],
 };

package/src/components/accordion/accordion.js

@@ -1,41 +1,54 @@
-/* eslint-disable no-param-reassign */
-const accordionBreakpointClass = 'mds-accordion--breakpoint';
-const accordionLabelClass = 'mds-accordion__label';
-
-const accordion = {
-  init: () => {
-    // Breakpoint accordions
-    const breakpointAccordions = document.querySelectorAll(`.${accordionBreakpointClass}`);
-    const screenWidth = window.innerWidth;
-
-    breakpointAccordions.forEach((accordionElm) => {
-      const isAccordion = accordion.checkBreakpoint(accordionElm, screenWidth);
-
-      if (!isAccordion) {
-        accordionElm.open = true;
-        accordionElm.querySelector('summary').style.display = 'none';
-      }
-    });
-
-    const accordionLabels = document.querySelectorAll(`.${accordionLabelClass}`);
-
-    accordionLabels.forEach((accordionLabel) => {
-      accordionLabel.addEventListener('click', ({ target }) => {
-        const details = target.closest('details');
-        const label = details.querySelector('summary');
-
-        details.open = false;
-        label.focus();
-      });
-    });
-  },
-
-  checkBreakpoint: (element, screenWidth) => {
-    let breakpoint = 0;
-
-    if (element.dataset.bp) {
-      const breakpointValue = element.dataset.bp.replace(/\D/g, '');
-      const breakpointUnit = element.dataset.bp.replace(/[0-9]/g, '');
+export class MdsAccordion extends HTMLElement {
+  static accordionBreakpointClass = 'mds-accordion--breakpoint';
+  static accordionCloseButtonClass = 'mds-accordion__close-button';
+  #controller;
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.#controller = new AbortController();
+    // TODO: use an Observer or Listener to track window breakpoint? Or a CSS test of some kind?
+    const isBreakpointAccordion = this.#details.classList.contains(MdsAccordion.accordionBreakpointClass);
+    if (isBreakpointAccordion && !this.#useAsAccordionBasedOnBreakpoint()) {
+      this.#details.open = true;
+      this.#summary.style.display = 'none';
+    } else {
+      this.#summary.style.display = '';
+    }
+    if (this.#closeButton) {
+      this.#closeButton.addEventListener('click', this.#onClickCloseButton, { signal: this.#controller.signal });
+    }
+  }
+  disconnectedCallback() {
+    this.#controller?.abort();
+  }
+
+  get #details() {
+    return this.querySelector('details');
+  }
+
+  get #summary() {
+    return this.querySelector('summary');
+  }
+
+  get #closeButton() {
+    return this.querySelector(`.${MdsAccordion.accordionCloseButtonClass}`);
+  }
+
+  #onClickCloseButton = () => {
+    this.#details.open = false;
+    this.#summary.focus();
+  };
+
+  /**  */
+  #useAsAccordionBasedOnBreakpoint() {
+    let breakpoint;
+
+    if (this.#details.dataset.bp) {
+      const breakpointValue = this.#details.dataset.bp.replace(/\D/g, '');
+      const breakpointUnit = this.#details.dataset.bp.replace(/[0-9]/g, '');
       let fontSize;
       let conversionValue;
 
@@ -60,7 +73,7 @@ const accordion = {
           return true;
       }
 
-      if (screenWidth > breakpoint) {
+      if (window.innerWidth > breakpoint) {
         return false;
       }
 
@@ -68,7 +81,5 @@ const accordion = {
     }
 
     return true;
-  },
-};
-
-export default accordion;
+  }
+}

package/src/components/accordion/accordion.njk

@@ -1,24 +1 @@
-{% from "./accordion/_macro.njk" import MdsAccordion %}
-
-<h3>{{ name }}</h3>
-<div>
-  {% call MdsAccordion({
-    label: label,
-    labelOpen: labelOpen,
-    labelClasses: labelClasses,
-    icon: icon,
-    iconOpen: iconOpen,
-    noIcon: noIcon,
-    startsOpen: startsOpen,
-    nonClosing: nonClosing,
-    breakpoint: breakpoint,
-    leftAligned: leftAligned,
-    contentFirst: contentFirst
-  }) -%}
-    {# 
-      <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
-      <div> My Accordion Content </div>
-     #}
-    {{ content | safe }}
-  {%- endcall %}
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/components/accordion/accordion.spec.js

@@ -0,0 +1,170 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import { MdsAccordion } from './accordion.js';
+
+if (!customElements.get('mds-accordion')) {
+  customElements.define('mds-accordion', MdsAccordion);
+}
+
+function mountAccordion({ open = false, breakpoint = false, bpValue, hasCloseButton = false } = {}) {
+  const container = document.createElement('div');
+  const bpClass = breakpoint ? ` ${MdsAccordion.accordionBreakpointClass}` : '';
+  const bpAttr = bpValue ? ` data-bp="${bpValue}"` : '';
+  const closeButtonHtml = hasCloseButton
+    ? `<button class="${MdsAccordion.accordionCloseButtonClass}">Close</button>`
+    : '';
+
+  container.innerHTML = `
+    <mds-accordion>
+      <details class="mds-accordion${bpClass}"${bpAttr}${open ? ' open' : ''}>
+        <summary>Accordion title</summary>
+        <div class="mds-accordion__content">
+          <p>Content</p>
+          ${closeButtonHtml}
+        </div>
+      </details>
+    </mds-accordion>
+  `;
+  document.body.appendChild(container);
+
+  const accordion = container.querySelector('mds-accordion');
+  const details = container.querySelector('details');
+  const summary = container.querySelector('summary');
+  const closeButton = container.querySelector(`.${MdsAccordion.accordionCloseButtonClass}`);
+
+  return { container, accordion, details, summary, closeButton };
+}
+
+describe('MdsAccordion', () => {
+  let container;
+
+  afterEach(() => {
+    container?.remove();
+    vi.restoreAllMocks();
+  });
+
+  describe('connectedCallback', () => {
+    it('sets summary display to empty string for a standard accordion', () => {
+      ({ container } = mountAccordion());
+      const summary = container.querySelector('summary');
+      expect(summary.style.display).toBe('');
+    });
+
+    it('opens details and hides summary when breakpoint accordion is above breakpoint', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200);
+      ({ container } = mountAccordion({ breakpoint: true, bpValue: '768px' }));
+      const details = container.querySelector('details');
+      const summary = container.querySelector('summary');
+
+      expect(details.open).toBe(true);
+      expect(summary.style.display).toBe('none');
+    });
+
+    it('keeps accordion collapsed when breakpoint accordion is below breakpoint', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(500);
+      ({ container } = mountAccordion({ breakpoint: true, bpValue: '768px' }));
+      const details = container.querySelector('details');
+      const summary = container.querySelector('summary');
+
+      expect(details.open).toBe(false);
+      expect(summary.style.display).toBe('');
+    });
+  });
+
+  describe('close button', () => {
+    it('closes the details and focuses summary when close button is clicked', () => {
+      ({ container } = mountAccordion({ open: true, hasCloseButton: true }));
+      const details = container.querySelector('details');
+      const summary = container.querySelector('summary');
+      const closeButton = container.querySelector(`.${MdsAccordion.accordionCloseButtonClass}`);
+
+      vi.spyOn(summary, 'focus');
+      closeButton.click();
+
+      expect(details.open).toBe(false);
+      expect(summary.focus).toHaveBeenCalled();
+    });
+  });
+
+  describe('disconnectedCallback', () => {
+    it('removes event listeners when disconnected', () => {
+      ({ container } = mountAccordion({ open: true, hasCloseButton: true }));
+      const accordion = container.querySelector('mds-accordion');
+      const details = container.querySelector('details');
+      const closeButton = container.querySelector(`.${MdsAccordion.accordionCloseButtonClass}`);
+
+      // Disconnect the element
+      accordion.remove();
+
+      // Re-append the inner DOM to test that the listener was removed
+      document.body.appendChild(container);
+      details.open = true;
+      closeButton.click();
+
+      // details should still be open because the listener was aborted
+      expect(details.open).toBe(true);
+    });
+
+    it('creates a fresh AbortController on reconnect', () => {
+      ({ container } = mountAccordion({ open: true, hasCloseButton: true }));
+      const accordion = container.querySelector('mds-accordion');
+      const details = container.querySelector('details');
+      const closeButton = container.querySelector(`.${MdsAccordion.accordionCloseButtonClass}`);
+
+      // Disconnect then reconnect
+      accordion.remove();
+      container.appendChild(accordion);
+
+      // The close button listener should work again
+      details.open = true;
+      closeButton.click();
+      expect(details.open).toBe(false);
+    });
+  });
+
+  describe('breakpoint handling', () => {
+    afterEach(() => {
+      vi.restoreAllMocks();
+    });
+
+    it('handles em breakpoint units', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200);
+      vi.spyOn(window, 'getComputedStyle').mockReturnValue({ 'font-size': '16px' });
+
+      ({ container } = mountAccordion({ breakpoint: true, bpValue: '48em' }));
+      const details = container.querySelector('details');
+
+      // 48 * 16 = 768, window is 1200 > 768 so should open
+      expect(details.open).toBe(true);
+    });
+
+    it('handles rem breakpoint units', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200);
+      vi.spyOn(window, 'getComputedStyle').mockReturnValue({ 'font-size': '16px' });
+
+      ({ container } = mountAccordion({ breakpoint: true, bpValue: '48rem' }));
+      const details = container.querySelector('details');
+
+      // 48 * 16 = 768, window is 1200 > 768 so should open
+      expect(details.open).toBe(true);
+    });
+
+    it('uses accordion behaviour for unknown units', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200);
+      ({ container } = mountAccordion({ breakpoint: true, bpValue: '768vw' }));
+      const details = container.querySelector('details');
+
+      // Unknown unit defaults to treating as accordion
+      expect(details.open).toBe(false);
+    });
+
+    it('uses accordion behaviour when no data-bp attribute is present on breakpoint accordion', () => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200);
+      ({ container } = mountAccordion({ breakpoint: true }));
+      const details = container.querySelector('details');
+      const summary = container.querySelector('summary');
+
+      expect(details.open).toBe(false);
+      expect(summary.style.display).toBe('');
+    });
+  });
+});

package/src/components/button/button.config.js

@@ -1,45 +1,4 @@
 module.exports = {
   title: 'Buttons',
-  status: 'wip',
-  context: {
-    items: [
-      {
-        href: 'http://madgex.com',
-        text: 'Link button 1',
-      },
-      {
-        href: 'http://madgex.com',
-        text: 'Link Plain button 2',
-        classes: 'mds-button--plain',
-      },
-      {
-        text: 'Plain button',
-        classes: 'mds-button--plain',
-      },
-      {
-        text: 'Small button',
-        classes: 'mds-button--small',
-      },
-      {
-        text: 'Large button',
-        classes: 'mds-button--large',
-      },
-      {
-        text: 'Full width example',
-        classes: 'mds-width-full mds-width-md-auto',
-      },
-      {
-        text: 'Neutral',
-        classes: 'mds-button--neutral',
-      },
-      {
-        text: 'Prevent double submit',
-        classes: 'js-mds-button-double-submit',
-      },
-      {
-        text: 'With attributes',
-        attributes: { attributed: 'yes', 'other-thing': 'also' },
-      },
-    ],
-  },
+  status: 'ready',
 };

package/src/components/button/button.njk

@@ -1,14 +1 @@
-
-{% from "./button/_macro.njk" import MdsButton %}
-
-{% for item in items %}
-  {% call MdsButton({
-    href: item.href,
-    classes: item.classes,
-    attributes: item.attributes
-  }) -%}
-    {{ item.text }}
-  {%- endcall %}
-{% endfor %}
-
-
+<a href="/storybook/" target="_top">Moved to Storybook</a>

package/src/components/card/card.config.js

@@ -2,97 +2,4 @@ module.exports = {
   title: 'Card',
   label: 'Card',
   status: 'ready',
-  context: {
-    fractalLabel: 'Card',
-    inList: false,
-    classes: '',
-    content: '<h4>Card Title</h4><p>paragraph</p>',
-    id: 'default',
-  },
-  variants: [
-    {
-      name: 'card-in-list',
-      context: {
-        fractalLabel: 'Card used in a list',
-        inList: true,
-        classes: '',
-        content: '<h4>Card used in list (li instead of div)</h4><p>paragraph</p>',
-        id: 'in-list',
-      },
-    },
-    {
-      name: 'card-with-highlight',
-      context: {
-        fractalLabel: 'Card with background',
-        inList: false,
-        classes: 'mds-card--highlighted',
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-background',
-      },
-    },
-    {
-      name: 'card-with-custom-styling',
-      context: {
-        fractalLabel: 'Card with custom styling',
-        inList: false,
-        classes: 'mds-card--1',
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-custom-styling',
-      },
-    },
-    {
-      name: 'card-with-badges',
-      context: {
-        fractalLabel: 'Card with badges',
-        inList: false,
-        content: '<h4>Card Title</h4><p>paragraph</p>',
-        id: 'with-badge',
-        badges: {
-          left: [
-            {
-              label: 'Top Job',
-            },
-          ],
-          right: [
-            {
-              label: 'Approved Employer',
-              styleId: '1',
-            },
-            {
-              label: 'New',
-              styleId: 'new',
-            },
-          ],
-        },
-      },
-    },
-    {
-      name: 'link-card',
-      context: {
-        fractalLabel: 'Card with a link',
-        link: {
-          href: 'https://www.google.com',
-          title: 'Card with link',
-          containerElement: 'h3',
-        },
-        classes: '',
-        content: '<p>content</p><p>content</p><p>content</p><p>content</p>',
-        id: 'with link',
-      },
-    },
-    {
-      name: 'list-link-card',
-      context: {
-        fractalLabel: 'Card with link used in a list',
-        inList: true,
-        link: {
-          href: 'https://www.google.com',
-          title: 'Card with link',
-        },
-        classes: '',
-        content: '<p>content</p><p>content</p><p>content</p><p>content</p>',
-        id: 'in-list',
-      },
-    },
-  ],
 };

package/src/components/card/card.njk

@@ -1,22 +1 @@
-{% from "./card/_macro.njk" import MdsCard %}
-
-<div class="mds-margin-bottom-b5">
-  <h2>{{ fractalLabel }}</h2>
-  {%- if inList -%}
-    <ul>
-  {%- endif -%}
-
-  {% call MdsCard({
-    inList: inList,
-    classes: classes,
-    id: id,
-    badges: badges,
-    link: link
-  }) -%}
-  <!-- example - in normal use `safe` is discouraged as it is dangerous, and not needed -->
-  {{ content | safe }}
-  {%- endcall %}
-  {%- if inList -%}
-    </ul>
-  {%- endif -%}
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>