@ons/design-system 55.2.0 → 56.0.1

package/components/button/_button.scss

@@ -30,13 +30,6 @@ $button-shadow-size: 3px;
     top: 0;
   }
 
-  .ons-svg-icon {
-    height: 18px;
-    margin-top: -$button-shadow-size;
-    vertical-align: middle;
-    width: 18px;
-  }
-
   &--search {
     .ons-svg-icon {
       @include mq(s, l) {
@@ -55,6 +48,14 @@ $button-shadow-size: 3px;
     // Required for Google Tag Manager
     pointer-events: none;
     position: relative;
+
+    .ons-svg-icon {
+      fill: $color-text-inverse;
+      height: 18px;
+      margin-top: -$button-shadow-size;
+      vertical-align: middle;
+      width: 18px;
+    }
   }
 
   // When preceded by another button (for example, in a group)
@@ -74,6 +75,10 @@ $button-shadow-size: 3px;
     background: $color-focus;
     box-shadow: 0 ems($button-shadow-size) 0 $color-text-link-focus;
     color: $color-text-link-focus;
+
+    .ons-svg-icon {
+      fill: $color-text-link-focus;
+    }
   }
 
   &:focus:hover:not(:active) &__inner {
@@ -87,6 +92,10 @@ $button-shadow-size: 3px;
       background: $color-button;
       box-shadow: none;
       color: $color-text-inverse;
+
+      .ons-svg-icon {
+        fill: $color-text-inverse;
+      }
     }
   }
 
@@ -156,16 +165,6 @@ $button-shadow-size: 3px;
     text-decoration: none;
   }
 
-  &--link:not(&--secondary) &,
-  &--link:active:not(&--secondary) &,
-  &--link:hover:not(&--secondary) & {
-    &__inner {
-      .ons-svg-icon {
-        fill: $color-text-inverse;
-      }
-    }
-  }
-
   &--link:focus:not(:active):not(&--secondary) &,
   &--link:focus:hover:not(:active):not(&--secondary) & {
     outline: inherit;
@@ -177,38 +176,6 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--loader &__inner {
-    position: relative;
-    transition: color 0.3s ease-in-out;
-    .ons-svg-icon {
-      height: 27px;
-      left: 50%;
-      margin: 0;
-      opacity: 0;
-      position: absolute;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      transition: opacity 0.3s ease-in-out;
-      width: 27px;
-    }
-  }
-
-  &--loader.ons-btn--small {
-    .ons-svg-icon {
-      height: 24px;
-      width: 24px;
-    }
-  }
-
-  &--loader.ons-is-loading &__inner {
-    color: transparent;
-    .ons-svg-icon {
-      fill: $color-white;
-      margin-left: 0 !important;
-      opacity: 1;
-    }
-  }
-
   &--text-link {
     vertical-align: baseline;
   }
@@ -298,7 +265,7 @@ $button-shadow-size: 3px;
       box-shadow: none;
       color: $color-text;
       .ons-svg-icon {
-        fill: $color-black;
+        fill: $color-text;
       }
     }
   }
@@ -394,6 +361,37 @@ $button-shadow-size: 3px;
     }
   }
 
