@madgex/design-system 3.1.2 → 3.2.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.1.2",
+  "version": "3.2.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",

package/src/components/tabs/README.md

@@ -2,8 +2,12 @@
 
 - `name`: the name you want to use to differentiate the component
 - `classes`: add extra CSS classes to the component
+- `headerTag`: the html tag to use for the panel header (h2 as default)
 - `content`: is an array of objects containing [label, selected, id, content] for each tab, the content for the panel can also be a custom component
 
+## Variations
+Tabs have different style depending on the amount of items to display, if 2 tabs then it will always display tabs (except when js is disabled), if more than 2 then it will display a list of links for small devices and tabs for desktop
+
 
 ## Accessibility
 

package/src/components/tabs/_template.njk

@@ -1,25 +1,20 @@
-{% if params.content %}
+{% from "./tab-id.njk" import TabId %}
 
+{% if params.content %}
   {% 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}}">
+  {% set tabVariation -%}
+    {%- if params.content.length > 2 -%}
+      js-desktop-tabbed
+    {%- else -%}
+      mds-tabs--full-tabbed js-full-tabbed
+    {%- endif -%}
+  {%- endset %}
+  <div class="mds-tabs {{ tabVariation }}{%- 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 -%}
-
+        {%- set tabId = TabId(item, params, loop.index) %}
         <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{% if tabId %}-{{tabId}}{% endif %}">
             {{- item.label -}}
@@ -28,21 +23,22 @@
       {%- 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 -%}{{ kebabName }}-{%- endif -%}
-        {{ item.label | lower | trim | replace(' ', '-') }}-{{loop.index}}
-      {%- endif -%}
-      {% endset -%}
+      {%- set tabId = TabId(item, params, loop.index) %}
+      {%- set headerTag -%}
+        {%- if params.headerTag -%}
+          {{- params.headerTag -}}
+        {%- else -%}
+          h2
+        {%- 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{% if tabPanelId %}-{{tabPanelId}}{% endif %}">{{ item.content | safe }}</section>
+      <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabId }}" data-test="tab-panel{% if tabId %}-{{tabId}}{% endif %}">
+        {# id is used in js to apply aria-labelledby, don't forget to update both if needed #}
+        <{{headerTag}} id="label-{{tabId}}" class="mds-tabs__panel__header">{{- item.label -}}</{{headerTag}}>
+        <div class="mds-tabs__panel__content">
+          {{ item.content | safe }}
+        </div>
+      </section>
     {%- endfor -%}
   </div>
 {% endif %}

package/src/components/tabs/tab-id.njk

@@ -0,0 +1,13 @@
+{%- macro TabId(item, params, loopIndex) -%}
+  {%- 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(' ', '-') }}-{{loopIndex}}
+  {%- endif -%}
+{%- endmacro -%}

package/src/components/tabs/tabs.config.js

