@ons/design-system 67.0.0 → 67.0.1

package/README.md

@@ -130,11 +130,12 @@ Checkout the branch locally and run:
 
 `yarn test-visual:approve` - This will approve the failures/diff caught by the tests.
 
-`yarn test-visual:reference` - This will update the reference images locally on your machine.
 
 `git lfs push --all origin` - First commit the files in the normal way then run the command. This will push the new reference images to Git LFS.
 
-You can then commit and push your changes. The test images that would have been created when you ran `yest test-visual` are gitignored and the new references images will be pushed to Git LFS.
+You can then commit and push the updated references and your changes to your branch. The test images that would have been created when you ran `yarn test-visual` are gitignored and the new references images will be pushed to Git LFS.
+
+If your local tests are failing but you have approved them, run `yarn test-visual:reference`. This will update the reference images locally on your machine.
 
 ## Build
 

package/components/details/_macro.njk

@@ -8,7 +8,7 @@
         {% if params.open %} data-open="true"{% endif %}
     >
         <div
-            class="ons-details__heading ons-js-details-heading"
+            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") %}

package/components/header/_header.scss

@@ -229,4 +229,8 @@
       margin-top: -5px !important;
     }
   }
+
+  .ons-btn {
+    top: 0 !important;
+  }
 }

package/components/header/_macro.njk

@@ -12,7 +12,7 @@
         {% set currentLanguageISOCode = currentLanguage.ISOCode %}
     {% endif %}
 