+  &--loader &__inner {
+    position: relative;
+    transition: color 0.3s ease-in-out;
+    .ons-svg-icon {
+      height: 27px;
+      left: 50%;
+      margin: 0;
+      opacity: 0;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      transition: opacity 0.3s ease-in-out;
+      width: 27px;
+    }
+  }
+
+  &--loader.ons-btn--small {
+    .ons-svg-icon {
+      height: 24px;
+      width: 24px;
+    }
+  }
+
+  &--loader.ons-is-loading &__inner {
+    color: transparent;
+    .ons-svg-icon {
+      margin-left: 0 !important;
+      opacity: 1;
+    }
+  }
+
   &--dropdown:focus & {
     &__inner {
       box-shadow: inset 0 -4px 0 0 $color-text-link-focus;

package/components/button/_macro.njk

@@ -2,7 +2,7 @@
 
 {% macro onsButton(params) %}
 
-    {# Customisable button icon #}
+    {# Set button icon #}
     {% if params.iconType %}
         {% set iconType = params.iconType %}
         {% if params.iconPosition %}
@@ -12,29 +12,55 @@
             {% set iconPosition = "before" %}
         {% endif %}
     {% elif params.iconType is not defined and params.noIcon is not defined %}
-        {# Opens in new tab #}
         {% if params.url and params.newWindow %}
+        {# CTA link opening in new tab #}
             {% set iconType = "external-link" %}
             {% set iconPosition = "after" %}
-        {# Download #}
-        {% elif params.buttonStyle == "download" %}
-            {% set iconType = "download" %}
-            {% set iconPosition = "before" %}
-        {# Print #}
-        {% elif params.buttonStyle == "print" %}
+        {% elif params.url %}
+        {# CTA link #}
+            {% set iconType = "arrow-next" %}
+            {% set iconPosition = "after" %}
+        {% endif %}
+    {% endif %}
+
+    {# Set button type #}
+    {% if params.type %}
+        {% set buttonType = params.type %}
+    {% else %}
+        {% set buttonType = 'submit' %}
+    {% endif %}
+
+    {# Set button variant attributes #}
+    {% if params.variants %}
+        {% if 'print' in params.variants %}
+            {# Print #}
+            {% if params.type is not defined %}
+                {% set buttonType = "button" %}
+            {% endif %}
             {% set iconType = "print" %}
             {% set iconPosition = "before" %}
-        {# Loader #}
-        {% elif params.submitType == "loader" %}
-            {% set iconType = "loader" %}
-            {% set iconPosition = "after" %}
-        {# CTA or mobile menu toggle #}
-        {% elif params.buttonStyle == "mobile" %}
+            {% set variantClasses = "ons-u-d-no ons-js-print-btn" %}
+        {% elif 'download' in params.variants %}
+            {# Download #}
+            {% set iconType = "download" %}
+            {% set iconPosition = "before" %}
+            {% if not params.removeDownloadAttribute %}
+                {% set variantAttributes = "download" %}
+            {% endif %}
+        {% elif 'mobile' in params.variants %}
+            {# CTA or mobile menu toggle #}
             {% set iconType = "chevron" %}
             {% set iconPosition = "after" %}
-        {% elif params.url %}
-            {% set iconType = "arrow-next" %}
+        {% elif 'disabled' in params.variants %}
+            {% set variantAttributes = "disabled" %}
+        {% elif 'timer' in params.variants %}
+            {# Timer #}
+            {% set variantClasses = "ons-js-timer ons-js-submit-btn" %}
+        {% elif 'loader' in params.variants %}
+            {# Loader #}
+            {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
+            {% set variantClasses = "ons-btn--loader ons-js-loader ons-js-submit-btn" %}
         {% endif %}
     {% endif %}
 
@@ -45,14 +71,14 @@
             href="{{ params.url }}"
             role="button"
         {% else %}
-            type="{{ params.type if params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
+            type="{{ buttonType }}"
         {% endif %}
-        class="ons-btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if params.buttonStyle == "download" %} ons-btn--download{% endif %}{% if params.buttonStyle == "print" %} ons-btn--print ons-u-d-no ons-js-print-btn{% endif %}{% if params.submitType == "loader" %} ons-btn--loader ons-js-loader ons-js-submit-btn{% endif %}{% if params.submitType == "timer" %} ons-js-timer ons-js-submit-btn{% endif %}"
+        class="ons-btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if variantClasses %} {{ variantClasses }}{% endif %}"
         {% if params.id %}id="{{ params.id }}"{% endif %}
         {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
         {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
         {% if params.url and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {% if params.buttonStyle == "download" and not params.removeDownloadAttribute %} download{% endif %}
+        {{ variantAttributes }}
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
         >
         <span class="ons-btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">

package/components/button/_macro.spec.js

@@ -57,33 +57,33 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-btn--variant-b')).toBe(true);
   });
 
-  it('has download variant style class when `buttonStyle` is `download`', () => {
+  it('has download variant style class when `variants` contains `download`', () => {
     const $ = cheerio.load(
       renderComponent('button', {
         url: 'http://example.com',
-        buttonStyle: 'download',
+        variants: 'download',
       }),
     );
 
     expect($('.ons-btn').hasClass('ons-btn--download')).toBe(true);
   });
 
-  it('has `download` icon when `buttonStyle` is "download"', () => {
+  it('has `download` icon when `variants` contains "download"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
-      buttonStyle: 'download',
+      variants: 'download',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('download');
   });
 
-  it('has provided variant style classes when `buttonStyle` is "print"', () => {
+  it('has provided variant style classes when `variants` contains "print"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        buttonStyle: 'print',
+        variants: 'print',
       }),
     );
 
@@ -92,22 +92,22 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-js-print-btn')).toBe(true);
   });
 
-  it('has `print` icon when `buttonStyle` is "print"', () => {
+  it('has `print` icon when `variants` contains "print"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
       url: 'http://example.com',
-      buttonStyle: 'print',
+      variants: 'print',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('print');
   });
 
-  it('has provided variant style classes when `submitType` is "loader"', () => {
+  it('has provided variant style classes when `variants` contains "loader"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        submitType: 'loader',
+        variants: 'loader',
       }),
     );
 
@@ -116,32 +116,32 @@ describe('macro: button', () => {
     expect($('.ons-btn').hasClass('ons-js-submit-btn')).toBe(true);
   });
 
-  it('has `loader` icon when `submitType` is "loader"', () => {
+  it('has `loader` icon when `variants` contains "loader"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
-      submitType: 'loader',
+      variants: 'loader',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('loader');
   });
 
-  it('has `chevron` icon when `buttonStyle` is "mobile"', () => {
+  it('has `chevron` icon when `variants` contains "mobile"', () => {
     const faker = templateFaker();
     const iconsSpy = faker.spy('icons');
 
     faker.renderComponent('button', {
-      buttonStyle: 'mobile',
+      variants: 'mobile',
     });
 
     expect(iconsSpy.occurrences[0].iconType).toBe('chevron');
   });
 
-  it('has provided variant style classes when `submitType` is "timer"', () => {
+  it('has provided variant style classes when `variants` contains "timer"', () => {
     const $ = cheerio.load(
       renderComponent('button', {
-        submitType: 'timer',
+        variants: 'timer',
       }),
     );
 
@@ -259,11 +259,11 @@ describe('macro: button', () => {
       expect($('button').attr('type')).toBe('special-type');
     });
 
-    it('has the provided `type` attribute even if `buttonStyle` is provided', () => {
+    it('has the provided `type` attribute even if print variant is provided', () => {
       const $ = cheerio.load(
         renderComponent('button', {
           type: 'special-type',
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 
@@ -276,10 +276,10 @@ describe('macro: button', () => {
       expect($('button').attr('type')).toBe('submit');
     });
 
-    it('defaults to being a "button" when `type` is not provided and `buttonStyle` is set to "print"', () => {
+    it('defaults to being a "button" when `type` is not provided and `variants` contains "print"', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 
@@ -422,20 +422,20 @@ describe('macro: button', () => {
       expect($('.ons-btn__new-window-description').text()).toBe(' (custom opens in a new window text)');
     });
 
-    it('has the `download` attribute when `buttonStyle` is "download"', () => {
+    it('has the `download` attribute when `variants` contains "download"', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'download',
+          variants: 'download',
         }),
       );
 
       expect($('.ons-btn').attr('download')).toBeDefined();
     });
 
-    it('does not have the `download` attribute when `buttonStyle` is "download" and `removeDownloadAttribute` is `true`', () => {
+    it('does not have the `download` attribute when `variants` contains "download" and `removeDownloadAttribute` is `true`', () => {
       const $ = cheerio.load(
         renderComponent('button', {
-          buttonStyle: 'download',
+          variants: 'download',
           removeDownloadAttribute: true,
         }),
       );

package/components/button/button.spec.js

@@ -56,7 +56,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -72,7 +72,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -86,7 +86,7 @@ describe('script: button', () => {
         renderComponent('button', {
           id: 'test-button',
           text: 'Submit',
-          submitType: 'loader',
+          variants: 'loader',
         }),
       );
 
@@ -104,7 +104,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -124,7 +124,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -142,7 +142,7 @@ describe('script: button', () => {
           ${renderComponent('button', {
             id: 'test-button',
             text: 'Submit',
-            submitType: 'loader',
+            variants: 'loader',
           })}
         </form>
       `,
@@ -161,7 +161,7 @@ describe('script: button', () => {
         '/test',
         renderComponent('button', {
           id: 'test-button',
-          submitType: 'timer',
+          variants: 'timer',
           text: 'Submit',
         }),
       );
@@ -186,7 +186,7 @@ describe('script: button', () => {
         '/test',
         renderComponent('button', {
           id: 'test-button',
-          submitType: 'timer',
+          variants: 'timer',
           text: 'Submit',
         }),
       );
@@ -213,7 +213,7 @@ describe('script: button', () => {
         <form>
           ${renderComponent('button', {
             id: 'test-button',
-            submitType: 'timer',
+            variants: 'timer',
             text: 'Submit',
           })}
         </form>
@@ -242,7 +242,7 @@ describe('script: button', () => {
         <form>
           ${renderComponent('button', {
             id: 'test-button',
-            submitType: 'timer',
+            variants: 'timer',
             text: 'Submit',
           })}
         </form>
@@ -273,7 +273,7 @@ describe('script: button', () => {
           id: 'test-button',
           type: 'button',
           text: 'Print this page',
-          buttonStyle: 'print',
+          variants: 'print',
         }),
       );
 

package/components/fieldset/_fieldset.scss

@@ -9,6 +9,11 @@
       display: block;
       margin: 0;
       padding: 0 0 1.5rem;
+
+      em,
+      .ons-highlight {
+        @extend .ons-highlight;
+      }
     }
   }
 

package/components/footer/_macro.njk

@@ -64,18 +64,14 @@
                 {{
                     onsButton({
                         "id": params.button.id,
-                        "type": params.button.type,
                         "classes": params.button.classes if params.button.classes else "",
                         "variants": "ghost",
                         "text": params.button.text,
-                        "html": params.button.html,
                         "name": params.button.name,
-                        "value": params.button.value,
                         "attributes": params.button.attributes,
                         "url": params.button.url,
-                        "buttonStyle": params.button.buttonStyle,
-                        "iconType": params.button.iconType,
-                        "iconPosition": params.button.iconPosition
+                        "iconType": "exit",
+                        "iconPosition": "after"
                     })
                 }}
             </div>

package/components/footer/_macro.spec.js

@@ -547,17 +547,11 @@ describe('macro: footer', () => {
     const params = {
       button: {
         id: 'save-and-sign-out',
-        type: 'button',
         classes: 'extra-class',
         text: 'Save changes and sign out',
-        html: '<strong>html</strong>',
         name: 'button-name',
-        value: 'button-value',
         attributes: { a: 42 },
         url: 'https://example.com/',
-        buttonStyle: 'mobile',
-        iconType: 'exit',
-        iconPosition: 'before',
       },
     };
 

package/components/header/_macro.njk

@@ -105,16 +105,15 @@
                                     </div>
                                     {% if params.serviceLinks.itemsList | length > 1 or params.language %}
                                         {% if params.variants == 'internal' or params.variants == 'neutral' %}
-                                            {% set buttonVariant = ["text-link", "text-link-inverse"] %}
+                                            {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
                                         {% else %}
-                                            {% set buttonVariant = "text-link" %}
+                                            {% set buttonVariant = ["mobile", "text-link"] %}
                                         {% endif %}
                                         <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
                                             {{ onsButton({
                                                 "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
                                                 "classes": "ons-u-d-no ons-js-toggle-services",
                                                 "type": "button",
-                                                "buttonStyle": "mobile",
                                                 "variants": buttonVariant,
                                                 "attributes": {
                                                     "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
@@ -210,7 +209,7 @@
 
                     {% if params.button %}
                         {% if params.variants == 'neutral' %}
-                            {% set buttonVariant = ["ghost", "ghost-dark"] %}
+                            {% set buttonVariant = "ghost-dark" %}
                         {% else %}
                             {% set buttonVariant = "ghost" %}
                         {% endif %}
@@ -222,8 +221,8 @@
                                 "name": params.button.name,
                                 "attributes": params.button.attributes,
                                 "url": params.button.url,
-                                "iconType": params.button.iconType,
-                                "iconPosition": params.button.iconPosition
+                                "iconType": "exit",
+                                "iconPosition": "after"
                             }) }}
                         </div>
                     {% endif %}
@@ -239,7 +238,7 @@
                             {% endif %}
                             {% if params.navigation.siteSearchAutosuggest %}
                                 {% if params.variants == 'neutral' %}
-                                    {% set buttonVariant = ["small", "ghost", "ghost-dark"] %}
+                                    {% set buttonVariant = ["small", "ghost-dark"] %}
                                 {% else %}
                                     {% set buttonVariant = ["small", "ghost"] %}
                                 {% endif %}
@@ -267,7 +266,6 @@
                                 {{ onsButton({
                                     "text": params.navigation.toggleNavigationButton.text,
                                     "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
-                                    "buttonStyle": "mobile",
                                     "variants": buttonVariant,
                                     "attributes": {
                                         "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,

package/components/header/_macro.spec.js

@@ -333,8 +333,6 @@ describe('macro: header', () => {
             a: 'b',
           },
           url: '#0',
-          iconType: 'button-icon',
-          iconPosition: 'before',
         },
       });
 
@@ -347,8 +345,8 @@ describe('macro: header', () => {
           a: 'b',
         },
         url: '#0',
-        iconType: 'button-icon',
-        iconPosition: 'before',
+        iconType: 'exit',
+        iconPosition: 'after',
       });
     });
 
@@ -491,8 +489,7 @@ describe('macro: header', () => {
         text: 'Menu',
         classes: 'ons-u-d-no ons-js-toggle-services',
         type: 'button',
-        buttonStyle: 'mobile',
-        variants: 'text-link',
+        variants: ['mobile', 'text-link'],
         attributes: {
           'aria-label': 'Toggle services menu',
           'aria-controls': 'service-links',
@@ -523,7 +520,7 @@ describe('macro: header', () => {
         },
       });
 
-      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['text-link', 'text-link-inverse']);
+      expect(buttonSpy.occurrences[0]).toHaveProperty('variants', ['mobile', 'text-link', 'text-link-inverse']);
     });
 
     it('does not render a button for a single services link', () => {
@@ -623,7 +620,6 @@ describe('macro: header', () => {
       expect(buttonSpy.occurrences[0]).toEqual({
         text: 'Menu',
         classes: 'ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l',
-        buttonStyle: 'mobile',
         variants: ['mobile', 'ghost'],
         attributes: {
           'aria-label': 'Toggle main menu',

package/components/input/_macro.njk

@@ -102,6 +102,7 @@
                     "searchButton": {
                         "type": params.searchButton.type,
                         "text": params.searchButton.text,
+                        "visuallyHideButtonText": params.searchButton.visuallyHideButtonText,
                         "id": params.searchButton.id,
                         "attributes": params.searchButton.attributes,
                         "classes": params.searchButton.classes,