@ons/design-system 55.1.0 → 56.0.0

package/components/panel/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsPanel(params) %}
 
-    {% if params is defined and params and params.classes is defined and params.classes %}
+    {% if params.classes %}
         {% set classes = ' ' + params.classes %}
     {% endif %}
 
@@ -8,37 +8,37 @@
         {% set noTitleClass = ' ons-panel--no-title' %}
     {% endif %}
 
-    {% if params is defined and params and params.type is defined and params.type %}
+    {% if params.type %}
         {% set typeClass = ' ons-panel--' + params.type %}
     {% else %}
         {% set typeClass = ' ons-panel--info' %}
     {% endif %}
 
-    {% if params is defined and params.type == "warn-branded" %}
+    {% if params.type == "warn-branded" %}
         {% set containerClass = 'ons-branded-warning' %}
     {% endif %}
 
-    {% if params is defined and params.type == "announcement" %}
+    {% if params.type == "announcement" %}
         {% set containerClass = 'ons-announcement' %}
     {% endif %}
 
-    {% if params is defined and params and params.spacious is defined and params.spacious %}
+    {% if params.spacious %}
         {% set spaciousClass = ' ons-panel--spacious' %}
     {% endif %}
 
-    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
+    {% if params.type == "warn-branded" or params.type == "announcement" %}
         <div class="{{containerClass}}">
             <div class="ons-container">
     {% endif %}
 
-        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
 
