@madgex/design-system 5.2.2 → 5.4.0

package/src/components/accordion/accordion.js

@@ -5,6 +5,7 @@ const accordionTriggerExpandedClass = 'mds-accordion-trigger--expanded';
 const accordionContentExpandedClass = 'mds-accordion-content--expanded';
 const accordionLabelInverseData = 'data-labelinverse';
 const accordionNonClosingClass = 'mds-accordion-trigger--non-closing';
+const accordionContentFirstClass = 'mds-accordion-trigger--content-first';
 
 const accordion = {
   init: () => {
@@ -23,6 +24,7 @@ const accordion = {
       }
     });
   },
+
   checkBreakpoint: (element, screenWidth) => {
     let breakpoint = 0;
 
@@ -62,32 +64,53 @@ const accordion = {
 
     return true;
   },
+
   setAccordion: (accordionTrigger, accordionContent) => {
     const triggerContainer = accordionTrigger;
-    const label = triggerContainer.querySelector('.mds-accordion-trigger__label');
-    const labelText = label.innerText;
-    const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
+
     const triggerButton = accordion.createButton(triggerContainer);
+    const triggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
+
+    const labelText = triggerButtonLabel.innerText;
+    const ariaLabel = triggerButton.getAttribute('aria-label');
+    const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
+
+    // If accordion is non closing content first is redundant
+    const isContentFirst = accordionTrigger.classList.contains(accordionContentFirstClass) && !isNonClosing;
 
     triggerContainer.classList.remove('mds-display-none');
     if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
-      accordionContent.setAttribute('aria-label', labelText);
+      if (ariaLabel) {
+        accordionContent.setAttribute('aria-label', ariaLabel);
+      } else {
+        accordionContent.setAttribute('aria-label', labelText);
+      }
     }
 
     triggerContainer.innerHTML = '';
     triggerContainer.appendChild(triggerButton);
 
+    const accordionProperties = {
+      triggerContainer,
+      accordionContent,
+      isNonClosing,
+      isContentFirst,
+    };
+
+    const toggleEvent = (e) => {
+      e.preventDefault();
+      accordion.toggleExpand(accordionProperties, e, toggleEvent);
+    };
+
+    triggerButton.addEventListener('click', toggleEvent);
+
     if (triggerContainer.dataset.expanded) {
-      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
+      accordion.toggleExpand(accordionProperties, toggleEvent);
     }
-
-    triggerButton.addEventListener('click', (elem) => {
-      elem.preventDefault();
-      accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
-    });
   },
