@ons/design-system 64.0.0 → 65.0.0

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

@@ -11,6 +11,15 @@ const EXAMPLE_DATE_INPUT_BASE = {
   description: 'For example, 31 3 1980',
 };
 
+const EXAMPLE_DATE_INPUT_BASE_WITH_ERROR = {
+  id: 'date',
+  legendOrLabel: 'Date of birth',
+  description: 'For example, 31 3 1980',
+  error: {
+    text: 'Enter a date that is after 1 January 2019',
+  },
+};
+
 const EXAMPLE_DAY_FIELD = {
   day: {
     label: {
@@ -53,6 +62,66 @@ const EXAMPLE_YEAR_FIELD = {
   },
 };
 
+const EXAMPLE_DAY_FIELD_WITH_ERROR = {
+  day: {
+    label: {
+      text: 'Day',
+      description: 'The day',
+    },
+    value: 'Day',
+    error: true,
+    name: 'day',
+    attributes: {
+      autocomplete: 'bday-day',
+    },
+  },
+};
+
+const EXAMPLE_MONTH_FIELD_WITH_ERROR = {
+  month: {
+    label: {
+      text: 'Month',
+      description: 'The month',
+    },
+    value: 'Month',
+    error: true,
+    name: 'month',
+    attributes: {
+      autocomplete: 'bday-month',
+    },
+  },
+};
+
+const EXAMPLE_YEAR_FIELD_WITH_ERROR = {
+  year: {
+    label: {
+      text: 'Year',
+      description: 'The year',
+    },
+    value: 'Year',
+    error: true,
+    name: 'year',
+    attributes: {
+      autocomplete: 'bday-year',
+    },
+  },
+};
+
+const EXAMPLE_YEAR_FIELD_WITH_NO_ERROR = {
+  year: {
+    label: {
+      text: 'Year',
+      description: 'The year',
+    },
+    value: 'Year',
+    name: 'year',
+    error: false,
+    attributes: {
+      autocomplete: 'bday-year',
+    },
+  },
+};
+
 const EXAMPLE_DATE_SINGLE_FIELD = {
   ...EXAMPLE_DATE_INPUT_BASE,
   ...EXAMPLE_YEAR_FIELD,
@@ -65,6 +134,25 @@ const EXAMPLE_DATE_MULTIPLE_FIELDS = {
   ...EXAMPLE_YEAR_FIELD,
 };
 
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_DAY_FIELD,
+  ...EXAMPLE_MONTH_FIELD,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
+};
+
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_DAY_FIELD_WITH_ERROR,
+  ...EXAMPLE_MONTH_FIELD_WITH_ERROR,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
+};
+
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE,
+  ...EXAMPLE_YEAR_FIELD_WITH_NO_ERROR,
+};
+
 describe('macro: date input', () => {
   describe('mode: multiple fields', () => {
     it('passes jest-axe checks', async () => {
@@ -282,4 +370,34 @@ describe('macro: date input', () => {
       });
     });
   });
+
+  describe('mode: multiple fields with single field error', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_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('date-input', EXAMPLE_DATE_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('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(3);
+    });
+
+    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 $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(0);
+    });
+  });
 });

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

@@ -0,0 +1,63 @@
+
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{{
+    onsDateInput({
+        "id": "period-from-date",
+        "legendOrLabel": "Period from:",
+        "description": "For example, 31 3 2019",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "1"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "1"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2019"
+        }
+    })
+}}
+
+{{
+    onsDateInput({
+        "id": "period-to-date",
+        "legendOrLabel": "Period to:",
+        "description": "For example, 31 3 2020",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "31"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "12"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2018",
+            "error": true
+        },
+        "error": {
+            "text": "Enter a date that is after 1 January 2019"
+        }
+    })
+}}

package/components/details/_details.scss

@@ -22,7 +22,7 @@ $details-caret-width: 1.5rem;
         margin-left: -$details-caret-width;
         padding-left: $details-caret-width;
       }
