@ons/design-system 53.1.1 → 54.0.0

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

@@ -5,167 +5,225 @@ 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',
+const EXAMPLE_COOKIES_BANNER_PARAMS = {
+  ariaLabel: 'Cookies banner override',
+  serviceName: 'ons.gov.uk override',
+  statementTitle: 'Cookies on override',
+  settingsLinkText: 'Cookie settings override',
+  settingsLinkURL: '/cookiesoverride',
+  statementText: 'Statement override',
+  acceptButtonText: 'Accept additional cookies override',
+  rejectButtonText: 'Reject additional cookies override',
+  preferencesText: 'Text override',
+  confirmationButtonText: 'Hide override',
+  confirmationButtonTextAria: 'the cookie message override',
 };
 
 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();
+  describe.each([
+    ['default parameters', {}],
+    ['provided parameters', EXAMPLE_COOKIES_BANNER_PARAMS],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks', async () => {
+      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));
+  describe('mode: provided parameters', () => {
+    it('has the correct `aria-label`', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-    expect($('.ons-cookies-banner').attr('role')).toBe('region');
-  });
+      expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner override');
+    });
 
-  it('has a default `aria-label` of "Cookies banner"', () => {
-    const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+    describe('initial banner', () => {
+      it('has `statementTitle` title text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-    expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner');
-  });
+        const statementTitle = $('.ons-cookies-banner__title')
+          .text()
+          .trim();
+        expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
+      });
 
-  it('has the provided `ariaLabel` for `aria-label`', () => {
-    const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER));
+      it('has `statementText` text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-    expect($('.ons-cookies-banner').attr('aria-label')).toBe('the cookies banner');
-  });
+        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
+          .html()
+          .trim();
+        expect(statementText).toBe('Statement override');
+      });
 
-  describe('content', () => {
-    it('has provided `statementTitle` title text', () => {
-      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+      it('Renders an `accept` button with correct text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-      const statementTitle = $('.ons-cookies-banner__title')
-        .text()
-        .trim();
-      expect(statementTitle).toBe('Tell us whether you accept cookies');
-    });
+        faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
 
-    it('has provided `statementText` text', () => {
-      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+        expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies override');
+      });
 
-      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('Renders a `reject` button with correct text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    it('has provided `confirmationText` text', () => {
-      const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL));
+        faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
 
-      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.');
-    });
-  });
+        expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies override');
+      });
+
+      it('Renders a link with text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-  describe('primary button', () => {
-    it('assumes default text "Accept all cookies"', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+        const linkText = $('.ons-cookies-banner__link')
+          .text()
+          .trim();
+        expect(linkText).toBe('Cookie settings override');
+      });
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+      it('Renders a link with url', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-      expect(buttonSpy.occurrences[0].text).toBe('Accept all cookies');
+        const linkText = $('.ons-cookies-banner__link').attr('href');
+        expect(linkText).toBe('/cookiesoverride');
+      });
     });
 
-    it('has provided `primaryButtonText` text', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+    describe('confirmation banner', () => {
+      it('has `preferencesText` text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
+
+        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
+          .html()
+          .trim();
+        expect(preferencesText).toBe('Text override');
+      });
+
+      it('renders a button with text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
+
+        faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+        expect(buttonSpy.occurrences[2].text).toBe('Hide override');
+      });
 
-      expect(buttonSpy.occurrences[0].text).toBe('Accept cookies');
+      it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
+
+        faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS);
+
+        expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie message override');
+      });
     });
   });
 
-  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);
+  describe('mode: default parameters', () => {
+    it('has the correct `aria-label`', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-      expect(buttonSpy.occurrences[1].text).toBe('Set cookie preferences');
+      expect($('.ons-cookies-banner').attr('aria-label')).toBe('Cookies banner');
     });
 
-    it('has provided `secondaryButtonText` text', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+    describe('initial banner', () => {
+      it('has `statementTitle` title text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+        const statementTitle = $('.ons-cookies-banner__title')
+          .text()
+          .trim();
+        expect(statementTitle).toBe('Cookies on ons.gov.uk');
+      });
 
-      expect(buttonSpy.occurrences[1].text).toBe('Set preferences');
-    });
+      it('has `statementText` text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-    it('has provided `secondaryButtonUrl`', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
+          .html()
+          .trim();
+        expect(statementText).toBe(
+          '<p>Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.</p><p>We would like to set <a href="/cookies">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>',
+        );
+      });
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+      it('Renders an `accept` button with correct text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-      expect(buttonSpy.occurrences[1].url).toBe('https://example.com/cookies/set-preferences');
-    });
-  });
+        faker.renderComponent('cookies-banner', {});
 
-  describe('confirmation button', () => {
-    it('assumes default text "Hide"', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+        expect(buttonSpy.occurrences[0].text).toBe('Accept additional cookies');
+      });
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+      it('Renders a `reject` button with correct text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-      expect(buttonSpy.occurrences[2].text).toBe('Hide');
-    });
+        faker.renderComponent('cookies-banner', {});
+
+        expect(buttonSpy.occurrences[1].text).toBe('Reject additional cookies');
+      });
 
