@ons/design-system 65.2.0 → 65.2.2

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

@@ -43,18 +43,14 @@ describe('macro: cookies-banner', () => {
       it('has `statementTitle` title text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const statementTitle = $('.ons-cookies-banner__title')
-          .text()
-          .trim();
+        const statementTitle = $('.ons-cookies-banner__title').text().trim();
         expect(statementTitle).toBe('Cookies on override ons.gov.uk override');
       });
 
       it('has `statementText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
-          .html()
-          .trim();
+        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement').html().trim();
         expect(statementText).toBe('Statement override');
       });
 
@@ -79,9 +75,7 @@ describe('macro: cookies-banner', () => {
       it('Renders a link with text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', EXAMPLE_COOKIES_BANNER_PARAMS));
 
-        const linkText = $('.ons-cookies-banner__link')
-          .text()
-          .trim();
+        const linkText = $('.ons-cookies-banner__link').text().trim();
         expect(linkText).toBe('Cookie settings override');
       });
 
@@ -97,9 +91,7 @@ describe('macro: cookies-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();
+        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text').html().trim();
         expect(preferencesText).toBe('Text override');
       });
 
@@ -134,18 +126,14 @@ describe('macro: cookies-banner', () => {
       it('has `statementTitle` title text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const statementTitle = $('.ons-cookies-banner__title')
-          .text()
-          .trim();
+        const statementTitle = $('.ons-cookies-banner__title').text().trim();
         expect(statementTitle).toBe('Cookies on ons.gov.uk');
       });
 
       it('has `statementText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const statementText = $('.ons-cookies-banner__primary .ons-cookies-banner__statement')
-          .html()
-          .trim();
+        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>',
         );
@@ -172,9 +160,7 @@ describe('macro: cookies-banner', () => {
       it('Renders a link with text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const linkText = $('.ons-cookies-banner__link')
-          .text()
-          .trim();
+        const linkText = $('.ons-cookies-banner__link').text().trim();
         expect(linkText).toBe('View cookies');
       });
 
@@ -210,9 +196,7 @@ describe('macro: cookies-banner', () => {
       it('has `preferencesText` text', () => {
         const $ = cheerio.load(renderComponent('cookies-banner', {}));
 
-        const preferencesText = $('.ons-cookies-banner__confirmation .ons-cookies-banner__preferences-text')
-          .html()
-          .trim();
+        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.');
       });
 
@@ -260,9 +244,7 @@ describe('macro: cookies-banner', () => {
     it('has the welsh version of default values', () => {
       const $ = cheerio.load(renderComponent('cookies-banner', { lang: 'cy' }));
 
-      const statementTitle = $('.ons-cookies-banner__title')
-        .text()
-        .trim();
+      const statementTitle = $('.ons-cookies-banner__title').text().trim();
       expect(statementTitle).toBe('Cwcis ar ons.gov.uk');
     });
   });

package/components/date-input/example-date-input-error.njk

@@ -2,7 +2,7 @@
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {{
     onsDateInput({
-        "id": "period-from-date",
+        "id": "period-from-date-input-error-example",
         "legendOrLabel": "Period from:",
         "description": "For example, 31 3 2019",
         "day": {
@@ -31,7 +31,7 @@
 
 {{
     onsDateInput({
-        "id": "period-to-date",
+        "id": "period-to-date-input-error-example",
         "legendOrLabel": "Period to:",
         "description": "For example, 31 3 2020",
         "day": {

package/components/date-input/example-date-input.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDateInput({
-        "id": "date",
+        "id": "date-input-example",
         "legendOrLabel": "Date of birth",
         "description": "For example, 31 3 1980",
         "day": {

package/components/details/example-details-with-warning.njk

@@ -3,7 +3,7 @@
 
 {%
     call onsDetails({
-        "id": "details",
+        "id": "details-example-with-warning",
         "title": "Need to answer separately from your household?"
     })
 %}

package/components/details/example-details.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDetails({
-        "id": "details",
+        "id": "details-example",
         "title": "What is a photovoltaic system?",
         "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>"
     })

package/components/duration/example-duration-error.njk

@@ -3,27 +3,27 @@
 
 {{
     onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-error-example",
         "legendOrLabel": 'How long have you lived at this address?',
         "legendClasses": 'ons-u-vh',
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-error-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-error-example"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-error-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-error-example"
             }
         },
         "error": {
-            "id": "address-duration-error",
+            "id": "address-duration-error-example",
             "text": "Enter how long you have lived at this address"
         }
     })

package/components/duration/example-duration.njk

@@ -7,25 +7,25 @@
     "legendIsQuestionTitle": true
 }) %}
     {{ onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-example",
         "dontWrap": true,
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"

package/components/header/example-header-external-with-service-links.njk

@@ -9,7 +9,7 @@
         "mastheadLogoUrl": '#0',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-external",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

package/components/header/example-header-internal.njk

@@ -10,7 +10,7 @@
         "variants": 'internal',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-internal",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

package/components/input/example-input-email.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "email",
+        "id": "email-example-input-email",
         "type": "email",
         "autocomplete": "email",
         "label": {

package/components/input/example-input-number.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input",
         "type": "number",
         "width": "2",
         "autocomplete": "off",

package/components/input/example-input-numeric-values.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input-numeric-values",
         "type": "number",
         "width": "2",
         "autocomplete": "off",
@@ -15,7 +15,7 @@
 }}
 {{
     onsInput({
-        "id": "prefixed",
+        "id": "prefixed-example-input-numeric-values",
         "type": "number",
         "width": "6",
         "autocomplete": "off",
@@ -25,13 +25,13 @@
         "prefix": {
             "text": "£",
             "title": "British pounds (GBP)",
-            "id": "annual-salary-gpb-prefix"
+            "id": "annual-salary-gpb-prefix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-percent",
+        "id": "suffixed-percent-example-input-numeric-values",
         "type": "number",
         "width": "3",
         "autocomplete": "off",
@@ -41,13 +41,13 @@
         "suffix": {
             "title": "per cent",
             "text": "%",
-            "id": "internet-access-per-cent-suffix"
+            "id": "internet-access-per-cent-suffix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-centimetres",
+        "id": "suffixed-centimetres-example-input-numeric-values",
         "type": "number",
         "width": "4",
         "autocomplete": "off",
@@ -58,7 +58,7 @@
         "suffix": {
             "title": "centimetres",
             "text": "cm",
-            "id": "length-cm-suffix"
+            "id": "length-cm-suffix-example-input-numeric-values"
         }
     })
 }}

package/components/input/example-input-text-with-character-limit-checker.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-char-limit-checker",
         "label": {
             "text": "Enter some text"
         },

package/components/input/example-input-text-with-description.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-description",
         "label": {
             "text": "Enter some text",
             "description": "Example description hint text"

package/components/input/example-input-text.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input",
         "label": {
             "text": "Enter some text"
         }

package/components/mutually-exclusive/example-mutually-exclusive-checkboxes.njk

@@ -13,34 +13,34 @@
             "name": "mutually-exclusive",
             "checkboxes": [
                 {
-                    "id": "gas",
+                    "id": "gas-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Gas"
                     },
                     "value": "gas"
                 },
                 {
-                    "id": "electric",
+                    "id": "electric-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Electric"
                     },
                     "value": "electric"
                 },
                 {
-                    "id": "solid-fuel",
+                    "id": "solid-fuel-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Solid fuel"
                     },
                     "value": "solid-fuel"
                 },
                 {
-                    "id": "other-fuel",
+                    "id": "other-fuel-example-mutually-exclusive-checkbox",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
-                        "id": "other-fuel-textbox",
+                        "id": "other-fuel-textbox-example-mutually-exclusive-checkbox",
                         "name": "other-fuel-answer",
                         "label": {
                         "text": "Please specify"
@@ -55,7 +55,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "no-central-heating",
+                        "id": "no-central-heating-example-mutually-exclusive-checkbox",
                         "label": {
                             "text": "No central heating"
                         },

package/components/mutually-exclusive/example-mutually-exclusive-date-with-error.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDateInput({
-        "id": "date-mutually-exclusive",
+        "id": "date-mutually-exclusive-with-error",
         "legendOrLabel": "When did you leave your last paid job?",
         "legendClasses": "ons-u-vh",
         "day": {
@@ -30,7 +30,7 @@
             "deselectExclusiveOptionAdjective": "deselected",
             "exclusiveOptions": [
                 {
-                    "id": "date-exclusive-checkbox",
+                    "id": "date-exclusive-checkbox-with-error",
                     "name": "no-paid-job",
                     "value": "no-paid-job",
                     "label": {

package/components/mutually-exclusive/example-mutually-exclusive-email.njk

@@ -8,7 +8,7 @@
 }) %}
     {{
         onsInput({
-            "id": "email",
+            "id": "email-example-mutually-exclusive",
             "type": "email",
             "label": {
                 "text": "Email address",
@@ -22,7 +22,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "email-checkbox",
+                        "id": "email-checkbox-example-mutually-exclusive",
                         "name": "no-email",
                         "value": "no-email",
                         "label": {

package/components/mutually-exclusive/example-mutually-exclusive-multiple-options.njk

@@ -13,21 +13,21 @@
             "name": "mutually-exclusive",
             "checkboxes": [
                 {
-                    "id": "gas",
+                    "id": "gas-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Gas"
                     },
                     "value": "gas"
                 },
                 {
-                    "id": "electric",
+                    "id": "electric-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Electric"
                     },
                     "value": "electric"
                 },
                 {
-                    "id": "solid-fuel",
+                    "id": "solid-fuel-example-mutually-exclusive-multiple-options",
                     "label": {
                         "text": "Solid fuel"
                     },
@@ -41,7 +41,7 @@
                 "deselectExclusiveOptionAdjective": "deselected",
                 "exclusiveOptions": [
                     {
-                        "id": "no-central-heating",
+                        "id": "no-central-heating-example-mutually-exclusive-multiple-options",
                         "name": "no central heating",
                         "label": {
                             "text": "No central heating"
@@ -49,7 +49,7 @@
                         "value": "no-central-heating"
                     },
                     {
-                        "id": "other",
+                        "id": "other-example-mutually-exclusive-multiple-options",
                         "name": "other",
                         "label": {
                             "text": "Other"

package/components/panel/_macro.spec.js

@@ -51,19 +51,13 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect(
-        $('.ons-panel__body')
-          .text()
-          .trim(),
-      ).toBe('Some panel text');
+      expect($('.ons-panel__body').text().trim()).toBe('Some panel text');
     });
 
     it('calls with content', () => {
       const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, type: panelType }, 'Example content...'));
 
-      const content = $('.ons-panel__body')
-        .text()
-        .trim();
+      const content = $('.ons-panel__body').text().trim();
       expect(content).toBe('Example content...');
     });
 
@@ -124,11 +118,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect(
-        $('.ons-panel__assistive-text')
-          .text()
-          .trim(),
-      ).toBe(accessibleText);
+      expect($('.ons-panel__assistive-text').text().trim()).toBe(accessibleText);
     });
 
     it('has the provided visually hidden accessible text', () => {
@@ -140,11 +130,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect(
-        $('.ons-panel__assistive-text')
-          .text()
-          .trim(),
-      ).toBe('Some helpful text:');
+      expect($('.ons-panel__assistive-text').text().trim()).toBe('Some helpful text:');
     });
   });
 
@@ -333,11 +319,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect(
-        $('.ons-panel__icon')
-          .text()
-          .trim(),
-      ).toBe('!');
+      expect($('.ons-panel__icon').text().trim()).toBe('!');
     });
   });
 
@@ -362,11 +344,7 @@ describe('macro: panel', () => {
         }),
       );
 
-      expect(
-        $('.ons-panel__icon')
-          .text()
-          .trim(),
-      ).toBe('!');
+      expect($('.ons-panel__icon').text().trim()).toBe('!');
     });
   });
 
@@ -406,7 +384,7 @@ describe('macro: panel', () => {
       expect($('.ons-panel__icon').hasClass('ons-u-fs-r')).toBe(true);
     });
 
-    it.each(['r', 'm', 'l', 'xl'])('has the correct class for the provided `iconSize` override (%s)', customIconSize => {
+    it.each(['r', 'm', 'l', 'xl'])('has the correct class for the provided `iconSize` override (%s)', (customIconSize) => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,

package/components/phase-banner/_macro.njk

@@ -4,7 +4,7 @@
             <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                 {% if not params.hideBadge %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
-                    <h3 class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</h3>
+                    <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
                 </div>
                 {% endif %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">

package/components/radios/example-radios-with-clear-button-expanded.njk

@@ -26,14 +26,14 @@
                 },
                 "radios": [
                     {
-                        "id": "none",
+                        "id": "none-radio-with-clear-button-expanded",
                         "label": {
                             "text": "No religion"
                         },
                         "value": "none"
                     },
                     {
-                        "id": "christian",
+                        "id": "christian-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Christian",
                             "description": "Including Church of England, Catholic, Protestant and all other Christian denominations"
@@ -41,14 +41,14 @@
                         "value": "christian"
                     },
                     {
-                        "id": "buddhist",
+                        "id": "buddhist-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Buddhist"
                         },
                         "value": "buddhist"
                     },
                     {
-                        "id": "hindu",
+                        "id": "hindu-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Hindu"
                         },
@@ -62,21 +62,21 @@
                         "value": "jewish"
                     },
                     {
-                        "id": "muslim",
+                        "id": "muslim-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Muslim"
                         },
                         "value": "muslim"
                     },
                     {
-                        "id": "sikh",
+                        "id": "sikh-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Sikh"
                         },
                         "value": "sikh"
                     },
                     {
-                        "id": "other-radio",
+                        "id": "other-radio-with-clear-button-expanded",
                         "label": {
                             "text": "Any other religion"
                         },
@@ -84,7 +84,7 @@
                         "checked": true,
                         "other": {
                             "otherType": "input",
-                            "id": "other-textbox",
+                            "id": "other-textbox-radio-with-clear-button-expanded",
                             "name": "other-answer",
                             "label": {
                                 "text": "Enter your religion"
@@ -95,4 +95,4 @@
             })
         }}
     </form>
-{% endcall %}
+{% endcall %}