@ons/design-system 54.0.1 → 55.2.0

package/components/phase-banner/_phase-banner.scss

@@ -8,6 +8,7 @@
     font-size: 0.85rem;
     line-height: 1em;
     margin: 0 0.5rem 0 0;
+    outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
     padding: 0.4rem;
     text-transform: uppercase;
   }

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,11 +61,11 @@
     {% 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 #}
@@ -74,7 +74,7 @@
                 {% 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,

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/_radio.scss

@@ -6,15 +6,22 @@
 
     background: $color-grey-5;
     border-radius: 50%;
-    box-shadow: inset 0 0 0 3px $color-white;
+    box-shadow: inset 0 0 0 3px $color-input-bg;
 
-    &:checked {
-      background: $color-input-border;
+    &::after {
+      border-color: $color-input-border;
+      border-radius: 50%;
+      border-width: 6px;
+      height: 0;
+      left: 3px;
+      top: 3px;
+      width: 0;
     }
   }
 
   &.ons-radio--no-border {
     @extend .ons-checkbox--no-border;
+
     & > .ons-radio__input {
       @extend .ons-radio__input;
       &:focus,
@@ -23,6 +30,7 @@
           background: none;
           border: none;
           box-shadow: none;
+          outline: none;
         }
       }
 
@@ -30,6 +38,10 @@
         box-shadow: inset 0 0 0 3px $color-input-bg, 0 0 0 $input-border-width $color-input-border, 0 0 0 4px $color-focus;
       }
     }
+
+    .ons-radio__label--with-description {
+      padding: 0;
+    }
   }
 
   &__label {

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,8 +2,8 @@
 
 {% 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,

package/components/reply/_macro.njk

@@ -12,7 +12,7 @@
             })
         }}
         <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-center ons-grid--no-wrap@s ons-u-mt-m ons-u-mb-m">
-            <div class="ons-grid__col">
+            <div class="ons-grid__col ons-u-mr-m ons-u-mb-s">
                 {{
                     onsButton({
                         "id": params.button.id,
@@ -22,7 +22,7 @@
                     })
                 }}
             </div>
-            <div class="ons-grid__col ons-u-ml-m">
+            <div class="ons-grid__col ons-u-mb-s">
                 <a class="ons-reply__link" href="{{ params.closeLinkUrl }}">{{ params.closeLinkText }}</a>
             </div>
         </div>

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/skip-to-content/_skip.scss

@@ -21,7 +21,8 @@
     height: auto;
     margin: inherit;
     max-height: 20em;
-    outline: none;
+    outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
+    outline-offset: -4px;
     overflow: visible;
     padding: 1rem;
     position: static;

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 %}
 

package/components/summary/_macro.njk

@@ -2,25 +2,25 @@
     {% set className = "ons-summary" %}
     {% set titleSize = "2" %}
 
-    {% if params.classes is defined and params.classes %}
+    {% if params.classes %}
          {% set className = className + " " + params.classes %}
     {% endif %}
 
-    {% if params.hub is defined and params.hub %}
+    {% if params.hub %}
         {% set className = className + " ons-summary--hub" %}
     {% endif %}
     <div class="{{ className }}">
         {% for summary in params.summaries %}
-            {% if summary.summaryTitle is defined and summary.summaryTitle %}
+            {% if summary.summaryTitle %}
                 <h2 class="ons-summary__title ons-u-mb-m">{{ summary.summaryTitle }}</h2>
                 {% set titleSize = "3" %}
             {% endif %}
             {% for group in summary.groups %}