-    it('has provided `confirmationButtonText` text', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+      it('Renders a link with text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+        const linkText = $('.ons-cookies-banner__link')
+          .text()
+          .trim();
+        expect(linkText).toBe('View cookies');
+      });
 
-      expect(buttonSpy.occurrences[2].text).toBe('Close');
+      it('Renders a link with url', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', {}));
+
+        const linkText = $('.ons-cookies-banner__link').attr('href');
+        expect(linkText).toBe('/cookies');
+      });
     });
 
-    it('has a default `buttonContext` of "cookie banner"', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+    describe('confirmation banner', () => {
+      it('has `preferencesText` text', () => {
+        const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_MINIMAL);
+        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
+          .html()
+          .trim();
+        expect(preferencesText).toBe('You can <a href="/cookies">change your cookie preferences</a> at any time.');
+      });
 
-      expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie message');
-    });
+      it('renders a button with text', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
 
-    it('has the provided `confirmationButtonTextAria` for `buttonContext`', () => {
-      const faker = templateFaker();
-      const buttonSpy = faker.spy('button');
+        faker.renderComponent('cookies-banner', {});
 
-      faker.renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER);
+        expect(buttonSpy.occurrences[2].text).toBe('Hide');
+      });
 
-      expect(buttonSpy.occurrences[2].buttonContext).toBe('the cookie banner');
+      it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
+        const faker = templateFaker();
+        const buttonSpy = faker.spy('button');
+
+        faker.renderComponent('cookies-banner', {});
+
+        expect(buttonSpy.occurrences[2].buttonContext).toBe('this message');
+      });
+    });
+  });
+
+  describe('mode: Welsh language', () => {
+    it('has the welsh version of default values', () => {
+      const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
+
+      const statementTitle = $('.ons-cookies-banner__title')
+        .text()
+        .trim();
+      expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
     });
   });
 });

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

@@ -5,14 +5,17 @@ export default class CookiesBanner {
     this.component = component;
     this.primaryBanner = this.component.querySelector('.ons-cookies-banner__primary');
     this.confirmBanner = this.component.querySelector('.ons-cookies-banner__confirmation');
-    this.button = this.component.querySelector('.ons-js-accept-cookies');
+    this.acceptButton = this.component.querySelector('.ons-js-accept-cookies');
+    this.rejectButton = this.component.querySelector('.ons-js-reject-cookies');
     this.hideButton = this.component.querySelector('.ons-js-hide-button');
-
+    this.acceptedText = this.component.querySelector('.ons-js-accepted-text');
+    this.rejectedText = this.component.querySelector('.ons-js-rejected-text');
     this.setupCookiesEvents();
   }
 
   setupCookiesEvents() {
-    this.button.addEventListener('click', this.setCookiesConsent.bind(this));
+    this.acceptButton.addEventListener('click', this.setCookiesConsent.bind(this));
+    this.rejectButton.addEventListener('click', this.setCookiesConsent.bind(this));
     this.hideButton.addEventListener('click', this.hideConfirmBanner.bind(this));
 
     this.showCookiesMessage();
@@ -35,35 +38,54 @@ export default class CookiesBanner {
 
   setCookiesConsent(event) {
     event.preventDefault();
+    let actionText;
+    const action = event.target.getAttribute('data-button');
 
-    approveAllCookieTypes();
+    if (action == 'accept') {
+      this.acceptCookies();
+      actionText = this.acceptedText;
+    } else if (action == 'reject') {
+      setDefaultConsentCookie();
+      actionText = this.rejectedText;
+    }
+
+    this.hidePrimaryCookiesBanner(actionText);
+    this.checkPage(action);
     cookie('ons_cookie_message_displayed', 'true', { days: 365 });
+  }
 
-    this.hidePrimaryCookiesBanner();
+  acceptCookies() {
+    approveAllCookieTypes();
+    if (typeof loadGTM != 'undefined') {
+      loadGTM();
+    }
+  }
 
+  checkPage(action) {
     const isOnSettingsPage = document.querySelector('[data-module="cookie-settings"]');
     if (isOnSettingsPage) {
-      this.updateRadios();
-    }
-
-    if (typeof loadGTM != 'undefined') {
-      loadGTM();
+      this.updateRadios(action);
     }
   }
 
-  updateRadios() {
+  updateRadios(action) {
     const radios = [...document.querySelectorAll('.ons-js-radio')];
     radios.forEach(radio => {
-      radio.value == 'off' ? (radio.checked = false) : (radio.checked = true);
+      if (action == 'reject') {
+        radio.value == 'off' ? (radio.checked = true) : (radio.checked = false);
+      } else if (action == 'accept') {
+        radio.value == 'off' ? (radio.checked = false) : (radio.checked = true);
+      }
     });
   }
 
-  hidePrimaryCookiesBanner() {
+  hidePrimaryCookiesBanner(text) {
     if (this.component) {
       this.primaryBanner.style.display = 'none';
       this.confirmBanner.classList.remove('ons-u-d-no');
       this.confirmBanner.setAttribute('aria-live', 'polite');
       this.confirmBanner.setAttribute('role', 'status');
+      text.classList.remove('ons-u-d-no');
     }
   }
 

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/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({