@ons/design-system 53.0.2 → 53.1.0

package/components/autosuggest/_autosuggest.scss

@@ -131,7 +131,7 @@
       box-shadow: 0 0 5px 0 rgba($color-black, 0.6);
       left: 0;
       position: absolute;
-      z-index: 1;
+      z-index: 10;
     }
   }
 }

package/components/browser-banner/_browser-banner.scss

@@ -0,0 +1,39 @@
+.ons-browser-banner {
+  background-color: $color-banner-browser-bg;
+  display: none; // Hides unsupported browser banner unless targeted below
+  padding: 0.8rem 0;
+
+  &__content {
+    @extend .ons-u-fs-s;
+
+    color: $color-text-inverse;
+    margin: 0;
+  }
+
+  &__lead {
+    @extend .ons-u-fw-b;
+  }
+
+  &__link {
+    color: $color-text-inverse-link;
+
+    &:hover {
+      color: $color-text-inverse-link-hover;
+      text-decoration: underline solid $color-text-inverse-link-hover 2px;
+    }
+  }
+}
+
+// Targets browsers IE10 & IE11 and displays unsupported browser banner
+@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
+  .ons-browser-banner {
+    display: block;
+  }
+}
+
+// Targets browsers IE8 & IE9 and displays unsupported browser banner
+@media screen\0 {
+  .ons-browser-banner {
+    display: block;
+  }
+}

package/components/browser-banner/_macro.njk

@@ -0,0 +1,17 @@
+{% macro onsBrowserBanner(params) %}
+    {% if params.lang == "cy" %}
+        {% set bannerLeadingText = 'Nid yw’r wefan hon yn cefnogi eich porwr mwyach.' %}
+        {% set bannerLinkUrl = 'https://cy.ons.gov.uk/help/browsers' %}
+        {% set bannerCTA = 'Gallwch <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.' %}
+    {% else %}
+        {% set bannerLeadingText = 'This website no longer supports your browser.' %}
+        {% set bannerLinkUrl = 'https://www.ons.gov.uk/help/browsers' %}
+        {% set bannerCTA = 'You can <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">upgrade your browser to the latest version</a>.' %}
+    {% endif %}
+
+    <div class="ons-browser-banner">
+        <div class="ons-container{{ ' ons-container--wide' if params.wide is defined and params.wide }}">
+            <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
+        </div>
+    </div>
+{% endmacro %}

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

@@ -0,0 +1,83 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_BROWSER_BANNER_DEFAULT = {};
+
+describe('macro: browser-banner', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the default `bannerLeadingText`', () => {
+    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+    const bannerLeadingText = $('.ons-browser-banner__lead')
+      .text()
+      .trim();
+    expect(bannerLeadingText).toBe('This website no longer supports your browser.');
+  });
+
+  it('has the default `bannerCTA`', () => {
+    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+    const bannerCtaHtml = $('.ons-browser-banner__cta')
+      .text()
+      .trim();
+    expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
+  });
+
+  it('has the default `bannerLinkUrl`', () => {
+    const $ = cheerio.load(renderComponent('browser-banner', EXAMPLE_BROWSER_BANNER_DEFAULT));
+
+    expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
+  });
+
+  it('has `container--wide` class when `wide` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+        wide: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+  });
+});
+
+describe('mode: Welsh language', () => {
+  it('has the welsh version of default `bannerLeadingText`', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+        lang: 'cy',
+      }),
+    );
+
+    const bannerLeadingText = $('.ons-browser-banner__lead')
+      .text()
+      .trim();
+    expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
+  });
+
+  it('has the welsh version of default `bannerCTA`', () => {
+    const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
+
+    const bannerCtaHtml = $('.ons-browser-banner__cta')
+      .text()
+      .trim();
+    expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
+  });
+
+  it('has the welsh version of default `bannerLinkUrl`', () => {
+    const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
+
+    expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
+  });
+});

package/components/header/_macro.njk

