@ons/design-system 70.0.8 → 70.0.9

package/components/image/_macro.njk

@@ -1,15 +1,17 @@
 {%- macro onsImage(params) -%}
     <figure class="ons-image">
         {% if params.image %}
-            <img class="ons-image__img" {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}" alt="{{ params.alt if params.alt else '' }}">
+            <img
+                class="ons-image__img"
+                {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}src="{{ params.image.smallSrc }}"
+                alt="{{ params.alt if params.alt }}"
+            />
         {% else %}
-            <img class="ons-image__img" src="{{ params.url }}" alt="{{ params.alt }}">
+            <img class="ons-image__img" src="{{ params.url }}" alt="{{ params.alt }}" />
         {% endif %}
 
         {% if params.caption %}
-            <figcaption class="ons-image__caption">
-                {{ params.caption }}
-            </figcaption>
+            <figcaption class="ons-image__caption">{{ params.caption }}</figcaption>
         {% endif %}
     </figure>
 {%- endmacro -%}

package/components/input/_macro.njk

@@ -18,17 +18,20 @@
     {% else %}
         {% set type = "text" %}
     {% endif %}
-
-    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
-    {% set inputPlaceholder = ' ons-input--placeholder' if params.accessiblePlaceholder else "" %}
+    {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive %}
+    {% set inputPlaceholder = " ons-input--placeholder" if params.accessiblePlaceholder %}
 
     {% set input %}
         <input
             type="{{ type }}"
             id="{{ params.id }}"
-            class="ons-input ons-input--text ons-input-type__input{% if params.error %} ons-input--error{% endif %}{% if params.searchButton %} ons-search__input{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}{% if params.width %} ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
+            class="ons-input ons-input--text ons-input-type__input{{ ' ons-input--error' if params.error }}{{ ' ons-search__input' if params.searchButton }}{{ ' ' + params.classes if params.classes else '' }}{% if params.width %}{{ ' ' }}ons-input{% if params.type == 'number' or params.type == 'tel' %}-number{% endif %}--w-{{ params.width }}{% endif %}{{ exclusiveClass }}{{ inputPlaceholder }}"
             {% if params.prefix and params.prefix.id and not params.prefix.title %}aria-labelledby="{{ params.prefix.id }}"{% elif params.suffix and params.suffix.id and not params.suffix.title %}aria-labelledby="{{ params.suffix.id }}"{% endif %}
-            {% if params.prefix and params.prefix.id %}aria-labelledby="{{ params.id }} {{ params.prefix.id }}"{% elif params.suffix and params.suffix.id %}aria-labelledby="{{ params.id }} {{ params.suffix.id }}"{% endif %}
+            {% if params.prefix and params.prefix.id %}
+                aria-labelledby="{{ params.id }} {{ params.prefix.id }}"
+            {% elif params.suffix and params.suffix.id %}
+                aria-labelledby="{{ params.id }} {{ params.suffix.id }}"
+            {% endif %}
             {% if params.name %}name="{{ params.name }}"{% endif %}
             {% if params.value %}value="{{ params.value }}"{% endif %}
             {% if params.accept %}accept="{{ params.accept }}"{% endif %}
@@ -40,80 +43,89 @@
             {% if inputmode %}inputmode="{{ inputmode }}"{% endif %}
             {% if params.autocomplete %}autocomplete="{{ params.autocomplete }}"{% endif %}
             {% if params.accessiblePlaceholder %}placeholder="{{ params.label.text }}"{% endif %}
-            {% if params.charCheckLimit %}data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}" aria-describedby="{{ params.id }}-check"{% endif %}
+            {% if params.charCheckLimit %}
+                data-char-check-ref="{{ params.id }}-check" data-char-check-num="{{ params.charCheckLimit.limit }}"
+                aria-describedby="{{ params.id }}-check"
+            {% endif %}
             {% if params.charCheckLimit and params.charCheckLimit.charcheckCountdown %}data-char-check-countdown="true"{% endif %}
