Version 4.2.0

.gitignore

@@ -87,3 +87,6 @@ tests/dist
 # These files are autogenerated by the deploy GitHub Action
 public/sha
 public/ref
+
+# Redis
+dump.rdb

.prettierignore

@@ -39,5 +39,5 @@ terraform/.terraform
 *.tfstate
 *.tfstate.backup
 scratchpad
-spec/fixtures/files/fhir/immunisation-create.json
-spec/fixtures/files/fhir/immunisation-update.json
+spec/fixtures/files/fhir/immunisation_create.json
+spec/fixtures/files/fhir/immunisation_update.json

Gemfile

@@ -122,4 +122,5 @@ group :test do
   gem "shoulda-matchers"
   gem "simplecov", require: false
   gem "webmock"
+  gem "rack_session_access"
 end

Gemfile.lock

@@ -113,7 +113,7 @@ GEM
     ast (2.4.3)
     attr_required (1.0.2)
     aws-eventstream (1.4.0)
-    aws-partitions (1.1156.0)
+    aws-partitions (1.1159.0)
     aws-sdk-accessanalyzer (1.78.0)
       aws-sdk-core (~> 3, >= 3.231.0)
       aws-sigv4 (~> 1.5)
@@ -137,7 +137,7 @@ GEM
     aws-sdk-kms (1.112.0)
       aws-sdk-core (~> 3, >= 3.231.0)
       aws-sigv4 (~> 1.5)
-    aws-sdk-rds (1.292.0)
+    aws-sdk-rds (1.293.0)
       aws-sdk-core (~> 3, >= 3.231.0)
       aws-sigv4 (~> 1.5)
     aws-sdk-s3 (1.199.0)
@@ -456,7 +456,7 @@ GEM
     public_suffix (6.0.2)
     puma (7.0.2)
       nio4r (~> 2.0)
-    pundit (2.5.0)
+    pundit (2.5.1)
       activesupport (>= 3.0.0)
     raabro (1.4.0)
     racc (1.8.1)
@@ -477,6 +477,9 @@ GEM
       rack (>= 3.0.0)
     rack-test (2.2.0)
       rack (>= 1.3)
+    rack_session_access (0.2.0)
+      builder (>= 2.0.0)
+      rack (>= 1.0.0)
     rackup (2.2.1)
       rack (>= 3)
     rails (8.0.2.1)
@@ -820,6 +823,7 @@ DEPENDENCIES
   pry-rails
   puma
   pundit
+  rack_session_access
   rails (~> 8.0.2)
   rails_semantic_logger
   rainbow

app/assets/javascripts/application.js

