@ons/design-system 49.2.0 → 51.0.0

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

@@ -0,0 +1,171 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_COOKIES_BANNER_MINIMAL = {
+  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. We use this information to make the website work as well as possible and improve our services.',
+  confirmationText: 'You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.',
+};
+
+const EXAMPLE_COOKIES_BANNER = {
+  ...EXAMPLE_COOKIES_BANNER_MINIMAL,
+  ariaLabel: 'the cookies banner',
+  primaryButtonText: 'Accept cookies',
+  secondaryButtonText: 'Set preferences',
+  secondaryButtonUrl: 'https://example.com/cookies/set-preferences',
+  confirmationButtonText: 'Close',
+  confirmationButtonTextAria: 'the cookie banner',
+};
+
+describe('macro: cookies-banner', () => {
+  it.each([
+    ['minimal parameters', EXAMPLE_COOKIES_BANNER_MINIMAL],
+    ['all parameters', EXAMPLE_COOKIES_BANNER],
+  ])('passes jest-axe checks with %s', async (_, params) => {
+    const $ = cheerio.load(renderComponent('cookies-banner', params));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has a `role` of "region"', () => {
+    const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+
+    expect($('.ons-cookies-banner').attr('role')).toBe('region');
+  });
+
+  it('has a default `aria-label` of "Cookies banner"', () => {
+    const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+
+    expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner');
+  });
+
+  it('has the provided `ariaLabel` for `aria-label`', () => {
+    const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER));
+
+    expect($('.ons-cookies-banner').attr('aria-label')).toBe('the cookies banner');
+  });
+
+  describe('content', () => {
+    it('has provided `statementTitle` title text', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+
+      const statementTitle = $('.ons-cookies-banner__title')
+        .text()
+        .trim();
+      expect(statementTitle).toBe('Tell us whether you accept cookies');
+    });
+
+    it('has provided `statementText` text', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+
+      const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__desc')
+        .html()
+        .trim();
+      expect(statementText).toBe(
+        'We use <a href="#0">cookies to collect information</a> about how you use census.gov.uk. We use this information to make the website work as well as possible and improve our services.',
+      );
+    });
+
+    it('has provided `confirmationText` text', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+
+      const statementText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__desc')
+        .html()
+        .trim();
+      expect(statementText).toBe('You’ve accepted all cookies. You can <a href="#0">change your cookie preferences</a> at any time.');
+    });
+  });
+
+  describe('primary button', () => {
+    it('assumes default text "Accept all cookies"', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+
+      expect(buttonSpy.occurrences[0].text).toBe('Accept all cookies');
+    });
+
+    it('has provided `primaryButtonText` text', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+
+      expect(buttonSpy.occurrences[0].text).toBe('Accept cookies');
+    });
+  });
+
+  describe('secondary button', () => {
+    it('assumes default text "Set cookie preferences"', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+
+      expect(buttonSpy.occurrences[1].text).toBe('Set cookie preferences');
+    });
+
+    it('has provided `secondaryButtonText` text', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+
+      expect(buttonSpy.occurrences[1].text).toBe('Set preferences');
+    });
+
+    it('has provided `secondaryButtonUrl`', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+
+      expect(buttonSpy.occurrences[1].url).toBe('https://example.com/cookies/set-preferences');
+    });
+  });
+
+  describe('confirmation button', () => {
+    it('assumes default text "Hide"', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+
+      expect(buttonSpy.occurrences[2].text).toBe('Hide');
+    });
+
+    it('has provided `confirmationButtonText` text', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+
+      expect(buttonSpy.occurrences[2].text).toBe('Close');
+    });
+
+    it('has a default `buttonContext` of "cookie banner"', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+
+      expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie message');
+    });
+
+    it('has the provided `confirmationButtonTextAria` for `buttonContext`', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+
+      expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie banner');
+    });
+  });
+});

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

@@ -0,0 +1,90 @@
+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.',
+});
+
+describe('script: cookies-banner', () => {
+  beforeEach(async () => {
+    const client = await page.target().createCDPSession();
+    await client.send('Network.clearBrowserCookies');
+  });
+
+  it('should show the cookie banner', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    expect(displayStyle).toBe('block');
+  });
+
+  it('sets all cookies to true when accepting cookies', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+    await page.click('.ons-js-accept-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: true,
+      usage: true,
+      campaigns: true,
+    });
+  });
+
+  it('sets seen cookie message when accepting cookies', async () => {
+    await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+    await page.click('.ons-js-accept-cookies');
+
+    const cookies = await page.cookies();
+    const ons_cookie_message_displayed = cookies.find(cookie => cookie.name === 'ons_cookie_message_displayed');
+
+    expect(ons_cookie_message_displayed.value).toBe('true');
+  });
+
+  it('should hide the primary 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__primary', node =>
+      window.getComputedStyle(node).getPropertyValue('display'),
+    );
+    expect(displayStyle).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);
+
+    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');
+  });
+
+  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);
+
+    const displayStyle = await page.$eval('.ons-cookies-banner', node => window.getComputedStyle(node).getPropertyValue('display'));
+    expect(displayStyle).toBe('none');
+  });
+});

