@ons/design-system 62.2.1 → 62.2.2

package/README.md

@@ -43,7 +43,7 @@ yarn start
 
 Once the server has started, navigate to <http://localhost:3030>
 
-## Testing
+## Testing - macros and scripts
 
 This project uses [jest](https://jestjs.io/docs/cli) and supports its command line options.
 
@@ -109,6 +109,32 @@ It is sometimes useful to adjust the following settings when writing tests or di
 
 - `testTimeout` in 'jest.config.js' - set to a high value such as `1000000` to prevent tests from timing out when doing the above.
 
+## Testing - Visual regression tests
+
+This project uses [Backstop JS](https://github.com/garris/BackstopJS) for visual regression testing. The tests run in Chrome headless using pupeteer inside docker and run in three viewports; 1920 (desktop), 768 (tablet) and 375 (mobile). Reference images are stored in Git LFS and any approved changes will automatically be stored in Git LFS when pushed to the repository.
+
+The visual tests will run automatically on pull requests and the result will be available in the Github Action logs. If the tests fail, the process for viewing the failures and approving changes will need to be handled locally using the following workflow and commands.
+
+The first time you run the tests locally you will need to install Git LFS on your machine. Follow the install instructions for [Git LFS](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage).
+
+You will need to have Docker installed and started locally. We are using Docker as there are font rendering issues that caused failures across different os versions when we run the tests in CI. There is further information on this in the [Backstop JS docs](https://github.com/garris/BackstopJS#using-docker-for-testing-across-different-environments).
+
+Checkout the branch locally and run:
+
+`git lfs fetch` - This downloads the files into your `.git/lfs` if you have never run vr test locally.
+
+`git lfs checkout` - This will pull the current reference images from the repository for you to test against.
+
+`yarn test-visual` - This will run the same tests locally as were run in Github Actions. After they have completed the report will open in your default browser.
+
+`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.
+
 ## Build
 
 Generate a build into `./build`.

package/components/autosuggest/_macro.njk

@@ -37,7 +37,7 @@
 
         {% set autosuggestResults %}
             <div class="ons-autosuggest-input__results ons-js-autosuggest-results">
-                <header id="{{ params.resultsTitleId }}" class="ons-autosuggest-input__results-title ons-u-fs-s">{{ params.resultsTitle }}</header>
+                <div id="{{ params.resultsTitleId }}" class="ons-autosuggest-input__results-title ons-u-fs-s">{{ params.resultsTitle }}</div>
                 <ul class="ons-autosuggest-input__listbox ons-js-autosuggest-listbox" title="{{ params.resultsTitle }}" role="listbox" id="{{ params.id }}-listbox" tabindex="-1"></ul>
             </div>
             <div class="ons-autosuggest-input__instructions ons-u-vh ons-js-autosuggest-instructions" id="{{ params.id }}-instructions" tabindex="-1">{{ params.instructions }}</div>

package/components/autosuggest/_macro.spec.js

@@ -182,13 +182,13 @@ describe('macro: autosuggest', () => {
       expect($('.ons-autosuggest-input__results').length).toBe(0);
     });
 
-    it('renders header with the provided title identifier', () => {
+    it('renders div with the provided title identifier', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       expect($('.ons-autosuggest-input__results-title').attr('id')).toBe('country-of-birth-suggestions');
     });
 
-    it('renders header with the provided title text', () => {
+    it('renders div with the provided title text', () => {
       const $ = cheerio.load(renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
 
       expect(

package/components/document-list/example-document-list-articles.njk

@@ -24,7 +24,7 @@
         {
             "thumbnail": {
                 "smallSrc": '/img/small/ons-award-winners.jpg',
-                "largeSrc": '/img/large/cons-award-winners.jpg'
+                "largeSrc": '/img/large/ons-award-winners.jpg'
             },
             "url": '#0',
             "title": 'Office for National Statistics win top Royal Statistical Society award',

package/components/document-list/example-document-list-downloads.njk

@@ -2,10 +2,7 @@
 {{ onsDocumentList({
     "documents": [
         {
-            "thumbnail": {
-                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021-v2.png',
-                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021-v2.png'
-            },
+            "thumbnail": true,
             "url": '#',            
             "title": 'Including everyone in Census 2021',
             "metadata": {
@@ -21,10 +18,7 @@
             "description": 'Empty belly poster, aimed at advertising census events.'
         },
         {
-            "thumbnail": {
-                "smallSrc": '/patternlib-img/download-resources/img/small/including-everyone-in-census-2021.png',
-                "largeSrc": '/patternlib-img/download-resources/img/large/including-everyone-in-census-2021.png'
-            },
+            "thumbnail": true,
             "url": '#',            
             "title": 'Community handbook for Census 2021',
             "metadata": {

package/components/input/_macro.njk

@@ -27,7 +27,8 @@
             type="{{ type }}"
             id="{{ params.id }}"
             class="ons-input ons-input--text ons-input-type__input{% if params.error %} ons-input--error{% endif %}{% if params.searchButton %} ons-search__input{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}{% if params.width %} ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if params.prefix and params.prefix.id %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
+            {% if params.prefix and params.prefix.id and not params.prefix.title %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id and not params.suffix.title %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
+            {% if params.prefix and params.prefix.id %}aria-labelledby="{{ params.id }} {{ params.prefix.id }}"{% elif params.suffix and params.suffix.id %}aria-labelledby="{{ params.id }} {{ params.suffix.id }}"{% endif %}
             {% if params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -89,6 +90,10 @@
                         <{{ tag }}
                             id="{{ abbr.id }}"
                             class="ons-input-type__type ons-js-input-abbr"
+                            {% if params.prefix or params.suffix %}
+                            aria-label="{{ abbr.title }}"
+                            role="figure"
+                            {% endif %}
                             {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
                             >{{ abbr.text }}</{{ tag }}>
                     </span>

package/components/input/_macro.spec.js

@@ -380,7 +380,7 @@ describe('macro: input', () => {
       expect(results).toHaveNoViolations();
     });
 
-    it('adds `aria-labelledby` attribute when `prefix` is provided', () => {
+    it('adds `aria-labelledby` attribute when `prefix` is provided with `prefix.title`', () => {
       const $ = cheerio.load(
         renderComponent('input', {
           ...EXAMPLE_INPUT_MINIMAL,
@@ -391,6 +391,19 @@ describe('macro: input', () => {
         }),
       );
 
+      expect($('.ons-input').attr('aria-labelledby')).toBe('example-id example-prefix-id');
+    });
+
+    it('adds `aria-labelledby` attribute when `prefix` is provided without `prefix.title`', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          prefix: {
+            id: 'example-prefix-id',
+          },
+        }),
+      );
+
       expect($('.ons-input').attr('aria-labelledby')).toBe('example-prefix-id');
     });
 
@@ -440,6 +453,19 @@ describe('macro: input', () => {
         }),
       );
 
+      expect($('.ons-input').attr('aria-labelledby')).toBe('example-id example-suffix-id');
+    });
+
+    it('adds `aria-labelledby` attribute when `suffix` is provided without `suffix.title`', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          suffix: {
+            id: 'example-suffix-id',
+          },
+        }),
+      );
+
       expect($('.ons-input').attr('aria-labelledby')).toBe('example-suffix-id');
     });
 

package/components/section-navigation/_macro.njk

@@ -1,25 +1,58 @@
 {% macro onsSectionNavigation(params) %}
-  <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-label="{{ params.ariaLabel | default("Section menu") }}">
-      <ul class="ons-section-nav__list">
-        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
-          {% 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>
-              {% 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 %}
-                          <li class="ons-section-nav__item ons-list__item">
-                              <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
-                          </li>
-                      {% endfor %}
-                  </ul>
-              {% endif %}
-          </li>
-        {% endfor %}
-      </ul>
+  <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-label="{{ params.ariaLabel | default("Section menu") }}">
+    {% if params.sections %}
+      {% for section in params.sections %}
+        <div class="ons-section-nav__sub">
+          {% if section.title %}
+            <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h3>{% endif %}
+              <ul class="ons-section-nav__list">
+                {% for item in (section.itemsList if section.itemsList is iterable else section.itemsList.items()) %}
+                  {% 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>
+                      {% 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">
+                                      <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                  </li>
+                              {% endfor %}
+                          </ul>
+                      {% endif %}
+                  </li>
+                {% endfor %}
+              </ul>
+        </div>
+      {% endfor %} 
+      {% else %} 
+        {% if params.title %}
+          <h3 class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h3>
+        {% endif %}
+            <ul class="ons-section-nav__list">
+              {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
+                {% 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>
+                    {% 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 %}
+                                <li class="ons-section-nav__item ons-list__item">
+                                    <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                </li>
+                            {% endfor %}
+                        </ul>
+                    {% endif %}
+                </li>
+              {% endfor %}
+            </ul>  
+    {% endif %}  
   </nav>
 {% endmacro %}

package/components/section-navigation/_macro.spec.js

@@ -54,6 +54,44 @@ const EXAMPLE_SECTION_NAVIGATION_VERTICAL = {
   ],
 };
 
+const EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS = {
+  variants: 'vertical',
+  currentPath: '#section-2',
+  sections: [
+    {
+      title: 'Section Title',
+      itemsList: [
+        {
+          title: 'Section 1',
+          url: '#section-1',
+        },
+        {
+          title: 'Section 2',
+          url: '#section-2',
+          anchors: [
+            {
+              title: 'Sub section 1',
+              url: '#sub-section-1',
+            },
+            {
+              title: 'Sub section 2',
+              url: '#sub-section-2',
+            },
+            {
+              title: 'Sub section 3',
+              url: '#sub-section-3',
+            },
+          ],
+        },
+        {
+          title: 'Section 3',
+          url: '#0',
+        },
+      ],
+    },
+  ],
+};
+
 describe('macro: section-navigation', () => {
   describe('variant: horizontal', () => {
     it('passes jest-axe checks', async () => {
@@ -208,5 +246,31 @@ describe('macro: section-navigation', () => {
         expect(itemLinks).toEqual(['#sub-section-1', '#sub-section-2', '#sub-section-3']);
       });
     });
+
+    describe('Section Items', () => {
+      it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
+      });
+
+      it('renders itemsLists, anchors and heading for each section', () => {
+        const $ = cheerio.load(renderComponent('section-navigation', EXAMPLE_SECTION_NAVIGATION_VERTICAL_WITH_SECTIONS));
+
+        const anchors = mapAll($('.ons-section-nav__sub-items .ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        expect(anchors).toEqual(['Sub section 1', 'Sub section 2', 'Sub section 3']);
+
+        const itemLists = mapAll($('.ons-section-nav__item .ons-section-nav__link'), node => node.text().trim());
+        expect(itemLists).toEqual(['Section 1', 'Section 2', 'Sub section 1', 'Sub section 2', 'Sub section 3', 'Section 3']);
+
+        const headings = mapAll($('h3'), node =>
+          $(node)
+            .text()
+            .trim(),
+        );
+        expect(headings).toEqual(['Section Title']);
+      });
+    });
   });
 });

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

@@ -9,6 +9,11 @@
     padding: 0;
   }
 
+  &__sub {
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
+  }
+
   &__link {
     text-decoration: none;
     &:hover {

package/components/section-navigation/example-section-navigation-vertical.njk

@@ -3,37 +3,77 @@
     onsSectionNavigation({
         "variants": "vertical",
         "id": "section-menu",
-        "currentPath": "#section-2",
-        "itemsList": [
+        "currentPath": "#section-6",
+        "sections":[
             {
-                "title": "Section 1",
-                "url": "#section-1"
-            },
-            {
-                "title": "Section 2",
-                "url": "#section-2",
-                "anchors": [
+                "title": "Section Title",
+                "itemsList": [
+                    {
+                        "title": "Section 1",
+                        "url": "#section-1",
+                        "anchors": [
+                            {
+                                "title": "Sub section 1",
+                                "url": "#sub-section-1"
+                            },
+                            {
+                                "title": "Sub section 2",
+                                "url": "#sub-section-2"
+                            },
+                            {
+                                "title": "Sub section 3",
+                                "url": "#sub-section-3"
+                            }
+                        ]
+                    },
                     {
-                        "title": "Sub section 1",
-                        "url": "#sub-section-1"
+                        "title": "Section 2",
+                        "url": "#section-2"
                     },
                     {
-                        "title": "Sub section 2",
-                        "url": "#sub-section-2"
+                        "title": "Section 3",
+                        "url": "#section-3"
                     },
                     {
-                        "title": "Sub section 3",
-                        "url": "#sub-section-3"
+                        "title": "Section 4",
+                        "url": "#section-4"
                     }
                 ]
             },
             {
-                "title": "Section 3",
-                "url": "#0"
-            },
-            {
-                "title": "Section 4",
-                "url": "#0"
+                "title": "Section Title",
+                "itemsList": [
+                    {
+                        "title": "Section 5",
+                        "url": "#section-5"
+                    },
+                    {
+                        "title": "Section 6",
+                        "url": "#section-6",
+                        "anchors": [
+                            {
+                                "title": "Sub section 1",
+                                "url": "#sub-section-1"
+                            },
+                            {
+                                "title": "Sub section 2",
+                                "url": "#sub-section-2"
+                            },
+                            {
+                                "title": "Sub section 3",
+                                "url": "#sub-section-3"
+                            }
+                        ]
+                    },
+                    {
+                        "title": "Section 7",
+                        "url": "#0"
+                    },
+                    {
+                        "title": "Section 8",
+                        "url": "#0"
+                    }
+                ]
             }
         ]
     })

package/components/textarea/textarea.dom.js

@@ -1,11 +1,7 @@
-import autosize from 'autosize';
-
 import domready from '../../js/domready';
 
 async function initialise() {
   const limitedInputs = [...document.querySelectorAll('.ons-js-char-limit-input')];
-  autosize(document.querySelectorAll('textarea'));
-
   if (limitedInputs.length) {
     const CharLimit = (await import('../char-check-limit/character-limit')).default;
 

package/components/timeout-modal/example-timeout-modal.njk

@@ -1,7 +1,7 @@
 {% from "components/timeout-modal/_macro.njk" import onsTimeoutModal %}
 
 {{ onsTimeoutModal({
-    "showModalTimeInSeconds": 58,
+    "showModalTimeInSeconds": 60,
     "redirectUrl": "#!",
     "title": "You will be signed out soon",
     "textFirstLine": "It appears you have been inactive for a while.",