@madgex/design-system 1.23.10 → 1.24.1

package/src/components/accordion/accordion.js

@@ -0,0 +1,108 @@
+const accordionClass = 'mds-accordion';
+const accordionTriggerClass = 'mds-accordion__trigger';
+const accordionTriggerButtonClass = 'mds-accordion__trigger-button';
+const accordionExpandedClass = 'mds-accordion--expanded';
+const accordionLabelInverseData = 'data-labelinverse';
+const accordionTriggerLabelClass = 'mds-accordion__trigger-label';
+
+const accordion = {
+  init: () => {
+    const accordionList = Array.from(document.querySelectorAll(`.${accordionClass}`));
+    const screenWidth = window.innerWidth;
+
+    accordionList.forEach((element) => {
+      const isAccordion = accordion.checkBreakpoint(element, screenWidth);
+      if (isAccordion) {
+        accordion.setAccordion(element);
+      } else {
+        element.classList.add(accordionExpandedClass);
+      }
+    });
+  },
+  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, '');
+      let fontSize;
+      let conversionValue;
+
+      switch (breakpointUnit) {
+        case 'px':
+          breakpoint = breakpointValue;
+          break;
+        case 'em':
+          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
+          conversionValue = breakpointValue * parseFloat(fontSize);
+          breakpoint = conversionValue;
+          break;
+        case 'rem':
+          fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
+          conversionValue = breakpointValue * parseFloat(fontSize);
+          breakpoint = conversionValue;
+          break;
+        default:
+          return true;
+      }
+
+      if (screenWidth > breakpoint) {
+        return false;
+      }
+
+      return true;
+    }
+    return true;
+  },
+  setAccordion: (element) => {
+    const accordionId = element.id;
+    const accordionTrigger = element.querySelector(`.${accordionTriggerClass}`);
+    const accordionTriggerButton = accordion.createButton(accordionId, element);
+    accordionTrigger.classList.remove('mds-display-none');
+    accordionTrigger.innerHTML = '';
+    accordionTrigger.appendChild(accordionTriggerButton);
+
+    accordionTriggerButton.addEventListener('click', (elem) => {
+      elem.preventDefault();
+      accordion.toggleExpand(accordionTriggerButton);
+    });
+  },
+  createButton: (accordionId, element) => {
+    const accordionTriggerSpan = element.querySelector(`.${accordionTriggerClass} > span`);
+    const accordionTriggerButton = document.createElement('button');
+    accordionTriggerButton.className = accordionTriggerButtonClass;
+    accordionTriggerButton.classList.add('mds-button', 'mds-button--plain', 'mds-padding-b0');
+    accordionTriggerButton.setAttribute('id', `accordion-trigger-${accordionId}`);
+    accordionTriggerButton.setAttribute('aria-expanded', false);
+    accordionTriggerButton.setAttribute('aria-controls', `accordion-content-${accordionId}`);
+    accordionTriggerButton.append(accordionTriggerSpan);
+
+    return accordionTriggerButton;
+  },
+  switchLabel: (e) => {
+    const element = e;
+
+    if (element.dataset.labelinverse) {
+      const labelToInverse = element.textContent;
+      element.textContent = element.dataset.labelinverse;
+      element.setAttribute(accordionLabelInverseData, labelToInverse);
+    }
+    return element;
+  },
+  toggleExpand: (e) => {
+    const accordionTriggerButton = e;
+    const accordionTriggerButtonLabel = e.querySelector(`.${accordionTriggerLabelClass}`);
+    const accordionParent = accordionTriggerButton.closest(`.${accordionClass}`);
+
+    if (accordionTriggerButton.getAttribute('aria-expanded') === 'false') {
+      accordionTriggerButton.setAttribute('aria-expanded', true);
+      accordionParent.classList.add(accordionExpandedClass);
+    } else {
+      accordionTriggerButton.setAttribute('aria-expanded', false);
+      accordionParent.classList.remove(accordionExpandedClass);
+    }
+    accordion.switchLabel(accordionTriggerButtonLabel);
+  },
+};
+
+export default accordion;