@@ -2,6 +2,7 @@
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icons/_macro.njk" import onsIcon %}
     {% from "components/navigation/_macro.njk" import onsNavigation %}
+    {% from "components/browser-banner/_macro.njk" import onsBrowserBanner %}
 
     {% set title_tag = "h1" if params.titleAsH1 else "div" %}
     {% set currentLanguageISOCode = "en" %}
@@ -12,6 +13,12 @@
     {% endif %}
 
     <header class="ons-header {% if params.classes is defined and 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,
+                "wide": params.wide
+            })
+        }}
         {% if params.phase is defined and params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
             {{ onsPhaseBanner(params.phase) }}

package/components/navigation/_macro.njk

@@ -42,7 +42,7 @@
                 <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 is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -55,7 +55,7 @@
                 <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) }}">
-                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
+                            <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and item.id %}id="{{ item.id }}" {% endif %}>{{ item.title }}</a>
                         </li>
                     {% endfor %}
                 </ul>
@@ -81,14 +81,14 @@
                         </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) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id is defined and item.id %}id="{{ item.id }}--mobile" {% endif %}>{{ item.title }}</a>
+                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel is defined and item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id is defined and 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) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
+                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel is defined and child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id is defined and child.id %}id="{{ child.id }}" {% endif %}>{{ child.title }}</a>
                                                 </li>
                                             {% endfor %}
                                         </ul>

package/components/navigation/_macro.spec.js

@@ -14,12 +14,14 @@ const PARAMS = {
   itemsList: [
     {
       title: 'Main nav item 1',
+      ariaLabel: 'Main nav ariaLabel 1',
       url: '#0',
       classes: 'custom-class-main-item-1',
       id: 'main-item-1',
     },
     {
       title: 'Main nav item 2',
+      ariaLabel: 'Main nav ariaLabel 2',
       url: '#1',
       classes: 'custom-class-main-item-2',
       id: 'main-item-2',
@@ -34,12 +36,14 @@ const PARAMS = {
     itemsList: [
       {
         title: 'Sub nav item 1',
+        ariaLabel: 'Sub nav ariaLabel 1',
         url: '#0',
         classes: 'custom-class-sub-item-1',
         id: 'sub-item-1',
       },
       {
         title: 'Sub nav item 2',
+        ariaLabel: 'Sub nav ariaLabel 2',
         url: '#1',
         classes: 'custom-class-sub-item-2',
         id: 'sub-item-2',
@@ -49,10 +53,12 @@ const PARAMS = {
             children: [
               {
                 title: 'Child item 1',
+                ariaLabel: 'Child item ariaLabel 1',
                 url: '#0',
               },
               {
                 title: 'Child item 2',
+                ariaLabel: 'Child item ariaLabel 2',
                 url: '#1',
               },
             ],
@@ -157,6 +163,13 @@ describe('macro: navigation', () => {
       expect(values).toEqual(['Main nav item 1', 'Main nav item 2']);
     });
 
+    it('has the correct aria-label for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
+
+      const values = mapAll($('.ons-navigation--main .ons-navigation__link'), node => node.attr('aria-label'));
+      expect(values).toEqual(['Main nav ariaLabel 1', 'Main nav ariaLabel 2']);
+    });
+
     it('has the provided custom class for each list item', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
 
@@ -230,6 +243,13 @@ describe('macro: navigation', () => {
       expect(values).toEqual(['Sub nav item 1', 'Sub nav item 2']);
     });
 
+    it('has the correct aria-label for each list item', () => {
+      const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));
+
+      const values = mapAll($('.ons-navigation--sub .ons-navigation__link'), node => node.attr('aria-label'));
+      expect(values).toEqual(['Sub nav ariaLabel 1', 'Sub nav ariaLabel 2']);
+    });
+
     it('has the provided custom class for each list item', () => {
       const $ = cheerio.load(renderComponent('navigation', { navigation: PARAMS }));