-  createButton: (element) => {
-    const accordionTriggerSpan = element.querySelector(`.${accordionTriggerClass} > span`);
+
+  createButton: (triggerContainer) => {
+    const accordionTriggerSpan = triggerContainer.querySelector(`.${accordionTriggerClass} > span`);
     const accordionTriggerButton = document.createElement('button');
 
     accordionTriggerButton.className = accordionTriggerButtonClass;
@@ -97,50 +120,114 @@ const accordion = {
     accordionTriggerButton.classList.add('mds-padding-x-b0');
     accordionTriggerButton.setAttribute('aria-expanded', false);
     accordionTriggerButton.setAttribute('type', 'button');
+
+    if (triggerContainer.dataset.arialabel) {
+      accordionTriggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabel);
+    }
+
     if (accordionTriggerSpan) {
       accordionTriggerButton.appendChild(accordionTriggerSpan);
     }
 
     return accordionTriggerButton;
   },
-  switchLabel: (e) => {
-    const element = e;
 
-    if (element.dataset.labelinverse) {
-      const labelToInverse = element.textContent;
+  cloneUnderButton: (triggerButton, triggerContainer, accordionContent, toggleEvent) => {
+    const underButton = triggerButton.cloneNode(true);
+    const triggerButtonLabel = underButton.querySelector(`.${accordionTriggerLabelClass}`);
+
+    if (triggerContainer.dataset.arialabeactive) {
+      underButton.setAttribute('aria-label', triggerContainer.dataset.arialabeactive);
+    }
+
+    underButton.setAttribute('aria-expanded', true);
+    underButton.addEventListener('click', toggleEvent);
+    accordion.switchAriaLabel(underButton, triggerContainer);
+    accordion.switchLabel(triggerButtonLabel);
+    accordionContent.after(underButton);
+  },
+
+  switchLabel: (triggerButtonLabel) => {
+    if (triggerButtonLabel.dataset.labelinverse) {
+      const labelToInverse = triggerButtonLabel.textContent;
 
-      element.textContent = element.dataset.labelinverse;
-      element.setAttribute(accordionLabelInverseData, labelToInverse);
+      // eslint-disable-next-line no-param-reassign
+      triggerButtonLabel.textContent = triggerButtonLabel.dataset.labelinverse;
+      triggerButtonLabel.setAttribute(accordionLabelInverseData, labelToInverse);
     }
+  },
+
+  switchAriaLabel: (triggerButton, triggerContainer) => {
+    if (triggerContainer.dataset.arialabelactive) {
+      const currentAriaLabel = triggerButton.getAttribute('aria-label');
 
-    return element;
+      if (currentAriaLabel === triggerContainer.dataset.arialabel) {
+        triggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabelactive);
+      } else {
+        triggerButton.setAttribute('aria-label', triggerContainer.dataset.arialabel);
+      }
+    }
   },
-  toggleExpand: (triggerButton, triggerContainer, accordionContent, isNonClosing) => {
-    const accordionTriggerButton = triggerButton;
-    const accordionTriggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
 
-    if (accordionTriggerButton.getAttribute('aria-expanded') === 'false') {
-      accordionTriggerButton.setAttribute('aria-expanded', true);
+  toggleExpand: ({ triggerContainer, accordionContent, isNonClosing, isContentFirst }, event, toggleEvent) => {
+    const triggerButton = event.target.closest(`.${accordionTriggerButtonClass}`);
+    const triggerButtonLabel = triggerButton.querySelector(`.${accordionTriggerLabelClass}`);
+
+    // If closed
+    if (triggerButton.getAttribute('aria-expanded') === 'false') {
+      triggerButton.setAttribute('aria-expanded', true);
       triggerContainer.classList.add(accordionTriggerExpandedClass);
       accordionContent.classList.add(accordionContentExpandedClass);
-      if (isNonClosing) {
-        /* Hiding parent element instead of trigger itself
-         * to avoid NVDA issue where it doesn't announce aria-expanded
-         */
-        accordionTriggerButton.parentElement.classList.add('mds-visually-hidden');
-        accordionTriggerButton.setAttribute('aria-disabled', true);
-        /* the disabled trigger shouldn't be reachable to keyboard navigaton (as it's hidden from view)
-         * so adding tabindex='-1' to take it off the navigation flow
-         */
-        accordionTriggerButton.setAttribute('tabIndex', '-1');
+
+      if (isContentFirst) {
+        // triggerButton.focus();
+        accordion.cloneUnderButton(triggerButton, triggerContainer, accordionContent, toggleEvent);
       }
+
+      if (isNonClosing || isContentFirst) {
+        accordion.hideButton(triggerButton, toggleEvent);
+      } else {
+        accordion.switchLabel(triggerButtonLabel);
+        accordion.switchAriaLabel(triggerButton, triggerContainer);
+      }
+
+      // If open
     } else if (!isNonClosing) {
-      accordionTriggerButton.setAttribute('aria-expanded', false);
+      triggerButton.setAttribute('aria-expanded', false);
       triggerContainer.classList.remove(accordionTriggerExpandedClass);
       accordionContent.classList.remove(accordionContentExpandedClass);
+
+      accordion.switchLabel(triggerButtonLabel);
+      accordion.switchAriaLabel(triggerButton, triggerContainer);
+
+      if (isContentFirst) {
+        // Find original button
+        const overButton = accordionContent.previousElementSibling.querySelector(`.${accordionTriggerButtonClass}`);
+
+        // Set up under button with correct properties
+        triggerButton.setAttribute('aria-expanded', false);
+        triggerButton.removeAttribute('aria-disabled');
+        triggerButton.setAttribute('tabIndex', '0');
+
+        // Replace original button
+        overButton.replaceWith(triggerButton);
+        triggerContainer.classList.remove('mds-visually-hidden');
+        triggerButton.focus();
+      }
     }
+  },
 
-    accordion.switchLabel(accordionTriggerButtonLabel);
+  hideButton: (button, toggleEvent) => {
+    /* Hiding parent element instead of trigger itself
+     * to avoid NVDA issue where it doesn't announce aria-expanded
+     */
+    button.setAttribute('aria-disabled', true);
+    button.parentElement.classList.add('mds-visually-hidden');
+    /* the disabled trigger shouldn't be reachable to keyboard navigaton (as it's hidden from view)
+     * so adding tabindex='-1' to take it off the navigation flow
+     */
+    button.setAttribute('tabIndex', '-1');
+    button.removeEventListener('click', toggleEvent);
   },
 };
 

package/src/components/accordion/accordion.njk

@@ -7,7 +7,7 @@
   triggerLabel: triggerLabel,
   triggerLabelActive: triggerLabelActive,
   triggerNoJsHidden: triggerNoJsHidden,
-  triggerIsHeader: triggerIsHeader,
+  triggerHtmlTag: triggerHtmlTag,
   triggerClasses: triggerClasses,
   triggerIsNonClosing: triggerIsNonClosing,
   hideTriggerLabel: hideTriggerLabel,
@@ -16,7 +16,11 @@
   leftAligned: leftAligned,
   expandIcon: expandIcon,
   collapseIcon: collapseIcon,
-  isExpanded: isExpanded
+  isExpanded: isExpanded,
+  noIcon: noIcon,
+  contentFirst: contentFirst,
+  ariaLabel: ariaLabel,
+  ariaLabelActive: ariaLabelActive
 }) }}
 <hr />
 

