fix: jinja macro - list error on home page example (#342)

ogcio · Nov 28, 2024 · 252f330 · 252f330
1 parent f6682be
commit 252f330
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/examples/wagtail/core/jinja/home_page.jinja b/examples/wagtail/core/jinja/home_page.jinja
@@ -21,6 +21,7 @@
 {% from 'alert/alert.html' import govieAlert %}
 {% from 'toast/toast.html' import govieToast %}
 {% from 'summary-list/summary-list.html' import govieSummaryList %}
+{% from 'list/list.html' import govieList %}
 {% from 'pagination/pagination.html' import goviePagination %}
 
 {% from 'vars.jinja' import comboBoxProps, cookieBannerProps, modalProps, footerProps, HeaderProps, SelectProps, tabsProps, radioProps, listProps %}
@@ -240,6 +241,14 @@
   <h2>Pagination</h2>
   {{ goviePagination({'totalPages': 10, 'currentPage': 5}) }}
 
+  <h2>List</h2>
+  {{ govieList({
+    "items": [
+      "Item 1",
+      "Item 2",
+      "Item 3"
+    ]
+  }) }}
   <h2>Footer (Local)</h2>
   <footer class="govie-footer"></footer>
   <h2>Footer (Global)</h2>

diff --git a/packages/html/ds/src/list/list.html b/packages/html/ds/src/list/list.html
@@ -2,25 +2,26 @@
 
 {% macro govieList(props) %}
   {% macro getListClass(type, spaced) %}
-    {% set listClasses = [] %}
+    {% set listClasses = '' %}
+
     {% if type == 'bullet' %}
-      {% set listClasses = (listClasses.push('gi-list-bullet'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-bullet' %}
     {% elif type == 'number' %}
-      {% set listClasses = (listClasses.push('gi-list-number'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-number' %}
     {% else %}
-      {% set listClasses = (listClasses.push('gi-list'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list' %}
     {% endif %}
 
     {% if spaced %}
-      {% set listClasses = (listClasses.push('gi-list-spaced'), listClasses) %}
+      {% set listClasses = listClasses + ' gi-list-spaced' %}
     {% endif %}
 
-    {{ listClasses | join(' ') }}
+    {{ listClasses | trim }}
   {% endmacro %}
 
   <ul
     data-testid="govieList"
-    class="{{ getListClass(props.type, props.spaced) | trim }}"
+    class="{{ getListClass(props.type, props.spaced) }}"
     data-element="list-container"
   >
     {% for item in props['items'] %}