@ons/design-system 55.1.0 → 56.0.0

package/components/access-code/_macro.njk

@@ -26,9 +26,9 @@
         }) }}
     {% endset %}
 
-    {% if params.error is not defined %}
+    {% if not params.error %}
         {% call onsPanel({
-                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes is defined and params.classes)
+                "classes": "ons-u-mb-s" + (' ' + params.classes if params.classes)
             })
         %}
             {{ content | safe }}
@@ -37,7 +37,7 @@
         {{ content | safe }}
     {% endif %}
 
-    {% if params.securityMessage is defined and params.securityMessage %}
+    {% if params.securityMessage %}
         {% call onsPanel({
                 "type": "bare",
                 "iconType": "lock",

package/components/accordion/_macro.njk

@@ -2,7 +2,7 @@
     {% from "components/collapsible/_macro.njk" import onsCollapsible %}
 
     <div id="{{params.id}}" class="ons-accordion{{ ' ' + params.classes if params.classes }}">
-        {% if params.allButton is defined and params.allButton %}
+        {% if params.allButton %}
             {% from "components/button/_macro.njk" import onsButton %}
             {% set attributes = params.allButton.attributes | default({}) %}
 

package/components/address-input/_macro.njk

@@ -7,7 +7,7 @@
         <div id="address" class="ons-field ons-address-input {% if not params.manualEntry %}ons-address-input--search ons-js-address-autosuggest{% endif %}">
             {% if params.isEditable == true or params.manualEntry %}
                 {% if not params.manualEntry %}<div class="ons-js-address-input__manual ons-u-db-no-js_enabled">{% endif %}
-                    {% if params.organisation is defined and params.organisation %}
+                    {% if params.organisation %}
                         {{
                             onsInput({
                                 "id": params.id + "-organisation",
@@ -22,7 +22,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.line1 is defined and params.line1 %}
+                    {% if params.line1 %}
                         {{
                             onsInput({
                                 "id": params.id + "-line1",
@@ -37,7 +37,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.line2 is defined and params.line2 %}
+                    {% if params.line2 %}
                         {{
                             onsInput({
                                 "id": params.id + "-line2",
@@ -52,7 +52,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.town is defined and params.town %}
+                    {% if params.town %}
                         {{
                             onsInput({
                                 "id": params.id + "-town",
@@ -66,7 +66,7 @@
                             })
                         }}
                     {% endif %}
-                    {% if params.postcode is defined and params.postcode %}
+                    {% if params.postcode %}
                         {{
                             onsInput({
                                 "id": params.id + "-postcode",
@@ -89,7 +89,7 @@
                 {% endif %}
             {% endif %}
 
-            {% if params.uprn is defined and params.uprn and params.uprn.value is defined and params.uprn.value %}
+            {% if params.uprn and params.uprn.value %}
                 {% set uprnValue = params.uprn.value %}
             {% else %}
                 {% set uprnValue = '' %}
@@ -162,7 +162,7 @@
         </div>
     {% endset %}
 
-    {% if params.dontWrap is defined and params.dontWrap %}
+    {% if params.dontWrap %}
         {{ fields | safe }}
     {% else %}
         {% call onsFieldset({

package/components/address-output/_macro.njk

@@ -1,22 +1,22 @@
 {% macro onsAddressOutput(params) %}
-    <div class="ons-address-output{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}">
+    <div class="ons-address-output{% if params.classes %} {{ params.classes }}{% endif %}">
         <p class="ons-address-output__lines">
-            {% if params.unit is defined and params.unit %}
+            {% if params.unit %}
                 <span class="ons-address-output__unit">{{ params.unit }}</span><br>
             {% endif %}
-            {% if params.organisation is defined and params.organisation %}
+            {% if params.organisation %}
                 <span class="ons-address-output__organisation">{{ params.organisation }}</span><br>
             {% endif %}
-            {% if params.line1 is defined and params.line1 %}
+            {% if params.line1 %}
                 <span class="ons-address-output__line1">{{ params.line1 }}</span><br>
             {% endif %}
-            {% if params.line2 is defined and params.line2 %}
+            {% if params.line2 %}
                 <span class="ons-address-output__line2">{{ params.line2 }}</span><br>
             {% endif %}
-            {% if params.town is defined and params.town %}
+            {% if params.town %}
                 <span class="ons-address-output__town">{{ params.town }}</span><br>
             {% endif %}
-            {% if params.postcode is defined and params.postcode %}
+            {% if params.postcode %}
                 <span class="ons-address-output__postcode">{{ params.postcode }}</span>
             {% endif %}
         </p>

package/components/autosuggest/_macro.njk

@@ -3,7 +3,7 @@
 {% macro onsAutosuggest(params) %}
     <div
         id="{{ params.id }}-container"
-        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory is defined and params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses is defined and params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
+        class="{% if not params.externalInitialiser %}ons-js-autosuggest {% endif %}{% if params.isEditable == false %}ons-js-address-not-editable{% endif %}{% if params.mandatory == true %} ons-js-address-mandatory{% endif %} {% if params.containerClasses %} {{ params.containerClasses }}{% endif %} ons-autosuggest-input"
         data-instructions="{{ params.instructions }}"
         data-aria-you-have-selected="{{ params.ariaYouHaveSelected }}"
         data-min-chars="{{ params.minChars }}"
@@ -15,23 +15,23 @@
         data-results-title="{{ params.resultsTitle }}"
         data-no-results="{{ params.noResults }}"
         data-type-more="{{ params.typeMore }}"
-        {% if params.APIDomain is defined and params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
-        {% if params.APIDomainBearerToken is defined and params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
-        {% if params.APIManualQueryParams is defined and params.APIManualQueryParams == true %}data-query-params=""{% endif %}
-        {% if params.allowMultiple is defined and params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
-        {% if params.autosuggestData is defined and params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
-        {% if params.errorTitle is defined and params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
-        {% if params.errorMessageEnter is defined and params.errorMessageEnter %}data-error-enter="{{ params.errorMessageEnter }}"{% endif %}
-        {% if params.errorMessageSelect is defined and params.errorMessageSelect %}data-error-select="{{ params.errorMessageSelect }}"{% endif %}
-        {% if params.ariaGroupedResults is defined and params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
-        {% if params.groupCount is defined and params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
-        {% if params.tooManyResults is defined and params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
-        {% if params.errorMessageAPI is defined and params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
-        {% if params.errorMessageAPILinkText is defined and params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
-        {% if params.options is defined and params.options %}
-            {% if params.options.oneYearAgo is defined and params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
-            {% if params.options.regionCode is defined and params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}
-            {% if params.options.addressType is defined and params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
+        {% if params.APIDomain %}data-api-domain="{{ params.APIDomain }}"{% endif %}
+        {% if params.APIDomainBearerToken %}data-authorization-token="{{ params.APIDomainBearerToken }}"{% endif %}
+        {% if params.APIManualQueryParams == true %}data-query-params=""{% endif %}
+        {% if params.allowMultiple == true %}data-allow-multiple="true"{% endif %}
+        {% if params.autosuggestData %}data-autosuggest-data="{{ params.autosuggestData }}"{% endif %}
+        {% if params.errorTitle %}data-error-title="{{ params.errorTitle }}"{% endif %}
+        {% if params.errorMessageEnter %}data-error-enter="{{ params.errorMessageEnter }}"{% endif %}
+        {% if params.errorMessageSelect %}data-error-select="{{ params.errorMessageSelect }}"{% endif %}
+        {% if params.ariaGroupedResults %}data-aria-grouped-results="{{ params.ariaGroupedResults }}"{% endif %}
+        {% if params.groupCount %}data-group-count="{{ params.groupCount }}"{% endif %}
+        {% if params.tooManyResults %}data-too-many-results="{{ params.tooManyResults }}"{% endif %}
+        {% if params.errorMessageAPI %}data-error-api="{{ params.errorMessageAPI }}"{% endif %}
+        {% if params.errorMessageAPILinkText %}data-error-api-link-text="{{ params.errorMessageAPILinkText }}"{% endif %}
+        {% if params.options %}
+            {% if params.options.oneYearAgo %}data-options-one-year-ago="true"{% endif %}
+            {% if params.options.regionCode %}data-options-region-code="{{ params.options.regionCode }}"{% endif %}
+            {% if params.options.addressType %}data-options-address-type="{{ params.options.addressType }}"{% endif %}
         {% endif %}
     >
 
@@ -66,7 +66,7 @@
             "autosuggestResults": autosuggestResults
          }) }}
 
-         {% if params.mutuallyExclusive is not defined %}
+         {% if not params.mutuallyExclusive %}
             {{ autosuggestResults | safe }}
          {% endif %}
     </div>

package/components/breadcrumbs/_macro.njk

@@ -1,12 +1,12 @@
 {% from "components/icons/_macro.njk" import onsIcon %}
 
 {% macro onsBreadcrumbs(params) %}
-    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}>
+    <nav class="ons-breadcrumb{{ ' ' + params.classes if params.classes else '' }}" aria-label="{{ params.ariaLabel | default("Breadcrumbs") }}" {% if params.id %} id="{{ params.id }}"{% endif %}>
         <ol class="ons-breadcrumb__items ons-u-fs-s">
             {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
                 <li class="ons-breadcrumb__item{{ ' ' + item.itemClasses if item.itemClasses else '' }}" id="breadcrumb-{{ loop.index }}">
-                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
-                    {% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                    <a class="ons-breadcrumb__link{{ ' ' + item.linkClasses if item.linkClasses else '' }}" href="{{ item.url }}"{% if item.id %} id="{{ item.id }}"{% endif %}
+                    {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                     >{{ item.text }}</a>
                     {{
                         onsIcon({

package/components/button/_button.scss

@@ -30,16 +30,9 @@ $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, m) {
+      @include mq(s, l) {
         margin-right: 0.5rem;
       }
     }
@@ -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,60 +2,86 @@
 
 {% macro onsButton(params) %}
 
-    {# Customisable button icon #}
-    {% if params.iconType is defined and params.iconType %}
+    {# Set button icon #}
+    {% if params.iconType %}
         {% set iconType = params.iconType %}
-        {% if params.iconPosition is defined and params.iconPosition %}
+        {% if params.iconPosition %}
             {% set iconPosition = params.iconPosition %}
         {% else %}
             {# Default icon position before label #}
             {% set iconPosition = "before" %}
         {% endif %}
     {% elif params.iconType is not defined and params.noIcon is not defined %}
-        {# Opens in new tab #}
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
+        {% if params.url and params.newWindow %}
+        {# CTA link opening in new tab #}
             {% set iconType = "external-link" %}
             {% set iconPosition = "after" %}
-        {# Download #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "download" %}
-            {% set iconType = "download" %}
-            {% set iconPosition = "before" %}
-        {# Print #}
-        {% elif params.buttonStyle is defined and 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 is defined and params.submitType == "loader" %}
-            {% set iconType = "loader" %}
-            {% set iconPosition = "after" %}
-        {# CTA or mobile menu toggle #}
-        {% elif params.buttonStyle is defined and 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 is defined and 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 %}
 
-    {% set tag = "a" if params.url or params.dsExample is defined and params.dsExample else "button" %}
+    {% set tag = "a" if params.url or params.dsExample else "button" %}
 
     <{{ tag }}
-        {% if params.url is defined and params.url %}
+        {% if params.url %}
             href="{{ params.url }}"
             role="button"
         {% else %}
-            type="{{ params.type if params.type is defined and params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
+            type="{{ buttonType }}"
         {% endif %}
-        class="ons-btn{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}{% if params.variants is defined and 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 is defined and 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 %}"
-        {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-        {% if params.value is defined and params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
-        {% if params.name is defined and params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {% if params.buttonStyle == "download" and (params.removeDownloadAttribute is not defined or not params.removeDownloadAttribute or params.removeDownloadAttribute != true) %} download{% endif %}
-        {% if params.attributes is defined and 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 %}
+        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 %}
+        {{ 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 is defined and params.innerClasses %} {{ params.innerClasses }}{% endif %}">
+        <span class="ons-btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">
             {%- if iconPosition == "before" or iconPosition == "after" %}
                 {%- if iconPosition == "before" %}
                     {{
@@ -65,7 +91,7 @@
                         })
                     }}
                 {% endif -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
                 {%- if iconPosition == "after" %}
                 {{
                     onsIcon({
@@ -80,15 +106,15 @@
                         "iconType": iconType
                     })
                 }}
-                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
             {% else -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html is defined and params.html else params.text -}}</span>
+                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
             {% endif -%}
         </span>
-        {% if params.url is defined and params.url and params.newWindow is defined and params.newWindow %}
+        {% if params.url and params.newWindow %}
             <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
         {% endif %}
-        {% if params.buttonContext is defined and params.buttonContext %}
+        {% if params.buttonContext %}
             <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
         {% endif %}
         {% if params.listeners %}