Single day build

app/assets/sass/components/_workflow.scss

@@ -0,0 +1,201 @@
+// app/assets/sass/components/_workflow.scss
+
+@use "nhsuk-frontend/dist/nhsuk/core" as *;
+
+// Wider container for workflow mode
+.nhsuk-width-container--wide {
+  @include nhsuk-width-container(1200px);
+}
+
+.app-workflow-mode .nhsuk-width-container {
+  @include nhsuk-width-container(1200px);
+}
+
+// Use flexbox for workflow layout to allow nav column to stretch for sticky positioning
+.app-workflow-container__row {
+  @include nhsuk-media-query($from: desktop) {
+    display: flex;
+  }
+}
+
+.app-workflow-container__sidebar,
+.app-workflow-container__main {
+  @include nhsuk-media-query($from: desktop) {
+    float: none;
+  }
+}
+
+// Wrapper needs to fill the column height for sticky to work
+.app-workflow-side-nav-wrapper {
+  height: 100%;
+  position: sticky;
+  top: nhsuk-spacing(4);
+  padding-bottom: 15px;
+}
+
+.app-workflow-side-nav {
+  position: static;
+}
+
+.app-workflow-side-nav__heading {
+  margin-bottom: nhsuk-spacing(3);
+}
+
+.app-workflow-side-nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.app-workflow-side-nav__item {
+  position: relative;
+  border-left: 4px solid transparent;
+  margin-left: -1px;
+}
+
+.app-workflow-side-nav__link {
+  @include nhsuk-font($size: 16);
+
+  display: flex;
+  align-items: center;
+  gap: nhsuk-spacing(2);
+  padding: nhsuk-spacing(2) 0 nhsuk-spacing(2) nhsuk-spacing(2);
+  text-decoration: none;
+  position: relative;
+}
+
+// Only apply link styles to actual links
+a.app-workflow-side-nav__link {
+  @include nhsuk-link-style-default;
+  @include nhsuk-link-style-no-visited-state;
+
+  &:hover {
+    .app-workflow-side-nav__label {
+      text-decoration: underline;
+      text-decoration-thickness: max(3px, 0.1875rem, 0.12em);
+    }
+  }
+
+  &:focus {
+    @include nhsuk-focused-text;
+    color: $nhsuk-focus-text-colour;
+  }
+}
+
+.app-workflow-side-nav__link--disabled {
+  color: $nhsuk-secondary-text-colour;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+// Clickable links (not current, not completed, not disabled) have blue circles
+.app-workflow-side-nav__link--clickable {
+  .app-workflow-side-nav__number {
+    background-color: nhsuk-colour("blue");
+    color: nhsuk-colour("white");
+  }
+}
+
+.app-workflow-side-nav__number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+  background-color: nhsuk-colour("grey-3");
+  color: nhsuk-colour("grey-1");
+  border-radius: 50%;
+  font-weight: 600;
+  font-size: 14px;
+  text-align: center;
+  line-height: 1;
+  padding-left: 1px; // Nudge numbers slightly right
+
+  .app-icon--tick {
+    width: 16px;
+    height: 16px;
+
+    path {
+      fill: none;
+      stroke: nhsuk-colour("white");
+      stroke-width: 4;
+    }
+  }
+}
+
+.app-workflow-side-nav__label {
+  flex: 1;
+}
+
+// Item states
+.app-workflow-side-nav__item--current {
+  border-left-color: $nhsuk-brand-colour;
+
+  .app-workflow-side-nav__link {
+    color: $nhsuk-text-colour;
+  }
+
+  .app-workflow-side-nav__label {
+    font-weight: bold;
+  }
+
+  .app-workflow-side-nav__number {
+    background-color: nhsuk-colour("blue");
+    color: nhsuk-colour("white");
+  }
+}
+
+// Clickable links (not current, not completed, not disabled) have blue circles
+.app-workflow-side-nav__link--clickable {
+  .app-workflow-side-nav__number {
+    background-color: nhsuk-colour("blue");
+    color: nhsuk-colour("white");
+  }
+}
+
+.app-workflow-side-nav__item--completed {
+  .app-workflow-side-nav__link--clickable .app-workflow-side-nav__number,
+  .app-workflow-side-nav__number {
+    background-color: nhsuk-colour("green");
+    color: nhsuk-colour("white");
+
+    .app-icon--tick path {
+      stroke: nhsuk-colour("white");
+    }
+  }
+}
+
+.app-workflow-side-nav__item--disabled {
+  .app-workflow-side-nav__link--clickable .app-workflow-side-nav__number,
+  .app-workflow-side-nav__number {
+    background-color: nhsuk-colour("grey-4");
+    color: nhsuk-colour("grey-1");
+  }
+}
+
+// Responsive - use full width on mobile
+@media (max-width: 768px) {
+  .app-workflow-side-nav {
+    position: static;
+  }
+}
+
+// Status text shown after the NHS number in the appointment header (e.g. "Added to worklist")
+.app-header-status {
+  margin-left: nhsuk-spacing(3);
+
+  .app-header-status__icon {
+    height: 1em;
+    width: 1em;
+    vertical-align: -0.15em;
+    margin-right: -1px;
+    // Aiming for #48B788
+    fill: nhsuk-tint(nhsuk-colour("green"), 40%);
+  }
+}
+
+.app-header-status--fail .app-header-status__icon {
+  // Aiming for #E98881
+  fill: nhsuk-tint(nhsuk-colour("red"), 44%);
+}

app/assets/sass/main.scss

@@ -14,13 +14,14 @@
 @forward "components/secondary-navigation";
 @forward "components/participant-table";
 //@forward "components/participant-search";
+@forward "components/workflow";
 
 //{% set containerClasses = "nhsuk-width-container-fluid" %}
-
 // Add your custom CSS/Sass styles below.
 .app-width-extended {
   width: 1280px;
 }
+
 .app-card-editable {
   display: flex;
   justify-content: space-between;

app/lib/utils/strings.js

@@ -0,0 +1,25 @@
+// app/lib/utils/strings.js
+
+const padStart = (value, length = 2, char = '0') => {
+  if (value === null || value === undefined) {
+    return ''
+  }
+
+  return String(value).padStart(length, char)
+}
+
+const zeroPad = (value, length = 2) => padStart(value, length, '0')
+
+const toJSON = (value) => {
+  try {
+    return JSON.stringify(value)
+  } catch (err) {
+    return 'null'
+  }
+}
+
+module.exports = {
+  padStart,
+  zeroPad,
+  toJSON
+}