@ons/design-system 53.0.4 → 54.0.0

package/components/cookies-banner/cookies-banner.spec.js

@@ -1,10 +1,6 @@
 import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 
-const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {
-  statementTitle: 'Tell us whether you accept cookies',
-  statementText: 'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk.',
-  confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
-});
+const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {});
 
 describe('script: cookies-banner', () => {
   beforeEach(async () => {
@@ -18,73 +14,81 @@ describe('script: cookies-banner', () => {
     const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
     expect(displayStyle).toBe('block');
   });
+  describe.each([
+    ['accepting cookies', 'accept', true],
+    ['rejecting cookies', 'reject', false],
+  ])('action: %s', (_, action, value) => {
+    it(`sets all cookies to ${value} when ${_}`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+      await page.click(`.ons-js-${action}-cookies`);
+
+      const cookies = await page.cookies();
+      const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
+      const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+
+      expect(policy).toEqual({
+        essential: true,
+        settings: value,
+        usage: value,
+        campaigns: value,
+      });
+    });
 
-  it('sets all cookies to true when accepting cookies', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+    it(`sets seen cookie message when ${_}`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    const cookies = await page.cookies();
-    const ons_cookie_policy = cookies.find(cookie => cookie.name === 'ons_cookie_policy');
-    const policy = JSON.parse(ons_cookie_policy.value.replace(/'/g, '"'));
+      const cookies = await page.cookies();
+      const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
 
-    expect(policy).toEqual({
-      essential: true,
-      settings: true,
-      usage: true,
-      campaigns: true,
+      expect(ons_cookie_message_displayed.value).toBe('true');
     });
-  });
-
-  it('sets seen cookie message when accepting cookies', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+    it(`should hide the primary message when pressing the ${action} button`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const cookies = await page.cookies();
-    const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    expect(ons_cookie_message_displayed.value).toBe('true');
-  });
+      const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
+      expect(displayStyle).toBe('none');
+    });
 
-  it('should hide the primary message when pressing the accept button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+    it(`should show the secondary message when pressing the ${action} button`, async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
+      await page.click(`.ons-js-${action}-cookies`);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner__primary', node =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
+        window.getComputedStyle(node).getPropertyValue('display'),
+      );
+      expect(displayStyle).not.toBe('none');
+    });
   });
 
-  it('should show the secondary message when pressing the accept button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
-
-    await page.click('.ons-js-accept-cookies');
-
-    const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', node =>
-      window.getComputedStyle(node).getPropertyValue('display'),
-    );
-    expect(displayStyle).not.toBe('none');
-  });
-  //...
-  it('should hide the secondary message when pressing the hide button', async () => {
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+  describe('confirmation banner', () => {
+    it('should hide the confirmation message when pressing the hide button', async () => {
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    await page.click('.ons-js-accept-cookies');
-    await page.click('.ons-js-hide-button');
+      await page.click('.ons-js-accept-cookies');
+      await page.click('.ons-js-hide-button');
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      expect(displayStyle).toBe('none');
+    });
   });
 
-  it('does not show the banner if user has acknowledged the banner previously and consent cookie is present', async () => {
-    await page.setCookie({ name: 'ons_cookie_message_displayed', value: 'true' });
+  describe('cookie preferences confirmed', () => {
+    it('does not show the banner if user has acknowledged the banner previously and consent cookie is present', async () => {
+      await page.setCookie({ name: 'ons_cookie_message_displayed', value: 'true' });
 
-    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
-    expect(displayStyle).toBe('none');
+      const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+      expect(displayStyle).toBe('none');
+    });
   });
 });

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

@@ -27,7 +27,7 @@
             type="{{ type }}"
             id="{{ params.id }}"
             class="ons-input ons-input--text ons-input-type__input{% if params.error is defined and params.error %} ons-input--error{% endif %}{% if params.searchButton is defined and params.searchButton %} ons-search__input{% endif %}{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.width is defined and params.width %} ons-input{% if params.type is defined and (params.type == 'number' or params.type == 'tel') %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
-            {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}aria-labelledby="{{ params.prefix.id if params.prefix }}{{ params.suffix.id if params.suffix }}"{% endif %}
+            {% if ((params.prefix is defined and params.prefix) and (params.prefix.id is defined and params.prefix.id)) or ((params.suffix is defined and params.suffix) and (params.suffix.id is defined and params.suffix.id)) %}aria-labelledby="{{ params.prefix.id if params.prefix.id }}{{ params.suffix.id if params.suffix.id }}"{% endif %}
             {% if params.name is defined and params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value is defined and params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept is defined and params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -71,21 +71,26 @@
         {% endif %}
 
         {% if params.prefix is defined and params.prefix or params.suffix is defined and params.suffix %}
-            {% if params.prefix is defined and params.prefix %}
-                {% set prefixClass = " ons-input-type--prefix" %}
-            {% endif %}
+            {% if (params.prefix is defined and params.prefix and params.prefix.id is defined and params.prefix.id) or (params.suffix is defined and params.suffix and params.suffix.id is defined and params.suffix.id) %}
+                {% if (params.prefix.title is defined and params.prefix.title) or (params.suffix.title is defined and params.suffix.title) %}
+                    {% if params.prefix is defined and params.prefix %}
+                        {% set prefixClass = " ons-input-type--prefix" %}
+                    {% endif %}
 
-            <span class="ons-input-type{{ prefixClass }}">
-                <span class="ons-input-type__inner">
-                    {{ input | safe }}
-                    {% set abbr = params.prefix or params.suffix %}
-                    <abbr
-                        {% if abbr.id is defined and abbr.id %}id="{{ abbr.id }}" {% endif %}
-                        class="ons-input-type__type ons-js-input-abbr"
-                         title="{{ abbr.title }}"
-                        >{{ abbr.text or abbr.title }}</abbr>
-                </span>
-            </span>
+                    <span class="ons-input-type{{ prefixClass }}">
+                        <span class="ons-input-type__inner">
+                            {{ input | safe }}
+
+                            {% set abbr = params.prefix or params.suffix %}
+                            <abbr
+                                id="{{ abbr.id }}" 
+                                class="ons-input-type__type ons-js-input-abbr" 
+                                title="{{ abbr.title }}"
+                                >{{ abbr.text or abbr.title }}</abbr>
+                        </span>
+                    </span>
+                {% endif %}
+            {% endif %}
         {% elif params.searchButton is defined and params.searchButton %}
             <span class="ons-grid--flex ons-search">
                 {% call onsSearch({

package/components/input/_macro.spec.js

@@ -429,6 +429,34 @@ describe('macro: input', () => {
       ).toBe('Example prefix text');
     });
 
+    it('does not render prefix element when `prefix.id` not set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          prefix: {
+            title: 'Example prefix title',
+            text: 'Example prefix text',
+          },
+        }),
+      );
+
+      expect($('.ons-input-type--prefix').length).toBe(0);
+    });
+
+    it('does not render prefix element when `prefix.title` not set', () => {
+      const $ = cheerio.load(
+        renderComponent('input', {
+          ...EXAMPLE_INPUT_MINIMAL,
+          prefix: {
+            text: 'Example prefix text',
+            id: 'example-prefix-id',
+          },
+        }),
+      );
+
+      expect($('.ons-input-type--prefix').length).toBe(0);
+    });
+
     it('adds `aria-labelledby` attribute when `suffix` is provided', () => {
       const $ = cheerio.load(
         renderComponent('input', {
@@ -485,6 +513,34 @@ describe('macro: input', () => {
     });
   });
 
+  it('does not render suffix element when `suffix.id` not set', () => {
+    const $ = cheerio.load(
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        suffix: {
+          title: 'Example suffix title',
+          text: 'Example suffix text',
+        },
+      }),
+    );
+
+    expect($('.ons-input').length).toBe(0);
+  });
+
+  it('does not render suffix element when `suffix.title` not set', () => {
+    const $ = cheerio.load(
+      renderComponent('input', {
+        ...EXAMPLE_INPUT_MINIMAL,
+        suffix: {
+          text: 'Example suffix text',
+          id: 'example-suffix-id',
+        },
+      }),
+    );
+
+    expect($('.ons-input').length).toBe(0);
+  });
+
   describe('search', () => {
     it('renders `search` component', () => {
       const faker = templateFaker();

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/mutually-exclusive/mutually-exclusive.duration.spec.js

@@ -11,6 +11,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
     name: 'address-duration-years',
     suffix: {
       text: 'Years',
+      id: 'address-duration-years-suffix',
     },
     attributes: {
       min: 0,
@@ -22,6 +23,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_DURATION_PARAMS = {
     name: 'address-duration-months',
     suffix: {
       text: 'Months',
+      id: 'address-duration-months-suffix',
     },
     attributes: {
       min: 0,

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -16,6 +16,7 @@ const EXAMPLE_MUTUALLY_EXCLUSIVE_NUMBER_INPUT_PARAMS = {
   prefix: {
     title: 'Pounds',
     text: '£',
+    id: 'currency-prefix',
   },
   mutuallyExclusive: {
     or: 'Or',