@madgex/design-system 1.61.1 → 1.62.0

package/src/components/inputs/textarea/_template.njk

@@ -8,7 +8,7 @@
   {% set name = params.id %}
 {% endif %}
 
-<div class="mds-form-element mds-form-element--textarea{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.maxlength %} mds-form-element--character-count{% endif %}" id="{{ params.id }}-container" data-test="textarea">
+<div class="mds-form-element mds-form-element--textarea{% if params.state %} mds-form-element--{{params.state}}{% endif %}{% if params.classes %} {{params.classes}}{% endif %}{% if params.maxlength %} mds-form-element--character-count{% endif %}" id="{{ params.id }}-container" data-test="textarea-{{ params.id }}">
   {{ MdsInputLabel({
     labelText: params.labelText,
     hideLabel: params.hideLabel,
@@ -21,7 +21,7 @@
     helpText: params.helpText,
     validationError: params.validationError
   }) }}
-    <textarea
+  <textarea
       class="mds-form-control"
       name="{{ name }}"
       id="{{ params.id }}"
@@ -40,7 +40,7 @@
     >{#
       #}{% if params.value %}{{params.value}}{% endif %}{#
     #}</textarea>
-    {% if params.maxlength %}
+  {% if params.maxlength %}
     <div class="mds-form-message mds-form-message--character-count" id="{{ params.id }}-character-count-text" aria-live="polite" aria-atomic="true">
       {{- MdsIcon({ 
         iconName: 'cross',
@@ -51,5 +51,5 @@
       -}}
       <span><span class="js-character-count-number">{{ params.maxlength }}</span> characters remaining</span>
     </div>
-    {% endif %}
+  {% endif %}
 </div>

package/src/components/pagination/_template.njk

@@ -1,6 +1,6 @@
 {% from "../icons/_macro.njk" import MdsIcon %}
 
-<nav aria-label="{{ params.name }}" data-test="pagination">
+<nav aria-label="{{ params.name }}" data-test="pagination-{{params.id}}">
   <ul class="mds-pagination mds-text-align-right{% if params.classes %} {{params.classes}}{% endif %}">
     {% if params.backToLabel and params.backToUrl -%}
       <li class="mds-float-left">

package/src/components/pagination/pagination.config.js

@@ -4,6 +4,7 @@ module.exports = {
   context: {
     name: 'Pagination',
     nextLabel: 'Next',
+    id: 'default',
   },
   variants: [
     {
@@ -14,6 +15,7 @@ module.exports = {
         prevUrl: '/prev-page',
         nextLabel: 'Next',
         nextUrl: '/next-page',
+        id: 'pag-1',
       },
     },
     {
@@ -27,6 +29,7 @@ module.exports = {
         nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
         backToLabel: 'Results',
         backToUrl: '/results/',
+        id: 'pag-2',
       },
     },
     {
@@ -40,6 +43,7 @@ module.exports = {
         prevExtraLabel: 'Part Time Sales Assistant',
         backToLabel: 'Results',
         backToUrl: '/results/',
+        id: 'pag-3',
       },
     },
     {
@@ -57,6 +61,7 @@ module.exports = {
         nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
         backToLabel: 'Results',
         backToUrl: '/results/',
+        id: 'pag-4',
       },
     },
   ],

package/src/components/pagination/pagination.njk

@@ -13,5 +13,6 @@
   nextVisHiddenLabel: nextVisHiddenLabel,
   nextExtraLabel: nextExtraLabel,
   backToLabel: backToLabel,
-  backToUrl: backToUrl
+  backToUrl: backToUrl,
+  id: id
 }) }}

package/src/components/pagination-numbers/_template.njk