-    <header class="ons-header {% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
+    <header class="ons-header{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
@@ -141,22 +141,22 @@
                     <ul class="ons-header-service-nav__list">
                         {% for item in params.serviceLinks.itemsList %}
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
-                            {% if item.iconType %}
-                                {{
-                                    onsIcon({
-                                        "iconType": item.iconType
-                                    })
-                                }}
-                            {% endif %}
-                            {% if item.url %}
-                                <a
-                                    href="{{ item.url }}"
-                                    class="ons-header-service-nav__link"
-                                    {% if item.id %} id="{{ item.id }}"{% endif %}
-                                >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
-                            {% else %}
-                                {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
-                            {% endif %}
+                                {% if item.iconType %}
+                                    {{
+                                        onsIcon({
+                                            "iconType": item.iconType
+                                        })
+                                    }}
+                                {% endif %}
+                                {% if item.url %}
+                                    <a
+                                        href="{{ item.url }}"
+                                        class="ons-header-service-nav__link"
+                                        {% if item.id %} id="{{ item.id }}"{% endif %}
+                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
+                                {% else %}
+                                    {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
+                                {% endif %}
                             </li>
                         {% endfor %}
                     </ul>

package/components/input/_input-type.scss

@@ -14,12 +14,12 @@
     z-index: 1;
 
     &:focus {
-      // Overide default input focus so it can wrap prefix/suffix too
+      // Override default input focus so it can wrap prefix/suffix too
       box-shadow: none;
       outline: none;
     }
 
-    // Overide default input error style so it can wrap prefix/suffix too
+    // Override default input error style so it can wrap prefix/suffix too
     &.ons-input--error:not(:focus) {
       border-right: $input-border-width solid var(--ons-color-input-border);
       box-shadow: none;

package/components/input/_macro.njk

@@ -76,7 +76,7 @@
                     {% set prefixClass = " ons-input-type--prefix" %}
                 {% endif %}
 
-                <span class="ons-input-type{{ prefixClass }}">
+                <span class="ons-input-type{{ prefixClass }}{% if params.prefix or params.suffix %} ons-js-input-container-abbr{% endif %}">
                     <span class="ons-input-type__inner">
                         {{ input | safe }}
 

package/components/input/_macro.spec.js

@@ -245,7 +245,7 @@ describe('macro: input', () => {
     expect($('.ons-input').attr('autocomplete')).toBe('on');
   });
 
-  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', type => {
+  it.each([['email'], ['tel'], ['text']])('outputs `type` attribute of "%s"', (type) => {
     const $ = cheerio.load(
       renderComponent('input', {
         ...EXAMPLE_INPUT_MINIMAL,
@@ -421,11 +421,7 @@ describe('macro: input', () => {
 
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('id')).toBe('example-prefix-id');
       expect($('.ons-input-type--prefix .ons-js-input-abbr').attr('title')).toBe('Example prefix title');
-      expect(
-        $('.ons-input-type--prefix .ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example prefix text');
+      expect($('.ons-input-type--prefix .ons-js-input-abbr').text().trim()).toBe('Example prefix text');
     });
 
     it('does not render prefix element when `prefix.id` not set', () => {
@@ -483,11 +479,7 @@ describe('macro: input', () => {
 
       expect($('.ons-js-input-abbr').attr('id')).toBe('example-suffix-id');
       expect($('.ons-js-input-abbr').attr('title')).toBe('Example suffix title');
-      expect(
-        $('.ons-js-input-abbr')
-          .text()
-          .trim(),
-      ).toBe('Example suffix text');
+      expect($('.ons-js-input-abbr').text().trim()).toBe('Example suffix text');
     });
 
     it('does not render suffix element when `suffix.id` not set', () => {
@@ -653,11 +645,7 @@ describe('macro: input', () => {
       );
 
       expect($('a.ons-input__post-link').attr('href')).toBe('https://example.com/link');
-      expect(
-        $('a.ons-input__post-link')
-          .text()
-          .trim(),
-      ).toBe('Example link');
+      expect($('a.ons-input__post-link').text().trim()).toBe('Example link');
     });
   });
 

package/components/input/input.dom.js

@@ -0,0 +1,11 @@
+import domready from '../../js/domready';
+
+domready(async () => {
+  const abbrInputs = [...document.querySelectorAll('.ons-js-input-container-abbr')];
+
+  if (abbrInputs.length) {
+    const abbrInput = (await import('./input')).default;
+
+    abbrInputs.forEach((element) => new abbrInput(element));
+  }
+});

package/components/input/input.js

@@ -0,0 +1,14 @@
+export default class AbbrInput {
+  constructor(context) {
+    this.abbrInput = context;
+    this.bindEventListeners();
+  }
+
+  bindEventListeners() {
+    this.abbrInput.querySelector('.ons-js-input-abbr').addEventListener('click', this.handleClick.bind(this));
+  }
+
+  handleClick() {
+    this.abbrInput.querySelector('.ons-input').focus();
+  }
+}

package/components/input/input.spec.js

@@ -0,0 +1,28 @@
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker, setTestPage } from '../../tests/helpers/rendering';
+
+const EXAMPLE_INPUT_MINIMAL = {
+  id: 'example-id',
+  name: 'example-name',
+};
+
+describe('script: input', () => {
+  it('focuses input when abbreviation is clicked', async () => {
+    await setTestPage(
+      '/test',
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        prefix: {
+          id: 'example-prefix-id',
+          title: 'Example prefix title',
+          text: 'Example prefix text',
+        },
+      }),
+    );
+    await page.click('.ons-js-input-abbr');
+    const focusedElementId = await page.evaluate(() => document.activeElement.id);
+    expect(focusedElementId).toEqual('example-id');
+  });
+});

package/components/section-navigation/_macro.njk

@@ -1,11 +1,14 @@
 {% macro onsSectionNavigation(params) %}
+    {% set headingLevel = params.headingLevel | int | default(2) %}
+    {% set sectionTitleHeadingLevel =  headingLevel + 1 %}
     <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-    <h2 class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h2>
+    <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
         {% if params.sections %}
             {% for section in params.sections %}
+                {% set sectionItemHeadingLevel =  headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
-                        <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>
+                        <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
                     {% endif %}
                     <ul class="ons-section-nav__list">
                         {% for item in section.itemsList %}
@@ -14,9 +17,13 @@
                             {% else %}
                                 {% set isCurrent = false %}
                             {% endif %}
-                            <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                                <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-                                {% if item.anchors and isCurrent == true %}
+                            <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                              {% if isCurrent == true %} 
+                                  <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                              {% else %}
+                                  <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                              {% endif %}
+                            {% if item.anchors and isCurrent == true %}
                                     <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
@@ -32,17 +39,22 @@
             {% endfor %}
         {% else %}
             {% if params.title %}
-                <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
+                <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
+                    {% set sectionItemHeadingLevel =  headingLevel + 2 if params.title else headingLevel + 1 %}
                     {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                         {% set isCurrent = true %}
                     {% else %}
                         {% set isCurrent = false %}
                     {% endif %}
-                    <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                        <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
+                    <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                        {% if isCurrent == true %} 
+                            <h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                        {% else %}
+                            <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                        {% endif %}
                         {% if item.anchors %}
                             <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                 {% for anchor in item.anchors %}

package/components/section-navigation/_section-navigation.scss

@@ -30,7 +30,12 @@
       font-weight: $font-weight-bold;
       margin-left: -18px;
       padding-left: 14px;
-      a {
+      a,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
         color: var(--ons-color-text-link-active);
       }
     }
@@ -39,6 +44,14 @@
     }
   }
 
+  &__item-header {
+    @extend .ons-u-mb-no;
+
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.6;
+  }
+
   &__sub-items {
     a {
       color: var(--ons-color-text-link);
@@ -58,7 +71,12 @@
         border-color: var(--ons-color-text-link-active);
         margin: 0 1rem 0 0;
         padding: 0;
-        a {
+        a,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
           color: var(--ons-color-text-link-active);
         }
       }