@ons/design-system 54.0.1 → 55.2.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/browser-banner/_macro.njk

@@ -10,7 +10,7 @@
     {% endif %}
 
     <div class="ons-browser-banner">
-        <div class="ons-container{{ ' ons-container--wide' if params.wide is defined and params.wide }}">
+        <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
         </div>
     </div>

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

@@ -49,6 +49,37 @@ describe('macro: browser-banner', () => {
 
     expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
   });
+
+  it('does not have `container--wide` class when `wide` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(false);
+  });
+
+  it('has `container--full-width` class when `fullWidth` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+        fullWidth: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(true);
+  });
+
+  it('does not have `container--full-width` class when `fullWidth` is not set', () => {
+    const $ = cheerio.load(
+      renderComponent('browser-banner', {
+        ...EXAMPLE_BROWSER_BANNER_DEFAULT,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--full-width')).toBe(false);
+  });
 });
 
 describe('mode: Welsh language', () => {

package/components/button/_button.scss

@@ -39,7 +39,7 @@ $button-shadow-size: 3px;
 
   &--search {
     .ons-svg-icon {
-      @include mq(s, m) {
+      @include mq(s, l) {
         margin-right: 0.5rem;
       }
     }
@@ -63,8 +63,11 @@ $button-shadow-size: 3px;
   }
 
   // When focused
-  &:focus & {
+  &:focus,
+  &:focus-visible {
+    // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     outline: 3px solid transparent;
+    outline-offset: 1px;
   }
 
   &:focus &__inner {
@@ -91,11 +94,6 @@ $button-shadow-size: 3px;
     top: ems($button-shadow-size);
   }
 
-  &:focus,
-  &:focus:hover {
-    outline: none;
-  }
-
   // Small buttons
   &--small,
   &--mobile {
@@ -170,6 +168,8 @@ $button-shadow-size: 3px;
 
   &--link:focus:not(:active):not(&--secondary) &,
   &--link:focus:hover:not(:active):not(&--secondary) & {
+    outline: inherit;
+
     &__inner {
       .ons-svg-icon {
         fill: $color-text;
@@ -480,3 +480,17 @@ $button-shadow-size: 3px;
     }
   }
 }
+
+.ons-btn-group {
+  @extend .ons-u-mb-m;
+
+  align-items: baseline;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  & .ons-btn,
+  & a {
+    margin: 0 1rem 1rem 0;
+  }
+}

package/components/button/_macro.njk

@@ -3,9 +3,9 @@
 {% macro onsButton(params) %}
 
     {# Customisable button icon #}
-    {% if params.iconType is defined and params.iconType %}
+    {% 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 #}
@@ -13,49 +13,49 @@
         {% 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 %}
             {% set iconType = "external-link" %}
             {% set iconPosition = "after" %}
         {# Download #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "download" %}
+        {% elif params.buttonStyle == "download" %}
             {% set iconType = "download" %}
             {% set iconPosition = "before" %}
         {# Print #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "print" %}
+        {% elif params.buttonStyle == "print" %}
             {% set iconType = "print" %}
             {% set iconPosition = "before" %}
         {# Loader #}
-        {% elif params.submitType is defined and params.submitType == "loader" %}
+        {% elif params.submitType == "loader" %}
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
         {# CTA or mobile menu toggle #}
-        {% elif params.buttonStyle is defined and params.buttonStyle == "mobile" %}
+        {% elif params.buttonStyle == "mobile" %}
             {% set iconType = "chevron" %}
             {% set iconPosition = "after" %}
-        {% elif params.url is defined and params.url %}
+        {% elif params.url %}
             {% set iconType = "arrow-next" %}
             {% set iconPosition = "after" %}
         {% 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="{{ params.type if params.type else ('button' if params.buttonStyle == "print" else 'submit') }}"
         {% 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 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 %}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 %}
+        {% 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 +65,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 +80,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 %}
-            <span class="ons-btn__new-window-description ons-u-vh">({{ params.newWindowDescription | default("opens in a new tab") }})</span>
+        {% 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 %}

package/components/button/_macro.spec.js

@@ -407,7 +407,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('(opens in a new tab)');
+      expect($('.ons-btn__new-window-description').text()).toBe(' (opens in a new tab)');
     });
 
     it('has a custom new window description when `newWindow` is `true` and `newWindowDescription` is provided', () => {
@@ -419,7 +419,7 @@ describe('macro: button', () => {
         }),
       );
 
-      expect($('.ons-btn__new-window-description').text()).toBe('(custom opens in a new window text)');
+      expect($('.ons-btn__new-window-description').text()).toBe(' (custom opens in a new window text)');
     });
 
     it('has the `download` attribute when `buttonStyle` is "download"', () => {

package/components/call-to-action/_macro.njk

@@ -5,7 +5,7 @@
             <div class="ons-grid ons-grid--flex ons-grid--vertical-center ons-grid--no-wrap@s">
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink@s">
                     <h2 class="ons-call-to-action__heading ons-u-fs-r--b ons-u-di">{{ params.headingText }}</h2>
-                    {% if params.paragraphText is defined and params.paragraphText %}
+                    {% if params.paragraphText %}
                         <p class="ons-call-to-action__text ons-u-di">{{ params.paragraphText }}</p>
                     {% endif %}
                 </div>

package/components/card/_macro.njk

@@ -6,31 +6,31 @@
 
   <div class="ons-card" aria-describedBy="{{ params.textId }}">
 
-    {%- if params.image is defined and params.image -%}
-      {%- if params.url is defined and params.url -%}
+    {%- if params.image -%}
+      {%- if params.url -%}
         <a href="{{ params.url }}" class="ons-card__link ons-u-db">
       {%- endif -%}
-          {% if params.image.smallSrc is defined and params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc is defined and params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
-          {% elif params.image == true or params.image.placeholderURL is defined %}
-            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL is defined and params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+          {% if params.image.smallSrc %}
+            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+          {% elif params.image == true or params.image.placeholderURL %}
+            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
           {% endif %}
 
           <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
             {{ params.title }}
           </h{{ titleSize }}>
-      {%- if params.url is defined and params.url -%}
+      {%- if params.url -%}
         </a>
       {%- endif -%}
 
     {%- else -%}
 
       <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}">
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           <a class="ons-card__link" href="{{ params.url }}">
         {%- endif -%}
           {{ params.title }}
-        {%- if params.url is defined and params.url -%}
+        {%- if params.url -%}
           </a>
         {%- endif -%}
       </h{{ titleSize }}>
@@ -39,7 +39,7 @@
 
     <p id="{{ params.textId }}">{{ params.text }}</p>
 
-    {% if params.itemsList is defined and params.itemsList -%}
+    {% if params.itemsList -%}
       {{
           onsList({
               "variants": 'dashed',

package/components/checkboxes/_checkbox-macro.njk

@@ -1,18 +1,18 @@
 {% macro onsCheckbox(params) %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    <span class="ons-checkbox{% if params.hideLabel is defined and params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes and params.classes is defined else '' }}">
+    <span class="ons-checkbox{% if params.hideLabel == true %} ons-checkbox--no-label{% endif %}{{ ' ' + params.classes if params.classes else '' }}">
         <input
             type="checkbox"
             id="{{ params.id }}"
-            class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}"
+            class="ons-checkbox__input ons-js-checkbox{{ ' ' + params.inputClasses if params.inputClasses else '' }}"
             value="{{ params.value }}"
-            {% if params.disabled is defined and params.disabled == true %}disabled aria-disabled="true"{%endif %}
-            {% if params.name is defined and params.name %} name="{{ params.name }}"{% endif %}
-            {% if params.checked is defined and params.checked %} checked{% endif %}
-            {% if params.other is defined and params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% 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 }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
-            {% if params.deselectMessage is defined and params.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
+            {% if params.disabled == true %}disabled aria-disabled="true"{%endif %}
+            {% if params.name %} name="{{ params.name }}"{% endif %}
+            {% if params.checked %} checked{% endif %}
+            {% if params.other and not params.other.open %} aria-controls="{{ params.id }}-other-wrap" aria-haspopup="true"{% 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 %}
+            {% if params.deselectMessage %} data-deselect-message="{{ params.deselectMessage }}"{% endif %}
         >
 
         {{ onsLabel({
@@ -24,7 +24,7 @@
             "description": params.label.description
         }) }}
 
-        {% if params.other is defined and params.other %}
+        {% if params.other %}
             {% set otherType = params.other.otherType | default('input') %}
             <span class="ons-checkbox__other{{ ' ons-checkbox__other--open' if params.other.open }}" id="{{ params.id }}-other-wrap">
                 {% if otherType == "input" %}