@ons/design-system 53.0.3 → 53.1.1

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/checkboxes/_macro.njk

@@ -85,7 +85,7 @@
                                     "text": checkbox.other.label.text
                                 },
                                 "legend": checkbox.other.legend,
-                                "legendClasses": checkbox.other.legendClasses | default('') + ' ons-u-mb-xs',
+                                "legendClasses": checkbox.other.legendClasses,
                                 "value": checkbox.other.value,
                                 "autoSelect": checkbox.other.autoSelect,
                                 "selectAllChildren": checkbox.other.selectAllChildren,

package/components/duration/_macro.njk

@@ -84,7 +84,7 @@
             "id": params.id,
             "legend": params.legendOrLabel,
             "description": params.description,
-            "legendClasses": 'ons-u-mb-xs ' + (params.legendClasses if params.legendClasses else ''),
+            "legendClasses": params.legendClasses,
             "error": params.error,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
             "dontWrap": params.dontWrap

package/components/duration/_macro.spec.js

@@ -127,7 +127,7 @@ describe('macro: duration', () => {
         id: 'duration',
         legend: 'How long have you lived at this address?',
         description: 'Enter “0” into the years field if you have lived at this address for less than a year',
-        legendClasses: 'ons-u-mb-xs custom-legend-class',
+        legendClasses: 'custom-legend-class',
         dontWrap: true,
         legendIsQuestionTitle: true,
         error: false,

package/components/fieldset/_fieldset.scss

@@ -1,6 +1,7 @@
 .ons-fieldset {
   &__legend {
-    @extend .ons-label;
+    font-weight: $font-weight-bold;
+    margin: 0 0 0.6rem;
   }
 
   &__description:not(&__description--title) {
@@ -11,14 +12,10 @@
     font-weight: normal;
   }
 
-  .ons-fieldset {
-    &__legend {
-      margin: 0 0 0.6rem;
-    }
+  > * .ons-fieldset {
     .ons-fieldset {
       &__legend {
         font-weight: normal;
-        margin: 0;
       }
     }
   }

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/label/_label.scss

@@ -2,7 +2,7 @@
   color: inherit;
   display: block;
   font-weight: $font-weight-bold;
-  margin-bottom: 0.4rem;
+  margin: 0 0 0.6rem;
 
   &__description {
     @extend .ons-u-fs-s;

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 }));