@@ -58,7 +58,7 @@ Otherwise, show an extra page in front of the current page to make up the displa
 
   {# VIEW #}
 
-  <nav aria-label="{{ params.name }}" data-test="pagination-numbers">
+  <nav aria-label="{{ params.name }}" data-test="pagination-numbers-{{ params.id }}">
     <ul class="mds-pagination mds-pagination--numbers mds-text-align-center {% if params.classes %} {{params.classes}}{% endif %}">
       {% if params.prevLabel -%}
         <li class="mds-pagination__item">

package/src/components/pagination-numbers/pagination-numbers.config.js

@@ -11,6 +11,7 @@ module.exports = {
     pageUrlTemplate: '/article/{pageNo}/my-seo-things',
     prevVisHiddenLabel: 'article',
     nextVisHiddenLabel: 'article',
+    id: 'default',
   },
   variants: [
     {
@@ -19,6 +20,7 @@ module.exports = {
         pageNo: 7,
         totalItemCount: 635,
         pageSize: 20,
+        id: '32-7',
       },
     },
     {
@@ -28,6 +30,7 @@ module.exports = {
         totalItemCount: 635,
         pageSize: 20,
         alwaysShowLastPage: true,
+        id: '32-9',
       },
     },
     {
@@ -36,6 +39,7 @@ module.exports = {
         pageNo: 32,
         totalItemCount: 635,
         pageSize: 20,
+        id: '32-32',
       },
     },
     {
@@ -44,6 +48,7 @@ module.exports = {
         pageNo: 3,
         totalItemCount: 635,
         pageSize: 20,
+        id: '32-3',
       },
     },
     {
@@ -52,6 +57,7 @@ module.exports = {
         pageNo: 2,
         totalItemCount: 45,
         pageSize: 20,
+        id: '3-2',
       },
     },
     {
@@ -60,6 +66,7 @@ module.exports = {
         pageNo: 1,
         totalItemCount: 21,
         pageSize: 20,
+        id: '2-1',
       },
     },
     {
@@ -68,6 +75,7 @@ module.exports = {
         pageNo: 3,
         totalItemCount: 141,
         pageSize: 20,
+        id: '8-3',
       },
     },
     {
@@ -76,6 +84,7 @@ module.exports = {
         pageNo: 1,
         totalItemCount: 19,
         pageSize: 20,
+        id: '1-render',
       },
     },
   ],

package/src/components/pagination-numbers/pagination-numbers.njk

@@ -18,5 +18,6 @@
   pageNo: pageNo,
   pageSize: pageSize,
   totalItemCount: totalItemCount,
-  alwaysShowLastPage: alwaysShowLastPage
+  alwaysShowLastPage: alwaysShowLastPage,
+  id: id
 }) }}

package/src/components/section-title/_template.njk

@@ -1,17 +1,17 @@
 {% from "../button/_macro.njk" import MdsButton %}
 
-<div class="mds-section-title{% if params.classes %} {{ params.classes }}{% endif %}" data-test="title">
-    <{{ params.headingtag | default("h2") }} class="mds-section-title__header">{{ params.title }}</{{ params.headingtag | default("h2") }}>
-    {% if params.actionText -%}
-        <div class="mds-section-title__action">
-            {%- if params.actionHref -%}
-                {{ MdsButton({
-                    text: params.actionText,
-                    element: params.actionElement,
-                    href: params.actionHref,
-                    classes: params.classes
-                }) }}
-            {%- endif -%}
-        </div>
-    {% endif -%}
+<div class="mds-section-title{% if params.classes %} {{ params.classes }}{% endif %}" data-test="title-{{params.id}}">
+  <{{ params.headingtag | default("h2") }} class="mds-section-title__header">{{ params.title }}</{{ params.headingtag | default("h2") }}>
+  {% if params.actionText -%}
+    <div class="mds-section-title__action">
+      {%- if params.actionHref -%}
+        {{ MdsButton({
+          text: params.actionText,
+          element: params.actionElement,
+          href: params.actionHref,
+          classes: params.classes
+        }) }}
+      {%- endif -%}
+    </div>
+  {% endif -%}
 </div>

package/src/components/switch-state/_template.njk

@@ -1,8 +1,8 @@
 {% if params %}
-    <button 
+  <button 
     class="mds-switch-state js-mds-switch-state mds-switch-state--default mds-button{% if params.classes %} {{params.classes}}{% endif %}" 
-    data-test="switch-state">
-        <span class="mds-switch-state--default{% if params.defaultClasses %} {{params.defaultClasses}}{% endif %}" data-test="switch-state-default">{{- params.defaultLabel | safe -}}</span>
-        <span class="mds-switch-state--inverse{% if params.inverseClasses %} {{params.inverseClasses}}{% endif %}" data-test="switch-state-inverse">{{- params.inverseLabel | safe -}}</span>
-    </button>
+    data-test="switch-state-{{params.id}}">
+      <span class="mds-switch-state--default{% if params.defaultClasses %} {{params.defaultClasses}}{% endif %}" data-test="switch-state-default-{{params.id}}">{{- params.defaultLabel | safe -}}</span>
+      <span class="mds-switch-state--inverse{% if params.inverseClasses %} {{params.inverseClasses}}{% endif %}" data-test="switch-state-inverse-{{params.id}}">{{- params.inverseLabel | safe -}}</span>
+  </button>
 {% endif %}

