@madgex/design-system 11.0.0 → 12.0.1

package/dist/js/index-fractal.js

@@ -1 +1 @@
-(()=>{"use strict";const e=e=>{e.classList.remove("mds-switch-state--default"),e.classList.add("mds-switch-state--inverse")},t=e=>{e.classList.remove("mds-switch-state--inverse"),e.classList.add("mds-switch-state--default")},o=()=>{Array.from(document.querySelectorAll(".js-mds-switch-state")).forEach(o=>{o.addEventListener("click",o=>{o.preventDefault(),o.stopPropagation();const s=o.currentTarget;s.classList.contains("mds-switch-state--default")?e(s):(s.classList.contains("mds-switch-state--inverse"),t(s))})})},s="mds-notification",n={init:(e,t,o=3e3)=>{const{body:c}=document;n.hide(c);const a=document.createElement("div");a.setAttribute("role","alert"),a.classList.add(s,"mds-message",`mds-message--${t}`),a.innerText=e,n.show(c,a),setTimeout(n.hide,o,c)},show:(e,t)=>{e.appendChild(t)},hide:e=>{Array.from(e.querySelectorAll(`.${s}`)).forEach(e=>{e.parentNode.removeChild(e)})}},c=n,a=()=>{Array.from(document.querySelectorAll(".js-notification-example")).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();const t=e.currentTarget,o=t.innerText,{messageType:s}=t.dataset;c.init(o,s)})})},i="mds-combobox",l=()=>{!function(){const e=document.querySelector('[data-combobox-id="distance-selection"]');if(e){const t=e.querySelector("select"),o=Array.from(t.querySelectorAll("option"));e.querySelector(i).options=o.slice(1).map(e=>({value:e.value,label:e.textContent}))}}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"]');if(e){const t=e.querySelector("select"),o=Array.from(t.querySelectorAll("option"));e.querySelector(i).options=o.slice(1).map(e=>({value:e.value,label:e.textContent}))}}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"] mds-combobox'),t=document.querySelector("#salary-selection-hidden-input");e&&t&&e.addEventListener("select-option",()=>{console.log("Setting #salary-selection-hidden-input.."),t.value="flip"===t.value?"flop":"flip"})}(),function(){const e=document.querySelector('[data-combobox-id="salary-selection"] mds-combobox'),t=document.querySelector("#salary-selection-hidden-input");e&&t&&e.addEventListener("clear-all",()=>{console.log("Clearing #salary-selection-hidden-input.."),t.value=""})}(),function(){const e=document.querySelector('[data-combobox-id="keywords-lookup"]');if(e){const t=e.querySelector(i);t.filterOptions=!1,t.addEventListener("search",e=>{const[o]=e.detail;o&&o.length>2?fetch(`https://api.datamuse.com/sug?s=${o}`).then(e=>e.json()).then(e=>{const o=e.map(({word:e})=>({value:e,label:e}));return t.options=o,o}).catch(console.log):t.options=[]})}}()};document.addEventListener("DOMContentLoaded",()=>{o(),a(),setTimeout(()=>{l()},1e3)})})();
+(()=>{"use strict";const e=e=>{e.classList.remove("mds-switch-state--default"),e.classList.add("mds-switch-state--inverse")},t=e=>{e.classList.remove("mds-switch-state--inverse"),e.classList.add("mds-switch-state--default")},s=()=>{Array.from(document.querySelectorAll(".js-mds-switch-state")).forEach(s=>{s.addEventListener("click",s=>{s.preventDefault(),s.stopPropagation();const a=s.currentTarget;a.classList.contains("mds-switch-state--default")?e(a):(a.classList.contains("mds-switch-state--inverse"),t(a))})})},a="mds-notification",i={init:(e,t,s=3e3)=>{const{body:r}=document;i.hide(r);const n=document.createElement("div");n.setAttribute("role","alert"),n.classList.add(a,"mds-message",`mds-message--${t}`),n.innerText=e,i.show(r,n),setTimeout(i.hide,s,r)},show:(e,t)=>{e.appendChild(t)},hide:e=>{Array.from(e.querySelectorAll(`.${a}`)).forEach(e=>{e.parentNode.removeChild(e)})}},r=i,n=()=>{Array.from(document.querySelectorAll(".js-notification-example")).forEach(e=>{e.addEventListener("click",e=>{e.preventDefault(),e.stopPropagation();const t=e.currentTarget,s=t.innerText,{messageType:a}=t.dataset;r.init(s,a)})})};document.addEventListener("DOMContentLoaded",()=>{s(),n()})})();

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "11.0.0",
+  "version": "12.0.1",
   "main": "dist/js/index.js",
   "exports": {
     ".": "./dist/js/index.js",

package/src/components/inputs/combobox/README.md

@@ -3,7 +3,11 @@
 - `id`: the id of your combobox
 - `name`: the name of the input for form submission. Uses ID unless specified - _optional_
 - `labelText`: the text used in the label
-- `options`: a json object of key, value pairs e.g { 45: 'Orange' }. To be used when falling back to a native select if Javascript is not available
+- `options`: a JSON array, e.g `[{ label: 'Orange', value: 45 }]`. Populates both mds-combobox, and fallback select options
+- `apiUrl`: when populated, `options` is ignored and data is fetching from an API URL instead
+- `apiQueryKey`: the query paramter name added to `apiUrl` - _optional_ (defaults to 'searchText')
+- `apiOptionsPath`: where to grab an array of options on api response, e.g. `data.options` would be an array of options. _optional_ . leave undefined to use root api response as array
+- `optionLabelPath`: where to grab the visual label propertly from the option object e.g. 'label' or 'title' or 'nested.object.label' _optional_ (defaults to `label`)
 - `value`: a default selected value for the input - _optional_
 - `fallbackTo`: the form element to use as a fallback. Should be either 'select' or 'input'
 - `placeholder`: the placeholder for your input (defaults to 'Please select')
@@ -29,13 +33,31 @@ i18n: {
 }
 ```
 
-## Events
+## Updating hidden input values
 
-The following events are emiited.
+When a user selects an option, any inputs passed inside MdsCombobox with the data attribute `data-key` will be populated with values from that chosen option.
 
-- `select-option`
-- `search`
-- `clear-all`
+### Example 1
+
+Populate the hidden input with the `value` property from the selected option `{label:"my label", value: 56}`.
+
+```njk
+{\% call MdsCombobox({...}) \%}
+<input type="hidden" data-key="value" /> <!-- value will be 56 -->
+{\% endcall \%}
+```
+
+### Example 2
+
+Populate the hidden input with the `nested.thing` property from the selected option `{label:"my label", nested: {thing: 989 }, lat: "56.202", lon: '0.142'}`.
+
+```njk
+{\% call MdsCombobox({...}) \%}
+<input type="hidden" data-key="nested.thing" /> <!-- value will be 989 -->
+<input type="hidden" data-key="lat" /> <!-- value will be 56.202 -->
+<input type="hidden" data-key="lon" /> <!-- value will be 0.142 -->
+{\% endcall \%}
+```
 
 ## Accessibility
 

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

@@ -52,47 +52,58 @@
       validationErrorId: validationErrorId,
       validationError: params.validationError
     }) }}
-    <div class="mds-form-element__fallback">
-      {% if params.fallbackTo === 'select' and params.options %}
-        <select
-          class="mds-form-control"
-          id="{{ comboboxId }}"
-          name="{{ comboboxName }}"
-          value="{{ params.defaultValue|default('') }}"
-          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
-        >
-          <option>{{ placeholder }}</option>
-          {%- if params.options -%}
-            {%- for value, option in params.options -%}
-              <option value="{{ value }}">{{ option }}</option>
-            {%- endfor -%}
-          {%- endif -%}
-        </select>
-      {% elseif params.fallbackTo === 'input' %}
-        <input
-          class="mds-form-control"
-          type="text"
-          name="{{ comboboxName }}"
-          autocomplete="off"
-          id="{{ comboboxId }}"
-          value="{{ params.value|default('') }}"
-          placeholder="{{ placeholder }}"
-          {% if params.validationError %}aria-invalid="true"{% endif %}
-          {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
-          />
-      {% endif %}
-    </div>
     {# Leave the custom element at the bottom so it has access to the above elements on render #}
     <mds-combobox
       comboboxid="{{ comboboxId }}"
       placeholder="{{ params.placeholder }}"
       iconpath="{{ defaultIconPath }}"
+      {% if params.options.length %}options="{{params.options | dump}}"{% endif %}
+      {% if params.apiUrl %}api-url="{{params.apiUrl}}"{% endif%}
+      {% if params.apiQueryKey %}api-query-key="{{params.apiQueryKey}}"{% endif%}
+      {% if params.apiOptionsPath %}api-options-path="{{params.apiOptionsPath}}"{% endif%}
+      {% if params.optionLabelPath %}option-label-path="{{params.optionLabelPath}}"{% endif%}
       i18n="{{ params.i18n | dump }}"
       data-aria-invalid="{{ params.validationError }}"
       {% if params.minSearchCharacters %}min-search-characters="{{ params.minSearchCharacters }}"{% endif %}
       {% if params.fallbackTo === 'input' %}name="{{ comboboxName }}"{% endif %}
       {% if params.value %}value="{{ params.value }}"{% endif %}
       {% if ariaDescribedBy %} describedby-id="{{ariaDescribedBy}}"{% endif -%}
-      ></mds-combobox>
+      >
+        <div class="mds-form-element__fallback">
+          {% if params.fallbackTo === 'select' and params.options %}
+            <select
+              class="mds-form-control"
+              id="{{ comboboxId }}"
+              name="{{ comboboxName }}"
+              value="{{ params.defaultValue|default('') }}"
+              {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+            >
+              <option>{{ placeholder }}</option>
+              {%- if params.options -%}
+                {%- for option in params.options -%}
+                  <option value="{{ option.value }}">{{ option.label }}</option>
+                {%- endfor -%}
+              {%- endif -%}
+            </select>
+          {% elseif params.fallbackTo === 'input' %}
+            <input
+              class="mds-form-control"
+              type="text"
+              name="{{ comboboxName }}"
+              autocomplete="off"
+              id="{{ comboboxId }}"
+              value="{{ params.value|default('') }}"
+              placeholder="{{ placeholder }}"
+              {% if params.validationError %}aria-invalid="true"{% endif %}
+              {% if ariaDescribedBy %}aria-describedby="{{ariaDescribedBy}}"{% endif %}
+              />
+          {% endif %}
+        </div>
+        {% if caller %}
+          <span slot="target-inputs">
+             {{- caller() -}}
+          </span>
+        {% endif %}
+      </mds-combobox>
   </div>
 {%- endif -%}

package/src/components/inputs/combobox/combobox.config.js

@@ -1,5 +1,9 @@
-const optionsSalary = { ...new Array(20).fill().map((_, index) => `Up to £${10 + index * 10}k`) };
-const optionsDistance = { ...new Array(20).fill().map((_, index) => `Within ${5 * (1 + index)} miles`) };
+const optionsSalary = new Array(20)
+  .fill()
+  .map((_, index) => ({ label: `Up to £${10 + index * 10}k`, value: 10 + index * 10 }));
+const optionsDistance = new Array(20)
+  .fill()
+  .map((_, index) => ({ label: `Within ${5 * (1 + index)} miles`, value: 5 * (1 + index) }));
 
 module.exports = {
   title: 'Combobox',
@@ -58,6 +62,10 @@ module.exports = {
         placeholder: 'eg. Web developer',
         fallbackTo: 'input',
         minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
         i18n: {
           requiredIcon: 'Required (test i18n)',
           loadingText: 'Loading  (test i18n)',
@@ -82,6 +90,10 @@ module.exports = {
         vModel: 'Initial Value',
         fallbackTo: 'input',
         minSearchCharacters: 3,
+        apiUrl: 'https://api.datamuse.com/sug',
+        apiQueryKey: 's',
+        apiOptionsPath: undefined,
+        optionLabelPath: 'word',
       },
     },
     {

package/src/components/inputs/combobox/combobox.njk

@@ -1,11 +1,11 @@
 {% from "./inputs/combobox/_macro.njk" import MdsCombobox %}
 
 {% if not multiple %}
-
 <div class="mds-grid-row">
   <div class="mds-grid-col-6">
     <h3>{{ variantTitle }}</h3>
-    {{ MdsCombobox({
+
+    {% call MdsCombobox({
       id: id,
       name: name,
       labelText: labelText,
@@ -19,17 +19,27 @@
       validationError: validationError,
       helpText: helpText,
       i18n: i18n,
-      minSearchCharacters: minSearchCharacters
-    }) }}
-    {# 
-      The below only applies to one combobox example.
-      Demonstrates how the clear-all event (fired when combobox is cleared),
-      can be used to clear hidden form fields. 
-     #}
+      minSearchCharacters: minSearchCharacters,
+      apiUrl: apiUrl,
+      apiQueryKey: apiQueryKey,
+      apiOptionsPath: apiOptionsPath,
+      optionLabelPath: optionLabelPath
+    }) %}
+      {# 
+        The below demonstrates how a target input value can be set on option selection, or on clear of combobox
+      #}
+      {% if id === 'salary-selection' %}
+        <input disabled data-key="value" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
+      {% endif %}
+      {% if id === 'keywords-lookup' or id === 'keywords-lookup-prefilled' %}
+        <input disabled data-key="word" placeholder="normally hidden target" style="position:absolute; left: 100%; top: 0;" />
+      {% endif %}
+    {% endcall %}
+
     {% if id === 'salary-selection' %}
-      <p class="mds-margin-top-b3">A hidden input is cleared when clear-all event fires. Check <em>#salary-selection-hidden-input</em> in dev tools.</p>
-      <input type="hidden" id="salary-selection-hidden-input" />
+      <p class="mds-margin-top-b3">A hidden input is cleared when combobox is cleared.
     {% endif %}
+
     <br><br>
   </div>
 </div>

package/src/components/tabs/README.md

@@ -1,20 +1,19 @@
 ## Parameters
 
-- `name`: the name you want to use to differentiate the component
 - `classes`: add extra CSS classes to the component
-- `allHeadersTag`: the html tag to use for the panel header (h2 as default)
-- `allHeadersDisplay`: wheter the panel header should be always visible or not (default false)
-- `content`: is an array of objects containing [label, selected, id, content, headerText, linkCustomAttr] for each tab, the content for the panel can also be a custom component, headerText is 
-text used for each panel header
+- `content`: is an array of objects containing [label, selected, id, content, linkCustomAttr] for each tab, the content for the panel can also be a custom component
 - `content[{linkCustomAttr}]`: you can add extra attributes by passing an object to the parameter. Example: `attributes: { attribute-name: 'attribute-value' }`
 
 ## 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
 
+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
 
-the tabs contain aria-controls and aria-selected for screen readers.
-the panels contain aria-labelledby
+The tabs contain aria-controls and aria-selected for screen readers.
+The panels contain aria-labelledby
+
+Switching tabs should also work if the hash in addressbar is changed
 
-switching tabs should also work if the hash in addressbar is changed
+Include a heading at the beginning of each tab to improve navigation on smaller screen sizes and for screen reader users.
+If needed, you can use the `mds-visually-hidden` class if you don't want to make it visible.

package/src/components/tabs/_template.njk

@@ -1,21 +1,17 @@
 {% from "./tab-id.njk" import TabId %}
 {% from "../../sub-components/attributes/macro.njk" import MdsAttributes %}
-
 {% if params.content %}
-  {% set kebabName -%}
-    {{- params.name | lower | trim | replace(' ', '-') -}}
-  {%- endset %}
   {% set tabVariation -%}
-    {%- if params.content.length > 2 -%}
-      js-desktop-tabbed
-    {%- else -%}
-      mds-tabs--full-tabbed js-full-tabbed
-    {%- endif -%}
+  {%- 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 %}">
+  <div class="mds-tabs {{ tabVariation }}{% if params.classes %} {{ params.classes }}{% endif %}">
     <ul class="mds-tabs__list">
       {%- for item in params.content -%}
-        {%- set tabId = TabId(item, params, loop.index) -%}
+        {%- set tabId = TabId(item, loop.index) -%}
         <li class="mds-tabs__list-item">
           <a href="#{{ tabId }}" id="label-{{ tabId }}" class="mds-tabs__tab{%- if item.selected %} mds-tabs__tab--selected{%- endif %} js-tabs-item" {{ MdsAttributes(item.linkCustomAttr) }}>
             {{- item.label -}}
@@ -24,32 +20,13 @@
       {%- endfor -%}
     </ul>
     {%- for item in params.content -%}
-      {%- set tabId = TabId(item, params, loop.index) %}
-      {%- set allHeadersTag -%}
-        {%- if params.allHeadersTag -%}
-          {{- params.allHeadersTag -}}
-        {%- else -%}
-          h2
-        {%- endif -%}
-      {%- endset -%}
-      {%- set allHeadersDisplay -%}
-        {%- if params.allHeadersDisplay %} mds-tabs__panel-header--visible{%- endif -%}
-      {%- endset -%}
-      {%- set headerText -%}
-        {%- if item.headerText -%}
-          {{- item.headerText | safe -}}
-        {%- else -%}
-          {{- item.label -}}
-        {%- endif -%}
-      {%- endset -%}
-
+      {%- set tabId = TabId(item, loop.index) -%}
+      {# id is used in js to apply aria-labelledby, don't forget to update both if needed #}
       <section class="mds-tabs__panel{%- if not item.selected %} mds-tabs__panel--hidden {%- endif -%}{% if item.contentClasses %} {{ item.contentClasses }}{% endif %}" id="{{ tabId }}">
-        {# id is used in js to apply aria-labelledby, don't forget to update both if needed #}
-        <{{allHeadersTag}} class="mds-tabs__panel-header{{allHeadersDisplay}}">{{- headerText | safe -}}</{{allHeadersTag}}>
         <div class="mds-tabs__panel__content">
           {{ item.content | safe }}
         </div>
       </section>
     {%- endfor -%}
   </div>
-{% endif %}
+{% endif %}

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

@@ -1,13 +1,12 @@
-{%- macro TabId(item, params, loopIndex) -%}
+{%- macro TabId(item, loopIndex) -%}
   {%- if item.id -%}
     {{ item.id }}
   {%- else -%}
     {#
       if the id is missing it will be constructed using:
-      [component name]-[item label]-[index]
+      [item label]-[index]
       e.g. period-next-week-2
     #}
-    {%- if params.name -%}{{ kebabName }}-{%- endif -%}
-    {{ item.label | lower | trim | replace(' ', '-') }}-{{loopIndex}}
+    {{- item.label | lower | trim | replace(' ', '-') }}-{{loopIndex}}
   {%- endif -%}
 {%- endmacro -%}

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

@@ -10,123 +10,98 @@ module.exports = {
         label: 'Today',
         selected: true,
         id: 'today',
-        content:
-          '<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>',
+        content: `<h2>Today</h2>
+          <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:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+        content: `<h2>Tomorrow</h2>
+          <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: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+        content: `<h2>Next week</h2>
+          <ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul>
+          <p>next week</p>`,
         contentClasses: 'mds-prose',
       },
       {
         label: 'Next month',
         id: 'next-month',
-        content:
-          '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+        content: `<h2>Next month</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>`,
       },
     ],
   },
   variants: [
     {
-      name: 'Two Items',
+      name: 'Two Items with visually hidden headers',
       context: {
-        name: 'Two Items',
+        name: 'Two Items with visually hidden headers',
         classes: '',
         content: [
           {
             label: 'Item 1',
             selected: true,
-            content: '<p>When there are only two tabs they remain inline at mobile.</p>',
+            content: `
+            <h2 class="mds-visually-hidden">Section 1</h2>
+            <p>When there are only two tabs they remain inline at mobile.</p>`,
           },
           {
             label: 'Item 2',
-            content: '<p>When there are only two tabs they remain inline at mobile.</p>',
+            content: `<h2 class="mds-visually-hidden">Section 2</h2>
+            <p>When there are only two tabs they remain inline at mobile.</p>`,
           },
         ],
       },
     },
     {
-      name: 'No Ids, visible headers, 3 items',
+      name: 'No Ids, 3 items',
       context: {
-        name: 'No Ids, visible headers, 3 items',
+        name: 'No Ids, 3 items',
         classes: '',
-        allHeadersTag: 'h3',
-        allHeadersDisplay: true,
         content: [
           {
             label: 'Dogs',
-            selected: true,
-            headerText: 'Relevant News about Dogs',
-            content:
-              '<p><strong>No Ids, visible headers, 3 items</strong> 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>',
+            content: `<h2>Dogs</h2>
+              <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',
-            headerText: 'Latest Cats',
-            content:
-              '<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
+            selected: true,
+            content: `<h2>Cats</h2>
+              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>`,
           },
           {
             label: 'Seagulls',
-            headerText: 'Latest News about Seagulls',
-            content: '<ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul><p>next week</p>',
+            content: `<h2>Seagulls</h2>
+            <ul><li>Lorem</li><li>ipsum</li><li>dolor</li><li>sit</li><li>amet</li></ul>
+            <p>next week</p>`,
             contentClasses: 'mds-prose',
           },
         ],
       },
     },
     {
-      name: 'No Ids, visible header, 2 items',
+      name: 'No Ids, 2 items, custom attributes',
       context: {
-        name: 'No Ids, visible header, 2 items',
+        name: 'No Ids, 2 items, custom attributes',
         classes: '',
-        allHeadersTag: 'h3',
-        allHeadersDisplay: true,
         content: [
           {
             label: 'Jobs',
             selected: true,
-            headerText: 'Recruiter&#39;s Latest Jobs',
-            content:
-              '<p><strong>No Ids, visible headers, 2 items</strong> 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>',
+            linkCustomAttr: { 'data-metric': 'jobs' },
+            content: `<h2>Recruiter's Latest Jobs</h2>
+              <p><strong>No Ids, visible headers, 2 items</strong> 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: 'Articles',
-            headerText: 'Recruiter&#39;s Articles',
-            content:
-              '<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>',
-          },
-        ],
-      },
-    },
-    {
-      name: 'Links in tabs have custom attributes',
-      context: {
-        name: 'Custom Link Attributes',
-        classes: '',
-        allHeadersTag: 'h3',
-        content: [
-          {
-            label: 'Plane',
-            selected: true,
-            headerText: 'Flying craft',
-            linkCustomAttr: { 'data-metric': 'wings' },
-            content:
-              '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
-          },
-          {
-            label: 'Helicopter',
-            headerText: 'Flying craft',
-            linkCustomAttr: { 'data-metric': 'rotor-blades' },
-            content:
-              '<p>Inspect the anchor tags inside each tab to see the custom attributes that are added. One use case of this is allowing us to add click metrics.</p>',
+            linkCustomAttr: { 'data-metric': 'recruiters' },
+            content: `<h2>Recruiter's Articles</h2>
+              <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla magna ex, lobortis in luctus quis, viverra eu libero.</p>`,
           },
         ],
       },

package/src/components/tabs/tabs.njk

@@ -4,10 +4,7 @@
 
 <div class="mds-surface mds-margin-bottom-b5">
   {{ MdsTabs({
-    name: name,
     classes: classes,
-    allHeadersTag: allHeadersTag,
-    allHeadersDisplay: allHeadersDisplay,
     content: content
   }) }}
 </div>

package/src/components/tabs/tabs.scss

@@ -14,16 +14,6 @@
   }
 }
 
-.mds-tabs__panel-header {
-  @extend .mds-font-s2;
-  @extend .mds-surface__inner;
-  border-bottom: $regular-border;
-  padding-top: $constant-size-baseline * 3;
-  padding-bottom: $constant-size-baseline * 3;
-  margin-bottom: 0;
-  background: $constant-color-neutral-lightest;
-}
-
 .mds-tabs__list-item {
   @extend .mds-font-s2;
 }
@@ -48,17 +38,6 @@
     width: auto;
   }
 
-  .mds-tabs__panel-header:not(.mds-tabs__panel-header--visible) {
-    @include mds-visually-hidden;
-  }
-
-  .mds-tabs__panel-header--visible {
-    background: transparent;
-    border-bottom: 0;
-    padding-top: $constant-size-baseline * 8;
-    padding-bottom: 0;
-  }
-
   .mds-tabs__panel--hidden {
     display: none;
   }

package/src/js/index-fractal.js

@@ -1,11 +1,7 @@
 import switchStateScript from './fractal-scripts/switch-state';
 import notificationScript from './fractal-scripts/notification';
-import comboboxScript from './fractal-scripts/combobox';
 
 document.addEventListener('DOMContentLoaded', () => {
   switchStateScript.init();
   notificationScript.init();
-  setTimeout(() => {
-    comboboxScript.init();
-  }, 1000);
 });