-            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            {% if params.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.label and params.label.description %}{% if params.label.id %}aria-describedby="{{ params.label.id }}-description-hint"{% else %}aria-describedby="description-hint"{% endif %}{% endif %}
         />
         {% if params.listeners %}
-            <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
-            {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
-                document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
-            {% endfor %}
+            <!-- prettier-ignore-start -->
+            <script {% if csp_nonce %}nonce="{{ csp_nonce() }}"{% endif %}>
+                {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
+                    document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
+                {% endfor %}
             </script>
+            <!-- prettier-ignore-end -->
         {% endif %}
         {% if params.postTextboxLinkText %}
             <a class="ons-u-fs-s ons-input__post-link" href="{{ params.postTextboxLinkUrl }}">{{ params.postTextboxLinkText }}</a>
         {% endif %}
     {% endset %}
+
     {% set field %}
-        {% if (not params.accessiblePlaceholder or params.label.description) and (params.label and params.label.text)%}
-            {{ onsLabel({
-                "for": params.id,
-                "id": params.label.id,
-                "text": params.label.text,
-                "classes": params.label.classes,
-                "description": params.label.description,
-                "attributes": params.label.attributes,
-                "accessiblePlaceholder": params.accessiblePlaceholder,
-                "inline": params.label.inline
-            }) }}
+        {% if (not params.accessiblePlaceholder or params.label.description) and (params.label and params.label.text) %}
+            {{
+                onsLabel({
+                    "for": params.id,
+                    "id": params.label.id,
+                    "text": params.label.text,
+                    "classes": params.label.classes,
+                    "description": params.label.description,
+                    "attributes": params.label.attributes,
+                    "accessiblePlaceholder": params.accessiblePlaceholder,
+                    "inline": params.label.inline
+                })
+            }}
         {% endif %}
 
         {% if params.prefix or params.suffix %}
             {% if (params.prefix and params.prefix.id) or (params.suffix and params.suffix.id) %}
-                {% if params.prefix %}
-                    {% set prefixClass = " ons-input-type--prefix" %}
-                {% endif %}
-
-                <span class="ons-input-type{{ prefixClass }}{% if params.prefix or params.suffix %} ons-js-input-container-abbr{% endif %}">
+                <span
+                    class="ons-input-type{{ ' ons-input-type--prefix' if params.prefix }}{{ ' ons-js-input-container-abbr' if params.prefix or params.suffix }}"
+                >
                     <span class="ons-input-type__inner">
                         {{ input | safe }}
-
                         {% set abbr = params.prefix or params.suffix %}
                         {% if params.prefix.title or params.suffix.title %}
-                            {% set tag = 'abbr' %}
+                            {% set tag = '<abbr' %}
+                            {% set endTag = '</abbr>' %}
                         {% else %}
-                            {% set tag = 'span' %}
+                            {% set tag = '<span' %}
+                            {% set endTag = '</span>' %}
                         {% endif %}
 
-                        <{{ tag }}
-                            id="{{ abbr.id }}"
-                            class="ons-input-type__type ons-js-input-abbr"
-                            {% if params.prefix or params.suffix %}
-                            aria-label="{{ abbr.title }}"
-                            role="figure"
-                            {% endif %}
-                            {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
-                            >{{ abbr.text }}</{{ tag }}>
+                        {{ tag | safe }}
+                        id="{{ abbr.id }}" class="ons-input-type__type ons-js-input-abbr"
+                        {% if params.prefix or params.suffix %}
+                            aria-label="{{ abbr.title }}" role="figure"
+                        {% endif %}
+                        {% if abbr.title %}title="{{ abbr.title }}"{% endif %}
+                        >{{ abbr.text }}
+                        {{ endTag | safe }}
                     </span>
                 </span>
             {% endif %}
         {% elif params.searchButton %}
-            <span class="ons-grid--flex  ons-input_search-button{% if params.label.description %} ons-input--with-text-description{% endif %}"> 
+            <span class="ons-grid--flex ons-input_search-button{{ ' ons-input--with-text-description' if params.label.description }}">
                 {% if params.accessiblePlaceholder %}
-                    {{ onsLabel({
-                        "for": params.id,
-                        "id": params.label.id,
-                        "text": params.label.text,
-                        "classes": params.label.classes,
-                        "attributes": params.label.attributes,
-                        "accessiblePlaceholder": params.accessiblePlaceholder,
-                        "inline": params.label.inline
-                    }) }}
+                    {{
+                        onsLabel({
+                            "for": params.id,
+                            "id": params.label.id,
+                            "text": params.label.text,
+                            "classes": params.label.classes,
+                            "attributes": params.label.attributes,
+                            "accessiblePlaceholder": params.accessiblePlaceholder,
+                            "inline": params.label.inline
+                        })
+                    }}
                 {% endif %}
 
                 {{ input | safe }}
+
                 {%- set buttonLabel -%}
                     {%- if params.searchButton.visuallyHideButtonText == true -%}
                         <span class="ons-u-vh">{{ params.searchButton.text }}</span>
@@ -121,6 +133,7 @@
                         {{ params.searchButton.text }}
                     {%- endif -%}
                 {%- endset -%}
+
                 {{
                     onsButton({
                         "type": params.searchButton.type,
@@ -137,58 +150,62 @@
             </span>
         {% else %}
             {% if params.accessiblePlaceholder %}
-                <span class="ons-grid--flex {% if params.label.description %} ons-input--with-text-description{% endif %}">
-                {% if params.accessiblePlaceholder %}
-                    {{ onsLabel({
-                        "for": params.id,
-                        "id": params.label.id,
-                        "text": params.label.text,
-                        "classes": params.label.classes,
-                        "attributes": params.label.attributes,
-                        "accessiblePlaceholder": params.accessiblePlaceholder,
-                        "inline": params.label.inline
-                    }) }}
-                {% endif %}
-            {% endif %}
-            {{ input | safe }}
-            {% if params.accessiblePlaceholder %}
+                <span class="ons-grid--flex{{ ' ons-input--with-text-description' if params.label.description }}">
+                    {{
+                        onsLabel({
+                            "for": params.id,
+                            "id": params.label.id,
+                            "text": params.label.text,
+                            "classes": params.label.classes,
+                            "attributes": params.label.attributes,
+                            "accessiblePlaceholder": params.accessiblePlaceholder,
+                            "inline": params.label.inline
+                        })
+                    }}
+                    {{ input | safe }}
                 </span>
+            {% else %}
+                {{ input | safe }}
             {% endif %}
         {% endif %}
     {% endset %}
 
     {% if params.charCheckLimit and params.charCheckLimit.limit %}
         {% set charCheckField %}
-            {% call onsCharLimit({
-                "id": params.id ~ "-check",
-                "limit": params.charCheckLimit.limit,
-                "variant": "check",
-                "charCountSingular": params.charCheckLimit.charCountSingular,
-                "charCountPlural": params.charCheckLimit.charCountPlural,
-                "charCountOverLimitSingular": params.charCheckLimit.charCountOverLimitSingular,
-                "charCountOverLimitPlural": params.charCheckLimit.charCountOverLimitPlural
-            }) %}
+            {%
+                call onsCharLimit({
+                    "id": params.id ~ "-check",
+                    "limit": params.charCheckLimit.limit,
+                    "variant": "check",
+                    "charCountSingular": params.charCheckLimit.charCountSingular,
+                    "charCountPlural": params.charCheckLimit.charCountPlural,
+                    "charCountOverLimitSingular": params.charCheckLimit.charCountOverLimitSingular,
+                    "charCountOverLimitPlural": params.charCheckLimit.charCountOverLimitPlural
+                })
+            %}
                 {{ field | safe }}
             {% endcall %}
         {% endset %}
     {% endif %}
 
     {% if params.mutuallyExclusive %}
-        {% call onsMutuallyExclusive({
-            "id": params.fieldId,
-            "legend": params.legend,
-            "legendClasses": params.legendClasses ~ " ons-js-input-legend",
-            "description": params.description,
-            "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
-            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
-            "or": params.mutuallyExclusive.or,
-            "deselectMessage": params.mutuallyExclusive.deselectMessage,
-            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
-            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
-            "error": params.error,
-            "autosuggestResults": params.autosuggestResults
-        }) %}
+        {%
+            call onsMutuallyExclusive({
+                "id": params.fieldId,
+                "legend": params.legend,
+                "legendClasses": params.legendClasses ~ " ons-js-input-legend",
+                "description": params.description,
+                "dontWrap": params.dontWrap,
+                "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+                "or": params.mutuallyExclusive.or,
+                "deselectMessage": params.mutuallyExclusive.deselectMessage,
+                "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+                "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
+                "error": params.error,
+                "autosuggestResults": params.autosuggestResults
+            })
+        %}
             {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}
@@ -198,13 +215,15 @@
     {% elif type == "hidden" %}
         {{ field | safe }}
     {% else %}
-        {% call onsField({
-            "id": params.fieldId,
-            "classes": params.fieldClasses,
-            "dontWrap": params.dontWrap,
-            "error": params.error,
-            "inline": params.label.inline if params.label else ''
-        }) %}
+        {%
+            call onsField({
+                "id": params.fieldId,
+                "classes": params.fieldClasses,
+                "dontWrap": params.dontWrap,
+                "error": params.error,
+                "inline": params.label.inline if params.label
+            })
+        %}
             {% if charCheckField %}
                 {{ charCheckField | safe }}
             {% else %}

package/components/input/example-input-search-with-character-check.njk

@@ -19,4 +19,4 @@
             "charCountOverLimitPlural": "{x} characters too many"
         }
     })
-}}
+}}

package/components/input/example-input-search-with-placeholder.njk

@@ -12,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/input/example-input-search.njk

@@ -12,4 +12,4 @@
             "iconType": 'search'
         }
     })
-}}
+}}

package/components/label/_macro.njk

@@ -1,8 +1,8 @@
 {% macro onsLabel(params) %}
     {% if params.id %}
-        {% set descriptionID = params.id ~ "-description-hint" %}
+        {% set descriptionId = params.id ~ "-description-hint" %}
     {% else %}
-        {% set descriptionID = "description-hint" %}
+        {% set descriptionId = "description-hint" %}
     {% endif %}
 
     {% if params.inputType == "checkbox" or params.inputType == "radio" %}
@@ -11,37 +11,43 @@
         {% set isCheckboxOrRadio = false %}
     {% endif %}
 
-    {% set description -%}
-        <span{% if isCheckboxOrRadio == false %} id="{{ descriptionID }}"{% endif %} class="ons-label__description {% if params.inputType %}ons-{{ params.inputType }}__label--with-description{% else %} ons-input--with-description{% endif %}">
-              {{- params.description -}}
+    {%- set description -%}
+        <span
+            {% if isCheckboxOrRadio == false %}id="{{ descriptionId }}"{% endif %}class="ons-label__description{% if params.inputType %}{{ ' ' }}ons-{{ params.inputType }}__label--with-description{% else %}{{ ' ' }}ons-input--with-description{% endif %}"
+        >
+            {{- params.description -}}
         </span>
-    {%- endset %}
+    {%- endset -%}
+
     {%- if params.description and params.accessiblePlaceholder -%}
         {{- description | safe -}}
     {%- else -%}
-    <label
-        class="{% if params.inputType is not defined -%}ons-label{%- endif %}{{- ' ' + params.classes if params.classes else "" -}}{%- if params.description %} ons-label--with-description{%- endif %} {{- ' ons-label--placeholder' if params.accessiblePlaceholder else "" -}}"
-        for="{{ params.for }}"
-        {% if params.description %}aria-describedby="{{ descriptionID }}"{% endif %}
-        {% if params.id %} id="{{ params.id }}"{% 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 %}
-    >
-
-        {{- params.text | safe -}}
 
         {%- if isCheckboxOrRadio == true -%}
-            {%- if params.description -%}
+            {%- set ariaHiddenDescription -%}
                 <span class="ons-label__aria-hidden-description" aria-hidden="true">{{- description | safe -}}</span>
+            {%- endset -%}
+
+            {%- set description -%}
+                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionId }}">{{- params.description -}}</span>
+            {%- endset -%}
+        {%- endif -%}
+
+        <label
+            class="{{ 'ons-label' if params.inputType is not defined }}{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-label--with-description' if params.description }}{{ ' ons-label--placeholder' if params.accessiblePlaceholder }}"
+            for="{{ params.for }}"
+            {% if params.description %}aria-describedby="{{ descriptionId }}"{% endif %}
+            {% if params.id %}id="{{ params.id }}"{% 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 %}
+        >
+            {{- params.text | safe -}}
+
+            {%- if isCheckboxOrRadio == true and params.description -%}
+                {{- ariaHiddenDescription | safe -}}
             {%- endif -%}
-            </label>
-            {% if isCheckboxOrRadio == true and params.description -%}
-                <span class="ons-label__visually-hidden-description ons-u-vh" id="{{ descriptionID }}">{{- params.description -}}</span>
-            {%- endif -%}
-        {%- else -%}
-            </label>
-            {%- if params.description -%}
-                {{- description | safe -}}
-            {%- endif -%}
-        {%- endif %}
+        </label>
+        {%- if params.description -%}
+            {{- description | safe -}}
+        {%- endif -%}
     {%- endif -%}
 {% endmacro %}

package/components/language-selector/_macro.njk

@@ -2,10 +2,19 @@
     {% set alternativeLanguages = params.languages | rejectattr("current") %}
     {% set languageNumber = params.languages | length %}
 
-    <ul class="ons-language-links{% if languageNumber and languageNumber != 2 %} ons-u-d-no@xxs@m{% endif %}">
+    <ul class="ons-language-links{{ ' ons-u-d-no@xxs@m' if languageNumber and languageNumber != 2 }}">
         {% for language in alternativeLanguages %}
             <li class="ons-language-links__item">
-                <a href="{{ language.url }}" lang="{{ language.ISOCode }}" {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>{% if language.abbrText %}<span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{ language.text }}</span>{% else %}{{ language.text }}{% endif %}</a>
+                <a
+                    href="{{ language.url }}"
+                    lang="{{ language.ISOCode }}"
+                    {% if language.attributes %}{% for attribute, value in (language.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                    >{% if language.abbrText %}
+                        <span class="ons-u-d-no@s">{{ language.abbrText }}</span><span class="ons-u-d-no@xxs@s">{{- language.text -}}</span>
+                    {% else %}
+                        {{- language.text -}}
+                    {% endif %}</a
+                >
             </li>
         {% endfor %}
     </ul>

package/components/list/_list.scss

@@ -92,6 +92,19 @@
     &--p {
         padding: 0;
     }
+
+    &--summary {
+        list-style: none;
+        @extend .ons-u-pl-no;
+        .ons-list__item:not(:last-child) {
+            @extend .ons-u-bb;
+        }
+        .ons-list__item {
+            @extend .ons-u-pt-s;
+            @extend .ons-u-pb-s;
+            @extend .ons-u-m-no;
+        }
+    }
 }
 
 @include bp-suffix('ons-list--inline') {