@ons/design-system 67.0.3 → 67.0.4

package/components/details/_details.scss

@@ -23,6 +23,7 @@ $details-caret-width: 1.5rem;
           margin-left: -$details-caret-width;
           padding-left: $details-caret-width;
         }
+
         .ons-details__icon .ons-icon {
           fill: var(--ons-color-text-link-focus);
         }
@@ -30,9 +31,11 @@ $details-caret-width: 1.5rem;
 
       &:hover:not(:focus) {
         color: var(--ons-color-text-link-hover);
+
         .ons-details__icon {
           fill: var(--ons-color-text-link-hover);
         }
+
         .ons-details__title {
           text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
         }
@@ -60,6 +63,7 @@ $details-caret-width: 1.5rem;
       margin-bottom: 0;
       text-underline-position: under;
       transform: translateY(-1px);
+      pointer-events: none;
     }
   }
 
@@ -126,5 +130,6 @@ $details-caret-width: 1.5rem;
 
   &__icon {
     display: none;
+    pointer-events: none;
   }
 }

package/components/details/_macro.njk

@@ -11,15 +11,15 @@
             class="ons-details__heading ons-js-details-heading" role="button"
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
-                {% set titleTag = params.titleTag | default("h2") %}
-                <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
-                <span class="ons-details__icon">
-                    {% from "components/icon/_macro.njk" import onsIcon %}
-                    {{-
-                        onsIcon({
-                            "iconType": "chevron"
-                        })
-                    -}}</span>
+            {% set titleTag = params.titleTag | default("h2") %}
+            <{{ titleTag }} class="ons-details__title">{{ params.title }}</{{ titleTag }}>
+            <span class="ons-details__icon">
+                {% from "components/icon/_macro.njk" import onsIcon %}
+                {{-
+                    onsIcon({
+                        "iconType": "chevron"
+                    })
+                -}}</span>
         </div>
         <div id="{{ params.id }}-content" class="ons-details__content ons-js-details-content"
             {% if params.contentAttributes %}{% for attribute, value in (params.contentAttributes.items() if params.contentAttributes is mapping and params.contentAttributes.items else params.contentAttributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}

package/components/header/example-header-external-with-sub-navigation-removed.njk

@@ -0,0 +1,70 @@
+---
+"fullWidth": true
+---
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
+        "title": 'Service manual',
+        "mastheadLogoUrl": '#0',
+        "titleUrl": '#0',
+        "navigation": {
+            "id": 'main-nav',
+            "ariaLabel": 'Main menu',
+            "currentPath": [ '#design-system', '#patterns', '#access-codes' ],
+            "currentPageTitle": 'Design system',
+            "itemsList": [
+                {
+                    "text": 'Service standard',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Design system',
+                    "url": '#design-system'
+                },
+                {
+                    "text": 'Accessibility',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Brand guidelines',
+                    "url": '#0'
+                },
+                {
+                    "text": 'Content style guide',
+                    "url": '#0'
+                }
+            ],
+            "toggleNavigationButton": {
+                "text": 'Menu',
+                "ariaLabel": 'Toggle menu'
+            },
+            "subNavigation": {
+                "id": 'sub-nav',
+                "overviewURL": '#design-system',
+                "overviewText": 'Overview',
+                "ariaLabel": 'Section menu',
+                "currentPath": '#access-codes',
+                "removeHorizontalSubNav": true,
+                "itemsList": [
+                    {
+                        "text": 'Guidance',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Foundations',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Components',
+                        "url": '#0'
+                    },
+                    {
+                        "text": 'Patterns',
+                        "url": '#patterns'
+                    }
+                ]
+            }
+        }
+    })
+}}

package/components/input/_input.scss

@@ -62,6 +62,12 @@
   &--with-description {
     margin-bottom: 0.55rem;
   }
+
+  &--with-text-description {
+    position: relative;
+
+  }
+
 }
 
 // Text input widths

package/components/input/_macro.njk

@@ -57,7 +57,7 @@
         {% endif %}
     {% endset %}
     {% set field %}
-        {% if params.label and params.label.text %}
+        {% if (not params.accessiblePlaceholder or params.label.description) and (params.label and params.label.text)%}
             {{ onsLabel({
                 "for": params.id,
                 "id": params.label.id,
@@ -68,6 +68,7 @@
                 "accessiblePlaceholder": params.accessiblePlaceholder,
                 "inline": params.label.inline
             }) }}
+
         {% endif %}
 
         {% if params.prefix or params.suffix %}
@@ -100,7 +101,19 @@
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex ons-input_search-button">
+            <span class="ons-grid--flex  ons-input_search-button{% if params.label.description %} ons-input--with-text-description{% endif %}"> 
+                {% if params.accessiblePlaceholder %}
+                {{ onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "attributes": params.label.attributes,
+                    "accessiblePlaceholder": params.accessiblePlaceholder,
+                    "inline": params.label.inline
+                }) }}
+           {% endif %}
+
                 {{ input | safe }}
                 {%- set buttonLabel -%}
                     {%- if params.searchButton.visuallyHideButtonText == true -%}