package/src/components/inputs/input-number/README.md

@@ -0,0 +1,37 @@
+## Vue
+
+### Parameters
+
+- `v-model (:modelValue)`: **required** The value of the input.
+- `id`: `String` **required** - Id attribute of the input.
+- `name`: `String` _optional_ - Name attribute of the input.
+- `placeholder`: `String` _optional_ - Placeholder attribute of the input element. Default: `''`.
+- `min`: `Number` _optional_ - Min attribute of the input element. Default: `Number.NEGATIVE_INFINITY`.
+- `max`: `Number` _optional_ - Max attribute of the input element. Default: `Number.POSITIVE_INFINITY`.
+- `step`: `Number` _optional_ - Step attribute of input element. Default: `1`.
+- `error`: `Boolean` _optional_ - Used for a11y (`:aria-invalid` attribute). Default: `false`.
+- `i18n`: `Object` _optional_ - Text to translate/customise.
+
+```text
+i18n: {
+  increaseAriaLabel: 'Increase', // aria label for "Increase" button
+  decreaseAriaLabel: 'Decrease', // aria label for "Decrease" button
+}
+```
+
+### i18n
+
+```html
+<mds-form-item input-id="my-input-number-id" class="mds-form-element--input">
+  <template #label>¿Cuántos idiomas hablas?</template>
+  <mds-input-number
+    id="my-input-number-id"
+    v-model="value"
+    min="1"
+    max="50"
+    :i18="{increaseAriaLabel: 'Aumentar', decreaseAriaLabel: 'Reducir'}"
+  />
+</mds-form-item>
+```
+
+> Note: Remember to wrap your input components with `mds-form-item` whenever you need to use them within a form.

package/src/components/inputs/input-number/input-number.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  title: 'InputNumber',
+  meta: { status: { njk: '', vue: 'wip' } },
+  context: {},
+};

package/src/components/inputs/input-number/input-number.njk

