@ons/design-system 72.10.8 → 72.10.10

package/README.md

@@ -14,26 +14,30 @@ Nunjucks macros for components and templates are available from npm. Built CSS a
 yarn add @ons/design-system
 ```
 
-## Run Locally
+## Running the DS Locally
 
-You'll need [Git](https://help.github.com/articles/set-up-git/), [Node.js](https://nodejs.org/en/), and [Yarn](https://yarnpkg.com/en/docs/getting-started) to run this project locally.
+You'll need to install:
+
+-   [Git](https://help.github.com/articles/set-up-git/)
+-   [Node.js](https://nodejs.org/en/)
+-   [Yarn](https://yarnpkg.com/en/docs/getting-started) (When installing yarn be sure to install yarn through brew using `brew install yarn` not using npm)
 
 The version of node required is outlined in [.nvmrc](./.nvmrc).
 
-### Using nvm (optional)
+### Using NVM
 
 If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.
 
 To enable this we use [nvm (Node Version Manager)](https://github.com/creationix/nvm) to switch between versions easily.
 
 1. [install nvm](https://github.com/creationix/nvm#installation)
-2. Run nvm install in the project directory (this will use .nvmrc)
+2. Run `nvm install` in the project directory (this will use .nvmrc)
 
 ### Install dependencies
 
 ```bash
 yarn install