@@ -12,6 +12,7 @@ import {
 
 import { Autocomplete } from "./components/autocomplete.js";
 import { UpgradedRadios as Radios } from "./components/radios.js";
+import { Sticky } from "./components/sticky.js";
 
 // Configure Turbo
 Turbo.session.drive = false;
@@ -41,6 +42,10 @@ function initialiseComponents() {
     createAll(Autocomplete);
   }
 
+  if (!isInitialised("app-sticky")) {
+    createAll(Sticky);
+  }
+
   if (!isInitialised("nhsuk-button")) {
     createAll(Button, { preventDoubleClick: true });
   }

app/assets/javascripts/components/autocomplete.spec.js

@@ -72,7 +72,6 @@ describe("Autocomplete", () => {
 
     // Check that matching options are shown
     const visibleOptions = listbox.querySelectorAll("li");
-    console.log(visibleOptions[0].innerHTML.trim());
     expect(visibleOptions.length).toEqual(1);
 
     // Option display hint text

app/assets/javascripts/components/sticky.js

@@ -0,0 +1,63 @@
+import { Component } from "nhsuk-frontend";
+
+/**
+ * Sticky component
+ */
+export class Sticky extends Component {
+  /**
+   * @param {Element | null} $root - HTML element to use for component
+   */
+  constructor($root) {
+    super($root);
+
+    this.stickyElement = $root;
+    this.stickyElementStyle = null;
+    this.stickyElementTop = 0;
+
+    this.determineStickyState = this.determineStickyState.bind(this);
+    this.throttledStickyState = this.throttle(this.determineStickyState, 100);
+
+    this.stickyElementStyle = window.getComputedStyle($root);
+    this.stickyElementTop = parseInt(this.stickyElementStyle.top, 10);
+
+    window.addEventListener("scroll", this.throttledStickyState);
+
+    this.determineStickyState();
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes
+   */
+  static moduleName = "app-sticky";
+
+  /**
+   * Determine element’s sticky state
+   */
+  determineStickyState() {
+    const currentTop = this.stickyElement.getBoundingClientRect().top;
+
+    this.stickyElement.dataset.stuck = String(
+      currentTop <= this.stickyElementTop,
+    );
+  }
+
+  /**
+   * Throttle
+   *
+   * @param {Function} callback - Function to throttle
+   * @param {number} limit - Minimum time interval (in milliseconds)
+   * @returns {Function} Throttled function
+   */
+  throttle(callback, limit) {
+    let inThrottle;
+    return function () {
+      const args = arguments;
+      const context = this;
+      if (!inThrottle) {
+        callback.apply(context, args);
+        inThrottle = true;
+        setTimeout(() => (inThrottle = false), limit);
+      }
+    };
+  }
+}

app/assets/javascripts/components/sticky.spec.js

@@ -0,0 +1,194 @@
+import { Sticky } from "./sticky.js";
+
+describe("Sticky Component", () => {
+  let mockElement;
+  let stickyInstance;
+  let scrollEventListener;
+
+  beforeEach(() => {
+    document.body.classList.add("nhsuk-frontend-supported");
+
+    // Create a mock DOM element
+    document.body.innerHTML = `<div id="mock-element" style="position: sticky; top: 20px;"></div>`;
+    mockElement = document.getElementById("mock-element");
+
+    // Mock getBoundingClientRect
+    Object.defineProperty(mockElement, "getBoundingClientRect", {
+      value: jest.fn(() => ({ top: 0 })),
+      configurable: true,
+    });
+
+    // Mock window.getComputedStyle
+    Object.defineProperty(window, "getComputedStyle", {
+      value: jest.fn(() => ({
+        top: "20px",
+      })),
+      writable: true,
+    });
+
+    // Mock window.addEventListener and capture scroll listener
+    const originalAddEventListener = window.addEventListener;
+    window.addEventListener = jest.fn((event, listener) => {
+      if (event === "scroll") {
+        scrollEventListener = listener;
+      }
+      originalAddEventListener.call(window, event, listener);
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    jest.restoreAllMocks();
+  });
+
+  describe("Initialization", () => {
+    test("should initialize with correct properties", () => {
+      stickyInstance = new Sticky(mockElement);
+
+      expect(stickyInstance.stickyElement).toBe(mockElement);
+      expect(stickyInstance.stickyElementTop).toBe(20);
+      expect(window.getComputedStyle).toHaveBeenCalledWith(mockElement);
+      expect(window.addEventListener).toHaveBeenCalledWith(
+        "scroll",
+        expect.any(Function),
+      );
+    });
+
+    test("should have correct moduleName", () => {
+      expect(Sticky.moduleName).toBe("app-sticky");
+    });
+
+    test("should call determineStickyState on initialization", () => {
+      const spy = jest.spyOn(Sticky.prototype, "determineStickyState");
+      stickyInstance = new Sticky(mockElement);
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+
+  describe("determineStickyState method", () => {
+    beforeEach(() => {
+      stickyInstance = new Sticky(mockElement);
+    });
+
+    test("should set data-stuck to `true` when element is at or above threshold", () => {
+      // Element is at the top (currentTop = 0, threshold = 20)
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 0 });
+
+      stickyInstance.determineStickyState();
+
+      expect(mockElement.dataset.stuck).toBe("true");
+    });
+
+    test("should set data-stuck to `true` when element above threshold", () => {
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 10 });
+
+      stickyInstance.determineStickyState();
+
+      expect(mockElement.dataset.stuck).toBe("true");
+    });
+
+    test("should set data-stuck to `true` when element at threshold", () => {
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 20 });
+
+      stickyInstance.determineStickyState();
+
+      expect(mockElement.dataset.stuck).toBe("true");
+    });
+
+    test("should set data-stuck to `false` when element below threshold", () => {
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 30 });
+
+      stickyInstance.determineStickyState();
+
+      expect(mockElement.dataset.stuck).toBe("false");
+    });
+  });
+
+  describe("Scroll behavior", () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+
+      // Clear any existing event listeners
+      window.removeEventListener = jest.fn();
+
+      stickyInstance = new Sticky(mockElement);
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    test("should respond to scroll events", () => {
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 10 });
+
+      // Make sure we have the listener
+      expect(scrollEventListener).toBeDefined();
+
+      // Trigger scroll event
+      scrollEventListener();
+
+      expect(mockElement.dataset.stuck).toBe("true");
+    });
+  });
+
+  describe("Throttle functionality", () => {
+    beforeEach(() => {
+      jest.useFakeTimers();
+      stickyInstance = new Sticky(mockElement);
+    });
+
+    afterEach(() => {
+      jest.useRealTimers();
+    });
+
+    test("should throttle function calls", () => {
+      const mockCallback = jest.fn();
+      const throttledCallback = stickyInstance.throttle(mockCallback, 100);
+
+      // Call multiple times rapidly
+      throttledCallback();
+      throttledCallback();
+      throttledCallback();
+
+      // Should only be called once
+      expect(mockCallback).toHaveBeenCalledTimes(1);
+
+      // Fast forward past throttle limit
+      jest.advanceTimersByTime(100);
+
+      // Now should allow another call
+      throttledCallback();
+      expect(mockCallback).toHaveBeenCalledTimes(2);
+    });
+
+    test("should preserve context and arguments in throttled function", () => {
+      const mockCallback = jest.fn();
+      const throttledCallback = stickyInstance.throttle(mockCallback, 100);
+
+      throttledCallback("arg1", "arg2");
+
+      expect(mockCallback).toHaveBeenCalledWith("arg1", "arg2");
+    });
+  });
+
+  describe("Integration with different CSS top values", () => {
+    test("should handle different top values correctly", () => {
+      // Mock different computed style top value
+      window.getComputedStyle.mockReturnValue({ top: "50px" });
+
+      stickyInstance = new Sticky(mockElement);
+
+      expect(stickyInstance.stickyElementTop).toBe(50);
+
+      // Test with element above new threshold
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 30 });
+      stickyInstance.determineStickyState();
+      expect(mockElement.dataset.stuck).toBe("true");
+
+      // Test with element below new threshold
+      mockElement.getBoundingClientRect.mockReturnValue({ top: 60 });
+      stickyInstance.determineStickyState();
+      expect(mockElement.dataset.stuck).toBe("false");
+    });
+  });
+});