@@ -0,0 +1,68 @@
+{# VUE VERSION #}
+<h2>Vue</h2>
+
+
+<div id="vue-app">
+  {% raw %}
+    <mds-form-item v-for="(item, index) in examples" 
+        :input-id="`${index}-vue-version`" 
+        :optional="item.optional"
+        :error="item.value ? !!item.error : null" 
+        class="mds-form-element--input" 
+        style="margin-bottom: 50px; width: 230px;" 
+      >
+        <template v-if="item.label" #label>{{item.label}}</template>
+        <template v-if="item.tooltip" #tooltip>{{item.tooltip}}</template>
+        <template v-if="item.value && item.help" #help>{{item.help}}</template>
+        <template v-if="item.value && item.error" #error>{{item.error}}</template>
+      <mds-input-number
+        :id="`${index}-vue-version`"
+        v-model="item.value"
+        :name="item.name"
+        :placeholder="item.placeholder"
+        :error="item.value ? !!item.error : null"
+        :step="item.step" 
+        :min="item.min"
+        :max="item.max"
+        :i18n="item.i18n"
+      />
+    </mds-form-item>
+  {% endraw %}
+</div>
+
+<script type="module" async>
+  {% include '_import-MdsLibrary.njk' %}
+  const { MdsFormItem, MdsInput, MdsInputNumber } = MdsLibrary;
+
+  const app = vue.createApp({
+    components: { MdsFormItem, MdsInput, MdsInputNumber },
+    data() {
+      return {
+        examples: [
+            {label: 'How many JS FE frameworks exist?', name: 'default input', value: null},
+            {label: 'When did time begin?', name: 'stars input', value: 1970, optional: true, min:0, max:2000},
+            {
+              label: 'Expected salary per year',
+              name: 'salary input error',
+              error: 'Sorry, your expected salary is too high',
+              help: "This number is out of our budget",
+              tooltip: "Try working for free",
+              min: 80000,
+              value: null,
+              placeholder: 'e.g. $15000', 
+              step: 100
+            },
+            {
+              label: '¿Cuántos idiomas hablas?',
+              optional: true,
+              name: 'i18n example',
+              min: 1,
+              max: 50,
+              value: null,
+              i18n: {increaseAriaLabel: 'Aumentar', decreaseAriaLabel: 'Reducir'}
+            }
+        ]
+      };
+    },
+  }).mount('#vue-app');
+</script>

package/src/components/inputs/input-number/input-number.scss

@@ -0,0 +1,60 @@
+.mds-input-number {
+  position: relative;
+  display: flex;
+  border: $mds-size-border-width-base solid $mds-color-neutral-lighter;
+  border-radius: $mds-size-border-radius-base;
+  background: $mds-color-neutral-white;
+  padding: 0;
+  color: $mds-color-text-base;
+  width: 100%;
+  min-width: $mds-size-container-min-width;
+}
+
+.mds-form-element--error .mds-form-control.mds-input-number {
+  padding: 0;
+}
+
+.mds-input-number input {
+  flex: 1;
+  padding: $mds-size-baseline * 3;
+  line-height: inherit;
+  font-size: inherit;
+  color: inherit;
+  border: $mds-size-border-width-base solid $mds-color-neutral-lighter;
+  border-top: none;
+  border-bottom: none;
+  background: none;
+  outline: none;
+  appearance: none;
+  min-width: 0;
+  -webkit-appearance: none;
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    margin: 0;
+  }
+}
+
+.mds-input-number button {
+  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  border: none;
+  cursor: pointer;
+  background: none;
+  color: inherit;
+  outline: none;
+
+  &:hover,
+  &:focus-within {
+    background: $mds-color-neutral-lightest;
+    color: $mds-color-link-hover;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 20%;
+  }
+}

package/src/scss/components/__index.scss

@@ -15,3 +15,4 @@
 @import '../../components/inputs/checkbox-pill/checkbox-pill';
 @import '../../components/modal/modal';
 @import '../../components/skip-link/skip-link';
+@import '../../components/inputs/input-number/input-number';