amend timeline guidance

docs/components/timeline.md

@@ -6,6 +6,8 @@ tags:
   - component
 ---
 
+{% example "timeline/timeline-waiting-times.njk" %}
+
 ## When to use
 
 Use timelines to show users:
@@ -36,15 +38,9 @@ Nodes can be:
 
 Use blue nodes to show that a step is already completed.
 
-If you’re using a timeline as a progress indicator, to show users the current status and what is coming next, use blue nodes to do this. But if your timeline is a static list outlining the points in a process in general, every node can be left white.
-
 {% example "timeline/timeline-active.njk" %}
 
-### Lines
-
-Lines between two blue nodes are coloured blue. Otherwise, lines are left grey.
-
-We would like to better understand whether users associate the length of a line between two nodes with the amount of time that stage will take. You may want to standardise the length of lines between nodes, or test what users understand about timings if you do include differing lengths.
+If you’re using a timeline as a progress indicator, to show users the current status and what is coming next, use blue nodes to do this. But if your timeline is a static list outlining the points in a process in general, every node can be left white.
 
 {% example "timeline/timeline-inactive.njk" %}
 
@@ -67,3 +63,5 @@ Our user research has found that in general, users:
 - find it helpful that timelines give a visual representation of the process
 
 Some research suggests that users expect timelines to be dynamic, updating as they make progress. Bear in mind that static timelines may not always meet user expectations.
+
+We would also like to better understand whether users associate the length of a line between two nodes with the amount of time that stage will take.

docs/examples/timeline/timeline-active.njk

@@ -10,18 +10,13 @@ vueLink: [insert link to Vue component library here]
 {{ timeline({
   items: [
     {
-      headingText: "Date referred",
-      isPastItem: true,
-      text: "8 June 2024"
-    },
-    {
-      headingText: "Current status",
+      headingText: "Await approval",
       active: true,
-      text: "Waiting for treatment"
+      text: "The request will either be approved or rejected. If rejected please contact your Healthcare Professional."
     },
     {
-      headingText: "Estimated treatment start date",
-      text: "September 2024"
+      headingText: "Collect prescription",
+      text: "Once approved, it can take 3 to 5 working days for a nominated pharmacy to prepare your prescription."
     }
   ]
 }) }}

docs/examples/timeline/timeline-waiting-times.njk

@@ -0,0 +1,27 @@
+---
+layout: layouts/example.njk
+title: Timeline waiting times
+figmaLink: [insert link to Figma file here]
+vueLink: [insert link to Vue component library here]
+---
+
+{% from "timeline/macro.njk" import timeline %}
+
+{{ timeline({
+  items: [
+    {
+      headingText: "Date referred",
+      isPastItem: true,
+      text: "8 June 2024"
+    },
+    {
+      headingText: "Current status",
+      active: true,
+      text: "Waiting for treatment"
+    },
+    {
+      headingText: "Estimated treatment start date",
+      text: "September 2024"
+    }
+  ]
+}) }}