@ons/design-system 56.0.1 → 57.0.0

package/components/button/_macro.njk

@@ -64,7 +64,7 @@
         {% endif %}
     {% endif %}
 
-    {% set tag = "a" if params.url or params.dsExample else "button" %}
+    {% set tag = "a" if params.url else "button" %}
 
     <{{ tag }}
         {% if params.url %}

package/components/button/_macro.spec.js

@@ -16,16 +16,6 @@ describe('macro: button', () => {
     expect($('#example-id').length).toBe(1);
   });
 
-  it('is an `a` element when `dsExample` is truthy', () => {
-    const $ = cheerio.load(
-      renderComponent('button', {
-        dsExample: true,
-      }),
-    );
-
-    expect($('a').length).toBe(1);
-  });
-
   it('has additionally provided `attributes`', () => {
     const $ = cheerio.load(
       renderComponent('button', {

package/components/checkboxes/_checkbox-macro.njk

@@ -76,7 +76,7 @@
                             "legend": params.other.legend,
                             "legendClasses": params.other.legendClasses,
                             "attributes": params.other.attributes,
-                            "classes": "ons-js-other-fieldset",
+                            "classes": "ons-js-other-fieldset-checkbox",
                             "checkboxes": params.other.checkboxes,
                             "autoSelect": params.other.autoSelect
                         })
@@ -91,7 +91,7 @@
                             "legend": params.other.legend,
                             "legendClasses": params.other.legendClasses,
                             "attributes": params.other.attributes,
-                            "classes": "ons-js-other-fieldset",
+                            "classes": "ons-js-other-fieldset-checkbox",
                             "radios": params.other.radios
                         })
                     }}

package/components/checkboxes/_checkbox-macro.spec.js

@@ -390,7 +390,7 @@ describe('macro: checkboxes/checkbox', () => {
       legend: 'Select preferred times of day',
       legendClasses: 'extra-legend-class',
       attributes: { a: 42 },
-      classes: 'ons-js-other-fieldset',
+      classes: 'ons-js-other-fieldset-checkbox',
       checkboxes: EXAMPLE_CHECKBOXES_ITEM_CHECKBOXES.other.checkboxes,
       autoSelect: EXAMPLE_CHECKBOXES_ITEM_CHECKBOXES.other.autoSelect,
     });
@@ -412,7 +412,7 @@ describe('macro: checkboxes/checkbox', () => {
       legend: 'Select preferred times of day',
       legendClasses: 'extra-legend-class',
       attributes: { a: 42 },
-      classes: 'ons-js-other-fieldset',
+      classes: 'ons-js-other-fieldset-checkbox',
       radios: EXAMPLE_CHECKBOXES_ITEM_RADIOS.other.radios,
     });
   });

package/components/checkboxes/checkbox-with-fieldset.js

