@ons/design-system 53.0.4 → 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) }}