@madgex/design-system 14.3.1 → 14.4.0

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,53 @@
-/* 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 = new AbortController();
+
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    // 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 +72,7 @@ const accordion = {
           return true;
       }
 
-      if (screenWidth > breakpoint) {
+      if (window.innerWidth > breakpoint) {
         return false;
       }
 
@@ -68,7 +80,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/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>

package/src/components/icons/icons.njk

@@ -1,161 +1 @@
-{# NUNJUCKS VERSION #}
-
-{% from "./icons/_macro.njk" import MdsIcon %}
-
-<h2>Different sizes</h2>
-
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--sm',
-  visuallyHiddenLabel: 'Shortlisted'
-}) }} : small (16px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--md'
-}) }} : medium (24px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--lg'
-}) }} : large (32px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xl'
-}) }} : extra large (48px)</p>
-<p>{{ MdsIcon({
-  iconName: 'star-fill',
-  classes: 'mds-icon--xxl'
-}) }} : extra extra large (72px)</p>
-
-<br><hr><br>
-
-<h2>Icon with text</h2>
-
-<p>{{- MdsIcon({
-  iconName: 'email',
-  classes: 'mds-icon--before'
-}) -}}Email me</p>
-
-<p><a href="#">Apply{{- MdsIcon({
-  iconName: 'chevron-right',
-  classes: 'mds-icon--after'
-}) -}}</a></p>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest'
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit'
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
-
-<br><hr><br>
-
-<h2>Spinner</h2>
-{{- MdsIcon({
-  iconName: 'spinner',
-  visuallyHiddenLabel: 'Loading...'
-}) -}}
-
-<br><hr><br>
-
-<h2>Has container</h2>
-{{- MdsIcon({
-  iconName: 'cross',
-  visuallyHiddenLabel: 'Error',
-  classes: 'mds-icon--md',
-  hasContainer: true,
-  containerClasses: 'mds-icon-container--circle mds-icon-container--error'
-}) -}}
-
-<br><hr><br>
-
-<h2>Icons using inline SVG</h2>
-
-<div>
-  <span>Share this job</span>
-  <ul class="mds-list mds-list--inline mds-display-inline-block">
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-facebook',
-        visuallyHiddenLabel: 'Facebook',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-twitter',
-        visuallyHiddenLabel: 'Twitter',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-linkedin',
-        visuallyHiddenLabel: 'LinkedIn',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-pinterest',
-        visuallyHiddenLabel: 'Pinterest',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-    <li class="mds-list__item">
-      <a href="#">
-      {{- MdsIcon({
-        iconName: 'social-reddit',
-        visuallyHiddenLabel: 'Reddit',
-        path: ''
-      }) -}}
-      </a>
-    </li>
-  </ul>
-</div>
+<a href="/storybook/" target="_top">Moved to Storybook</a>