@@ -1,15 +1,14 @@
 export default class CheckboxWithFieldset {
-  constructor(fieldset, checkboxes) {
-    this.fieldset = fieldset;
-    this.checkboxes = checkboxes;
-    this.fieldsetParent = fieldset.closest('.ons-checkbox');
-    this.selectAllChildrenInput = this.fieldsetParent.querySelector('.ons-js-select-all-children');
-    this.childInputs = [...this.fieldset.querySelectorAll('input')];
+  constructor(context) {
+    this.context = context;
+    this.checkbox = context.querySelector('.ons-js-checkbox');
+    this.childInputs = [...this.context.querySelectorAll('input')];
+    this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
 
     if (this.selectAllChildrenInput) {
       this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
     } else {
-      this.checkboxes.forEach(checkbox => checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+      this.checkbox.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this));
     }
   }
 
@@ -20,8 +19,7 @@ export default class CheckboxWithFieldset {
   }
 
   uncheckChildInputsOnDeselect() {
-    const isOther = this.checkboxes.find(checkbox => checkbox.classList.contains('ons-js-other'));
-    if (isOther && isOther.checked === false) {
+    if (this.checkbox.checked === false) {
       this.childInputs.forEach(input => {
         input.checked = false;
       });

package/components/checkboxes/checkboxes.dom.js

@@ -15,12 +15,12 @@ domready(async () => {
       new CheckCheckbox(checkboxInput, openOther);
     }
 
-    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset')];
+    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-checkbox')];
     if (otherFieldsets) {
       const CheckboxWithInnerFieldset = (await import('./checkbox-with-fieldset')).default;
-
       otherFieldsets.forEach(otherFieldset => {
-        new CheckboxWithInnerFieldset(otherFieldset, checkboxes);
+        const context = otherFieldset.closest('.ons-checkbox');
+        new CheckboxWithInnerFieldset(context);
       });
     }
 

package/components/date-input/_macro.spec.js

@@ -274,12 +274,11 @@ describe('macro: date input', () => {
 
       faker.renderComponent('date-input', {
         ...EXAMPLE_DATE_SINGLE_FIELD,
-        error: { text: 'Enter a date that is after 1 January 2019', dsExample: false },
+        error: { text: 'Enter a date that is after 1 January 2019' },
       });
 
       expect(errorSpy.occurrences[0]).toEqual({
         text: 'Enter a date that is after 1 January 2019',
-        dsExample: false,
       });
     });
   });

package/components/duration/_macro.spec.js

@@ -236,12 +236,11 @@ describe('macro: duration', () => {
 
       faker.renderComponent('duration', {
         ...EXAMPLE_DURATION_SINGLE_FIELD,
-        error: { text: 'Put something else', dsExample: false },
+        error: { text: 'Put something else' },
       });
 
       expect(errorSpy.occurrences[0]).toEqual({
         text: 'Put something else',
-        dsExample: false,
       });
     });
   });

package/components/error/_macro.njk

@@ -13,8 +13,7 @@
 
     {% call onsPanel({
         "type": "error",
-        "id": params.id,
-        "dsExample": params.dsExample
+        "id": params.id
     }) %}
        {{ content | safe }}
     {% endcall %}

package/components/navigation/_macro.njk

@@ -3,7 +3,7 @@
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
         <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
-            {% if params.navigation.siteSearchAutosuggest and isPatternLib %}
+            {% if params.navigation.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
                     {% set autosuggestLabelClasses = "ons-u-pl-m" %}
@@ -41,8 +41,8 @@
             <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
                 <ul class="ons-navigation__list">
                     {% for item in (params.navigation.itemsList if params.navigation.itemsList is iterable else params.navigation.itemsList.items()) %}
-                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (item.url != (params.navigation.siteBasePath | default('/')) and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
+                           <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -54,7 +54,7 @@
             <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
                 <ul class="ons-navigation__list ons-navigation__list">
                     {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
-                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
+                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
                             <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
@@ -80,14 +80,14 @@
                             <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a>
                         </li>
                         {% for item in (params.navigation.subNavigation.itemsList if params.navigation.subNavigation.itemsList is iterable else params.navigation.subNavigation.itemsList.items()) %}
-                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url != (params.navigation.subNavigation.siteBasePath | default('/')) and item.url in params.navigation.subNavigation.currentPath) }}">
+                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
                                 <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
                                 {% if item.sections %}
                                     {% for section in item.sections %}
                                         {% if section.sectionTitle %}<h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>{% endif %}
                                         <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
                                             {% for child in section.children %}
-                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.subNavigation.currentPath) or (child.url != (params.navigation.subNavigation.sitsiteBasePatheBasePath | default('/')) and child.url in params.navigation.subNavigation.currentPath) }}">
+                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
                                                     <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
                                                 </li>
                                             {% endfor %}

package/components/navigation/_macro.spec.js

