Refactor timeline macro for compatibility with Jinja2 templates (#3180)

* Removed .push method * Changed items name * Removing conflicts * changes as per comments * changes as per comments * Changing indentation * Update src/components/timeline/example-timeline.njk Co-authored-by: rmccar <[email protected]> --------- Co-authored-by: rmccar <[email protected]> Co-authored-by: Alessio Venturini <[email protected]>
ONSdigital · Oct 9, 2024 · 33d55bc · 33d55bc
1 parent f717cec
commit 33d55bc
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 8 deletions.
diff --git a/src/components/timeline/_macro-options.md b/src/components/timeline/_macro-options.md
@@ -1,8 +1,8 @@
-| Name     | Type                   | Required | Description                                                                                                          |
-| -------- | ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
-| classes  | string                 | false    | Classes to add to the component                                                                                      |
-| titleTag | string                 | false    | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`. |
-| items    | array`<TimelineItems>` | true     | An array of [timeline items](#timelineitems)                                                                         |
+| Name          | Type                   | Required | Description                                                                                                          |
+| ------------- | ---------------------- | -------- | -------------------------------------------------------------------------------------------------------------------- |
+| classes       | string                 | false    | Classes to add to the component                                                                                      |
+| titleTag      | string                 | false    | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`. |
+| timelineItems | array`<TimelineItems>` | true     | An array of [timeline items](#timelineitems)                                                                         |
 
 ## TimelineItems
 

diff --git a/src/components/timeline/_macro.njk b/src/components/timeline/_macro.njk
@@ -5,7 +5,7 @@
         {% set titleTag = params.titleTag | default("h2") %}
         {% set openingTag = "<" + titleTag %}
         {% set closingTag = "</" + titleTag + ">" %}
-        {% for item in params.items %}
+        {% for item in params.timelineItems %}
             <div class="ons-timeline__item">
                 {{ openingTag | safe }} class="ons-timeline__heading">{{ item.heading }}{{ closingTag | safe }}
                 {% if item.itemsList %}

diff --git a/src/components/timeline/_macro.spec.js b/src/components/timeline/_macro.spec.js
@@ -6,7 +6,7 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_TIMELINE = {
-    items: [
+    timelineItems: [
         {
             heading: 'January 2020',
             content: 'Timeline entry 1',

diff --git a/src/components/timeline/example-timeline.njk b/src/components/timeline/example-timeline.njk
@@ -2,7 +2,7 @@
 
 {{
     onsTimeline({
-    "items": [
+        "timelineItems": [
             {
                 "heading": 'September to October 2020',
                 "itemsList": [