app/assets/stylesheets/components/_button.scss

@@ -7,11 +7,24 @@ $_secondary-warning-button-hover-colour: color.change(
   $alpha: 0.1
 );
 
+.button_to {
+  display: contents;
+}
+
 .nhsuk-button {
-  .button_to &,
-  .nhsuk-table & {
+  .button_to & {
     margin-bottom: 0;
   }
+
+  .nhsuk-button-group .button_to & {
+    $horizontal-gap: nhsuk-spacing(4);
+    $vertical-gap: nhsuk-spacing(3);
+    margin-bottom: $vertical-gap + $_button-shadow-size;
+
+    @include nhsuk-media-query($from: tablet) {
+      margin-right: $horizontal-gap;
+    }
+  }
 }
 
 .app-button--secondary-warning {

app/assets/stylesheets/components/_card.scss

@@ -81,10 +81,6 @@
 .app-card--compact {
   @include nhsuk-responsive-margin(3, "bottom");
 
-  .nhsuk-button-group {
-    margin-top: nhsuk-spacing(-4);
-  }
-
   .nhsuk-card__heading {
     @include nhsuk-responsive-margin(1, "bottom");
   }

app/assets/stylesheets/components/_index.scss

@@ -12,6 +12,7 @@
 @forward "highlight";
 @forward "search-input";
 @forward "secondary-navigation";
+@forward "sticky-navigation";
 @forward "status";
 @forward "summary-list";
 @forward "tables";