-            {% if params is defined and params and params.type == "warn" or params.type == "warn-branded" %}
+            {% if params.type == "warn" or params.type == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
             {% endif %}
 
-            {% if params is defined and params and params.type == "announcement" %}
+            {% if params.type == "announcement" %}
                 {% from "components/icons/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{
@@ -50,45 +50,43 @@
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Announcement: ") }}</span>
             {% endif %}
 
-            {% if params is defined and params %}
-                {% if params.title is defined and params.title %}
-                    {% if params is defined and params and params.type == 'error' %}
-                        {% set defaultTitleTag = "h2" %}
-                    {% else %}
-                        {% set defaultTitleTag = "div" %}
-                    {% endif %}
-                    {% set titleTag = params.titleTag | default(defaultTitleTag) %}
-                    <div class="ons-panel__header">
-                        <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
-                    </div>
+            {% if params.title %}
+                {% if params.type == 'error' %}
+                    {% set defaultTitleTag = "h2" %}
                 {% else %}
-                    {% if params.type is not defined or params.type == "branded" or params.type == "info" %}
-                        <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                    {% elif params.type == 'error' or params.type == 'success' %} 
-                        {% set defaultText = "Completed" if params.type == "success" else "Error" %}
-                        <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
-                    {% endif %}
+                    {% set defaultTitleTag = "div" %}
                 {% endif %}
-
-                {% if params.iconType is defined and params.iconType %}
-                    {% from "components/icons/_macro.njk" import onsIcon %}
-                    <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
-                        {{
-                            onsIcon({
-                                "iconType": params.iconType,
-                                "iconSize": params.iconSize
-                            })
-                        }}
-                    </span>
+                {% set titleTag = params.titleTag | default(defaultTitleTag) %}
+                <div class="ons-panel__header">
+                    <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                </div>
+            {% else %}
+                {% if not params.type or params.type == "branded" or params.type == "info" or params.type == "bare" %}
+                    <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
+                {% elif params.type == 'error' or params.type == 'success' %} 
+                    {% set defaultText = "Completed" if params.type == "success" else "Error" %}
+                    <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                 {% endif %}
             {% endif %}
 
-            <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
+            {% if params.iconType %}
+                {% from "components/icons/_macro.njk" import onsIcon %}
+                <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
+                    {{
+                        onsIcon({
+                            "iconType": params.iconType,
+                            "iconSize": params.iconSize
+                        })
+                    }}
+                </span>
+            {% endif %}
+
+            <div class="ons-panel__body{% if params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
         </div>
 
-    {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
+    {% if params.type == "warn-branded" or params.type == "announcement"  %}
             </div>
         </div>
     {% endif %}

package/components/panel/_macro.spec.js

@@ -13,6 +13,7 @@ const EXAMPLE_PANEL_BASIC = {
 describe('macro: panel', () => {
   describe.each([
     ['info', 'Important information:'],
+    ['bare', 'Important information:'],
     ['error', 'Error:'],
     ['warn', 'Warning:'],
     ['warn-branded', 'Warning:'],
@@ -316,19 +317,6 @@ describe('macro: panel', () => {
     });
   });
 
-  describe('mode: bare', () => {
-    it('has the correct class set', () => {
-      const $ = cheerio.load(
-        renderComponent('panel', {
-          ...EXAMPLE_PANEL_BASIC,
-          type: 'bare',
-        }),
-      );
-
-      expect($('.ons-panel').hasClass('ons-panel--bare')).toBe(true);
-    });
-  });
-
   describe('mode: warn', () => {
     it('has a default "!" prefix', () => {
       const $ = cheerio.load(

package/components/promotional-banner/_macro.njk

@@ -6,7 +6,7 @@
 
             <div class="ons-grid ons-grid--gutterless">
 
-            {% if params.image is defined %}
+            {% if params.image %}
 
                 <div class="ons-grid__col ons-col-7@s">
 
@@ -19,7 +19,7 @@
                 <div class="ons-grid__col ons-col-4@s ons-push-1@s ons-u-d-no@xxs@s">
 
                     <div class="ons-promo-banner__image">
-                        {% if params.image.smallSrc is defined and params.image.smallSrc %}
+                        {% if params.image.smallSrc %}
                             <img srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x" src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}">
                         {% else %}
                             <img src="{{ params.image.src }}" alt="{{ params.image.alt }}">

package/components/question/_macro.njk

@@ -1,10 +1,10 @@
 {% macro onsQuestion(params) %}
 
-    {%- set titleHtml -%}{% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true and params.description is defined and params.description %}
+    {%- set titleHtml -%}{% if params.readDescriptionFirst == true and params.description %}
             <div class="ons-question__description ons-u-vh">{{ params.description | safe }} </div>{% endif %}{{- params.title | safe -}}
     {%- endset -%}
 
-    {%- set descHtml -%}{% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true %}
+    {%- set descHtml -%}{% if params.readDescriptionFirst == true %}
             <div aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description ons-question__description--aria-hidden"{% endif %}>{{- params.description | safe -}}</div>
         {% elif params.legendIsQuestionTitle is not defined %}
             <div class="ons-question__description ons-u-mb-m">{{- params.description | safe -}}</div>
@@ -16,7 +16,7 @@
         <div class="ons-question__instruction ons-u-mb-m">{{ params.instruction | safe }}</div>
     {% endset %}
 
-    {% if params.definition is defined and params.definition %}
+    {% if params.definition %}
         {% set questionDefinition %}
             {% from "components/collapsible/_macro.njk" import onsCollapsible %}
             {% call onsCollapsible({
@@ -31,21 +31,21 @@
         {% endset %}
     {% endif %}
 
-    {% if params.guidance is defined and params.guidance %}
+    {% if params.guidance %}
         {% set questionGuidance %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             {% call onsPanel({
                 "classes": "ons-question-guidance ons-u-mb-m"
             }) %}
-                {% if params.guidance.content is defined and params.guidance.content %}
+                {% if params.guidance.content %}
                     {{ params.guidance.content | safe }}
                 {% endif %}
-                {% if params.guidance.lists is defined and params.guidance.lists %}
+                {% if params.guidance.lists %}
                     {%- for item in params.guidance.lists -%}
-                        {% if item.listHeading is defined and item.listHeading %}
+                        {% if item.listHeading %}
                             <h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">{{ item.listHeading }}</h2>
                         {% endif %}
-                        {% if item.listLeadingLine is defined and item.listLeadingLine %}
+                        {% if item.listLeadingLine %}
                             <p class="ons-question-guidance__list-leading-line">{{ item.listLeadingLine }}</p>
                         {% endif %}
                         {% from "components/lists/_macro.njk" import onsList %}
@@ -61,20 +61,20 @@
     {% endif %}
 
     <div
-        {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}
-        class="ons-question ons-u-mb-l{% if params.classes is defined and params.classes %} {{ params.classes }}{% 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.id %} id="{{ params.id }}"{% endif %}
+        class="ons-question ons-u-mb-l{% if params.classes %} {{ params.classes }}{% 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.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %}
+        {% 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({
                     "legendIsQuestionTitle": params.legendIsQuestionTitle,
                     "legend": titleHtml,
-                    "description": descHtml if params.description is defined and params.description else '',
+                    "description": descHtml if params.description else '',
                     "legendClasses": params.legendClasses,
                     "legendTitleClasses": params.legendTitleClasses
                 }) %}
@@ -87,19 +87,19 @@
                 {{- titleHtml | safe -}}
             </h1>
 
-            {% if params.description is defined and params.description %}
+            {% if params.description %}
                 {{- descHtml | safe -}}
             {% endif %}
 
-            {% if params.instruction is defined and params.instruction %}
+            {% if params.instruction %}
                 {{- instHtml | safe -}}
             {% endif %}
 
-            {% if params.definition is defined and params.definition %}
+            {% if params.definition %}
                 {{- questionDefinition | safe -}}
             {% endif %}
 
-            {% if params.guidance is defined and params.guidance %}
+            {% if params.guidance %}
                 {{- questionGuidance | safe -}}
             {% endif %}
 
@@ -108,7 +108,7 @@
             </div>
         {% endif %}
 
-        {% if params.justification is defined and params.justification %}
+        {% if params.justification %}
             {% from "components/collapsible/_macro.njk" import onsCollapsible %}
             {% call onsCollapsible({
                 "id": params.justification.id,
@@ -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/quote/_macro.njk

@@ -6,7 +6,7 @@
                 "iconType": 'quote'
             })
         }}
-        <span class="ons-quote__text ons-u-fs-{{ params.textFontSize if params.textFontSize is defined and params.textFontSize else 'l' }}">{{ caller() if caller else params.text | safe }}</span>
-        {% if params.ref is defined and params.ref %}<span class="ons-quote__ref">&mdash; {{ params.ref | safe }}</span>{% endif %}
+        <span class="ons-quote__text ons-u-fs-{{ params.textFontSize if params.textFontSize else 'l' }}">{{ caller() if caller else params.text | safe }}</span>
+        {% if params.ref %}<span class="ons-quote__ref">&mdash; {{ params.ref | safe }}</span>{% endif %}
     </blockquote>
 {% endmacro %}

package/components/radios/_macro.njk

@@ -15,12 +15,12 @@
     }) %}
         <div class="ons-radios__items">
             {% for radio in params.radios %}
-                {% if params.or is defined and params.or and loop.revindex0 == 0 %}
+                {% if params.or and loop.revindex0 == 0 %}
                     <span class="ons-radios__label ons-u-mt-s ons-u-fs-r--b" aria-hidden="true">{{ params.or }}</span>
                 {% endif %}
                 <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
                     <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
-                        {%  if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
+                        {%  if radio.other and radio.other.selectAllChildren == true %}
                             {% set selectAllClass = ' ons-js-select-all-children' %}
                         {% else %}
                             {% set selectAllClass = '' %}
@@ -28,12 +28,12 @@
                         <input
                             type="radio"
                             id="{{ radio.id }}"
-                            class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses and params.inputClasses is defined else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
+                            class="ons-radio__input ons-js-radio{{ ' ' + params.inputClasses if params.inputClasses else '' }}{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
                             value="{{ radio.value }}"
                             name="{{ params.name }}"
-                            {% if (radio.checked is defined and radio.checked) or (params.value is defined and params.value == radio.value) %} checked {% endif %}
-                            {% if radio.other is defined and radio.other and not radio.other.open %} aria-controls="{{ radio.id }}-other-wrap" aria-haspopup="true"{% endif %}
-                            {% if radio.attributes is defined and radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+                            {% if radio.checked or (params.value is defined and params.value == radio.value) %} checked {% endif %}
+                            {% if radio.other and not radio.other.open %} aria-controls="{{ radio.id }}-other-wrap" aria-haspopup="true"{% endif %}
+                            {% if radio.attributes %}{% for attribute, value in (radio.attributes.items() if radio.attributes is mapping and radio.attributes.items else radio.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
                         >
                         {{ onsLabel({
                             "id": radio.id + "-label",
@@ -43,7 +43,7 @@
                             "classes": "ons-radio__label " + radio.label.classes | default(''),
                             "description": radio.label.description
                         }) }}
-                        {% if radio.other is defined and radio.other %}
+                        {% if radio.other %}
                             {% set otherType = radio.other.otherType | default('input') %}
                             <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">
                                 {% if otherType == "input" %}
@@ -124,7 +124,7 @@
                 {% endif %}
             {% endfor %}
         </div>
-        {% if params.clearRadios is defined and params.clearRadios %}
+        {% if params.clearRadios %}
             {{ onsButton({
                 "text": params.clearRadios.text,
                 "name": params.clearRadios.name,

package/components/radios/check-radios.js

@@ -3,11 +3,15 @@ export default class CheckRadios {
     this.radio = radio;
     this.openOther = openOther;
     this.input = this.openOther.querySelector('.ons-input');
+    this.input.tabIndex = -1;
 
     this.setInputBlurAttributes();
     this.input.addEventListener('focus', this.checkRadio.bind(this));
     this.radio.addEventListener('change', this.setInputFocusAttributes.bind(this));
-    this.radio.addEventListener('blur', this.setInputBlurAttributes.bind(this));
+    this.radio.addEventListener('focus', this.setInputFocusAttributes.bind(this));
+    if (this.radio.type == 'radio') {
+      this.input.addEventListener('blur', this.setInputBlurAttributes.bind(this));
+    }
   }
 
   checkRadio() {

package/components/related-content/_macro.njk

@@ -1,13 +1,13 @@
 {% macro onsRelatedContent(params) %}
 
-  {% if params is defined and params and params.classes is defined and params.classes %}
+  {% if params.classes %}
     {% set classes = ' ' + params.classes %}
   {% endif %}
 
   <aside class="ons-related-content{{ classes }}" aria-label="{{ params.ariaLabel | default("Related content") }}">
 
     <div class="ons-related-content__body">
-      {% if params.rows is defined and params.rows %}
+      {% if params.rows %}
         {% for row in params.rows %}
           {% from "components/related-content/_section-macro.njk" import onsRelatedContentSection %}
           {% call onsRelatedContentSection(

package/components/relationships/_macro.njk

@@ -2,14 +2,15 @@
 
 {% macro onsRelationships(params) %}
     <div
-        {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %}
-        class="ons-relationships ons-js-relationships{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        class="ons-relationships ons-js-relationships{% if params.classes %} {{ params.classes }}{% endif %}"
     >
         {{ onsRadios({
             "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',
     });
   });
 });

package/components/section-navigation/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsSectionNavigation(params) %}
-  <nav class="ons-section-nav{% if params.variants is defined and params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
+  <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %}" id="{{ params.id }}" aria-label="{{ params.ariaLabel | default("Section menu") }}">
       <ul class="ons-section-nav__list">
         {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
           {% if (params.currentPath and (item.url == params.currentPath or item.url in params.currentPath)) or (params.tabQuery and params.tabQuery == item.title|lower) %}
@@ -9,7 +9,7 @@
           {% endif %}
           <li class="ons-section-nav__item{% if item.classes %} ' ' + {{ item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
             <a class="ons-section-nav__link" href="{{ item.url }}"{% if isCurrent == true %} aria-current="location"{% endif %}>{{ item.title }}</a>
-              {% if item.anchors is defined and item.anchors %}
+              {% if item.anchors %}
                   <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                       {% for anchor in item.anchors %}
                           <li class="ons-section-nav__item ons-list__item">

package/components/select/_macro.njk

@@ -8,7 +8,7 @@
         "legendClasses": params.legendClasses,
         "dontWrap": params.dontWrap,
         "error": params.error,
-        "inline": params.label.inline if params.label is defined and params.label else ''
+        "inline": params.label.inline if params.label else ''
     }) %}
         {{
             onsLabel({
@@ -21,16 +21,16 @@
         <select
             id="{{ params.id }}"
             name="{{ params.name }}"
-            class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error is defined and params.error %} ons-input--error{% endif %}"
-            {% if params.value is defined and params.value %}value="{{ params.value}}" {% 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 %}
+            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 %}
             <option value="{{ option.value | default(option.text) }}"
-                {% if option.id is defined and option.id %}id="{{ option.id }}" {% endif %}
-                {% if option.selected is defined and option.selected %}selected {% endif %}
-                {% if option.disabled is defined and option.disabled %}disabled {% endif %}
-                {% if params.attributes is defined and params.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                {% 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 %}
             >
                 {{- option.text -}}
             </option>

package/components/share-page/_macro.njk

@@ -7,7 +7,7 @@
     {% endif %}
 
     {% set list = [] %}
-    {% if params.facebook is defined and params.facebook and params.facebook == true %}
+    {% if params.facebook and params.facebook == true %}
         {% set facebook =
             {
                 "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
@@ -20,7 +20,7 @@
 
         {% set list = (list.push(facebook), list) %}
     {% endif %}
-    {% if params.twitter is defined and params.twitter and params.twitter == true %}
+    {% if params.twitter and params.twitter == true %}
         {% set twitter =
             {
                 "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,

package/components/status/_macro.njk

@@ -1,11 +1,11 @@
 {% macro onsStatus(params) %}
-    {% if params.type is defined and params.type %}
+    {% if params.type %}
         {% set typeClass = ' ons-status--' + params.type %}
     {% else %}
         {% set typeClass = ' ons-status--info' %}
     {% endif %}
 
-    {% if params.size is defined and params.size == 'small' %}
+    {% if params.size == 'small' %}
         {% set sizeClass = ' ons-status--small' %}
     {% endif %}