@ons/design-system 70.0.7 → 70.0.9

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

@@ -3,92 +3,96 @@ import { renderComponent, setTestPage } from '../../tests/helpers/rendering';
 const EXAMPLE_COOKIES_BANNER_PAGE = renderComponent('cookies-banner', {});
 
 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');
-  });
-  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,
-      });
+    beforeEach(async () => {
+        const client = await page.target().createCDPSession();
+        await client.send('Network.clearBrowserCookies');
     });
 
-    it(`sets seen cookie message when ${_}`, async () => {
-      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+    it('should show the cookie banner', async () => {
+        await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-      await page.click(`.ons-js-${action}-cookies`);
+        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);
 
-      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 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, '"'));
 
-    it(`should hide the primary message when pressing the ${action} button`, async () => {
-      await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+            expect(policy).toEqual({
+                essential: true,
+                settings: value,
+                usage: value,
+                campaigns: value,
+            });
+        });
 
-      await page.click(`.ons-js-${action}-cookies`);
+        it(`sets seen cookie message when ${_}`, async () => {
+            await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__primary', (node) =>
-        window.getComputedStyle(node).getPropertyValue('display'),
-      );
-      expect(displayStyle).toBe('none');
-    });
+            await page.click(`.ons-js-${action}-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 ${action} button`, async () => {
+            await setTestPage('/test', EXAMPLE_COOKIES_BANNER_PAGE);
+
+            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');
+        });
 
-    it(`should show the secondary message when pressing the ${action} 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-${action}-cookies`);
+            await page.click(`.ons-js-${action}-cookies`);
 
-      const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', (node) =>
-        window.getComputedStyle(node).getPropertyValue('display'),
-      );
-      expect(displayStyle).not.toBe('none');
+            const displayStyle = await page.$eval('.ons-cookies-banner__confirmation', (node) =>
+                window.getComputedStyle(node).getPropertyValue('display'),
+            );
+            expect(displayStyle).not.toBe('none');
+        });
     });
-  });
 
-  describe('confirmation banner', () => {
-    it('should hide the confirmation 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');
+        });
     });
-  });
 
-  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' });
+    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/cookies-banner/example-cookies-banner-cymraeg.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
 {{
     onsCookiesBanner({

package/components/cookies-banner/example-cookies-banner.njk

@@ -1,7 +1,6 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/cookies-banner/_macro.njk" import onsCookiesBanner %}
-{{
-    onsCookiesBanner()
-}}
+{{ onsCookiesBanner() }}

package/components/date-input/_macro.njk

@@ -2,7 +2,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDateInput(params) %}
-    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
+    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %}
     {%- set numberOfFields = 0 -%}
 
     {%- if params.day -%}
@@ -19,75 +19,83 @@
 
     {% set fields %}
         {% if params.day %}
-            {{ onsInput({
-                "id": params.id + "-day",
-                "type": "number",
-                "name": params.day.name,
-                "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "maxLength": 2,
-                "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,
-                    "id": params.id + "-day-label"
-                },
-                "value": params.day.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-day",
+                    "type": "number",
+                    "name": params.day.name,
+                    "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "maxLength": 2,
+                    "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,
+                        "id": params.id + "-day-label"
+                    },
+                    "value": params.day.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
 
         {% if params.month %}
-            {{ onsInput({
-                "id": params.id + "-month",
-                "type": "number",
-                "name": params.month.name,
-                "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "maxLength": 2,
-                "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,
-                    "id": params.id + "-month-label"
-                },
-                "value": params.month.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-month",
+                    "type": "number",
+                    "name": params.month.name,
+                    "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "2",
+                    "maxLength": 2,
+                    "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,
+                        "id": params.id + "-month-label"
+                    },
+                    "value": params.month.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
 
         {% if params.year %}
-            {{ onsInput({
-                "id": params.id + "-year",
-                "type": "number",
-                "name": params.year.name,
-                "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "4",
-                "maxLength": 4,
-                "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,
-                    "id": params.id + "-year-label"
-                },
-                "value": params.year.value,
-                "error": params.error if numberOfFields < 2
-            }) }}
+            {{
+                onsInput({
+                    "id": params.id + "-year",
+                    "type": "number",
+                    "name": params.year.name,
+                    "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                    "width": "4",
+                    "maxLength": 4,
+                    "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,
+                        "id": params.id + "-year-label"
+                    },
+                    "value": params.year.value,
+                    "error": params.error if numberOfFields < 2
+                })
+            }}
         {% endif %}
     {% endset %}
 
-    {{ onsMultipleInputFields({
-        "id": params.id,
-        "legendOrLabel": params.legendOrLabel,
-        "description": params.description,
-        "mutuallyExclusive": params.mutuallyExclusive,
-        "numberOfFields": numberOfFields,
-        "fields": fields,
-        "error": params.error,
-        "legend": params.legendOrLabel,
-        "dontWrap": params.dontWrap,
-        "classes": params.classes,
-        "legendClasses": params.legendClasses,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle
-    }) }}
+    {{
+        onsMultipleInputFields({
+            "id": params.id,
+            "legendOrLabel": params.legendOrLabel,
+            "description": params.description,
+            "mutuallyExclusive": params.mutuallyExclusive,
+            "numberOfFields": numberOfFields,
+            "fields": fields,
+            "error": params.error,
+            "legend": params.legendOrLabel,
+            "dontWrap": params.dontWrap,
+            "classes": params.classes,
+            "legendClasses": params.legendClasses,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle
+        })
+    }}
 {% endmacro %}