Update design of timeline component to include programmes

Author: paulrobertlloyd

app/assets/stylesheets/components/_timeline.scss

@@ -124,10 +124,19 @@ $_timeline-border-width: 2px;
   }
 
   &__description {
-    padding-top: 0;
+    padding-top: nhsuk-spacing(1);
     color: $nhsuk-secondary-text-colour;
 
-    @include nhsuk-responsive-margin(2, "bottom");
+    @include nhsuk-responsive-margin(3, "bottom");
     @include nhsuk-font-size(16);
   }
+
+  .nhsuk-tag {
+    border-color: inherit;
+    color: inherit;
+
+    &:last-of-type {
+      margin-right: nhsuk-spacing(2);
+    }
+  }
 }

app/assets/stylesheets/core/elements/_index.scss

@@ -4,7 +4,7 @@ blockquote {
   margin-left: 0;
   padding: nhsuk-spacing(2);
   padding-left: nhsuk-spacing(3);
-  border-left: $nhsuk-border-width solid $nhsuk-brand-colour;
+  border-left: $nhsuk-border-width solid $nhsuk-border-colour;
 
   @include nhsuk-responsive-margin(4, "bottom");
   @include nhsuk-responsive-margin(2, "top");

app/globals.js

@@ -110,7 +110,9 @@ export default () => {
         headingText: formatMarkdown(auditEvent.name),
         isPastItem: auditEvent.isPastEvent,
         html: auditEvent.formatted?.note,
-        description: filters.safe(auditEvent.formatted.createdAtAndBy)
+        description: filters.safe(
+          auditEvent.formatted.programmes + auditEvent.formatted.createdAtAndBy
+        )
       })
     }