@ons/design-system 63.0.0 → 65.0.0

package/components/input/_macro.spec.js

@@ -535,26 +535,6 @@ describe('macro: input', () => {
   });
 
   describe('search', () => {
-    it('renders `search` component', () => {
-      const faker = templateFaker();
-      const searchSpy = faker.spy('search');
-
-      faker.renderComponent('input', EXAMPLE_WITH_SEARCH);
-
-      expect(searchSpy.occurrences[0]).toEqual({
-        accessiblePlaceholder: true,
-        searchButton: {
-          type: 'button',
-          text: 'Search for address',
-          id: 'search-for-address',
-          attributes: { a: 42 },
-          classes: 'extra-search-button-class',
-          iconType: 'search',
-          visuallyHideButtonText: true,
-        },
-      });
-    });
-
     it.each('outputs `type` attribute of "search"', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_WITH_SEARCH));
 
@@ -621,7 +601,7 @@ describe('macro: input', () => {
     it('has data attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('data-char-check-ref')).toBe('example-id-check');
     });
 
     it('has data attribute which defines limit for character check', () => {
@@ -633,7 +613,7 @@ describe('macro: input', () => {
     it('has `aria-describedby` attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('input', EXAMPLE_INPUT_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check-remaining');
+      expect($('.ons-input').attr('aria-describedby')).toBe('example-id-check');
     });
 
     it('renders character limit component', () => {

package/components/{search/example-search-with-character-check.njk → input/example-input-search-with-character-check.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -20,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}

package/components/{search/example-search-with-placeholder.njk → input/example-input-search-with-placeholder.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/{search/example-search.njk → input/example-input-search.njk}

@@ -1,5 +1,4 @@
 {% from "components/input/_macro.njk" import onsInput %}
-
 {{
     onsInput({
         "id": 'search-field',
@@ -13,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/mutually-exclusive/_macro.njk

@@ -7,6 +7,7 @@
     {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
     {% set content = caller() %}
     {% set exclusiveOptionsLength = params.exclusiveOptions | length %}
+    {% set or = params.or | default("Or") %}
 
     {% call onsFieldset({
         "id": params.id,
@@ -26,7 +27,7 @@
             {% endif %}
             {% if exclusiveOptionsLength == 1 %}
                 <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ or }}</span>
                     {{
                         onsCheckbox({
                             "id": params.exclusiveOptions[0].id,
@@ -38,7 +39,7 @@
                             "deselectMessage": params.deselectMessage,
                             "inputClasses": "ons-js-exclusive-option",
                             "label": {
-                                "text": '<span class="ons-u-vh">' + params.or + ', </span> ' + params.exclusiveOptions[0].label.text,
+                                "text": '<span class="ons-u-vh">' + or + ', </span> ' + params.exclusiveOptions[0].label.text,
                                 "description": params.exclusiveOptions[0].label.description
                             }
                         })
@@ -46,7 +47,7 @@
                 </p>
             {% elif exclusiveOptionsLength > 1 %}
                 <p class="ons-checkboxes--mutually-exclusive__item ons-u-mt-s">
-                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
+                    <span class="ons-checkboxes__label ons-u-fs-r--b" aria-hidden="true">{{ or }}</span>
                     {{
                         onsRadios({
                             "dontWrap": true,

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -63,7 +63,7 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim-remaining', node => node.textContent);
+          const limitText = await page.$eval('#feedback-lim', node => node.textContent);
           expect(limitText).toBe('You have 200 characters remaining');
         });
 

package/components/pagination/_macro.njk

@@ -13,7 +13,7 @@
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">
-                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous }}</a>
+                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">{{ params.previous | default("Previous") }}</a>
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
@@ -60,7 +60,7 @@
             {% endif %}
             {% if totalPages > 1 and totalPages != currentPageIndex %}
                 <li class="ons-pagination__item ons-pagination__item--next">
-                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next }}</a>
+                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">{{ params.next | default("Next") }}</a>
                 </li>
             {% endif %}
         </ul>

package/components/pagination/example-pagination-first.njk

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 1,
         "pages": [

package/components/pagination/example-pagination-last.njk

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 4,
         "pages": [

package/components/pagination/example-pagination-with-no-range-indicator.njk

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "hideRangeIndicator": true,
         "currentPageNumber": 5,
         "pages": [

package/components/pagination/example-pagination.njk

@@ -2,8 +2,6 @@
 
 {{
     onsPagination({
-        "previous": "Previous",
-        "next": "Next",
         "currentPageNumber": 5,
         "pages": [
             {

package/components/panel/_macro.njk

@@ -81,7 +81,7 @@
                 </span>
             {% endif %}
 
-            <div class="ons-panel__body{% if params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
+            <div class="ons-panel__body{% if params.iconSize %} ons-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
         </div>

package/components/panel/_panel.scss

@@ -69,42 +69,42 @@
       margin-bottom: 0;
     }
 
-    &.ons-svg-icon-margin--xxxl {
+    &.ons-icon-margin--xxxl {
       padding-left: 2.7rem !important;
 
       @include mq(m) {
         padding-left: 3.5rem !important;
       }
     }
-    &.ons-svg-icon-margin--xxl {
+    &.ons-icon-margin--xxl {
       padding-left: 2.45rem !important;
 
       @include mq(m) {
         padding-left: 2.9rem !important;
       }
     }
-    &.ons-svg-icon-margin--xl {
+    &.ons-icon-margin--xl {
       padding-left: 2.35rem !important;
 
       @include mq(m) {
         padding-left: 2.55rem !important;
       }
     }
-    &.ons-svg-icon-margin--l {
+    &.ons-icon-margin--l {
       padding-left: 2.25rem !important;
 
       @include mq(m) {
         padding-left: 2.35rem !important;
       }
     }
-    &.ons-svg-icon-margin--m {
+    &.ons-icon-margin--m {
       padding-left: 2.05rem !important;
 
       @include mq(m) {
         padding-left: 2.2rem !important;
       }
     }
-    &.ons-svg-icon-margin--s {
+    &.ons-icon-margin--s {
       padding-left: 1.7rem !important;
     }
   }
@@ -216,7 +216,7 @@
     &__icon {
       left: 0;
       padding-left: 1rem;
-      .ons-svg-icon {
+      .ons-icon {
         fill: var(--ons-color-success) !important;
         margin-top: -15% !important;
       }

package/components/password/_macro.njk

@@ -24,7 +24,7 @@
                 "inputClasses": "ons-js-password-toggle",
                 "name": "show-password",
                 "label": {
-                    "text": params.showPasswordText
+                    "text": params.showPasswordText | default("Show password")
                 }
             })
         }}

package/components/password/example-password.njk

@@ -5,7 +5,6 @@
         "id": "password",
         "label": {
             "text": "Password"
-        },
-        "showPasswordText": "Show password"
+        }
     })
 }}

package/components/quote/_quote.scss

@@ -17,7 +17,7 @@
     position: relative;
   }
 
-  .ons-svg-icon {
+  .ons-icon {
     fill: var(--ons-color-grey-75) !important;
     height: 1.85rem;
     left: 0;

package/components/radios/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/fieldset/_macro.njk" import onsFieldset %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/label/_macro.njk" import onsLabel %}
-
+    
     {% call onsFieldset({
         "id": params.id,
         "classes": params.classes,

package/components/select/_macro.njk

@@ -22,7 +22,6 @@
             id="{{ params.id }}"
             name="{{ params.name }}"
             class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error %} ons-input--error{% endif %}"
-            {% if params.value %}value="{{ params.value}}" {% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >
             {% for option in params.options %}
@@ -30,7 +29,7 @@
                 {% if option.id %}id="{{ option.id }}" {% endif %}
                 {% if option.selected %}selected {% endif %}
                 {% if option.disabled %}disabled {% endif %}
-                {% if params.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                {% if option.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
             >
                 {{- option.text -}}
             </option>

package/components/skip-to-content/_macro.njk

@@ -1,3 +1,4 @@
 {% macro onsSkipToContent(params) %}
-    <a class="ons-skip-link" href="{{ params.url }}">{{ params.text }}</a>
+ {% set text = params.text | default('Skip to content') %}
+    <a class="ons-skip-to-content" href="{{ params.url }}">{{ text }}</a>
 {% endmacro %}

package/components/skip-to-content/_macro.spec.js

@@ -26,7 +26,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect($('.ons-skip-link')[0].tagName).toBe('a');
+    expect($('.ons-skip-to-content')[0].tagName).toBe('a');
   });
 
   it('has skip link with the provided `url`', async () => {
@@ -37,7 +37,7 @@ describe('macro: skip-to-content', () => {
       }),
     );
 
-    expect($('.ons-skip-link').attr('href')).toBe('#example-anchor');
+    expect($('.ons-skip-to-content').attr('href')).toBe('#example-anchor');
   });
 
   it('has skip link with the provided `text`', async () => {
@@ -49,9 +49,23 @@ describe('macro: skip-to-content', () => {
     );
 
     expect(
-      $('.ons-skip-link')
+      $('.ons-skip-to-content')
         .text()
         .trim(),
     ).toBe('Skip to the content');
   });
+
+  it('has skip link with the default text if no text provided`', async () => {
+    const $ = cheerio.load(
+      renderComponent('skip-to-content', {
+        url: '#example-anchor',
+      }),
+    );
+
+    expect(
+      $('.ons-skip-to-content')
+        .text()
+        .trim(),
+    ).toBe('Skip to content');
+  });
 });

package/components/skip-to-content/_skip.scss

@@ -1,4 +1,4 @@
-.ons-skip-link {
+.ons-skip-to-content {
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   display: block;

package/components/skip-to-content/skip-to-content.dom.js

@@ -2,7 +2,7 @@ import domready from '../../js/domready';
 import skipToMain from './skip-to-content';
 
 async function initaliseSkipToLink() {
-  const links = [...document.querySelectorAll('.ons-skip-link')];
+  const links = [...document.querySelectorAll('.ons-skip-to-content')];
   if (links.length) {
     links.forEach(link => {
       skipToMain(link);

package/components/skip-to-content/skip-to-content.spec.js

@@ -15,7 +15,7 @@ describe('script: skip-to-content', () => {
   it('sets `tabIndex` of target element to -1', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const targetTabIndex = await page.$eval('#target-element', el => el.tabIndex);
@@ -25,7 +25,7 @@ describe('script: skip-to-content', () => {
   it('removes outline from target element on navigate', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const targetOutline = await page.$eval('#target-element', el => el.style.outline);
@@ -35,7 +35,7 @@ describe('script: skip-to-content', () => {
   it('focuses target element on navigate', async () => {
     await setTestPage('/test', EXAMPLE_SKIP_TO_LINK_TEMPLATE);
 
-    await page.focus('.ons-skip-link');
+    await page.focus('.ons-skip-to-content');
     await page.keyboard.press('Enter');
 
     const focusedElementId = await page.evaluate(() => document.activeElement.id);

package/components/summary/_macro.njk

@@ -96,9 +96,8 @@
                                                         <a
                                                             href="{{ action.url }}"
                                                             class="ons-summary__button"
-                                                            {% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
                                                             {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
-                                                        >{{ action.text }}</a>
+                                                        >{{ action.text }}<span class="ons-u-vh">answer for {{ row.rowTitle }}</span></a>
                                                     {% endfor %}
                                                 </dd>
                                             {% endif %}

package/components/summary/_macro.spec.js

@@ -49,7 +49,6 @@ const EXAMPLE_SUMMARY_ROWS = {
           actions: [
             {
               text: 'Action 1',
-              ariaLabel: 'action aria label 1',
               attributes: {
                 a: 'abc',
                 b: 'def',
@@ -58,7 +57,6 @@ const EXAMPLE_SUMMARY_ROWS = {
             },
             {
               text: 'Action 2',
-              ariaLabel: 'action aria label 2',
               url: '#2',
             },
           ],
@@ -149,12 +147,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
             {
               text: 'Remove',
-              ariaLabel: 'Remove list item',
               url: '#0',
             },
           ],
@@ -169,7 +165,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Remove list item',
               url: '#0',
             },
           ],
@@ -184,7 +179,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -203,12 +197,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change answer',
               url: '#0',
             },
             {
               text: 'Remove',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -223,7 +215,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -238,7 +229,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
           actions: [
             {
               text: 'Change',
-              ariaLabel: 'Change list item',
               url: '#0',
             },
           ],
@@ -487,25 +477,20 @@ describe('macro: summary', () => {
 
         expect(
           $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').text(),
-        ).toBe('Action 1');
+        ).toBe('Action 1answer for row title 2');
         expect(
           $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').text(),
-        ).toBe('Action 2');
+        ).toBe('Action 2answer for row title 2');
       });
 
-      it('has the `aria-label` provided', () => {
+      it('has the correct visually hidden <span> text', () => {
         const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
         expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child').attr(
-            'aria-label',
-          ),
-        ).toBe('action aria label 1');
-        expect(
-          $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:last-child').attr(
-            'aria-label',
-          ),
-        ).toBe('action aria label 2');
+          $(
+            '.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions .ons-summary__button:first-child .ons-u-vh',
+          ).text(),
+        ).toBe('answer for row title 2');
       });
 
       it('has custom `attributes`', () => {

package/components/summary/_summary.scss

@@ -80,7 +80,7 @@ $hub-row-spacing: 1.3rem;
       left: 0;
       position: absolute;
       text-align: center;
-      &--check .ons-svg-icon {
+      &--check .ons-icon {
         fill: var(--ons-color-leaf-green) !important;
       }
     }

package/components/summary/example-summary-grouped-total.njk

@@ -19,7 +19,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -38,7 +37,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]

package/components/summary/example-summary-grouped-with-errors.njk

@@ -19,7 +19,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -40,7 +39,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -60,7 +58,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]
@@ -80,7 +77,6 @@
                                         "actions": [
                                             {
                                                 "text": "Change",
-                                                "ariaLabel": "Change answer",
                                                 "url": "#0"
                                             }
                                         ]