package/components/date-input/_macro.njk

@@ -34,7 +34,8 @@
                 "attributes": params.day.attributes,
                 "label": {
                     "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.day.label.description if numberOfFields > 1 else params.description
+                    "description": params.day.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-day-label"
                 },
                 "value": params.day.value
             }) }}
@@ -53,7 +54,8 @@
                 "attributes": params.month.attributes,
                 "label": {
                     "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.month.label.description if numberOfFields > 1 else params.description
+                    "description": params.month.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-month-label"
                 },
                 "value": params.month.value
             }) }}
@@ -72,7 +74,8 @@
                 "attributes": params.year.attributes,
                 "label": {
                     "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.year.label.description if numberOfFields > 1 else params.description
+                    "description": params.year.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-year-label"
                 },
                 "value": params.year.value
             }) }}
@@ -96,11 +99,11 @@
             "classes": params.classes,
             "dontWrap": params.dontWrap if numberOfFields > 1 else true,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "checkbox": params.mutuallyExclusive.checkbox,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
             "or": params.mutuallyExclusive.or,
             "deselectMessage": params.mutuallyExclusive.deselectMessage,
             "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectCheckboxAdjective": params.mutuallyExclusive.deselectCheckboxAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
             "error": params.error
         }) %}
             {{ fields | safe }}

package/components/date-input/_macro.spec.js