@@ -124,7 +137,24 @@
                 }}
             </span>
         {% else %}
+            {% if params.accessiblePlaceholder %}
+            <span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
+                {% if params.accessiblePlaceholder %}
+                    {{ onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "attributes": params.label.attributes,
+                    "accessiblePlaceholder": params.accessiblePlaceholder,
+                    "inline": params.label.inline
+                }) }}
+                {% endif %}
+            {% endif %}
             {{ input | safe }}
+            {% if params.accessiblePlaceholder %}
+            </span>
+         {% endif %}
         {% endif %}
     {% endset %}
 

package/components/input/example-input-text-width-constrained.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text-width",
+        "id": "postcode",
         "width": "7",
         "autocomplete": "postal-code",
         "label": {

package/components/label/_macro.njk

@@ -16,7 +16,9 @@
               {{- params.description -}}
         </span>
     {%- endset %}
-
+    {%- if params.description and params.accessiblePlaceholder -%}
+        {{- description | safe -}}    
+    {%- else -%}
     <label
         class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
         {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
@@ -41,4 +43,5 @@
                 {{- description | safe -}}
             {%- endif -%}
         {%- endif %}
+    {%- endif -%} 
 {% endmacro %}

package/components/navigation/_macro.njk

@@ -58,21 +58,23 @@
         </div>
     </div>
     {% if params.navigation.subNavigation %}
-        <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-            <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 }}">
-                <ul class="ons-navigation__list ons-navigation__list">
-                    {% for item in params.navigation.subNavigation.itemsList %}
-                        <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 %}>
-                                {% if item.title %}{{ item.title }}
-                                {% elif item.text %}{{ item.text }}
-                                {% endif %}
-                            </a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </nav>
+        {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
+            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
+                <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 }}">
+                    <ul class="ons-navigation__list ons-navigation__list">
+                        {% for item in params.navigation.subNavigation.itemsList %}
+                            <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 %}>
+                                    {% if item.title %}{{ item.title }}
+                                    {% elif item.text %}{{ item.text }}
+                                    {% endif %}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+            </nav>
+        {% endif %}
         <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,

package/components/navigation/navigation.spec.js

@@ -86,6 +86,66 @@ const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION = {
   },
 };
 