-yarn husky install
+yarn husky
 ```
 
 ### Start a local server

package/components/accordion/accordion.js

@@ -1,3 +1,4 @@
+import DOMPurify from 'dompurify';
 export default class Accordion {
     constructor(button, detailsEls) {
         this.openDetailsEls = 0;
@@ -52,11 +53,11 @@ export default class Accordion {
 
     setButton() {
         if (this.canClose()) {
-            this.buttonInner.innerHTML = this.closeButton;
+            this.buttonInner.innerHTML = DOMPurify.sanitize(this.closeButton);
             this.button.setAttribute('data-ga-label', this.buttonOpen);
             this.button.setAttribute('aria-expanded', 'true');
         } else {
-            this.buttonInner.innerHTML = this.buttonOpen;
+            this.buttonInner.innerHTML = DOMPurify.sanitize(this.buttonOpen);
             this.button.setAttribute('data-ga-label', this.closeButton);
             this.button.setAttribute('aria-expanded', 'false');
         }

package/components/announcement-banner/_announcement-banner.scss

@@ -0,0 +1,24 @@
+.ons-announcement-banner {
+    color: var(--ons-color-text-inverse);
+    padding: 1rem;
+    &--black {
+        background-color: var(--ons-color-gov-black);
+    }
+
+    &--teal {
+        background-color: var(--ons-color-gov-teal);
+    }
+
+    &--red {
+        background-color: var(--ons-color-gov-red);
+    }
+
+    &__link {
+        color: var(--ons-color-text-inverse);
+
+        &:hover {
+            color: var(--ons-color-text-inverse);
+            text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+        }
+    }
+}

package/components/announcement-banner/_macro.njk

@@ -0,0 +1,33 @@
+{% macro onsAnnouncementBanner(params) %}
+
+    {% if params.variants %}
+        {% if 'wide' in params.variants %}
+            {% set width = "wide" %}
+        {% endif %}
+    {% endif %}
+
+    {% set content %}
+        <div
+            class="ons-announcement-banner{% if params.variants %}{% if params.variants == 'wide' or params.variants | length == 1 and 'wide' in params.variants %}{{ ' ' }}ons-announcement-banner--black{% elif params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-announcement-banner--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-announcement-banner--{{ params.variants }}{% endif %}{% else %}{{ ' ' }}ons-announcement-banner--black{% endif %}"
+        >
+            <h2 class="ons-announcement-banner__title">{{ params.title }}</h2>
+            <p class="ons-announcement-banner__description">{{ params.description }}</p>
+            <a
+                class="ons-announcement-banner__link"
+                {% if params.link.attributes %}{% for attribute, value in (params.link.attributes.items() if params.link.attributes is mapping and params.link.attributes.items else params.link.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                href="{{ params.link.url }}"
+                >{{ params.link.text }}</a
+            >
+        </div>
+    {% endset %}
+
+    {% if width != "wide" %}
+        <div
+            class="ons-announcement-banner__container{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-announcement-banner--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-announcement-banner--{{ params.variants }}{% endif %}{% else %}{{ ' ' }}ons-announcement-banner--black{% endif %}"
+        >
+            <div class="ons-container">{{ content | safe }}</div>
+        </div>
+    {% else %}
+        {{ content | safe }}
+    {% endif %}
+{% endmacro %}

package/components/announcement-banner/_macro.spec.js

@@ -0,0 +1,106 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+import { EXAMPLE_FULL_ANNOUNCEMENT_BANNER, EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER } from './_test_examples';
+
+describe('FOR: Macro: Announcement-banner', () => {
+    describe('GIVEN: Params: required', () => {
+        describe('WHEN: all required params are provided', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER));
+            test('THEN: jest-axe checks pass', async () => {
+                const results = await axe($.html());
+                expect(results).toHaveNoViolations();
+            });
+
+            test('THEN: the title has the provided text', async () => {
+                const title = $('.ons-announcement-banner__title');
+                expect(title.text().trim()).toBe('This is a black banner');
+            });
+
+            test('THEN: the description has the provided text', async () => {
+                const description = $('.ons-announcement-banner__description');
+                expect(description.text().trim()).toBe('This is a description for the black banner');
+            });
+
+            test('THEN: the link points to the provided URL', async () => {
+                const linkUrl = $('.ons-announcement-banner__link');
+                expect(linkUrl.attr('href')).toBe('http://example.com');
+            });
+
+            test('THEN: the link has the provided link text', async () => {
+                const linkText = $('.ons-announcement-banner__link');
+                expect(linkText.text().trim()).toBe('Find out more');
+            });
+
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+
+            test('THEN: containers are created', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(1);
+            });
+        });
+    });
+
+    describe('GIVEN: Params: link attributes', () => {
+        const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_FULL_ANNOUNCEMENT_BANNER));
+        describe('WHEN: link attributes are provided', () => {
+            test('THEN: the link has the provided attributes', async () => {
+                const link = $('.ons-announcement-banner__link');
+                expect(link.attr('abc')).toBe('123');
+                expect(link.attr('def')).toBe('456');
+            });
+        });
+    });
+
+    describe('GIVEN: Params: variants', () => {
+        describe('WHEN: variants is provided as a string', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', EXAMPLE_FULL_ANNOUNCEMENT_BANNER));
+            test('THEN: the banner has the correct variant class', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--red')).toBe(true);
+            });
+        });
+        describe('WHEN: wide is provided as one of the variants', () => {
+            const $ = cheerio.load(
+                renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide', 'red'] }),
+            );
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--red > .ons-container').length).toBe(0);
+            });
+        });
+        describe('WHEN: red is provided alongside other variants', () => {
+            const $ = cheerio.load(
+                renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide', 'red'] }),
+            );
+            test('THEN: the banner has the correct variant class', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--red')).toBe(true);
+            });
+        });
+        describe('WHEN: wide is provided as the only variant as a string', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: 'wide' }));
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(0);
+            });
+        });
+        describe('WHEN: wide is provided as the only variant in an array', () => {
+            const $ = cheerio.load(renderComponent('announcement-banner', { ...EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER, variants: ['wide'] }));
+            test('THEN: it defaults to the black variant', async () => {
+                const banner = $('.ons-announcement-banner');
+                expect(banner.hasClass('ons-announcement-banner--black')).toBe(true);
+            });
+            test('THEN: containers are not created with the correct classes', () => {
+                expect($('.ons-announcement-banner--black > .ons-container').length).toBe(0);
+            });
+        });
+    });
+});

package/components/announcement-banner/_test_examples.js

@@ -0,0 +1,22 @@
+export const EXAMPLE_FULL_ANNOUNCEMENT_BANNER = {
+    variants: 'red',
+    title: 'This is a red banner',
+    description: 'This is a description for the red banner',
+    link: {
+        text: 'Find out more',
+        url: 'http://example.com',
+        attributes: {
+            abc: '123',
+            def: '456',
+        },
+    },
+};
+
+export const EXAMPLE_REQUIRED_ANNOUNCEMENT_BANNER = {
+    title: 'This is a black banner',
+    description: 'This is a description for the black banner',
+    link: {
+        text: 'Find out more',
+        url: 'http://example.com',
+    },
+};

package/components/announcement-banner/example-banner-black.njk

@@ -0,0 +1,12 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "title": 'His Royal Highness Henry VIII',
+        "description": '1491 to 1547',
+        "link": {
+            "text": 'Find out more',
+            "url": '#0'
+        }
+    })
+}}

package/components/announcement-banner/example-banner-red.njk

@@ -0,0 +1,13 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "variants": ['red', 'wide'],
+        "title": 'National emergency',
+        "description": 'This is a level 1 incident',
+        "link": {
+            "text": 'More information',
+            "url": '#0'
+        }
+    })
+}}

package/components/announcement-banner/example-banner-teal.njk

@@ -0,0 +1,13 @@
+{% from "components/announcement-banner/_macro.njk" import onsAnnouncementBanner %}
+
+{{
+    onsAnnouncementBanner({
+        "variants": 'teal',
+        "title": 'Local emergency',
+        "description": 'This is a level 2 incident',
+        "link": {
+            "text": 'More information',
+            "url": '#0'
+        }
+    })
+}}

package/components/autosuggest/autosuggest.spec.js

@@ -386,9 +386,11 @@ describe('script: autosuggest', () => {
     describe('when the mouse moves over a result and a suggestion is focused', () => {
         it('removes the focused class', async () => {
             await setTestPage('/test', renderComponent('autosuggest', EXAMPLE_AUTOSUGGEST));
+            await page.mouse.move(0, 0); // move out of the component
 
             await page.type('.ons-js-autosuggest-input', 'state', { delay: 20 });
             await page.keyboard.press('ArrowDown');
+
             await page.hover('.ons-autosuggest__option:nth-child(2)');
 
             const focusedClassCount = await page.$$eval('.ons-autosuggest__option--focused', (nodes) => nodes.length);

package/components/autosuggest/autosuggest.ui.js

@@ -1,6 +1,7 @@
 import abortableFetch from '../../js/abortable-fetch';
 import { sanitiseAutosuggestText } from './autosuggest.helpers';
 import runFuse from './fuse-config';
+import DOMPurify from 'dompurify';
 
 export const baseClass = 'ons-js-autosuggest';
 
@@ -398,7 +399,7 @@ export default class AutosuggestUI {
                 const listElement = document.createElement('li');
                 listElement.className = `${classAutosuggestOption} ${classAutosuggestOptionMoreResults}`;
                 listElement.setAttribute('aria-hidden', 'true');
-                listElement.innerHTML = this.moreResults;
+                listElement.innerHTML = DOMPurify.sanitize(this.moreResults);
                 this.listbox.appendChild(listElement);
             }
 
@@ -436,10 +437,12 @@ export default class AutosuggestUI {
         if (status === 400 || status === false) {
             message = this.typeMore;
             this.setAriaStatus(message);
-            this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
+            this.listbox.innerHTML = DOMPurify.sanitize(
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+            );
         } else if (status > 400 || status === '') {
-            message =
-                this.errorAPI + (this.errorAPILinkText ? ' <a href="' + window.location.href + '">' + this.errorAPILinkText + '</a>.' : '');
+            const sanitizedHref = DOMPurify.sanitize(window.location.href);
+            message = this.errorAPI + (this.errorAPILinkText ? ' <a href="' + sanitizedHref + '">' + this.errorAPILinkText + '</a>.' : '');
             let ariaMessage = this.errorAPI + (this.errorAPILinkText ? ' ' + this.errorAPILinkText : '');
 
             this.input.setAttribute('disabled', true);
@@ -453,7 +456,9 @@ export default class AutosuggestUI {
             this.resultsTitleContainer.remove();
         } else {
             message = this.noResults;
-            this.listbox.innerHTML = `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`;
+            this.listbox.innerHTML = DOMPurify.sanitize(
+                `<li class="${classAutosuggestOption} ${classAutosuggestOptionNoResults}">${message}</li>`,
+            );
         }
     }
 
@@ -503,7 +508,7 @@ export default class AutosuggestUI {
                 }
             }
         }
-        this.ariaStatus.innerHTML = content;
+        this.ariaStatus.innerHTML = DOMPurify.sanitize(content);
     }
 
     selectResult(index) {
@@ -548,7 +553,7 @@ export default class AutosuggestUI {
         warningSpanElement.innerHTML = '!';
 
         warningBodyElement.className = 'ons-panel__body';
-        warningBodyElement.innerHTML = content;
+        warningBodyElement.innerHTML = DOMPurify.sanitize(content);
 
         warningElement.appendChild(warningSpanElement);
         warningElement.appendChild(warningBodyElement);

package/components/breadcrumbs/_breadcrumbs.scss

@@ -1,5 +1,58 @@
 $breadcrumb-chevron-height: 0.65rem;
 
+.ons-breadcrumbs-wrapper {
+    position: relative;
+    z-index: 10;
+    margin-bottom: -2rem;
+    &--grey {
+        background-color: var(--ons-color-banner-bg);
+    }
+
+    &--dark {
+        background-color: var(--ons-color-hero-bg-dark);
+    }
+
+    &--navy-blue {
+        background-color: var(--ons-color-navy-blue-light);
+        margin-bottom: -1.75rem;
+        @include mq(l) {
+            margin-bottom: -3.25rem;
+        }
+    }
+
+    &--dark,
+    &--navy-blue {
+        .ons-icon {
+            color: var(--ons-color-text-inverse);
+        }
+
+        .ons-breadcrumbs__link {
+            color: var(--ons-color-text-inverse);
+            text-decoration: underline;
+
+            &:hover {
+                color: var(--ons-color-text-inverse);
+                text-decoration: underline solid var(--ons-color-text-inverse) 2px;
+            }
+
+            &:focus {
+                color: var(--ons-color-text);
+            }
+
+            &:focus:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+    &--pale-blue {
+        background-color: var(--ons-color-pale-blue);
+    }
+    .ons-breadcrumbs {
+        padding: 1rem;
+    }
+}
+
 .ons-breadcrumbs {
     align-items: center;
     display: flex;

package/components/breadcrumbs/_macro.njk

@@ -1,28 +1,37 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
-
 {% macro onsBreadcrumbs(params) %}
-    <nav
-        class="ons-breadcrumbs{{ ' ' + params.classes if params.classes else '' }}"
-        aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}
-    >
-        <ol class="ons-breadcrumbs__items ons-u-fs-s">
-            {%- for item in params.itemsList -%}
-                <li class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a
-                        class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
-                        href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
-                        {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
-                        {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-                        >{{ item.text }}</a
+    {% set breadcrumbs %}
+        <nav
+            class="ons-breadcrumbs{{ ' ons-container' if params.variant }}{{ ' ' + params.classes if params.classes else '' }}"
+            aria-label="{{ params.ariaLabel | default('Breadcrumbs') }}"
+            {% if params.id %}id="{{ params.id }}"{% endif %}
+        >
+            <ol class="ons-breadcrumbs__items ons-u-fs-s">
+                {%- for item in params.itemsList -%}
+                    <li
+                        class="ons-breadcrumbs__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}"
+                        id="breadcrumb-{{ loop.index }}"
                     >
-                    {{-
-                        onsIcon({
-                            "iconType": "chevron"
-                        })
-                    -}}
-                </li>
-            {%- endfor -%}
-        </ol>
-    </nav>
+                        <a
+                            class="ons-breadcrumbs__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}"
+                            href="{% if not isDesignSystemExample %}{{ item.url }}{% else %}#0{% endif %}"
+                            {% if item.id %}{{ ' ' }}id='{{ item.id }}'{% endif %}
+                            {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                            >{{ item.text }}</a
+                        >
+                        {{-
+                            onsIcon({
+                                "iconType": "chevron"
+                            })
+                        -}}
+                    </li>
+                {%- endfor -%}
+            </ol>
+        </nav>
+    {% endset %}
+    {% if params.variant %}
+        <div class="ons-breadcrumbs-wrapper ons-breadcrumbs-wrapper--{{ params.variant }}">{{ breadcrumbs | safe }}</div>
+    {% else %}
+        {{ breadcrumbs | safe }}
+    {% endif %}
 {% endmacro %}

package/components/breadcrumbs/_macro.spec.js

@@ -132,4 +132,29 @@ describe('FOR: Macro: Breadcrumbs', () => {
             });
         });
     });
+
+    describe('GIVEN: Params: variant', () => {
+        describe('WHEN: variant is provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                    variant: 'grey',
+                }),
+            );
+            test('THEN: renders breadcrumbs in a breadcrumbs-wrapper with correct modifier class', () => {
+                expect($('.ons-breadcrumbs-wrapper').hasClass('ons-breadcrumbs-wrapper--grey')).toBe(true);
+            });
+        });
+
+        describe('WHEN: variant is not provided', () => {
+            const $ = cheerio.load(
+                renderComponent('breadcrumbs', {
+                    ...EXAMPLE_BREADCRUMBS_REQUIRED_PARAMS,
+                }),
+            );
+            test('THEN: does not render breadcrumbs-wrapper', () => {
+                expect($('.ons-breadcrumbs-wrapper').length).toBe(0);
+            });
+        });
+    });
 });

package/components/button/_button.scss

@@ -99,7 +99,7 @@ $button-shadow-size: 3px;
         }
     }
 
-    // When preceded by another button (for example, in a group)
+    // When preceded by another button (for example in a group)
     & + & {
         margin-left: 0.5rem;
     }
@@ -576,6 +576,34 @@ $button-shadow-size: 3px;
         }
     }
 
+    .ons-navigation--neutral &--dropdown {
+        .ons-btn__inner {
+            background: var(--ons-color-grey-15);
+            color: var(--ons-color-black);
+            .ons-icon {
+                fill: var(--ons-color-black);
+            }
+        }
+        &:focus {
+            .ons-btn__inner {
+                background: var(--ons-color-focus);
+            }
+        }
+    }
+
+    .ons-navigation--neutral &--dropdown:active &,
+    .ons-navigation--neutral &--dropdown.active &,
+    .ons-navigation--neutral &--dropdown:active:focus &,
+    .ons-navigation--neutral &--dropdown.active:focus & {
+        &__inner {
+            background: var(--ons-color-grey-100);
+            color: var(--ons-color-white);
+            .ons-icon {
+                fill: var(--ons-color-white);
+            }
+        }
+    }
+
     &--neutral &,
     &--neutral:hover &,
     &--neutral:active &,