@@ -0,0 +1,286 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_DATE_INPUT_BASE = {
+  id: 'date',
+  legendOrLabel: 'Date of birth',
+  description: 'For example, 31 3 1980',
+};
+
+const EXAMPLE_DAY_FIELD = {
+  day: {
+    label: {
+      text: 'Day',
+      description: 'The day',
+    },
+    value: 'Day',
+    name: 'day',
+    attributes: {
+      autocomplete: 'bday-day',
+    },
+  },
+};
+
+const EXAMPLE_MONTH_FIELD = {
+  month: {
+    label: {
+      text: 'Month',
+      description: 'The month',
+    },
+    value: 'Month',
+    name: 'month',
+    attributes: {
+      autocomplete: 'bday-month',
+    },
+  },
+};
+
+const EXAMPLE_YEAR_FIELD = {
+  year: {
+    label: {
+      text: 'Year',
+      description: 'The year',
+    },
+    value: 'Year',
+    name: 'year',
+    attributes: {
+      autocomplete: 'bday-year',
+    },
+  },
+};
+
+const EXAMPLE_DATE_SINGLE_FIELD = {
+  ...EXAMPLE_DATE_INPUT_BASE,
+  ...EXAMPLE_YEAR_FIELD,
+};
+
+const EXAMPLE_DATE_MULTIPLE_FIELDS = {
+  ...EXAMPLE_DATE_INPUT_BASE,
+  ...EXAMPLE_DAY_FIELD,
+  ...EXAMPLE_MONTH_FIELD,
+  ...EXAMPLE_YEAR_FIELD,
+};
+
+describe('macro: date input', () => {
+  describe('mode: multiple fields', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `input` output for the `day` field', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS);
+
+      expect(inputSpy.occurrences[0]).toEqual({
+        id: 'date-day',
+        type: 'number',
+        name: 'day',
+        width: '2',
+        min: 1,
+        max: 31,
+        maxLength: 2,
+        classes: '',
+        label: {
+          text: 'Day',
+          description: 'The day',
+          id: 'date-day-label',
+        },
+        value: 'Day',
+        attributes: {
+          autocomplete: 'bday-day',
+        },
+      });
+    });
+
+    it('has the expected `input` output for the `month` field', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS);
+
+      expect(inputSpy.occurrences[1]).toEqual({
+        id: 'date-month',
+        type: 'number',
+        name: 'month',
+        width: '2',
+        min: 1,
+        max: 12,
+        maxLength: 2,
+        classes: '',
+        label: {
+          text: 'Month',
+          description: 'The month',
+          id: 'date-month-label',
+        },
+        value: 'Month',
+        attributes: {
+          autocomplete: 'bday-month',
+        },
+      });
+    });
+
+    it('has the expected `input` output for the `year` field', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS);
+
+      expect(inputSpy.occurrences[2]).toEqual({
+        id: 'date-year',
+        type: 'number',
+        name: 'year',
+        width: '4',
+        min: 1000,
+        max: 3000,
+        maxLength: 4,
+        classes: '',
+        label: {
+          text: 'Year',
+          description: 'The year',
+          id: 'date-year-label',
+        },
+        value: 'Year',
+        attributes: {
+          autocomplete: 'bday-year',
+        },
+      });
+    });
+
+    it('has the group class div', () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS));
+      const div = $('.ons-field:first-child').parent();
+      expect($(div).hasClass('ons-field-group')).toBe(true);
+    });
+
+    it('has the expected `fieldset` output', () => {
+      const faker = templateFaker();
+      const fieldsetSpy = faker.spy('fieldset');
+
+      faker.renderComponent('date-input', {
+        ...EXAMPLE_DATE_MULTIPLE_FIELDS,
+        legendClasses: 'custom-legend-class',
+        classes: 'custom-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+      });
+
+      expect(fieldsetSpy.occurrences[0]).toEqual({
+        id: 'date',
+        legend: 'Date of birth',
+        description: 'For example, 31 3 1980',
+        legendClasses: 'custom-legend-class',
+        classes: 'custom-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+      });
+    });
+  });
+
+  describe('mode: multiple fields with mutually exclusive', () => {
+    it('has the correct class on each input', async () => {
+      const $ = cheerio.load(renderComponent('date-input', { ...EXAMPLE_DATE_MULTIPLE_FIELDS, mutuallyExclusive: {} }));
+
+      const exclusiveClassCount = $('.ons-js-exclusive-group-item').length;
+      expect(exclusiveClassCount).toBe(3);
+    });
+
+    it('has the expected `mutuallyExclusive` output', () => {
+      const faker = templateFaker();
+      const mutuallyExclusiveSpy = faker.spy('mutually-exclusive');
+
+      faker.renderComponent('date-input', {
+        ...EXAMPLE_DATE_MULTIPLE_FIELDS,
+        legendClasses: 'custom-legend-class',
+        classes: 'custom-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+        mutuallyExclusive: {
+          exclusiveOptions: {},
+          or: 'Or',
+          deselectMessage: 'Deselect message',
+          deselectGroupAdjective: 'Deselect group adjective',
+          deselectExclusiveOptionAdjective: 'Deselect checkbox adjective',
+        },
+      });
+
+      expect(mutuallyExclusiveSpy.occurrences[0]).toEqual({
+        id: 'date',
+        legend: 'Date of birth',
+        description: 'For example, 31 3 1980',
+        legendClasses: 'custom-legend-class',
+        classes: 'custom-class',
+        dontWrap: true,
+        legendIsQuestionTitle: true,
+        error: false,
+        exclusiveOptions: {},
+        or: 'Or',
+        deselectMessage: 'Deselect message',
+        deselectGroupAdjective: 'Deselect group adjective',
+        deselectExclusiveOptionAdjective: 'Deselect checkbox adjective',
+      });
+    });
+  });
+
+  describe('mode: single field', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_SINGLE_FIELD));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the expected `input` output for the field', () => {
+      const faker = templateFaker();
+      const inputSpy = faker.spy('input');
+
+      faker.renderComponent('date-input', EXAMPLE_DATE_SINGLE_FIELD);
+
+      expect(inputSpy.occurrences[0]).toEqual({
+        id: 'date-year',
+        type: 'number',
+        name: 'year',
+        width: '4',
+        min: 1000,
+        max: 3000,
+        maxLength: 4,
+        classes: '',
+        label: {
+          text: 'Date of birth',
+          description: 'For example, 31 3 1980',
+          id: 'date-year-label',
+        },
+        value: 'Year',
+        attributes: {
+          autocomplete: 'bday-year',
+        },
+      });
+    });
+
+    it('has the expected `error` output', () => {
+      const faker = templateFaker();
+      const errorSpy = faker.spy('error');
+
+      faker.renderComponent('date-input', {
+        ...EXAMPLE_DATE_SINGLE_FIELD,
+        error: { text: 'Enter a date that is after 1 January 2019', dsExample: false },
+      });
+
+      expect(errorSpy.occurrences[0]).toEqual({
+        text: 'Enter a date that is after 1 January 2019',
+        dsExample: false,
+      });
+    });
+  });
+});

package/components/document-list/_macro.njk

@@ -31,17 +31,15 @@
                             <{{ titleTag }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
                                 <a href="{{ document.url }}">{{ document.title }}
                                 {%- if document.metadata is defined and document.metadata and document.metadata.file is defined and document.metadata.file %}
-                                <span class="ons-u-vh">,
-
+                                <span class="ons-u-vh">
                                     {% set fileMetadataItems = [] %}
-
                                     {% if document.metadata.file.fileType is defined and document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
                                     {% if document.metadata.file.fileSize is defined and document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
                                     {% if document.metadata.file.filePages is defined and document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
 
-                                    {{ fileMetadataItems | join(', ') }}
+                                    , {{ fileMetadataItems | join(', ') }}
 
-                                {% endif -%}
+                                {% endif %}
 
                                 </span></a>
                             </{{ titleTag }}>