@ons/design-system 63.0.0 → 65.0.0

package/components/char-check-limit/character-check.spec.js

@@ -59,12 +59,12 @@ describe('script: character-check', () => {
 
     describe('Given that the char check helper has initialised correctly', () => {
       it('the char check readout should be invisible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(true);
       });
 
       it('then the character limit readout should reflect the number of characters remaining', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('You have 11 characters remaining');
       });
     });
@@ -76,17 +76,17 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 10 characters remaining');
         });
 
         it('the char check readout should be visible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(false);
         });
 
         it('then aria-live should be set to polite', async () => {
-          const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+          const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
           expect(ariaLiveAttribute).toBe('polite');
         });
       });
@@ -97,7 +97,7 @@ describe('script: character-check', () => {
         });
 
         it('the char check readout should be invisible', async () => {
-          const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+          const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
           expect(hasClass).toBe(true);
         });
       });
@@ -108,7 +108,7 @@ describe('script: character-check', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+          const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
           expect(innerHtml.trim()).toBe('You have 1 character remaining');
         });
       });
@@ -120,24 +120,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('1 number too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -150,24 +150,24 @@ describe('script: character-check', () => {
       });
 
       it('the char check readout should be visible', async () => {
-        const hasClass = await page.$eval('#search-field-check-remaining', element => element.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#search-field-check', element => element.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
 
       it('then the characters remaining readout reflect the number of characters exceeded', async () => {
-        const innerHtml = await page.$eval('#search-field-check-remaining', element => element.innerHTML);
+        const innerHtml = await page.$eval('#search-field-check', element => element.innerHTML);
         expect(innerHtml.trim()).toBe('2 numbers too many');
       });
 
       it('then aria-live should be set to assertive', async () => {
-        const ariaLiveAttribute = await page.$eval('#search-field-check-remaining', element => element.getAttribute('aria-live'));
+        const ariaLiveAttribute = await page.$eval('#search-field-check', element => element.getAttribute('aria-live'));
         expect(ariaLiveAttribute).toBe('assertive');
       });
 
       it('then the input and readout should be given limit reached classes', async () => {
         const hasClassOnSearchInput = await page.$eval('#search-field', element => element.classList.contains('ons-input--limit-reached'));
         expect(hasClassOnSearchInput).toBe(true);
-        const hasClassOnLimitReadout = await page.$eval('#search-field-check-remaining', element =>
+        const hasClassOnLimitReadout = await page.$eval('#search-field-check', element =>
           element.classList.contains('ons-input__limit--reached'),
         );
         expect(hasClassOnLimitReadout).toBe(true);
@@ -188,7 +188,7 @@ describe('script: character-check', () => {
       });
 
       it('then aria-live attribute should removed', async () => {
-        const hasAriaLiveAttribute = await page.$eval('#feedback-lim-remaining', element => element.hasAttribute('aria-live'));
+        const hasAriaLiveAttribute = await page.$eval('#feedback-lim', element => element.hasAttribute('aria-live'));
         expect(hasAriaLiveAttribute).toBe(false);
       });
     });

package/components/checkboxes/_macro.njk

@@ -5,7 +5,9 @@
     {% from "components/button/_macro.njk" import onsButton %}
 
     {% set fields %}
+    {% if params.checkboxesLabel is defined %}
         <p class="ons-checkboxes__label{{ " " + params.checkboxesLabelClasses if params.checkboxesLabelClasses }}">{{ params.checkboxesLabel }}</p>
+    {% endif %}    
         {% set hasOther = false %}
         {% for checkbox in params.checkboxes %}
             {% if checkbox.other %}
@@ -15,7 +17,7 @@
         {% if hasOther == false and params.autoSelect and params.autoSelect.selectAllText %}
             {% set btnClasses = ['small', 'secondary'] %}
             {% if params.borderlessParent == false %}
-                {% set btnClasses = ['small', 'secondary', 'ghost-dark'] %}
+                {% set btnClasses = ['small', 'secondary', 'ghost', 'ghost-dark'] %}
             {% endif %}
             {{
                 onsButton({

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -8,6 +8,7 @@
 }) %}
     {{
         onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
             "dontWrap": true,
             "name": "central-heating",
             "checkboxes": [

package/components/cookies-banner/_macro.njk

@@ -26,7 +26,7 @@
         {% set rejectedText =  'You have rejected all additional cookies.' %}
         {% set preferencesText =  'You can <a href="' + settingsLinkURL + '">change your cookie preferences</a> at any time.' %}
         {% set confirmationButtonText = 'Hide' %}
-        {% set confirmationButtonTextAria = 'this message' %}
+        {% set contextSuffix = 'this message' %}
     {% endif %}
 
     <div class="ons-cookies-banner" role="region" aria-label="{{ params.ariaLabel | default(ariaLabel)}}">
@@ -78,7 +78,7 @@
                     onsButton({
                         "type": 'button',
                         "text": params.confirmationButtonText | default(confirmationButtonText),
-                        "buttonContext": params.confirmationButtonTextAria | default(confirmationButtonTextAria),
+                        "buttonContext": params.contextSuffix | default(contextSuffix),
                         "classes": 'ons-btn--secondary ons-btn--small ons-js-hide-button'
                     })
                 }}

package/components/cookies-banner/_macro.spec.js

@@ -16,7 +16,7 @@ const EXAMPLE_COOKIES_BANNER_PARAMS = {
   rejectButtonText: 'Reject additional cookies override',
   preferencesText: 'Text override',
   confirmationButtonText: 'Hide override',
-  confirmationButtonTextAria: 'the cookie message override',
+  contextSuffix: 'the cookie message override',
 };
 
 describe('macro: cookies-banner', () => {
@@ -112,7 +112,7 @@ describe('macro: cookies-banner', () => {
         expect(buttonSpy.occurrences[2].text).toBe('Hide override');
       });
 
-      it('has the correct `confirmationButtonTextAria` for `buttonContext`', () => {
+      it('has the correct `contextSuffix` for `buttonContext`', () => {
         const faker = templateFaker();
         const buttonSpy = faker.spy('button');
 

package/components/date-input/_macro.njk

@@ -26,7 +26,7 @@
                 "id": params.id + "-day",
                 "type": "number",
                 "name": params.day.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,
@@ -46,7 +46,7 @@
                 "id": params.id + "-month",
                 "type": "number",
                 "name": params.month.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,
@@ -66,7 +66,7 @@
                 "id": params.id + "-year",
                 "type": "number",
                 "name": params.year.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,

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;