@ons/design-system 68.0.0 → 70.0.0

package/components/duration/_macro.spec.js

@@ -11,6 +11,15 @@ const EXAMPLE_DURATION_INPUT_BASE = {
   description: 'Enter “0” into the years field if you have lived at this address for less than a year',
 };
 
+const EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR = {
+  id: 'duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+  error: {
+    text: 'Enter how long you have lived at this address',
+  },
+};
+
 const EXAMPLE_FIELD_1 = {
   field1: {
     id: 'address-duration-years',
@@ -35,6 +44,45 @@ const EXAMPLE_FIELD_2 = {
   },
 };
 
+const EXAMPLE_FIELD_1_WITH_ERROR = {
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    value: '0',
+    error: true,
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+  },
+};
+
+const EXAMPLE_FIELD_2_WITH_ERROR = {
+  field2: {
+    id: 'address-duration-months',
+    name: 'address-duration-months',
+    value: '0',
+    error: true,
+    suffix: {
+      text: 'Months',
+      id: 'address-duration-months-suffix',
+    },
+  },
+};
+
+const EXAMPLE_FIELD_1_WITH_ERROR_FALSE = {
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    value: '0',
+    error: false,
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+  },
+};
+
 const EXAMPLE_DURATION_SINGLE_FIELD = {
   ...EXAMPLE_DURATION_INPUT_BASE,
   ...EXAMPLE_FIELD_1,
@@ -46,6 +94,23 @@ const EXAMPLE_DURATION_MULTIPLE_FIELDS = {
   ...EXAMPLE_FIELD_2,
 };
 
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR = {
+  ...EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_FIELD_1,
+  ...EXAMPLE_FIELD_2_WITH_ERROR,
+};
+
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR = {
+  ...EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_FIELD_1_WITH_ERROR,
+  ...EXAMPLE_FIELD_2_WITH_ERROR,
+};
+
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR_FALSE = {
+  ...EXAMPLE_DURATION_INPUT_BASE,
+  ...EXAMPLE_FIELD_1_WITH_ERROR_FALSE,
+};
+
 describe('macro: duration', () => {
   describe('mode: multiple fields', () => {
     it('passes jest-axe checks', async () => {
@@ -109,6 +174,12 @@ describe('macro: duration', () => {
       expect($(div).hasClass('ons-field-group')).toBe(true);
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(2);
+    });
+
     it('has the expected `fieldset` output', () => {
       const faker = templateFaker();
       const fieldsetSpy = faker.spy('fieldset');
@@ -141,10 +212,11 @@ describe('macro: duration', () => {
           mutuallyExclusive: {
             legendClasses: 'custom-legend-class',
             dontWrap: true,
+            classes: undefined,
             legendIsQuestionTitle: true,
             error: false,
             mutuallyExclusive: {
-              checkbox: {},
+              exclusiveOptions: {},
               or: 'Or',
               deselectMessage: 'Deselect message',
               deselectGroupAdjective: 'Deselect group adjective',
@@ -166,10 +238,10 @@ describe('macro: duration', () => {
         ...EXAMPLE_DURATION_MULTIPLE_FIELDS,
         legendClasses: 'custom-legend-class',
         dontWrap: true,
+        classes: undefined,
         legendIsQuestionTitle: true,
         error: false,
         mutuallyExclusive: {
-          checkbox: {},
           or: 'Or',
           deselectMessage: 'Deselect message',
           deselectGroupAdjective: 'Deselect group adjective',
@@ -183,9 +255,9 @@ describe('macro: duration', () => {
         description: 'Enter “0” into the years field if you have lived at this address for less than a year',
         legendClasses: 'custom-legend-class',
         dontWrap: true,
+        classes: undefined,
         legendIsQuestionTitle: true,
         error: false,
-        checkbox: {},
         or: 'Or',
         deselectMessage: 'Deselect message',
         deselectGroupAdjective: 'Deselect group adjective',
@@ -215,7 +287,6 @@ describe('macro: duration', () => {
         classes: '',
         value: '0',
         attributes: undefined,
-        classes: '',
         error: undefined,
         fieldId: 'duration',
         label: {
@@ -226,10 +297,17 @@ describe('macro: duration', () => {
         suffix: {
           id: 'address-duration-years-suffix',
           text: 'Years',
+          title: undefined,
         },
       });
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_SINGLE_FIELD));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(1);
+    });
+
     it('has the expected `error` output', () => {
       const faker = templateFaker();
       const errorSpy = faker.spy('error');
@@ -244,4 +322,34 @@ describe('macro: duration', () => {
       });
     });
   });
+
+  describe('mode: multiple fields with errors', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided error class on one input', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(1);
+    });
+
+    it('has the provided error class on multiple inputs', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(2);
+    });
+
+    it('does not provide error class when error parameter set to false', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR_FALSE));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(0);
+    });
+  });
 });

package/components/duration/example-duration-error-for-single-field.njk

@@ -6,7 +6,7 @@
     "legendOrLabel": 'How long do you spend travelling to and from work each day?',
     "legendClasses": 'ons-u-vh',
     "error": {
-        "text": "Enter a number that is less than 60",
+        "text": "Enter a number of minutes that is less than 60",
         "id": "duration-error"
     },
     "field1": {

package/components/duration/example-duration-single-field.njk

@@ -0,0 +1,24 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/duration/_macro.njk" import onsDuration %}
+
+{% call onsQuestion({
+    "title": "How many years have you lived at this address?",
+    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{ onsDuration({
+        "id": "address-duration-example-single",
+        "dontWrap": true,
+        "field1": {
+            "id": "address-duration-years-example",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix-example"
+            },
+            "attributes": {
+                "autocomplete": "off"
+            }
+        }
+    }) }}
+{% endcall %}

package/components/error/_macro.njk

@@ -12,7 +12,7 @@
     {% endset %}
 
     {% call onsPanel({
-        "type": "error",
+        "variant": "error",
         "id": params.id
     }) %}
        {{ content | safe }}

package/components/error/_macro.spec.js

@@ -36,11 +36,7 @@ describe('macro: error', () => {
       ),
     );
 
-    expect(
-      $('.ons-panel__error')
-        .text()
-        .trim(),
-    ).toBe('Example error text.');
+    expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
   });
 
   it('applies the provided `attributes` to the error content paragraph', () => {
@@ -76,7 +72,7 @@ describe('macro: error', () => {
       FAKE_NESTED_CONTENT,
     );
 
-    expect(panelSpy.occurrences[0].type).toBe('error');
+    expect(panelSpy.occurrences[0].variant).toBe('error');
     expect(panelSpy.occurrences[0].id).toBe('example-error');
   });
 

package/components/feedback/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsFeedback(params) %}
-    {% set headingLevel = params.headingLevel | default("2") %}
+    {% set headingLevel = params.headingLevel | default(2) %}
     <div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
         <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
             {{ params.heading }}

package/components/feedback/_macro.spec.js

@@ -70,21 +70,13 @@ describe('macro: feedback', () => {
       }),
     );
 
-    expect(
-      $(`${expectedTitleTag}.ons-feedback__heading`)
-        .text()
-        .trim(),
-    ).toBe('Feedback heading');
+    expect($(`${expectedTitleTag}.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
   });
 
   it('has a default `headingLevel` of 2', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $(`h2.ons-feedback__heading`)
-        .text()
-        .trim(),
-    ).toBe('Feedback heading');
+    expect($(`h2.ons-feedback__heading`).text().trim()).toBe('Feedback heading');
   });
 
   it('has additional heading style classes', () => {
@@ -97,11 +89,7 @@ describe('macro: feedback', () => {
   it('has a paragraph with the provided `content`', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $('p')
-        .text()
-        .trim(),
-    ).toBe('Feedback content...');
+    expect($('p').text().trim()).toBe('Feedback content...');
   });
 
   it('has a link with the provided `url`', () => {
@@ -113,10 +101,6 @@ describe('macro: feedback', () => {
   it('has a link with the provided `linkText`', () => {
     const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
-    expect(
-      $('.ons-feedback__link')
-        .text()
-        .trim(),
-    ).toBe('Feedback link text');
+    expect($('.ons-feedback__link').text().trim()).toBe('Feedback link text');
   });
 });

package/components/field/_macro.spec.js

@@ -75,9 +75,7 @@ describe('macro: field', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('field', EXAMPLE_FIELD_BASIC, 'Example content...'));
 
-    const content = $('.ons-field')
-      .html()
-      .trim();
+    const content = $('.ons-field').html().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 

package/components/fieldset/_fieldset.scss

@@ -10,8 +10,7 @@
       margin: 0;
       padding: 0 0 1.5rem;
 
-      strong,
-      .ons-highlight {
+      strong {
         @extend .ons-highlight;
       }
     }

package/components/fieldset/_macro.spec.js

@@ -42,9 +42,7 @@ describe('macro: fieldset', () => {
   it('has the `description` text', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC));
 
-    const title = $('.ons-fieldset__description')
-      .html()
-      .trim();
+    const title = $('.ons-fieldset__description').html().trim();
     expect(title).toBe('A fieldset description');
   });
 
@@ -122,9 +120,7 @@ describe('macro: fieldset', () => {
   it('calls with content', () => {
     const $ = cheerio.load(renderComponent('fieldset', EXAMPLE_FIELDSET_BASIC, 'Example content...'));
 
-    const content = $('.ons-fieldset')
-      .html()
-      .trim();
+    const content = $('.ons-fieldset').html().trim();
     expect(content).toEqual(expect.stringContaining('Example content...'));
   });
 
@@ -179,9 +175,7 @@ describe('macro: fieldset', () => {
         }),
       );
 
-      const title = $('.ons-fieldset__legend-title')
-        .html()
-        .trim();
+      const title = $('.ons-fieldset__legend-title').html().trim();
       expect(title).toBe('Fieldset legend');
     });
 

package/components/footer/_footer.scss

@@ -30,6 +30,14 @@
     vertical-align: middle;
   }
 
+  &__poweredBy-link {
+    &:focus {
+      .ons-icon--logo {
+        @extend %a-focus;
+      }
+    }
+  }
+
   .ons-icon--logo,
   .ons-icon--logo__group {
     fill: var(--ons-color-black) !important;

package/components/footer/_macro.njk

@@ -36,10 +36,9 @@
             <div class="ons-footer__warning">
                 <div class="ons-container">
                     {% call onsPanel({
-                            "type": "warn",
-                            "classes": "ons-panel--warn--footer"
-                        })
-                    %}
+                        "variant": "warn",
+                        "classes": "ons-panel--warn--footer"
+                    }) %}
                         {{ params.footerWarning | safe }}
                     {% endcall %}
                 </div>
@@ -158,9 +157,11 @@
                             </div>
                         {% endif %}
                         {% if not params.poweredBy %}
-                            <div class="ons-footer__poweredby ons-u-mb-m">
-                                {{ onsLogo | safe }}
-                            </div>
+                            <a class="ons-footer__poweredBy-link" {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %}>
+                                <div class="ons-footer__poweredby-logo ons-u-mb-m">
+                                    {{ onsLogo | safe }}
+                                </div>
+                            </a>
                         {% endif %}
                     </div>
                     {% if params.crest %}

package/components/footer/_macro.spec.js

@@ -225,7 +225,7 @@ describe('macro: footer', () => {
 
       expect(panelSpy.occurrences).toContainEqual(
         expect.objectContaining({
-          type: 'warn',
+          variant: 'warn',
           classes: 'ons-panel--warn--footer',
         }),
       );
@@ -278,7 +278,7 @@ describe('macro: footer', () => {
     it('renders expected column titles', () => {
       const $ = cheerio.load(renderComponent('footer', params));
 
-      const titleHeadings = mapAll($('.ons-footer__heading'), node => node.text().trim());
+      const titleHeadings = mapAll($('.ons-footer__heading'), (node) => node.text().trim());
       expect(titleHeadings).toEqual(['First column', 'Second column']);
     });
 
@@ -411,6 +411,18 @@ describe('macro: footer', () => {
         });
       });
     });
+    describe('correct link for language', () => {
+      it('has the Welsh lang link when the default Welsh lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'cy' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://cy.ons.gov.uk/');
+      });
+      it('has the English lang link when the default English lang ons icon is present', () => {
+        const $ = cheerio.load(renderComponent('footer', { lang: 'en' }));
+
+        expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://www.ons.gov.uk/');
+      });
+    });
     describe('provided poweredBy logo', () => {
       describe.each([
         [

package/components/header/_macro.njk

@@ -45,7 +45,7 @@
                                     {{-
                                         onsIcon({
                                             "iconType": 'ons-logo-' + currentLanguageISOCode,
-                                            "altText": 'Office for National Statistics logo'
+                                            "altText": 'Office for National Statistics homepage'
                                         })
                                     -}}
                                 {% endif %}

package/components/header/_macro.spec.js

@@ -275,7 +275,7 @@ describe('macro: header', () => {
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
-      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
+      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage');
     });
 
     it('has the default masthead mobile logo icon alt text', () => {

package/components/helpers/grid.njk

@@ -1,19 +1,19 @@
 {% macro patternLibExampleGrid(params) %}
-  {% if params.container -%}
-    <div class="ons-container">
-  {% endif -%}
+    {% if params.container -%}
+        <div class="ons-container">
+    {% endif -%}
 
-  <div class="ons-grid">
-      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
-          {% for i in range(0, item.repeat | default(1)  ) -%}
-              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
-                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
-              </div>
-          {%- endfor %}
-      {%- endfor %}
-  </div>
-
-  {% if params.container -%}
+    <div class="ons-grid">
+        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+            {% for i in range(0, item.repeat | default(1) ) -%}
+                <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                    <div class="ons-pl-grid-col">{{ item.col }} col</div>
+                </div>
+            {%- endfor %}
+        {%- endfor %}
     </div>
-  {% endif -%}
+
+    {% if params.container -%}
+        </div>
+    {% endif -%}
 {% endmacro %}

package/components/icon/_macro.njk

@@ -17,6 +17,10 @@
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path d="M6.4.2.3 6.4c-.2.2-.2.4 0 .6l6.2 5.8c.2.2.4.1.6 0l.8-.9c.2-.2.1-.4 0-.6l-4-3.7h12.5c.2 0 .4-.2.4-.4V6c0-.2-.2-.4-.4-.4H3.8l4-4c.2-.1.2-.4.1-.5L7 .2c-.1-.1-.4-.1-.6 0z"/>
         </svg>
+    {%- elif params.iconType == "arrow-up" -%}
+        <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 13 20" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
+            <path fill="currentColor" d="M6.5 0L0 6.5 1.4 8l4-4v12.7h2V4l4.3 4L13 6.4z"></path>
+        </svg>
     {%- elif params.iconType == "check" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" viewBox="0 0 13 10" xmlns="http://www.w3.org/2000/svg" focusable="false" fill="currentColor">
             <path d="M14.35,3.9l-.71-.71a.5.5,0,0,0-.71,0h0L5.79,10.34,3.07,7.61a.51.51,0,0,0-.71,0l-.71.71a.51.51,0,0,0,0,.71l3.78,3.78a.5.5,0,0,0,.71,0h0L14.35,4.6A.5.5,0,0,0,14.35,3.9Z" transform="translate(-1.51 -3.04)"/>
@@ -73,9 +77,9 @@
         </svg>
     {%- elif params.iconType == "twitter" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-twitter" viewBox="0 0 90.01 90.01" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
-	        <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
-	        <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
-	    </svg>
+            <polygon points="24.89,23.01 57.79,66.99 65.24,66.99 32.34,23.01"/>
+            <path d="M 45 0 L 45 0 C 20.147 0 0 20.147 0 45 v 0 c 0 24.853 20.147 45 45 45 h 0 c 24.853 0 45 -20.147 45 -45 v 0 C 90 20.147 69.853 0 45 0 z M 56.032 70.504 L 41.054 50.477 L 22.516 70.504 h -4.765 L 38.925 47.63 L 17.884 19.496 h 16.217 L 47.895 37.94 l 17.072 -18.444 h 4.765 L 50.024 40.788 l 22.225 29.716 H 56.032 z"/>
+        </svg>
     {%- elif params.iconType == "instagram" -%}
         <svg class="{% if params.iconSize %}ons-icon ons-icon--{{ params.iconSize }}{% else %}ons-icon{% endif %}{{ iconClasses }}" id="icon-instagram" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
             <path d="M21.34,9.46c0.66,0,1.2,0.54,1.2,1.2c0,0.66-0.54,1.2-1.2,1.2c-0.66,0-1.2-0.54-1.2-1.2C20.14,10,20.68,9.46,21.34,9.46z M16,12.67c-1.84,0-3.33,1.49-3.33,3.33c0,1.84,1.49,3.33,3.33,3.33c1.84,0,3.33-1.49,3.33-3.33C19.33,14.16,17.84,12.67,16,12.67z M16,10.86c2.84,0,5.14,2.3,5.14,5.14c0,2.84-2.3,5.14-5.14,5.14c-2.84,0-5.14-2.3-5.14-5.14C10.86,13.16,13.16,10.86,16,10.86z M16.56,7.8h-1.11c-2.17,0-2.51,0.01-3.49,0.06c-0.97,0.04-1.5,0.21-1.86,0.34C9.64,8.39,9.3,8.6,8.95,8.95C8.6,9.3,8.39,9.64,8.2,10.1c-0.14,0.35-0.3,0.88-0.34,1.86c-0.04,0.98-0.06,1.32-0.06,3.49v1.11c0,2.17,0.01,2.51,0.06,3.49c0.04,0.97,0.21,1.5,0.34,1.86c0.18,0.47,0.4,0.8,0.75,1.15c0.35,0.35,0.68,0.57,1.15,0.75c0.35,0.14,0.88,0.3,1.86,0.34c0.94,0.04,1.29,0.06,3.23,0.06h1.61c1.94,0,2.3-0.02,3.23-0.06c0.97-0.04,1.5-0.21,1.86-0.34c0.47-0.18,0.8-0.4,1.15-0.75c0.35-0.35,0.57-0.68,0.75-1.15c0.14-0.35,0.3-0.88,0.34-1.86c0.04-0.94,0.06-1.29,0.06-3.23v-1.61c0-1.94-0.02-2.3-0.06-3.23c-0.04-0.97-0.21-1.5-0.34-1.86c-0.18-0.47-0.4-0.8-0.75-1.15C22.7,8.6,22.36,8.39,21.9,8.2c-0.35-0.14-0.88-0.3-1.86-0.34C19.06,7.82,18.72,7.8,16.56,7.8z M17.03,6c1.8,0,2.18,0.02,3.1,0.06c1.06,0.05,1.79,0.22,2.43,0.46c0.66,0.26,1.22,0.6,1.77,1.15c0.56,0.56,0.9,1.11,1.15,1.77c0.25,0.64,0.42,1.36,0.46,2.43c0.05,0.99,0.06,1.35,0.06,3.58v1.09c0,2.22-0.01,2.59-0.06,3.58c-0.05,1.06-0.22,1.79-0.46,2.43c-0.26,0.66-0.6,1.22-1.15,1.77c-0.56,0.56-1.11,0.9-1.77,1.15c-0.64,0.25-1.36,0.42-2.43,0.46C19.13,25.99,18.77,26,16.55,26h-1.09c-2.22,0-2.59-0.01-3.58-0.06c-1.06-0.05-1.79-0.22-2.43-0.46c-0.66-0.26-1.22-0.6-1.77-1.15c-0.56-0.56-0.9-1.11-1.15-1.77c-0.25-0.64-0.42-1.36-0.46-2.43C6.02,19.21,6,18.83,6,17.03v-2.06c0-1.8,0.02-2.18,0.06-3.1c0.05-1.06,0.22-1.79,0.46-2.43c0.26-0.66,0.6-1.22,1.15-1.77c0.56-0.56,1.11-0.9,1.77-1.15c0.64-0.25,1.36-0.42,2.43-0.46C12.79,6.02,13.17,6,14.97,6H17.03z M16,0C7.16,0,0,7.16,0,16s7.16,16,16,16s16-7.16,16-16c0-4.24-1.69-8.31-4.69-11.31S20.24,0,16,0z"/>
@@ -126,8 +130,8 @@
             </rect>
         </svg>
     {%- elif params.iconType == "ons-logo-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -165,8 +169,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -200,8 +204,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>
@@ -213,8 +217,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>

package/components/icon/_macro.spec.js

@@ -33,7 +33,7 @@ describe('macro: icon', () => {
     'crest',
     'ogl',
     'circle-lined',
-  ])('icon type: %s', iconType => {
+  ])('icon type: %s', (iconType) => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('icon', { iconType }));
 
@@ -77,7 +77,7 @@ describe('macro: icon', () => {
     'twitter',
     'instagram',
     'linkedin',
-  ])('icon type: %s', iconType => {
+  ])('icon type: %s', (iconType) => {
     it('has style variation class for provided icon size', () => {
       const $ = cheerio.load(
         renderComponent('icon', {
@@ -91,21 +91,17 @@ describe('macro: icon', () => {
   });
 
   describe.each([
-    ['ons-logo-en', 'Office for National Statistics logo'],
-    ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
-    ['ons-logo-stacked-en', 'Office for National Statistics logo'],
-    ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-en', 'Office for National Statistics homepage'],
+    ['ons-logo-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-stacked-en', 'Office for National Statistics homepage'],
+    ['ons-logo-stacked-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
     ['crest', 'Royal coat of arms of the United Kingdom'],
     ['ogl', 'Open Government License logo'],
   ])('icon type: %s', (iconType, expectedAltText) => {
     it(`has default alt text '${expectedAltText}'`, () => {
       const $ = cheerio.load(renderComponent('icon', { iconType }));
 
-      expect(
-        $('title')
-          .text()
-          .trim(),
-      ).toBe(expectedAltText);
+      expect($('title').text().trim()).toBe(expectedAltText);
     });
 
     it('has provided alt text', () => {
@@ -116,11 +112,7 @@ describe('macro: icon', () => {
         }),
       );
 
-      expect(
-        $('title')
-          .text()
-          .trim(),
-      ).toBe('Example alt text');
+      expect($('title').text().trim()).toBe('Example alt text');
     });
   });
 });

package/components/image/_macro.spec.js

@@ -42,11 +42,7 @@ describe('macro: image', () => {
       }),
     );
 
-    expect(
-      $('.ons-image__caption')
-        .text()
-        .trim(),
-    ).toBe('Example image caption');
+    expect($('.ons-image__caption').text().trim()).toBe('Example image caption');
   });
 
   describe('mode: url', () => {