-      .ons-details__icon .ons-svg-icon {
+      .ons-details__icon .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }

package/components/external-link/_external-link.scss

@@ -3,19 +3,19 @@
     visibility: hidden;
     white-space: nowrap;
   }
-  .ons-svg-icon {
+  .ons-icon {
     fill: var(--ons-color-grey-100);
     margin: 0 0 0 0.25rem;
     padding-bottom: 0.1rem;
     visibility: visible;
   }
   &:focus {
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-black);
     }
   }
   &:hover {
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-link-hover);
       .ons-footer & {
         fill: var(--ons-color-black);

package/components/external-link/_macro.njk

@@ -3,7 +3,7 @@
     <a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
         <span class="ons-external-link__text">
         {{- params.linkText | safe -}}
-        </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+        </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
         <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"/>
         <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
     </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> ({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>

package/components/footer/_footer.scss

@@ -30,8 +30,8 @@
     vertical-align: middle;
   }
 
-  .ons-svg-logo,
-  .ons-svg-logo__group {
+  .ons-icon--logo,
+  .ons-icon--logo__group {
     fill: var(--ons-color-black) !important;
   }
 

package/components/footer/example-footer-with-alternative-organisation.njk

@@ -4,18 +4,18 @@
 {% from "components/footer/_macro.njk" import onsFooter %}
 {{
     onsFooter({
-        "poweredBy": '<svg class="ons-svg-logo ons-svg-logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="poweredby-alt">
+        "poweredBy": '<svg class="ons-icon--logo ons-icon--logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="poweredby-alt">
             <title id="poweredby-alt">NISRA - Northern Ireland Statistics and Research Agency</title>
-            <g class="ons-svg-logo__group" fill="#3d7cc9">
+            <g class="ons-icon--logo__group" fill="#3d7cc9">
                 <path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z"></path>
             </g>
-            <g class="ons-svg-logo__group" fill="#cddb00">
+            <g class="ons-icon--logo__group" fill="#cddb00">
                 <path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z"></path>
             </g>
-            <g class="ons-svg-logo__group" fill="#00205c">
+            <g class="ons-icon--logo__group" fill="#00205c">
                 <path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z"></path>
             </g>
-            <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
+            <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#00205c">
                 <path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1 c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2 c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4 c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
             h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
             c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4

package/components/header/_header.scss

@@ -79,10 +79,10 @@
   &--neutral & {
     &__top {
       background: var(--ons-color-header-masthead-internal);
-      .ons-svg-logo {
+      .ons-icon--logo {
         display: block;
-        .ons-svg-logo__group--text,
-        .ons-svg-logo__group--primary {
+        .ons-icon--logo__group--text,
+        .ons-icon--logo__group--primary {
           fill: var(--ons-color-white);
         }
       }
@@ -91,7 +91,7 @@
       background-color: transparent;
       box-shadow: none;
       outline: 3px solid var(--ons-color-focus);
-      .ons-svg-logo {
+      .ons-icon--logo {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -140,7 +140,7 @@
     }
   }
 
-  .ons-svg-logo {
+  .ons-icon--logo {
     display: block;
   }
 
@@ -155,9 +155,9 @@
 
   &__org-logo-link {
     &:focus {
-      .ons-svg-logo {
+      .ons-icon--logo {
         fill: var(--ons-color-black) !important;
-        .ons-svg-logo__group {
+        .ons-icon--logo__group {
           fill: var(--ons-color-black) !important;
         }
       }
@@ -207,7 +207,7 @@
       &:first-child {
         margin-left: 0;
       }
-      .ons-svg-icon {
+      .ons-icon {
         clip-path: circle(9px at center);
         margin-right: 0.5rem;
       }

package/components/icon/_icon.scss

@@ -1,4 +1,4 @@
-.ons-svg-icon {
+.ons-icon {
   height: 1rem;
   vertical-align: middle;
   width: 1rem;