+const EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED = {
+  navigation: {
+    id: 'main-nav',
+    ariaLabel: 'Main menu',
+    currentPath: '#1',
+    currentPageTitle: 'Main nav item 2',
+    itemsList: [
+      {
+        title: 'Main nav item 1',
+        url: '#0',
+        classes: 'custom-class-main-item-1',
+        id: 'main-item-1',
+      },
+      {
+        title: 'Main nav item 2',
+        url: '#1',
+        classes: 'custom-class-main-item-2',
+        id: 'main-item-2',
+      },
+    ],
+    subNavigation: {
+      id: 'sub-nav-hidden',
+      overviewURL: '#overview',
+      overviewText: 'Overview',
+      ariaLabel: 'Section menu',
+      currentPath: '#1',
+      removeHorizontalSubNav: true,
+      itemsList: [
+        {
+          title: 'Sub nav item 1',
+          url: '#0',
+          classes: 'custom-class-sub-item-1',
+          id: 'sub-item-1',
+        },
+        {
+          title: 'Sub nav item 2',
+          url: '#1',
+          classes: 'custom-class-sub-item-2',
+          id: 'sub-item-2',
+          sections: [
+            {
+              sectionTitle: 'Section 1',
+              children: [
+                {
+                  title: 'Child item 1',
+                  url: '#0',
+                },
+                {
+                  title: 'Child item 2',
+                  url: '#1',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
 describe('script: navigation', () => {
   afterEach(async () => {
     // Clear viewport size and browser emulation after each test.
@@ -102,7 +162,7 @@ describe('script: navigation', () => {
       });
 
       it('has removed the display class from the menu toggle button', async () => {
-        const hasClass = await page.$eval(buttonEl, node => node.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
     });
@@ -115,13 +175,13 @@ describe('script: navigation', () => {
 
       it('has the correct aria hidden attribute on the navigation list', async () => {
         const nav = await page.$(navEl);
-        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+        const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null);
         expect(hasAriaAttribute).toBe(ariaStatus);
       });
 
       it('has aria-expanded set as `false` on the navigation toggle button', async () => {
         const button = await page.$(buttonEl);
-        const ariaExpandedIsFalse = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+        const ariaExpandedIsFalse = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false');
         expect(ariaExpandedIsFalse).toBe(true);
       });
     });
@@ -134,7 +194,7 @@ describe('script: navigation', () => {
 
       it('has aria-hidden set as `true` on the navigation list', async () => {
         const nav = await page.$(navEl);
-        const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+        const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true');
         expect(hasAriaAttribute).toBe(true);
       });
 
@@ -146,12 +206,12 @@ describe('script: navigation', () => {
 
         it('has aria-hidden set as `false` on the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'false');
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'false');
           expect(hasAriaAttribute).toBe(true);
         });
 
         it('has the hide class removed from the navigation list', async () => {
-          const hasClass = await page.$eval(navEl, node =>
+          const hasClass = await page.$eval(navEl, (node) =>
             node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
           );
           expect(hasClass).toBe(false);
@@ -159,12 +219,12 @@ describe('script: navigation', () => {
 
         it('has aria-expanded set as `true` on the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'true');
+          const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'true');
           expect(ariaExpandedIsTrue).toBe(true);
         });
 
         it('has the correct class applied to the navigation toggle button', async () => {
-          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active'));
           expect(hasClass).toBe(true);
         });
       });
@@ -180,18 +240,18 @@ describe('script: navigation', () => {
 
         it('has aria-hidden set as `true` on the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') === 'true');
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') === 'true');
           expect(hasAriaAttribute).toBe(true);
         });
 
         it('has aria-expanded set as `false` on the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const ariaExpandedIsTrue = await button.evaluate(node => node.getAttribute('aria-expanded') === 'false');
+          const ariaExpandedIsTrue = await button.evaluate((node) => node.getAttribute('aria-expanded') === 'false');
           expect(ariaExpandedIsTrue).toBe(true);
         });
 
         it('has the active class removed from the navigation toggle button', async () => {
-          const hasClass = await page.$eval(buttonEl, node => node.classList.contains('active'));
+          const hasClass = await page.$eval(buttonEl, (node) => node.classList.contains('active'));
           expect(hasClass).toBe(false);
         });
       });
@@ -210,18 +270,18 @@ describe('script: navigation', () => {
 
         it('has the aria-hidden attribute removed from the navigation list', async () => {
           const nav = await page.$(navEl);
-          const hasAriaAttribute = await nav.evaluate(node => node.getAttribute('aria-hidden') !== null);
+          const hasAriaAttribute = await nav.evaluate((node) => node.getAttribute('aria-hidden') !== null);
           expect(hasAriaAttribute).toBe(false);
         });
 
         it('has aria-expanded removed from the navigation toggle button', async () => {
           const button = await page.$(buttonEl);
-          const hasAriaExpanded = await button.evaluate(node => node.getAttribute('aria-expanded') !== null);
+          const hasAriaExpanded = await button.evaluate((node) => node.getAttribute('aria-expanded') !== null);
           expect(hasAriaExpanded).toBe(false);
         });
 
         it('has the hide class removed from the navigation list', async () => {
-          const hasClass = await page.$eval(navEl, node =>
+          const hasClass = await page.$eval(navEl, (node) =>
             node.classList.contains('ons-u-d-no@xxs@l' || 'ons-u-d-no' || 'ons-u-d-no@xs@l'),
           );
           expect(hasClass).toBe(false);
@@ -230,3 +290,18 @@ describe('script: navigation', () => {
     },
   );
 });
+
+describe('level: sub navigation', () => {
+  describe('when removeHorizontalSubNav is set to true', () => {
+    beforeEach(async () => {
+      await setTestPage('/test', renderComponent('header', EXAMPLE_NAVIGATION_WITH_SUBNAVIGATION_REMOVED));
+    });
+
+    it('does not render the sub-nav element', async () => {
+      const hasSubNavEl = (await page.content()).includes('.ons-navigation--sub');
+      expect(hasSubNavEl).toBe(false);
+    });
+  });
+});
+
+

package/components/tabs/_macro.njk

@@ -15,7 +15,7 @@
         <div>
             <ul class="ons-tabs__list">
                 {%- for tab in params.tabs -%}
-                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab" data-ga="click" data-ga-category="tabs" data-ga-action="Show: {{ tab.title }}" data-ga-label="Show: {{ tab.title }}">{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-vh'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
+                    <li class="ons-tab__list-item"><a href="#{{ tab.id if tab.id else tab.title|trim|replace(' ','-')|lower}}" class="ons-tab"{% if tab.attributes %}{% for attribute, value in (tab.attributes.items() if tab.attributes is mapping and tab.attributes.items else tab.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}>{{ tab.title }}{% if tab.hiddenSpan %}<span class='ons-u-vh'>{{tab.hiddenSpan}}</span>{% endif %}</a></li>
                 {%- endfor -%}
             </ul>
         </div>

package/components/tabs/_macro.spec.js

@@ -112,16 +112,6 @@ describe('macro: tabs', () => {
     expect($('.ons-tab:last').text().trim()).toBe('Tab 2');
   });
 
-  it('has Google Analytics integration on tab links', () => {
-    const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));
-
-    const tabItem = $('.ons-tab');
-    expect(tabItem.attr('data-ga')).toBe('click');
-    expect(tabItem.attr('data-ga-category')).toBe('tabs');
-    expect(tabItem.attr('data-ga-action')).toBe('Show: Tab 1');
-    expect(tabItem.attr('data-ga-label')).toBe('Show: Tab 1');
-  });
-
   it('has expected content in tab panels', () => {
     const $ = cheerio.load(renderComponent('tabs', EXAMPLE_TABS));