@@ -9,7 +9,7 @@ import { mapAll } from '../../tests/helpers/cheerio';
 const PARAMS = {
   id: 'main-nav',
   ariaLabel: 'Main menu',
-  currentPath: '#1',
+  currentPath: ['#1', '/sub-item-1', '/sub-item-2/child-item-1'],
   currentPageTitle: 'Main nav item 2',
   itemsList: [
     {
@@ -32,19 +32,18 @@ const PARAMS = {
     overviewURL: '#overview',
     overviewText: 'Overview',
     ariaLabel: 'Section menu',
-    currentPath: '#1',
     itemsList: [
       {
         title: 'Sub nav item 1',
         ariaLabel: 'Sub nav ariaLabel 1',
-        url: '#0',
+        url: '/sub-item-1',
         classes: 'custom-class-sub-item-1',
         id: 'sub-item-1',
       },
       {
         title: 'Sub nav item 2',
         ariaLabel: 'Sub nav ariaLabel 2',
-        url: '#1',
+        url: '/sub-item-2',
         classes: 'custom-class-sub-item-2',
         id: 'sub-item-2',
         sections: [
@@ -54,12 +53,14 @@ const PARAMS = {
               {
                 title: 'Child item 1',
                 ariaLabel: 'Child item ariaLabel 1',
-                url: '#0',
+                url: '/sub-item-2/child-item-1',
+                id: 'child-item-1',
               },
               {
                 title: 'Child item 2',
                 ariaLabel: 'Child item ariaLabel 2',
-                url: '#1',
+                url: '/sub-item-2/child-item-2',
+                id: 'child-item-2',
               },
             ],
           },
@@ -233,7 +234,7 @@ describe('macro: navigation', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
       const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('href'));
-      expect(values).toEqual(['#0', '#1']);
+      expect(values).toEqual(['/sub-item-1', '/sub-item-2']);
     });
 
     it('has the correct link text for each list item', () => {
@@ -268,12 +269,22 @@ describe('macro: navigation', () => {
       );
     });
 
-    it('has the active class on the correct item', () => {
+    it('has the active class on the correct item when a single current path is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('navigation', {
+          navigation: {
+            ...PARAMS,
+            currentPath: '/sub-item-1',
+          },
+        }),
+      );
+      expect($('#sub-nav .ons-navigation__item--active > #sub-item-1').length).toBe(1);
+    });
+
+    it('has the active class on the correct item when multiple current paths are provided', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
-      expect(
-        $('.ons-navigation--sub .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
-      ).toBe(true);
+      expect($('#sub-nav .ons-navigation__item--active > #sub-item-1').length).toBe(1);
     });
   });
 
@@ -297,7 +308,7 @@ describe('macro: navigation', () => {
         $('.ons-navigation__list--parent > li a').not('.ons-navigation__list--parent li .ons-navigation__list--child a'),
         node => node.attr('href'),
       );
-      expect(values).toEqual(['#overview', '#0', '#1']);
+      expect(values).toEqual(['#overview', '/sub-item-1', '/sub-item-2']);
     });
 
     it('has the correct link text for each list item', () => {
@@ -310,12 +321,22 @@ describe('macro: navigation', () => {
       expect(values).toEqual(['Overview', 'Sub nav item 1', 'Sub nav item 2']);
     });
 
-    it('has the active class on the correct item', () => {
+    it('has the active class on the correct item when a single current path is provided', () => {
+      const $ = cheerio.load(
+        renderComponent('navigation', {
+          navigation: {
+            ...PARAMS,
+            currentPath: '/sub-item-1',
+          },
+        }),
+      );
+      expect($('#sub-nav--mobile .ons-navigation__item--active > #sub-item-1--mobile').length).toBe(1);
+    });
+
+    it('has the active class on the correct item when multiple current paths are provided', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
-      expect(
-        $('.ons-navigation--sub-mobile .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
-      ).toBe(true);
+      expect($('#sub-nav--mobile .ons-navigation__item--active > #sub-item-1--mobile').length).toBe(1);
     });
 
     it('has the correct text for the child section title', () => {
@@ -328,7 +349,7 @@ describe('macro: navigation', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
       const values = mapAll($('.ons-navigation__list--child > li a'), node => node.attr('href'));
-      expect(values).toEqual(['#0', '#1']);
+      expect(values).toEqual(['/sub-item-2/child-item-1', '/sub-item-2/child-item-2']);
     });
 
     it('has the correct link text for each child list item', () => {
@@ -341,9 +362,7 @@ describe('macro: navigation', () => {
     it('has the active class on the correct child item', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
-      expect(
-        $('.ons-navigation--sub-mobile .ons-navigation__list .ons-navigation__item:last-child').hasClass('ons-navigation__item--active'),
-      ).toBe(true);
+      expect($('#sub-nav--mobile .ons-navigation__item--active > #child-item-1').length).toBe(1);
     });
   });
 });

package/components/panel/_macro.njk

@@ -31,7 +31,7 @@
             <div class="ons-container">
     {% endif %}
 
-        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
 
             {% if params.type == "warn" or params.type == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>

package/components/panel/_macro.spec.js

@@ -264,14 +264,21 @@ describe('macro: panel', () => {
       expect($('.ons-panel').attr('autofocus')).toBe('autofocus');
     });
 
-    it('does not have the autofocus attribute set if `dsExample` is provided', () => {
+    it('does not have the autofocus attribute set if `isDesignSystemExample` is provided', () => {
+      const isDesignSystemExample = true;
+
       const $ = cheerio.load(
-        renderComponent('panel', {
-          ...EXAMPLE_PANEL_BASIC,
-          title: 'Title',
-          type: panelType,
-          dsExample: true,
-        }),
+        renderComponent(
+          'panel',
+          {
+            ...EXAMPLE_PANEL_BASIC,
+            title: 'Title',
+            type: panelType,
+          },
+          null,
+          null,
+          isDesignSystemExample,
+        ),
       );
 
       expect($('.ons-panel').attr('autofocus')).toBe(undefined);

package/components/radios/_macro.njk

@@ -94,7 +94,7 @@
                                             "legend": radio.other.legend,
                                             "legendClasses": radio.other.legendClasses,
                                             "attributes": radio.other.attributes,
-                                            "classes": "ons-js-other-fieldset",
+                                            "classes": "ons-js-other-fieldset-radio",
                                             "checkboxes": radio.other.checkboxes,
                                             "autoSelect": radio.other.autoSelect,
                                             "selectAllChildren": radio.other.selectAllChildren
@@ -110,7 +110,7 @@
                                             "legend": radio.other.legend,
                                             "legendClasses": radio.other.legendClasses | default('') + ' ons-u-mb-xs',
                                             "attributes": radio.other.attributes,
-                                            "classes": "ons-js-other-fieldset",
+                                            "classes": "ons-js-other-fieldset-radio",
                                             "radios": radio.other.radios
                                         })
                                     }}

package/components/radios/_macro.spec.js

@@ -512,7 +512,7 @@ describe('macro: radios', () => {
         legend: 'Select preferred times of day',
         legendClasses: 'extra-legend-class',
         attributes: { a: 42 },
-        classes: 'ons-js-other-fieldset',
+        classes: 'ons-js-other-fieldset-radio',
         checkboxes: EXAMPLE_RADIO_ITEM_CHECKBOXES.other.checkboxes,
         autoSelect: EXAMPLE_RADIO_ITEM_CHECKBOXES.other.autoSelect,
         selectAllChildren: true,
@@ -535,7 +535,7 @@ describe('macro: radios', () => {
         legend: 'Select preferred times of day',
         legendClasses: 'extra-legend-class ons-u-mb-xs',
         attributes: { a: 42 },
-        classes: 'ons-js-other-fieldset',
+        classes: 'ons-js-other-fieldset-radio',
         radios: EXAMPLE_RADIO_ITEM_RADIOS.other.radios,
       });
     });

package/components/radios/radio-with-fieldset.js

@@ -0,0 +1,29 @@
+export default class RadioWithFieldset {
+  constructor(context) {
+    this.context = context;
+    this.radios = [...context.closest('.ons-radios__items').querySelectorAll('.ons-js-radio')];
+    this.childInputs = [...this.context.querySelectorAll('input')];
+    this.selectAllChildrenInput = this.context.querySelector('.ons-js-select-all-children');
+
+    if (this.selectAllChildrenInput) {
+      this.selectAllChildrenInput.addEventListener('change', this.checkChildInputsOnSelect.bind(this));
+    } else {
+      this.radios.forEach(radio => radio.addEventListener('change', this.uncheckChildInputsOnDeselect.bind(this)));
+    }
+  }
+
+  checkChildInputsOnSelect() {
+    this.childInputs.forEach(input => {
+      input.checked = this.selectAllChildrenInput.checked === true ? true : false;
+    });
+  }
+
+  uncheckChildInputsOnDeselect() {
+    const isOther = this.radios.find(radio => radio.classList.contains('ons-js-other'));
+    if (isOther && isOther.checked === false) {
+      this.childInputs.forEach(input => {
+        input.checked = false;
+      });
+    }
+  }
+}

package/components/radios/radios.dom.js

@@ -25,14 +25,13 @@ domready(async () => {
       new CheckRadios(radioInput, openOther);
     }
 
-    const other = document.querySelector('.ons-js-other');
-    if (other) {
-      const otherFieldset = other.parentNode.querySelector('.ons-js-other-fieldset');
-      if (otherFieldset) {
-        const CheckboxWithInnerFieldset = (await import('../checkboxes/checkbox-with-fieldset')).default;
-
-        new CheckboxWithInnerFieldset(otherFieldset, radios);
-      }
+    const otherFieldsets = [...document.querySelectorAll('.ons-js-other-fieldset-radio')];
+    if (otherFieldsets) {
+      const RadioWithInnerFieldset = (await import('./radio-with-fieldset')).default;
+      otherFieldsets.forEach(otherFieldset => {
+        const context = otherFieldset.closest('.ons-radio');
+        new RadioWithInnerFieldset(context);
+      });
     }
   }
 });