package/src/components/accordion/accordion.njk

@@ -0,0 +1,15 @@
+{% from "./accordion/_macro.njk" import MdsAccordion %}
+
+<h3>{{ name }}</h3>
+{{ MdsAccordion({
+  id: id,
+  name: name,
+  triggerLabel: triggerLabel,
+  triggerLabelActive: triggerLabelActive,
+  triggerNoJsHidden: triggerNoJsHidden,
+  triggerIsHeader: triggerIsHeader,
+  headerClass: headerClass,
+  breakpoint: breakpoint,
+  content: content
+}) }}
+<hr />

package/src/components/accordion/accordion.scss

@@ -0,0 +1,15 @@
+.js .mds-accordion .mds-accordion__content{
+  display: none;
+}
+
+.js .mds-accordion.mds-accordion--expanded .mds-accordion__content{
+  display: block;
+}
+
+html:not(.js) .mds-accordion .mds-accordion__trigger .mds-icon{
+  display: none;
+}
+
+.mds-accordion:not(.mds-accordion--expanded) .mds-icon{
+  transform: rotate(90deg);
+}

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

@@ -19,6 +19,13 @@ module.exports = {
         text: 'Input button 3',
       },
     },
+    {
+      name: 'plain-buttons',
+      context: {
+        text: 'Plain button',
+        classes: 'mds-button--plain',
+      },
+    },
     {
       name: 'small-buttons',
       context: {

package/src/components/button/button.scss

@@ -48,4 +48,16 @@ $mds-color-button-text-hover: $mds-color-button-text !default;
 
 .mds-button--large {
   padding: ($mds-size-baseline * 4) ($mds-size-baseline * 6);
-}
+}
+
+.mds-button--plain {
+  background-color: transparent;
+  color: $mds-color-link;
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+    color: $mds-color-link-hover;
+    text-decoration: underline;
+  }
+}

package/src/components/icons/README.md

@@ -5,6 +5,11 @@
 - `path`: if you need to use a different path than the default (*/assets/icons.svg*)
 - `visuallyHiddenLabel`: add a visually hidden label (see Accessibility notes below)
 
+**Note regarding the default path of the icons file**:
+If you would like to change the default path, you can use the `defaultIconPath` variable in Nunjucks. You can set it as global variable like this:
+
+`env.addGlobal('defaultIconPath', value)`
+
 ## Accessibility
 
 The SVGs are hidden from screen readers by default (with the use of `aria-hidden=true` and `focusable=false`). When the icons are used without a visible label, a **visually hidden label needs to be added** instead.

package/src/components/icons/_template.njk

@@ -1,5 +1,12 @@
+{% set iconPath %}
+  {% if defaultIconPath %}
+    {{ defaultIconPath }}
+  {% else %}
+    '/assets/icons.svg'
+  {% endif %}
+{% endset %}
 <svg aria-hidden="true" focusable="false" class="mds-icon mds-icon--{{ params.iconName }}{% if params.classes %} {{ params.classes }}{% endif %}">
-  <use href="{{ params.path | default('/assets/icons.svg') }}#{{ params.iconName }}" />
+  <use href="{{ params.path | default(iconPath) }}#{{ params.iconName }}" />
 </svg>
 {%- if params.visuallyHiddenLabel %}
   <span class="mds-visually-hidden">{{ params.visuallyHiddenLabel }}</span>

package/src/js/index.js

@@ -10,7 +10,9 @@
 import './common';
 
 import tabs from '../components/tabs/tabs';
+import accordion from '../components/accordion/accordion';
 
 document.addEventListener('DOMContentLoaded', () => {
   tabs.init();
+  accordion.init();
 });

package/src/scss/components/__index.scss

@@ -4,4 +4,5 @@
 @import '../../components/section-title/section-title';
 @import '../../components/tabs/tabs';
 @import '../../components/input/input';
-@import '../../components/textarea/textarea';
+@import '../../components/textarea/textarea';
+@import '../../components/accordion/accordion';