@ons/design-system 69.0.0 → 70.0.0

package/README.md

@@ -158,3 +158,4 @@ yarn build
 
 - "render whitespace" set to "all"
 - "insert spaces when pressing tab" checked
+- "trim trailing whitespace" checked

package/components/autosuggest/_autosuggest.scss

@@ -45,7 +45,7 @@
     cursor: pointer;
     margin: 0;
     outline: none;
-    padding: $input-padding-horizontal;
+    padding: $input-padding-vertical $input-padding-horizontal;
 
     &:not(:last-child) {
       border-bottom: 1px solid var(--ons-color-input-border);

package/components/card/_macro.njk

@@ -1,6 +1,6 @@
 {%- macro onsCard(params) -%}
 
-    {% set titleSize = params.titleSize | default('2') %}
+    {% set headingLevel = params.headingLevel | default(2) %}
 
     <div class="ons-card">
         <a href="{{ params.url }}" class="ons-card__link">
@@ -11,9 +11,9 @@
                     <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
                 {% endif %}
             {%- endif -%}
-            <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+            <h{{ headingLevel }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
                 {{ params.title }}
-            </h{{ titleSize }}>
+            </h{{ headingLevel }}>
         </a>
 
         <p id="{{ params.textId }}">{{ params.text }}</p>

package/components/card/_macro.spec.js

@@ -56,11 +56,11 @@ describe('macro: card', () => {
     it.each([
       [1, 'h1'],
       [4, 'h4'],
-    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
       const $ = cheerio.load(
         renderComponent('card', {
           ...EXAMPLE_CARD_WITHOUT_IMAGE,
-          titleSize,
+          headingLevel,
         }),
       );
 
@@ -117,11 +117,11 @@ describe('macro: card', () => {
     it.each([
       [1, 'h1'],
       [4, 'h4'],
-    ])('has the correct element type for the provided `titleSize` (%i -> %s)', (titleSize, expectedTitleTag) => {
+    ])('has the correct element type for the provided `headingLevel` (%i -> %s)', (headingLevel, expectedTitleTag) => {
       const $ = cheerio.load(
         renderComponent('card', {
           ...EXAMPLE_CARD_WITH_IMAGE,
-          titleSize,
+          headingLevel,
         }),
       );
 

package/components/date-input/_macro.njk

@@ -1,8 +1,9 @@
-{% from "components/date-field-input/_macro.njk" import onsDateFieldInput %}
+{% from "components/multiple-input-fields/_macro.njk" import onsMultipleInputFields %}
+{% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDateInput(params) %}
     {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
-     {%- set numberOfFields = 0 -%}
+    {%- set numberOfFields = 0 -%}
 
     {%- if params.day -%}
         {%- set numberOfFields = numberOfFields + 1 -%}
@@ -16,82 +17,83 @@
         {%- set numberOfFields = numberOfFields + 1 -%}
     {%- endif -%}
 
-    {% set fields = [] %}
-    {% if params.day %}
-        {% set dayField = {
-            "id": params.id + "-day",
-            "label": {
-                 "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
-                 "description": params.day.label.description if numberOfFields > 1 else params.description,
-                  "id": params.id + "-day-label"
-            },
-            "name": params.day.name,
-            "width": "2",
-            "min": 1,
-            "max": 31,
-            "maxLength": 2,
-            "attributes": params.day.attributes,
-            "value": params.day.value,
-            "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(dayField), fields) %}
-    {% endif %}
-    {% if params.month %}
-        {% set monthField = {
-            "id": params.id + "-month",
-            "label": { 
-                "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
-                "description": params.month.label.description if numberOfFields > 1 else params.description,
-                "id": params.id + "-month-label"
-            },
-            "name": params.month.name,
-            "width": "2",
-            "min": 1,
-            "max": 12,
-            "maxLength": 2,
-            "attributes": params.month.attributes,
-            "value": params.month.value,
-            "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(monthField), fields) %}
-    {% endif %}
-    {% if params.year %}
-        {% set yearField = {
-            "id": params.id + "-year",
-            "label": { 
-                "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
-                "description": params.year.label.description if numberOfFields > 1 else params.description,
-                "id": params.id + "-year-label"
-            }, 
-            "name": params.year.name,
-            "width": "4",
-            "min": 1000,
-            "max": 3000,
-            "maxLength": 4,
-            "attributes": params.year.attributes,
-            "value": params.year.value, 
-            "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
-        } %}
-        {% set fields = (fields.push(yearField), fields) %}
-    {% endif %}
+    {% set fields %}
+        {% if params.day %}
+            {{ onsInput({
+                "id": params.id + "-day",
+                "type": "number",
+                "name": params.day.name,
+                "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "min": 1,
+                "max": 31,
+                "maxLength": 2,
+                "attributes": params.day.attributes,
+                "label": {
+                    "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.day.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-day-label"
+                },
+                "value": params.day.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
 
-    {{ onsDateFieldInput({
+        {% if params.month %}
+            {{ onsInput({
+                "id": params.id + "-month",
+                "type": "number",
+                "name": params.month.name,
+                "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "min": 1,
+                "max": 12,
+                "maxLength": 2,
+                "attributes": params.month.attributes,
+                "label": {
+                    "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.month.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-month-label"
+                },
+                "value": params.month.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
+
+        {% if params.year %}
+            {{ onsInput({
+                "id": params.id + "-year",
+                "type": "number",
+                "name": params.year.name,
+                "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
+                "width": "4",
+                "min": 1000,
+                "max": 3000,
+                "maxLength": 4,
+                "attributes": params.year.attributes,
+                "label": {
+                    "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
+                    "description": params.year.label.description if numberOfFields > 1 else params.description,
+                    "id": params.id + "-year-label"
+                },
+                "value": params.year.value,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
+    {% endset %}
+
+    {{ onsMultipleInputFields({
         "id": params.id,
         "legendOrLabel": params.legendOrLabel,
         "description": params.description,
         "mutuallyExclusive": params.mutuallyExclusive,
-        "fields": fields,
         "numberOfFields": numberOfFields,
+        "fields": fields,
         "error": params.error,
         "legend": params.legendOrLabel,
         "dontWrap": params.dontWrap,
-        "legendClasses": params.legendClasses,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
         "classes": params.classes,
-        "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-        "or": params.mutuallyExclusive.or,
-        "deselectMessage": params.mutuallyExclusive.deselectMessage,
-        "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-        "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective
+        "legendClasses": params.legendClasses,
+        "legendIsQuestionTitle": params.legendIsQuestionTitle
     }) }}
 {% endmacro %}

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/duration/_macro.njk

@@ -1,7 +1,10 @@
-{% from "components/date-field-input/_macro.njk" import onsDateFieldInput %}
+{% from "components/multiple-input-fields/_macro.njk" import onsMultipleInputFields %}
+{% from "components/input/_macro.njk" import onsInput %}
 
 {% macro onsDuration(params) %}
+    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
     {% set numberOfFields = 0 %}
+
     {% if params.field1 %}
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
@@ -10,54 +13,55 @@
         {% set numberOfFields = numberOfFields + 1 %}
     {% endif %}
 
-    {% set fields = [] %}
-    {% if params.field1 %}
-        {% set field1 = {
-            "id": params.field1.id,
-            "name": params.field1.name,
-            "attributes": params.field1.attributes,
-            "label": {
-                "text": params.legendOrLabel if numberOfFields < 2,
-                "description": params.description if numberOfFields < 2
-            },
-            "suffix": {
-                "text": params.field1.suffix.text,
-                "title": params.field1.suffix.title,
-                "id": params.field1.suffix.id
-            },
-            "width": "2",
-            "fieldId": params.id if numberOfFields < 2,
-            "value": params.field1.value, 
-            "error": params.error if numberOfFields < 2,
-            "classes": (" ons-input--error" if (params.error and params.field1.error) or (params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else "")
-        } %}
-        {% set fields = (fields.push(field1), fields) %}
-    {% endif %}
+    {% set fields %}
+        {% if params.field1 %}
+            {{ onsInput({
+                "id": params.field1.id,
+                "type": "number",
+                "name": params.field1.name,
+                "classes": (" ons-input--error" if (params.error and params.field1.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "attributes": params.field1.attributes,
+                "value": params.field1.value,
+                "suffix": {
+                    "text": params.field1.suffix.text,
+                    "title": params.field1.suffix.title,
+                    "id": params.field1.suffix.id
+                },
+                "label": {
+                    "text": params.legendOrLabel if numberOfFields < 2,
+                    "description": params.description if numberOfFields < 2
+                },
+                "fieldId": params.id if numberOfFields < 2,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
 
-    {% if params.field2 %}
-        {% set field2 = {
-            "id": params.field2.id,
-            "name": params.field2.name,
-            "attributes": params.field2.attributes,
-            "width": "2",
-            "label": { 
-                "text": params.legendOrLabel if numberOfFields < 2,
-                "description": params.description if numberOfFields < 2
-            },  
-            "suffix": {
-                "text": params.field2.suffix.text,
-                "title": params.field2.suffix.title,
-                "id": params.field2.suffix.id
-            },
-            "value": params.field2.value,
-            "error": params.error if numberOfFields < 2,
-            "fieldId": params.id if numberOfFields < 2,
-            "classes": (" ons-input--error" if (params.error and params.field2.error) or (params.error and not params.field1.error and not params.field2.error) else "") + (" ons-js-exclusive-group-item" if params.mutuallyExclusive else "")
-        } %}
-        {% set fields = (fields.push(field2), fields) %}
-    {% endif %}
-  
-    {{ onsDateFieldInput({
+        {% if params.field2 %}
+            {{ onsInput({
+                "id": params.field2.id,
+                "type": "number",
+                "name": params.field2.name,
+                "classes": (" ons-input--error" if (params.error and params.field2.error) or (numberOfFields > 1 and params.error and not params.field1.error and not params.field2.error) else "") + exclusiveClass | default(""),
+                "width": "2",
+                "attributes": params.field2.attributes,
+                "value": params.field2.value,
+                "suffix": {
+                    "text": params.field2.suffix.text,
+                    "title": params.field2.suffix.title,
+                    "id": params.field2.suffix.id
+                },
+                "label": {
+                    "text": params.legendOrLabel if numberOfFields < 2,
+                    "description": params.description if numberOfFields < 2
+                },
+                "fieldId": params.id if numberOfFields < 2,
+                "error": params.error if numberOfFields < 2
+            }) }}
+        {% endif %}
+    {% endset %}
+
+    {{ onsMultipleInputFields({
         "id": params.id,
         "legendOrLabel": params.legendOrLabel,
         "description": params.description,