@ons/design-system 67.2.0 → 68.0.1

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/_field-group.scss

@@ -1,14 +1,13 @@
 .ons-field-group {
   font-size: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
 
   .ons-field {
     display: inline-block;
     font-size: 1rem;
     margin-top: 0;
     vertical-align: top;
-
-    &:not(:last-child) {
-      margin-right: 1rem;
-    }
   }
 }

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 %}