Update DS components to ensure compatibility with Jinja (#3380)

ONSdigital · Oct 8, 2024 · a8522e7 · a8522e7
1 parent 11cda71
commit a8522e7
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk
@@ -13,8 +13,8 @@
             {% if params.headingAttributes %}{% for attribute, value in (params.headingAttributes.items() if params.headingAttributes is mapping and params.headingAttributes.items else params.headingAttributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
             {% set titleTag = params.headingLevel | default(2) %}
-            {% set openingTag = "<h" + titleTag %}
-            {% set closingTag = "</h" + titleTag + ">" %}
+            {% set openingTag = "<h" ~ titleTag %}
+            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {{ openingTag | safe }}
             class="ons-details__title">{{ params.title }}{{ closingTag | safe }}
             <span class="ons-details__icon">

diff --git a/src/components/document-list/_macro.njk b/src/components/document-list/_macro.njk
@@ -5,8 +5,8 @@
     >
         {% for document in params.documents %}
             {% set titleTag = params.headingLevel | default(2) %}
-            {% set openingTag = "<h" + titleTag %}
-            {% set closingTag = "</h" + titleTag + ">" %}
+            {% set openingTag = "<h" ~ titleTag %}
+            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {% set documentItem %}
                 {% if document.thumbnail %}
                     <div

diff --git a/src/components/panel/_macro.njk b/src/components/panel/_macro.njk
@@ -52,14 +52,14 @@
 
             {% if params.title %}
                 {% if params.variant == 'error' %}
-                    {% set defaultTitleTag = "h" + 2 %}
+                    {% set defaultTitleTag = "h" ~ 2 %}
                 {% else %}
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
-                {% set headingLevel = "h" +  params.headingLevel if params.headingLevel else undefined %}
+                {% set headingLevel = "h" ~ params.headingLevel if params.headingLevel else undefined %}
                 {% set titleTag = headingLevel | default(defaultTitleTag) %}
-                {% set openingTag = "<" + titleTag %}
-                {% set closingTag = "</" + titleTag + ">" %}
+                {% set openingTag = "<" ~ titleTag %}
+                {% set closingTag = "</" ~ titleTag ~ ">" %}
                 <div class="ons-panel__header">
                     {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
                     class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}

diff --git a/src/components/share-page/_macro.njk b/src/components/share-page/_macro.njk
@@ -3,8 +3,8 @@
 
     {% if params.title %}
         {% set titleTag = params.headingLevel | default(2) %}
-        {% set openingTag = "<h" + titleTag %}
-        {% set closingTag = "</h" + titleTag + ">" %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
         {{ openingTag | safe }}
         class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}{{ closingTag | safe }}
     {% endif %}

diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk
@@ -22,8 +22,8 @@
             {% for group in summary.groups %}
                 <div {% if group.id %}id="{{ group.id }}"{% endif %} class="ons-summary__group{{ variantClasses }}">
                     {% if group.title %}
-                        {% set openingHeadingTag = "<h" + headingLevel %}
-                        {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+                        {% set openingHeadingTag = "<h" ~ headingLevel %}
+                        {% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
                         {{ openingHeadingTag | safe }}
                         class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
                     {% endif %}

diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
@@ -9,8 +9,8 @@
 
     <section class="{{ classes }}" {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}>
         {% set titleTag = params.headingLevel | default(2) %}
-        {% set openingTag = "<h" + titleTag %}
-        {% set closingTag = "</h" + titleTag + ">" %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
         {{ openingTag | safe }}
         class="ons-tabs__title ons-u-fs-r--b
         ons-u-mt-no{{ ' ' + params.titleClasses if params.titleClasses else '' }}">{{ params.title }}{{ closingTag | safe }}

diff --git a/src/components/timeline/_macro.njk b/src/components/timeline/_macro.njk
@@ -3,8 +3,8 @@
 
     <div class="ons-timeline{{ ' ' + params.classes if params.classes else '' }}">
         {% set titleTag = params.headingLevel | default(2) %}
-        {% set openingTag = "<h" + titleTag %}
-        {% set closingTag = "</h" + titleTag + ">" %}
+        {% set openingTag = "<h" ~ titleTag %}
+        {% set closingTag = "</h" ~ titleTag ~ ">" %}
         {% for item in params.timelineItems %}
             <div class="ons-timeline__item">
                 {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }}