@ons/design-system 70.0.7 → 70.0.9

package/components/list/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsList(params) %}
-    {% set variants = params.variants if params.variants else '' %}
+    {% set variants = params.variants if params.variants %}
     {% set listLength = params.itemsList | length %}
 
     {% if params.itemsList[0].prefix %}
@@ -8,7 +8,7 @@
         {% set otherClasses = 'ons-list--bare ons-list--suffix' %}
     {% elif params.iconPosition %}
         {% set otherClasses = 'ons-list--bare ons-list--icons' %}
-        {% set iconType = params.iconType if params.iconType else '' %}
+        {% set iconType = params.iconType if params.iconType %}
     {% else %}
         {% set otherClasses = '' %}
     {% endif %}
@@ -20,85 +20,105 @@
     {% else %}
         {% set listEl = 'ul' %}
     {% endif %}
-    <{{ listEl }} {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-list{% if listEl == 'p' %} ons-list--p{% endif %}{% if params.classes %} {{ params.classes -}}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-list--{{ variant }}{% endfor %}{% else %} ons-list--{{ params.variants }}{% endif %}{% endif %}{% if otherClasses %} {{ otherClasses -}}{% 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 item in params.itemsList -%}
-            {% set sublistClasses = item.listClasses if item.listClasses else '' %}
-            {% set sublistParams = {
+    {% set openingTag = "<" + listEl %}
+    {% set closingTag = "</" + listEl + ">" %}
+
+    {{ openingTag | safe }}{% if params.id %}{{ ' ' }}id="{{ params.id }}"{% endif %}
+    class="ons-list{{ ' ons-list--p' if listEl == 'p' }}{{ ' ' + params.classes if params.classes else '' }}{% if params.variants %}{% if params.variants is not string %}{% for variant in variants %}{{ ' ' }}ons-list--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-list--{{ variants }}{% endif %}{% endif %}{{ ' ' + otherClasses if otherClasses else '' }}"{% 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 item in params.itemsList -%}
+        {% set sublistClasses = item.listClasses if item.listClasses %}
+        {%
+            set sublistParams = {
                 'variants': variants,
                 'itemsList': item.itemsList,
                 'classes': sublistClasses
-            } %}
-            {% if listLength > 1 or listEl == 'ul' %}
-                <li class="ons-list__item{% if item.listClasses %} {{ item.listClasses }}{% endif %}"{% if item.current %} aria-current="true"{% endif %}>
+            }
+        %}
+        {% set listItem %}
+        {% set itemText = item.text %}
+            {% if item.text %}
+                {% set itemIconType = item.iconType if item.iconType else iconType %}
             {% endif %}
-                {% set itemText = item.text %}
-                    {% if item.text %}
-                    {% set itemIconType = item.iconType if item.iconType else iconType %} {% endif %}
 
-                    {# For Craft support we also support title and navigation title #}
-                    {% if item.navigationTitle %}
-                        {% set itemText = item.navigationTitle %}
-                    {% elif item.title %}
-                        {% set itemText = item.title %}
-                    {% endif %}
+            {# For Craft support we also support title and navigation title #}
+            {% if item.navigationTitle %}
+                {% set itemText = item.navigationTitle %}
+            {% elif item.title %}
+                {% set itemText = item.title %}
+            {% endif %}
 
-                    {%- if item.prefix or (params.iconPosition == 'before') -%}
-                        <span class="ons-list__prefix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                            {%- if item.prefix -%}
-                                {{- item.prefix -}}.
-                            {% elif params.iconPosition == 'before' %}
-                                {% from "components/icon/_macro.njk" import onsIcon %}
-                                {{-
-                                    onsIcon({
-                                        "iconType": itemIconType,
-                                        "iconSize": params.iconSize
-                                    })
-                                -}}
-                            {%- endif -%}
-                        </span>
+            {%- if item.prefix or (params.iconPosition == 'before') -%}
+                <span class="ons-list__prefix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                    {%- if item.prefix -%}
+                        {{- item.prefix -}}.
+                    {% elif params.iconPosition == 'before' %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        {{-
+                            onsIcon({
+                                "iconType": itemIconType,
+                                "iconSize": params.iconSize
+                            })
+                        -}}
                     {%- endif -%}
-                    {%- if item.url and item.current != true -%}
-                        {%- if item.external -%}
-                            {% from "components/external-link/_macro.njk" import onsExternalLink %}
-                            {{
-                                onsExternalLink({
-                                    "url": item.url,
-                                    "linkText": itemText
-                                })
-                            }}
-                        {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes %} {{ item.classes }}{% endif %}"{% if item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
-                                {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
-                                {%- if item.target == "_blank" -%}<span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>{%- endif -%}
-                            </a>
+                </span>
+            {%- endif -%}
+            {%- if item.url and item.current != true -%}
+                {%- if item.external -%}
+                    {% from "components/external-link/_macro.njk" import onsExternalLink %}
+                    {{
+                        onsExternalLink({
+                            "url": item.url,
+                            "linkText": itemText
+                        })
+                    }}
+                {%- else -%}
+                    <a
+                        href="{{ item.url }}"
+                        class="ons-list__link{{ ' ons-js-inpagelink' if item.variants == 'inPageLink' }}{{ ' ' + item.classes if item.classes else '' }}"
+                        {% if item.target %}target="{{ item.target }}"{% endif %}{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
+                    >
+                        {%- if item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
+                        {%- if item.target == "_blank" -%}
+                            <span class="ons-u-vh"> ({{- item.screenreaderMessage | default("opens in a new tab") -}})</span>
                         {%- endif -%}
-                    {%- else -%}
-                        {{- itemText | safe -}}
-                    {%- endif -%}
-                    {%- if item.suffix or (params.iconPosition == 'after') -%}
-                        <span class="ons-list__suffix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                        {%- if item.suffix -%}
-                            {{- item.suffix -}}
-                        {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
-                            {{- loop.index -}}
-                        {% elif params.iconPosition == 'after' %}
-                            {% from "components/icon/_macro.njk" import onsIcon %}
-                            {{-
-                                onsIcon({
-                                    "iconType": itemIconType,
-                                    "iconSize": params.iconSize
-                                })
-                            -}}
-                        {%- endif -%}</span>
-                    {%- endif -%}
-                {% if item.itemsList %}
-                    {# Handle nested lists with recursive call for sub layer #}
-                    {{ onsList(sublistParams) }}
-                {% endif %}
-            {% if listLength > 1 or listEl == 'ul' %}
-                </li>
+                    </a>
+                {%- endif -%}
+            {%- else -%}
+                {{- itemText | safe -}}
+            {%- endif -%}
+            {%- if item.suffix or (params.iconPosition == 'after') -%}
+                <span class="ons-list__suffix" {% if listEl != 'ol' %}aria-hidden="true"{% endif %}>
+                    {%- if item.suffix -%}
+                        {{- item.suffix -}}
+                    {%- elif (item.index and listEl != 'ol') or (item.index and listEl == 'ol' and 'bare' in variants) -%}
+                        {{- loop.index -}}
+                    {% elif params.iconPosition == 'after' %}
+                        {% from "components/icon/_macro.njk" import onsIcon %}
+                        {{-
+                            onsIcon({
+                                "iconType": itemIconType,
+                                "iconSize": params.iconSize
+                            })
+                        -}}
+                    {%- endif -%}</span
+                >
+            {%- endif -%}
+            {% if item.itemsList %}
+                {# Handle nested lists with recursive call for sub layer #}
+                {{ onsList(sublistParams) }}
             {% endif %}
-        {%- endfor -%}
-    </{{ listEl }}>
+        {% endset %}
 
+        {% if listLength > 1 or listEl == 'ul' %}
+            <li
+                class="ons-list__item{{ ' ' + item.listClasses if item.listClasses else '' }}"
+                {% if item.current %}aria-current="true"{% endif %}
+            >
+                {{- listItem | safe -}}
+            </li>
+        {% else %}
+            {{- listItem | safe -}}
+        {% endif %}
+    {%- endfor -%}
+    {{ closingTag | safe }}
 {% endmacro %}