@ons/design-system 55.2.0 → 56.0.0

package/components/input/_macro.spec.js

@@ -41,6 +41,7 @@ const EXAMPLE_WITH_SEARCH = {
     attributes: { a: 42 },
     classes: 'extra-search-button-class',
     iconType: 'search',
+    visuallyHideButtonText: true,
   },
 };
 
@@ -540,6 +541,7 @@ describe('macro: input', () => {
           attributes: { a: 42 },
           classes: 'extra-search-button-class',
           iconType: 'search',
+          visuallyHideButtonText: true,
         },
       });
     });

package/components/navigation/_macro.njk

@@ -64,8 +64,9 @@
         <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
             {{ onsButton({
                 "text": params.navigation.currentPageTitle,
-                "classes": "ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown",
-                "buttonStyle": "mobile",
+                "classes": "ons-u-d-no ons-js-sub-navigation-button",
+                "type": "button",
+                "variants": ["mobile", "dropdown"],
                 "attributes": {
                     "aria-label": "Toggle section navigation",
                     "aria-controls": params.navigation.subNavigation.id,

package/components/navigation/_macro.spec.js

@@ -206,8 +206,9 @@ describe('macro: navigation', () => {
 
       expect(buttonSpy.occurrences).toContainEqual({
         text: 'Main nav item 2',
-        classes: 'ons-u-d-no ons-js-sub-navigation-button ons-btn--dropdown',
-        buttonStyle: 'mobile',
+        classes: 'ons-u-d-no ons-js-sub-navigation-button',
+        variants: ['mobile', 'dropdown'],
+        type: 'button',
         attributes: {
           'aria-label': 'Toggle section navigation',
           'aria-controls': 'sub-nav',

package/components/question/_macro.njk

@@ -68,7 +68,7 @@
         {% if params.legendIsQuestionTitle %}
             {% from "components/fieldset/_macro.njk" import onsFieldset %}
 
-            {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
+            {# Resolves caller issue in Jinja: https://github.com/pallets/jinja/issues/371 #}
             {% set content = caller() if caller %}
             <div class="ons-question__answer ons-u-mb-m">
                 {% call onsFieldset({
@@ -125,7 +125,7 @@
         {{
             onsButton({
                 "id": params.submitButton.id,
-                "submitType": params.submitButton.submitType,
+                "variants": params.submitButton.variants,
                 "text": params.submitButton.text | default ('Save and continue'),
                 "classes": params.submitButton.classes,
                 "attributes": params.submitButton.attributes

package/components/question/_macro.spec.js

@@ -47,7 +47,7 @@ const EXAMPLE_QUESTION_BUTTON = {
   ...EXAMPLE_QUESTION_BASIC,
   submitButton: {
     id: 'button-id',
-    submitType: 'button',
+    variants: 'timer',
     text: 'Button text',
   },
 };
@@ -252,7 +252,7 @@ describe('macro: question', () => {
 
       faker.renderComponent('question', EXAMPLE_QUESTION_BUTTON);
 
-      expect(buttonSpy.occurrences[0]).toHaveProperty('submitType', 'button');
+      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', 'timer');
       expect(buttonSpy.occurrences[0]).toHaveProperty('id', 'button-id');
       expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Button text');
     });

package/components/question/_question.scss

@@ -6,7 +6,7 @@
 
     em,
     .ons-highlight {
-      background-color: $color-highlight;
+      @extend .ons-highlight;
     }
     mark,
     .ons-instruction {

package/components/relationships/_macro.njk

@@ -9,7 +9,8 @@
             "name": params.name,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "radios": params.radios
+            "radios": params.radios,
+            "error": params.error
         }) }}
         <p class="ons-relationships__playback ons-js-relationships-playback ons-u-d-no" aria-live="polite">{{ params.playback | safe }}</p>
     </div>

package/components/search/_macro.njk

@@ -5,15 +5,25 @@
 
     <div class="ons-search-component">
         {{ content | safe }}
+            
+        {%- set buttonLabel -%}
+            {%- if params.searchButton.visuallyHideButtonText == true -%}
+                <span class="ons-u-vh">{{ params.searchButton.text }}</span>
+            {%- else -%}
+                {{ params.searchButton.text }}
+            {%- endif -%}
+        {%- endset -%}
+
         {{
             onsButton({
                 "type": params.searchButton.type,
-                "text": params.searchButton.text,
+                "html": buttonLabel,
                 "id": params.searchButton.id,
                 "variants": 'small',
                 "classes": 'ons-search__btn ons-u-mt-xs@xxs@s' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
                 "attributes": params.searchButton.attributes,
-                "iconType": params.searchButton.iconType
+                "iconType": params.searchButton.iconType,
+                "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
             })
         }}
     </div>

package/components/search/_macro.spec.js

@@ -2,7 +2,6 @@
 
 import * as cheerio from 'cheerio';
 
-import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_SEARCH = {
@@ -34,11 +33,37 @@ describe('macro: search', () => {
     expect(buttonSpy.occurrences[0]).toEqual({
       id: 'search-button-id',
       type: 'button',
-      text: 'Search for address',
+      html: 'Search for address',
       variants: 'small',
       classes: 'ons-search__btn ons-u-mt-xs@xxs@s extra-search-button-class',
       attributes: EXAMPLE_SEARCH.searchButton.attributes,
       iconType: 'search',
+      iconPosition: 'before',
+    });
+  });
+
+  it('renders button component with a visibly hidden label when specified', () => {
+    const faker = templateFaker();
+    const buttonSpy = faker.spy('button');
+
+    faker.renderComponent('input', {
+      searchButton: {
+        id: 'search-button-id',
+        type: 'button',
+        text: 'Search for address',
+        iconType: 'search',
+        visuallyHideButtonText: true,
+      },
+    });
+
+    expect(buttonSpy.occurrences[0]).toEqual({
+      id: 'search-button-id',
+      type: 'button',
+      html: '<span class="ons-u-vh">Search for address</span>',
+      variants: 'small',
+      classes: 'ons-search__btn ons-u-mt-xs@xxs@s',
+      iconPosition: 'only',
+      iconType: 'search',
     });
   });
 });