package/src/components/switch-state/switch-state.config.js

@@ -4,6 +4,7 @@ module.exports = {
   context: {
     inverseLabel: 'Remove Job',
     defaultLabel: 'Save Job',
+    id: 'save',
   },
   variants: [
     {
@@ -12,6 +13,7 @@ module.exports = {
         classes: 'mds-button--plain',
         inverseLabel: 'Saved',
         defaultLabel: 'Save',
+        id: 'save',
       },
     },
   ],

package/src/components/switch-state/switch-state.njk

@@ -5,5 +5,6 @@
   inverseLabel: inverseLabel,
   inverseClasses: inverseClasses,
   defaultLabel: defaultLabel,
-  defaultClasses: defaultClasses
+  defaultClasses: defaultClasses,
+  id: id
 }) }}

package/src/components/tabs/_template.njk

@@ -1,44 +1,48 @@
 {% if params.content %}
-    <div class="mds-tabs{%- if params.name %} mds-tabs--{{ params.name | lower | trim | replace(' ', '-')}}{%- endif -%}{% if params.classes %} {{ params.classes }}{% endif %}" data-test="tabs">
-        <ul class="mds-tabs__list">
-            {%- for item in params.content -%}
-                {%- set tabId %}
-                {%- if item.id -%}
-                    {{ item.id }}
-                {%- else -%}
-                    {# 
-                    if the id is missing it will be constructed using:
-                    [component name]-[item label]-[index] 
-                    e.g. period-next-week-2
-                    #}
-                    {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}-{%- endif -%}
-                    {{ item.label | lower | trim | replace(' ', '-') }}-{{loop.index}}
-                {%- endif -%}
-                {% endset -%}
 
-                <li class="mds-tabs__list-item">
-                    <a href="#{{ tabId }}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" data-test="tabs-trigger">
-                        {{- item.label -}}
-                    </a>
-                </li>
-            {%- endfor -%}
-        </ul>
-        {%- for item in params.content -%}
-            {%- set tabPanelId %}
-            {%- if item.id -%}
-                {{ item.id }}
-            {%- else -%}
-                {# 
+  {% set kebabName -%}
+    {{ params.name | lower | trim | replace(' ', '-')}}
+  {%- endset %}
+  <div class="mds-tabs{%- if params.name %} mds-tabs--{{ kebabName }}{%- endif -%}{% if params.classes %} {{ params.classes }}{% endif %}" data-test="tabs-{{kebabName}}">
+    <ul class="mds-tabs__list">
+      {%- for item in params.content -%}
+        {%- set tabId %}
+        {%- if item.id -%}
+          {{ item.id }}
+        {%- else -%}
+          {# 
+              if the id is missing it will be constructed using:
+              [component name]-[item label]-[index] 
+              e.g. period-next-week-2
+          #}
+          {%- if params.name -%}{{kebabName}}-{%- endif -%}
+          {{ item.label | lower | trim | replace(' ', '-') }}-{{loop.index}}
+        {%- endif -%}
+        {% endset -%}
+
+        <li class="mds-tabs__list-item">
+          <a href="#{{ tabId }}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" data-test="tabs-trigger-{{tabId}}">
+            {{- item.label -}}
+          </a>
+        </li>
+      {%- endfor -%}
+    </ul>
+    {%- for item in params.content -%}
+      {%- set tabPanelId %}
+      {%- if item.id -%}
+        {{ item.id }}
+      {%- else -%}
+        {# 
                 if the id is missing it will be constructed using:
                 [component name]-[item label]-[index] 
                 e.g. period-next-week-2
                 #}
-                {%- if params.name -%}{{ params.name | lower | trim | replace(' ', '-')}}-{%- endif -%}
-                {{ item.label | lower | trim | replace(' ', '-') }}-{{loop.index}}
-            {%- endif -%}
-            {% endset -%}
+        {%- if params.name -%}{{kebabName}}-{%- endif -%}
+        {{ item.label | lower | trim | replace(' ', '-') }}-{{loop.index}}
+      {%- endif -%}
+      {% endset -%}
 
-            <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabPanelId }}" data-test="tab-panel">{{ item.content | safe }}</section>
-        {%- endfor -%}
-    </div>
+      <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabPanelId }}" data-test="tab-panel-{{tabPanelId}}">{{ item.content | safe }}</section>
+    {%- endfor -%}
+  </div>
 {% endif %}