@@ -10,51 +10,70 @@ module.exports = {
         selected: true,
         id: 'today',
         content:
-          '<strong>Daily menu:</strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
+          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
       },
       {
         label: 'Tomorrow',
         id: 'tomorrow',
         content:
-          '<strong>Tomorrow Tab:</strong><p><strong>Tomorrow</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
       },
       {
         label: 'Next week',
         id: 'next-week',
-        content:
-          '<strong>Next week:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+        content: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
         contentClasses: 'mds-edited-text',
       },
       {
         label: 'Next month',
         id: 'next-month',
         content:
-          '<strong>Next month:</strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
       },
     ],
   },
   variants: [
+    {
+      name: 'Two Items',
+      context: {
+        name: 'Two Items',
+        classes: '',
+        content: [
+          {
+            label: 'Item 1',
+            selected: true,
+            content:
+              '<strong>Item 1 panel:</strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
+          },
+          {
+            label: 'Item 2',
+            content:
+              '<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+          },
+        ],
+      },
+    },
     {
       name: 'No Ids',
       context: {
         name: 'Wild Pets',
         classes: '',
+        headerTag: 'h3',
         content: [
           {
             label: 'Dogs',
             selected: true,
             content:
-              '<strong>Dogs panel:</strong><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
+              '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero. Donec commodo elementum ligula, vel posuere purus tempor sit amet.</p>',
           },
           {
             label: 'Cats',
             content:
-              '<strong>Cats Tab:</strong><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+              '<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
           },
           {
             label: 'Seagulls',
-            content:
-              '<strong>Seagulls:</strong><ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+            content: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
             contentClasses: 'mds-edited-text',
           },
         ],

package/src/components/tabs/tabs.js

@@ -1,3 +1,5 @@
+const tokens = require('../../tokens/size.json');
+
 const tabsItemJsClass = 'js-tabs-item';
 const tabsClass = 'mds-tabs';
 const tabsListClass = 'mds-tabs__list';
@@ -7,14 +9,25 @@ const tabsTabClass = 'mds-tabs__tab';
 const tabsTabSelectedClass = 'mds-tabs__tab--selected';
 const tabsPanelHiddenClass = 'mds-tabs__panel--hidden';
 const tabsKeys = { left: 37, right: 39, up: 38, down: 40 };
+const tabbedDesktop = '.js-desktop-tabbed';
+const tabbedFull = '.js-full-tabbed';
+const breakpoint = parseInt(tokens.size.breakpoint.lg.value, 10);
 
 const tabs = {
   init: () => {
-    // Setting aria
-    const tabsLists = Array.from(document.querySelectorAll(`.${tabsListClass}`));
-    const tabsListItems = Array.from(document.querySelectorAll(`.${tabsListItemClass}`));
-    const tabsTabs = Array.from(document.querySelectorAll(`.${tabsTabClass}`));
-    const tabsPanel = Array.from(document.querySelectorAll(`.${tabsPanelClass}`));
+    tabs.setTabs(tabbedFull);
+
+    const screenWidth = window.innerWidth;
+
+    if (screenWidth > breakpoint) {
+      tabs.setTabs(tabbedDesktop);
+    }
+  },
+  setTabs: (classSelector) => {
+    const tabsTabs = Array.from(document.querySelectorAll(`${classSelector} .${tabsTabClass}`));
+    const tabsLists = Array.from(document.querySelectorAll(`${classSelector} .${tabsListClass}`));
+    const tabsListItems = Array.from(document.querySelectorAll(`${classSelector} .${tabsListItemClass}`));
+    const tabsPanel = Array.from(document.querySelectorAll(`${classSelector} .${tabsPanelClass}`));
 
     tabsLists.forEach((element) => {
       element.setAttribute('role', 'tablist');
@@ -34,10 +47,10 @@ const tabs = {
     });
     tabsPanel.forEach((element) => {
       element.setAttribute('role', 'tabpanel');
-      element.setAttribute('aria-labelledby', element.attributes.id.value);
+      element.setAttribute('aria-labelledby', `label-${element.attributes.id.value}`);
     });
 
-    const tabsItemsJs = document.querySelectorAll(`.${tabsItemJsClass}`);
+    const tabsItemsJs = document.querySelectorAll(`${classSelector} .${tabsItemJsClass}`);
     const tabsItemsJsArray = Array.from(tabsItemsJs);
 
     tabsItemsJsArray.forEach((element) => {

package/src/components/tabs/tabs.njk

@@ -1,7 +1,10 @@
 {% from "./tabs/_macro.njk" import MdsTabs %}
 
-{{ MdsTabs({
-  name: name,
-  classes: classes,
-  content: content
-}) }}
+<div class="mds-surface mds-margin-bottom-b5">
+  {{ MdsTabs({
+    name: name,
+    classes: classes,
+    headerTag: headerTag,
+    content: content
+  }) }}
+</div>

package/src/components/tabs/tabs.scss

@@ -1,51 +1,90 @@
-.js .mds-tabs__panel--hidden {
-  display: none;
-}
-
 .mds-tabs__list {
-  margin-bottom: $mds-size-baseline * 2;
+  margin-bottom: 0;
+  padding-top: $mds-size-baseline * 3;
+  padding-bottom: $mds-size-baseline * 3;
   @extend .mds-border-bottom;
+}
 
-  .js & {
-    margin-bottom: 0;
+.mds-tabs__panel {
+  &:not(:last-child) {
+    @extend .mds-border-bottom;
+  }
+  &__header {
+    @extend .mds-surface__inner;
+    @extend .mds-border-bottom;
+    @extend .mds-font-great-primer;
+    padding-top: $mds-size-baseline * 3;
+    padding-bottom: $mds-size-baseline * 3;
+    background: $mds-color-neutral-lightest;
+  }
+  &__content {
+    @extend .mds-surface__inner;
   }
 }
 
-.js .mds-tabs__list-item {
-  display: inline-block;
-  width: 50%;
+.mds-tabs__list-item {
   @extend .mds-font-great-primer;
-
-  @include mq($from: $mds-size-breakpoint-md) {
-    width: auto;
-  }
 }
 
 .mds-tabs__tab {
   display: inline-block;
   @extend .mds-surface__inner;
-  padding-top: $mds-size-baseline;
-  padding-bottom: $mds-size-baseline;
+  padding-top: $mds-size-baseline * 2;
+  padding-bottom: $mds-size-baseline * 2;
+}
+
+// MIXIN to share between the 2 variations
+@mixin tabbed-items {
+  .mds-tabs__list {
+    padding: 0;
+  }
+
+  .mds-tabs__list-item {
+    display: inline-block;
+    width: auto;
+  }
+
+  .mds-tabs__panel__header {
+    @include mds-visually-hidden;
+  }
+
+  .mds-tabs__panel--hidden {
+    display: none;
+  }
 
-  .js & {
+  .mds-tabs__tab {
     width: 100%;
     text-decoration: none;
-    text-align: center;
+    text-align: left;
     margin-right: $mds-size-baseline;
     padding-top: $mds-size-baseline * 6;
     padding-bottom: $mds-size-baseline * 5;
-
-    @include mq($from: $mds-size-breakpoint-md) {
-      text-align: left;
-    }
   }
-}
 
-.js .mds-tabs__tab.mds-tabs__tab--selected {
-  border-bottom: 6px solid $mds-color-link-base;
-  color: $mds-color-text-headers-base;
+  .mds-tabs__tab.mds-tabs__tab--selected {
+    border-bottom: 6px solid $mds-color-link-base;
+    color: $mds-color-text-headers-base;
+  }
 }
 
-.mds-tabs__panel {
-  @extend .mds-surface__inner;
+.js {
+  // DEFAULT (desktop-tabbed)
+  @include mq($from: $mds-size-breakpoint-lg) {
+    @include tabbed-items;
+  }
+  // FULL-TABBED
+  .mds-tabs--full-tabbed {
+    @include tabbed-items;
+    .mds-tabs__list-item {
+      @include mq($from: $mds-size-breakpoint-md) {
+        width: auto;
+      }
+    }
+    .mds-tabs__tab {
+      text-align: center;
+      @include mq($from: $mds-size-breakpoint-md) {
+        text-align: left;
+      }
+    }
+  }
 }