@ons/design-system 68.0.0 → 70.0.0

package/components/date-input/_macro.spec.js

@@ -107,7 +107,7 @@ const EXAMPLE_YEAR_FIELD_WITH_ERROR = {
   },
 };
 
-const EXAMPLE_YEAR_FIELD_WITH_NO_ERROR = {
+const EXAMPLE_YEAR_FIELD_WITH_ERROR_FALSE = {
   year: {
     label: {
       text: 'Year',
@@ -148,9 +148,9 @@ const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR = {
   ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
 };
 
-const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR = {
+const EXAMPLE_DATE_SINGLE_FIELD_WITH_ERROR_FALSE = {
   ...EXAMPLE_DATE_INPUT_BASE,
-  ...EXAMPLE_YEAR_FIELD_WITH_NO_ERROR,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR_FALSE,
 };
 
 describe('macro: date input', () => {
@@ -177,6 +177,7 @@ describe('macro: date input', () => {
         max: 31,
         maxLength: 2,
         classes: '',
+        error: '',
         label: {
           text: 'Day',
           description: 'The day',
@@ -204,6 +205,7 @@ describe('macro: date input', () => {
         max: 12,
         maxLength: 2,
         classes: '',
+        error: '',
         label: {
           text: 'Month',
           description: 'The month',
@@ -231,6 +233,7 @@ describe('macro: date input', () => {
         max: 3000,
         maxLength: 4,
         classes: '',
+        error: '',
         label: {
           text: 'Year',
           description: 'The year',
@@ -249,6 +252,12 @@ describe('macro: date input', () => {
       expect($(div).hasClass('ons-field-group')).toBe(true);
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(3);
+    });
+
     it('has the expected `fieldset` output', () => {
       const faker = templateFaker();
       const fieldsetSpy = faker.spy('fieldset');
@@ -356,6 +365,12 @@ describe('macro: date input', () => {
       });
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_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');
@@ -371,7 +386,7 @@ describe('macro: date input', () => {
     });
   });
 
-  describe('mode: multiple fields with single field error', () => {
+  describe('mode: multiple fields with errors', () => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
 
@@ -394,7 +409,7 @@ describe('macro: date input', () => {
     });
 
     it('does not provide error class when error parameter set to false', async () => {
-      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR));
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_SINGLE_FIELD_WITH_ERROR_FALSE));
       const $errorContent = $('.ons-input--error');
 
       expect($errorContent.length).toBe(0);

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

@@ -0,0 +1,27 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date-input-example-double",
+        "legendOrLabel": "Month and year of last MOT",
+        "description": "For example, 3 2023",
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "attributes": {
+                "autocomplete": "mot-month"
+            }
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "attributes": {
+                "autocomplete": "mot-year"
+            }
+        }
+    })
+}}

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

@@ -0,0 +1,18 @@
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+
+{{
+    onsDateInput({
+        "id": "date-input-example-single",
+        "legendOrLabel": "Year of birth",
+        "description": "For example, 1980",
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "attributes": {
+                "autocomplete": "bday-year"
+            }
+        }
+    })
+}}

package/components/details/details.spec.js

@@ -7,18 +7,18 @@ const EXAMPLE_DETAILS_BASIC = {
 };
 
 const EXAMPLE_PAGE = `
-      ${renderComponent('details', {
-        id: 'details-id',
-        title: 'Title for details',
-        content: 'Content for details',
-      })}
-
-      ${renderComponent('details', {
-        id: 'details-id-2',
-        title: 'Title for details',
-        content: 'Content for details',
-      })}
-  `;
+  ${renderComponent('details', {
+    id: 'details-id',
+    title: 'Title for details',
+    content: 'Content for details',
+  })}
+
+  ${renderComponent('details', {
+    id: 'details-id-2',
+    title: 'Title for details',
+    content: 'Content for details',
+  })}
+`;
 
 const RENDERED_EXAMPLE_PAGE = renderTemplate(EXAMPLE_PAGE);
 

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

@@ -2,16 +2,14 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsDetails({
-        "id": "details-example-with-warning",
-        "title": "Need to answer separately from your household?"
-    })
-%}
+    "id": "details-example-with-warning",
+    "title": "Need to answer separately from your household?"
+}) %}
 
     <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a> to start a separate survey.</p>
     {% call onsPanel({
-            type: "warn"
-        })
-    %}
+        "variant": "warn"
+    }) %}
         Someone in your household must still complete a survey using a household access code
     {% endcall %}
 

package/components/document-list/_macro.spec.js

@@ -167,9 +167,7 @@ describe('macro: document list', () => {
 
     it('has expected `title`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] }));
-      const title = $('.ons-document-list__item-title a')
-        .html()
-        .trim();
+      const title = $('.ons-document-list__item-title a').html().trim();
       expect(title).toBe('Crime and justice');
     });
 
@@ -180,9 +178,7 @@ describe('macro: document list', () => {
 
     it('has expected `description`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_BASIC] }));
-      const title = $('.ons-document-list__item-description')
-        .html()
-        .trim();
+      const title = $('.ons-document-list__item-description').html().trim();
       expect(title).toBe('Some description');
     });
   });
@@ -244,9 +240,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const hiddenText = $('.ons-document-list__item-title a .ons-u-vh')
-        .text()
-        .trim();
+      const hiddenText = $('.ons-document-list__item-title a .ons-u-vh').text().trim();
       expect(hiddenText).toBe(', PDF document download, 499KB, 1 page');
     });
 
@@ -257,9 +251,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const hiddenText = $('.ons-document-list__item-attribute')
-        .text()
-        .trim();
+      const hiddenText = $('.ons-document-list__item-attribute').text().trim();
       expect(hiddenText).toBe('PDF, 499KB, 1 page');
     });
   });
@@ -289,17 +281,13 @@ describe('macro: document list', () => {
 
     it('has expected `text`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
-      const text = $('.ons-document-list__attribute-link > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__attribute-link > span').text().trim();
       expect(text).toBe('Poster:');
     });
 
     it('has expected `ref`', () => {
       const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
-      const text = $('.ons-document-list__attribute-link + span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__attribute-link + span').text().trim();
       expect(text).toBe('some ref');
     });
   });
@@ -343,9 +331,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const text = $('.ons-document-list__item-attribute > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__item-attribute > span').text().trim();
       expect(text).toBe('Published:');
     });
 
@@ -386,9 +372,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const text = $('.ons-document-list__item-attribute > span')
-        .text()
-        .trim();
+      const text = $('.ons-document-list__item-attribute > span').text().trim();
       expect(text).toBe('Released:');
     });
 
@@ -449,9 +433,7 @@ describe('macro: document list', () => {
         }),
       );
 
-      const time = $('.ons-document-list__item-attribute time')
-        .text()
-        .trim();
+      const time = $('.ons-document-list__item-attribute time').text().trim();
       expect(time).toBe('1 January 2022');
     });
   });

package/components/document-list/document-list.scss

@@ -62,7 +62,7 @@
     width: 100%;
 
     &:focus {
-      background-color: var(--ons-color-placeholder) !important;
+      background-color: var(--ons-color-image-placeholder) !important;
       border: 2px solid var(--ons-color-borders-document-image-focus);
       box-shadow: none;
       outline: 4px solid var(--ons-color-focus) !important;

package/components/document-list/example-document-list-downloads.njk

@@ -3,7 +3,7 @@
     "documents": [
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Including everyone in Census 2021',
             "metadata": {
                 "type": {
@@ -19,7 +19,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Community handbook for Census 2021',
             "metadata": {
                 "type": {
@@ -35,7 +35,7 @@
         },
         {
             "thumbnail": true,
-            "url": '#',            
+            "url": '#',
             "title": 'Census 2021 matters to everyone',
             "metadata": {
                 "type": {

package/components/document-list/example-document-list-search-result-featured.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded crime data.</p>
+            "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded crime data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         }
     ]

package/components/document-list/example-document-list-search-results.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded <strong class="ons-highlight">crime</strong> data.</p>
+            "description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded <mark>crime</mark> data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         },
         {
@@ -29,7 +29,7 @@
                     "short": '18 February 2021'
                 }
             },
-            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) data.</p>'
+            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>'
         },
         {
             "url": '#0',
@@ -45,7 +45,7 @@
                     "short": '2 December 2019'
                 }
             },
-            "description": '<p>An overview of published data on disability and <strong class="ons-highlight">crime</strong> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
+            "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
         },
         {
             "url": '#0',