@ons/design-system 53.0.4 → 54.0.0

package/components/cookies-banner/_macro.njk

@@ -1,40 +1,84 @@
 {% macro onsCookiesBanner(params) %}
-    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default('Cookies banner')}}">
+    {% if params.lang == 'cy' %}
+        {% set ariaLabel = 'Cwcis' %}
+        {% set serviceName = 'ons.gov.uk' %}
+        {% set statementTitle = 'Cwcis ar' %}
+        {% set settingsLinkText = 'Gweld cwcis' %}
+        {% set settingsLinkURL = '/cwics' %}
+        {% set statementText = '<p>Ffeiliau bach a gaiff eu storio ar eich dyfais pan fyddwch yn mynd ar wefan yw cwcis. Rydym ni’n defnyddio rhai cwcis hanfodol i wneud i’r wefan hon weithio.</p><p>Hoffem osod <a href="' + settingsLinkURL + '">cwcis ychwanegol</a> er mwyn cofio eich gosodiadau a deall sut rydych chi’n defnyddio’r wefan. Mae hyn yn ein helpu ni i wella ein gwasanaethau.</p>' %}
+        {% set acceptButtonText = 'Derbyn cwcis ychwanegol' %}
+        {% set rejectButtonText = 'Gwrthod cwcis ychwanegol' %}
+        {% set acceptedText = 'Rydych chi wedi derbyn yr holl gwcis ychwanegol.' %}
+        {% set rejectedText =  'Rydych chi wedi gwrthod yr holl gwcis ychwanegol. ' %}
+        {% set preferencesText =  'Gallwch chi <a href="' + settingsLinkURL + '">newid eich dewisiadau o ran cwcis</a> ar unrhyw adeg.' %}
+        {% set confirmationButtonText = 'Cuddio' %}
+        {% set confirmationButtonTextAria = 'neges hon' %}
+    {% else %}
+        {% set ariaLabel = 'Cookies banner' %}
+        {% set serviceName = 'ons.gov.uk' %}
+        {% set statementTitle = 'Cookies on' %}
+        {% set settingsLinkText = 'View cookies' %}
+        {% set settingsLinkURL = '/cookies' %}
+        {% set statementText = '<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="' + settingsLinkURL + '">additional cookies</a> to remember your settings and understand how you use the site. This helps us to improve our services. </p>' %}
+        {% set acceptButtonText = 'Accept additional cookies' %}
+        {% set rejectButtonText = 'Reject additional cookies' %}
+        {% set acceptedText = 'You have accepted all additional cookies.' %}
+        {% set rejectedText =  'You have rejected all additional cookies.' %}
+        {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
+        {% set confirmationButtonText = 'Hide' %}
+        {% set confirmationButtonTextAria = 'this message' %}
+    {% endif %}
+
+    <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
         <div class="ons-container ons-cookies-banner__primary">
             <div class="ons-grid">
                 <div class="ons-grid__col ons-col-8@m">
-                  <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle }}</h2>
-                  <p class="ons-cookies-banner__desc">{{ params.statementText | safe }}</p>
-                  {% from "components/button/_macro.njk" import onsButton %}
-                  {{
-                      onsButton({
-                          "type": 'button',
-                          "text": params.primaryButtonText | default('Accept all cookies'),
-                          "classes": 'ons-btn--small ons-js-accept-cookies ons-u-mb-xs@xxs@s ons-cookies-banner__btn'
-                      })
-                  }}
-                  {{
-                      onsButton({
-                          "type": 'button',
-                          "url": params.secondaryButtonUrl,
-                          "text": params.secondaryButtonText | default('Set cookie preferences'),
-                          "classes": 'ons-btn--small ons-u-ml-no@xxs@s ons-cookies-banner__btn'
-                      })
-                  }}
+                    <h2 class="ons-cookies-banner__title ons-u-mb-xs">{{ params.statementTitle | default(statementTitle) }} {{ params.serviceName | default(serviceName) }}</h2>
+                    <div class="ons-cookies-banner__statement">{{ params.statementText | default(statementText) | safe }}</div>
+                </div>
+            </div>
+            <div class="ons-grid ons-grid--flex ons-u-mt-s">
+                <div class="ons-grid__col">
+                    {% from "components/button/_macro.njk" import onsButton %}
+                    {{
+                            onsButton({
+                                "type": 'button',
+                                "attributes": {
+                                    "data-button": 'accept'
+                                },
+                                "text": params.acceptButtonText | default(acceptButtonText),
+                                "classes": 'ons-btn--small ons-js-accept-cookies ons-cookies-banner__btn'
+                            })
+                    }}
+                </div>
+                <div class="ons-grid__col">
+                    {{
+                            onsButton({
+                                "type": 'button',
+                                "attributes": {
+                                    "data-button": 'reject'
+                                },
+                                "text": params.rejectButtonText | default(rejectButtonText),
+                                "classes": 'ons-btn--small ons-js-reject-cookies ons-cookies-banner__btn'
+                            })
+                    }}
+                </div>
+                <div class="ons-grid__col">
+                    <a class="ons-cookies-banner__link" href="{{ params.settingsLinkURL | default(settingsLinkURL) }}">{{ params.settingsLinkText | default(settingsLinkText) }}</a>
                 </div>
             </div>
         </div>
         <div class="ons-container ons-cookies-banner__confirmation ons-u-d-no">
             <div class="ons-grid ons-grid--flex ons-grid--between ons-grid--gutterless ons-grid--no-wrap@s ons-grid--vertical-center">
               <div class="ons-grid__col ons-grid__col--flex ons-col-auto ons-u-flex-shrink@s">
-                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s">{{ params.confirmationText | safe }}</p>
+                <p class="ons-cookies-banner__desc ons-u-mb-no@s ons-u-mr-s@s"><span class="ons-js-accepted-text ons-u-d-no">{{ params.acceptedText | default(acceptedText) | safe }} </span><span class="ons-js-rejected-text ons-u-d-no">{{ params.rejectedText | default(rejectedText) | safe }} </span><span class="ons-cookies-banner__preferences-text">{{ params.preferencesText | default(preferencesText) | safe }}</span></p>
               </div>
               <div class="ons-grid__col">
                 {{
                     onsButton({
                         "type": 'button',
-                        "text": params.confirmationButtonText | default('Hide'),
-                        "buttonContext": params.confirmationButtonTextAria | default('the cookie message'),
+                        "text": params.confirmationButtonText | default(confirmationButtonText),
+                        "buttonContext": params.confirmationButtonTextAria | default(confirmationButtonTextAria),
                         "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                     })
                 }}

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');
     }
   }