@ons/design-system 55.1.0 → 56.0.0

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,14 +8,14 @@
     <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 %}>
+                        <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 %}
                                 {{
@@ -32,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({
@@ -47,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>
@@ -62,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 %}

package/components/table-of-contents/_macro.njk

@@ -3,7 +3,7 @@
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
 <aside class="ons-toc-container" role="complementary">
-    {% if params.skipLink is defined and params.skipLink %}
+    {% if params.skipLink %}
 		{{
 		onsSkipToContent({
 			"url": params.skipLink.url,
@@ -14,9 +14,9 @@
 
     <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
       	<h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
-		{% if params.lists is defined and params.lists %}
+		{% if params.lists %}
 			{% for list in params.lists %}
-			{% if list.listHeading is defined and list.listHeading %}
+			{% if list.listHeading %}
 				<h3 class="ons-u-fs-r ons-u-mb-xs">{{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:</h3>
 			{% endif %}
 			{{
@@ -28,7 +28,7 @@
 				})
 			}}
 			{% endfor %}
-		{% elif params.itemsList is defined and params.itemsList %}
+		{% elif params.itemsList %}
 			{{
 				onsList({
 					"element": 'ol',

package/components/textarea/_macro.njk

@@ -8,7 +8,7 @@
     {% set field %}
         {% set textareaExclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
 
-        {% if params.label is defined and params.label %}
+        {% if params.label %}
             {{ onsLabel({
                 "for": params.id,
                 "text": params.label.text,
@@ -19,20 +19,20 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes is defined and params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
-            {% if params.name is defined and params.name %}
+            class="ons-input ons-input--textarea {% if params.error %} ons-input--error {% endif %}{% if params.charCheckLimit and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes if params.classes }} {% if params.width %}ons-input--w-{{ params.width }}{% endif %}"
+            {% if params.name %}
              name="{{ params.name }}"
             {% endif %}
             rows="{{ params.rows | default(8) }}"
-            {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+            {% if params.charCheckLimit and params.charCheckLimit.limit %}
                 maxlength="{{ params.charCheckLimit.limit }}"
                 data-char-limit-ref="{{ params.id }}-lim-remaining"
                 aria-describedby="{{ params.id }}-lim-remaining"
             {% 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 %}
-        >{{ params.value if params.value is defined and params.value }}</textarea>
+            {% 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 %}
+        >{{ params.value if params.value }}</textarea>
 
-        {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}
+        {% if params.charCheckLimit and params.charCheckLimit.limit %}
             {% call onsCharLimit({
                 "id": params.id ~ "-lim",
                 "limit": params.charCheckLimit.limit,
@@ -43,7 +43,7 @@
         {% endif %}
     {% endset %}
 
-    {% if params.mutuallyExclusive is defined and params.mutuallyExclusive %}
+    {% if params.mutuallyExclusive %}
         {% call onsMutuallyExclusive({
             "id": params.fieldId,
             "classes": params.fieldClasses,

package/components/timeline/_macro.njk

@@ -9,7 +9,7 @@
 
             <h2 class="ons-timeline__heading">{{ item.heading }}</h2>
 
-            {% if item.itemsList is defined and item.itemsList %}
+            {% if item.itemsList %}
 
                 {{
                     onsList({

package/components/video/_macro.njk

@@ -1,6 +1,6 @@
 {%- macro onsVideo(params) -%}
     <div class="ons-video">
-        {% if params.youtubeUrl is defined and params.youtubeUrl %}
+        {% if params.youtubeUrl %}
             <iframe title="{{ params.title }}" class="ons-video__iframe" src="{{ params.youtubeUrl }}" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
         {% endif %}
     </div>