-                <div {% if group.id is defined and group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
-                    {% if group.groupTitle is defined and group.groupTitle %}
+                <div {% if group.id %}id="{{ group.id }}" {% endif %} class="ons-summary__group">
+                    {% if group.groupTitle %}
                         <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
                     {% endif %}
-                    {% if group.headers is defined and group.headers and group.rows is defined and group.rows %}
+                    {% if group.headers and group.rows %}
                         <table class="ons-summary__items">
                             <thead class="ons-u-vh">
                                 <tr>
@@ -32,23 +32,23 @@
 
                             {% for row in (group.rows if group.rows is iterable else group.rows.items()) %}
                                 {% set itemClass = "" %}
-                                {% if row.error is defined and row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
-                                {% if row.total is defined and row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
+                                {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
+                                {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
 
-                                <tbody {% if row.id is defined and row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
-                                    {% if row.errorMessage is defined and row.errorMessage or (row.rowItems | length > 1 and row.rowTitle) %}
+                                <tbody {% if row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
+                                    {% if row.errorMessage or (row.rowItems | length > 1 and row.rowTitle) %}
                                         <tr class="ons-summary__row">
                                             <th colspan="3" class="ons-summary__row-title ons-u-fs-r">{{ row.errorMessage or row.rowTitle }}</th>
                                         </tr>
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <tr {% if rowItem.id is defined and rowItem.id %}id="{{ rowItem.id }}" {% endif %}class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
+                                        <tr {% if rowItem.id %}id="{{ rowItem.id }}" {% endif %}class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
                                             <td
                                                 class="ons-summary__item-title"
-                                                {% if rowItem.rowTitleAttributes is defined and rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                                                {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                             >
-                                                {% if rowItem.iconType is defined and rowItem.iconType %}
+                                                {% if rowItem.iconType %}
                                                     {% from "components/icons/_macro.njk" import onsIcon %}
                                                     <span class="ons-summary__item-title-icon {% if rowItem.iconType == 'check' %} ons-summary__item-title-icon--check{% endif %}">
                                                         {{
@@ -62,19 +62,19 @@
                                                 <div class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType else "" }}">{{ rowItem.rowTitle | default(row.rowTitle) | safe }}</div>
 
                                                 {# Render section status for mobile if is hub #}
-                                                {% if params.hub is defined and params.hub and rowItem.valueList is defined and rowItem.valueList %}
+                                                {% if params.hub and rowItem.valueList %}
                                                     <span class="ons-u-d-no@s ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
                                                 {% endif %}
                                             </td>
-                                            {% if rowItem.valueList is defined and rowItem.valueList %}
+                                            {% if rowItem.valueList %}
                                                 <td
                                                     class="ons-summary__values"
                                                     {% if rowItem.actions == null %} colspan="2"{% endif %}
-                                                    {% if rowItem.attributes is defined and rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                                                    {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                 >
                                                     {% if rowItem.valueList | length == 1 %}
                                                         <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span>
-                                                        {% if rowItem.valueList[0].other is defined and rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %}
+                                                        {% if rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %}
                                                             <ul class="ons-u-mb-no">
                                                                 <li>{{ rowItem.valueList[0].other | safe }}</li>
                                                             </ul>
@@ -84,7 +84,7 @@
                                                             {% for value in (rowItem.valueList if rowItem.valueList is iterable else rowItem.valueList.items()) %}
                                                                 <li>
                                                                     <span class="ons-summary__text">{{ value.text | safe }}</span>
-                                                                    {% if value.other is defined and value.other or value.other == 0 %}
+                                                                    {% if value.other or value.other == 0 %}
                                                                         <ul class="ons-u-mb-no">
                                                                             <li>{{ value.other | safe }}</li>
                                                                         </ul>
@@ -95,15 +95,15 @@
                                                     {% endif %}
                                                 </td>
                                             {% endif %}
-                                            {% if rowItem.actions is defined and rowItem.actions %}
+                                            {% if rowItem.actions %}
                                                 <td class="ons-summary__actions">
                                                     {% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
                                                             href="{{ action.url }}"
                                                             class="ons-summary__button"
-                                                            {% if action.ariaLabel is defined and action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
-                                                            {% if action.attributes is defined and action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
+                                                            {% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
+                                                            {% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
                                                         >{{ action.text }}</a>
                                                     {% endfor %}
                                                 </td>
@@ -113,13 +113,13 @@
                                 </tbody>
                             {% endfor %}
                         </table>
-                    {% elif group.placeholderText is defined and group.placeholderText %}
+                    {% elif group.placeholderText %}
                         <span class="ons-summary__placeholder">{{ group.placeholderText }}</span>
                     {% endif %}
 
-                    {% if group.summaryLink is defined and group.summaryLink %}
-                        <div class="ons-summary__link{% if group.placeholderText is defined and group.placeholderText or group.rows is defined and group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows is defined and group.rows | length > 1 %} ons-u-bt{% endif %}">
-                            <a {% if group.summaryLink.attributes is defined and group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
+                    {% if group.summaryLink %}
+                        <div class="ons-summary__link{% if group.placeholderText or group.rows %} ons-u-pt-s{% endif %}{% if group.placeholderText is not defined and group.rows | length > 1 %} ons-u-bt{% endif %}">
+                            <a {% if group.summaryLink.attributes %}{% for attribute, value in (group.summaryLink.attributes.items() if group.summaryLink.attributes is mapping and group.summaryLink.attributes.items else group.summaryLink.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %} href="{{ group.summaryLink.url }}">{{ group.summaryLink.text }}</a>
                         </div>
                     {% endif %}
                 </div>

package/components/table/_macro.njk

@@ -8,20 +8,21 @@
     <div class="ons-table-scrollable ons-table-scrollable--on">
         <div class="ons-table-scrollable__content" tabindex="0" role="region" aria-label="{{ params.caption }}. {{ params.ariaLabel | default("Scrollable table") }}">
     {% endif %}
-            <table {% if params.id is defined and params.id %}id="{{ params.id }}"{% endif %} class="ons-table{% if params.tableClasses is defined and params.tableClasses %} {{ params.tableClasses }}{% endif %}{% if variants is defined and variants %}{% if variants is not string %}{% for variant in variants %} ons-table--{{ variant }}{% endfor %}{% else %} ons-table--{{ variants }}{% endif %}{% endif %}" {% if params.sortBy is defined and params.sortBy and 'sortable' in variants %}data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"{% endif %}>
-                {% if params.caption is defined and params.caption %}
+            <table {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-table{% if params.tableClasses %} {{ params.tableClasses }}{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %} ons-table--{{ variant }}{% endfor %}{% else %} ons-table--{{ variants }}{% endif %}{% endif %}" {% if params.sortBy and 'sortable' in variants %}data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"{% endif %}>
+                {% if params.caption %}
                 <caption class="ons-table__caption{{ " ons-u-vh" if params.hideCaption }}">{{ params.caption }}</caption>
                 {% endif %}
                 <thead class="ons-table__head">
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
-                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses is defined and th.thClasses }}{{ " ons-table__header--numeric" if th.numeric is defined and th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
-                            <span {% if 'sortable' in variants %}class="ons-u-vh"{% endif %}>{{- th.value -}}</span>
+                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
+                            <span>{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{
                                     onsIcon({
                                         "iconType": "sort-sprite",
-                                        "id": th.value
+                                        "id": th.value,
+                                        "classes": 'ons-u-d-no'
                                     })
                                 }}
                             {% endif %}
@@ -31,10 +32,10 @@
                 </thead>
                 <tbody class="ons-table__body">
                     {% for tr in params.trs %}
-                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name is defined and tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id is defined and tr.id %} id="{{ tr.id }}"{% endif %}>
+                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id %} id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses is defined and td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric is defined and td.numeric }}" {% if td.id is defined and td.id %} id="{{ td.id }}"{% endif %} {% if td.name is defined and td.name %} name="{{ td.name }}"{% endif %} {% if td.data is defined and td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort is defined and td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
-                            {% if td.form is defined and td.form %}
+                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.name %} name="{{ td.name }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
+                            {% if td.form %}
                                 <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
                                     {{
                                         onsButton({
@@ -46,14 +47,14 @@
                                             "name": td.form.button.name if td.form.button.name
                                         })
                                     }}
-                                    {% if td.form.hiddenFormField is defined and td.form.hiddenFormField %}
+                                    {% if td.form.hiddenFormField %}
                                         {% for hiddenField in td.form.hiddenFormField %}
-                                            <input type="hidden" {% if hiddenField.name is defined and hiddenField.name %} name="{{ hiddenField.name }}"{% endif %} {% if hiddenField.value is defined and hiddenField.value %} value="{{ hiddenField.value }}"{% endif %} />
+                                            <input type="hidden" {% if hiddenField.name %} name="{{ hiddenField.name }}"{% endif %} {% if hiddenField.value %} value="{{ hiddenField.value }}"{% endif %} />
                                         {% endfor %}
                                     {% endif %}
                                 </form>
                             {% endif %}
-                            {% if td.value is defined and td.value %}
+                            {% if td.value %}
                                 {{ td.value | safe }}
                             {% endif %}
                         </td>
@@ -61,7 +62,7 @@
                     </tr>
                     {% endfor %}
                 </tbody>
-                {% if params.tfoot is defined and params.tfoot %}
+                {% if params.tfoot %}
                 <tfoot class="ons-table__foot">
                     <tr class="ons-table__row">
                         {% for tfootCell in params.tfoot %}