Stepper component for use on the additional image details form #955

MatMoore · 2026-01-28T17:10:58Z

Description

This brings in a version of the stepper component as app-stepper-input, and wires it up to the customised IntegerField in the nhsforms app.

Example usage:

            stepper_field = IntegerField(
                label="Stepper",
                initial=1,
                min_value=0,
                max_value=10,
                widget=StepperInput,  # this is new
            )

At the time of writing, the additional image details form is not merged yet, but I can update that to use this component when it is.

Note: I've added a little debug page at /debug/components in order to preview components like this that are not coming from the design system. This is not enabled in the review environments as I don't intend to be visible except for developers running in DEBUG mode. If you prefer, I can remove this page, but I found useful for manual testing.

Jira link

https://nhsd-jira.digital.nhs.uk/browse/DTOSS-12115

Review notes

I've based the javascript, html and scss on @colinrotherham's proposal from [WIP] Add stepper input component nhsuk/nhsuk-frontend#1719
I've kept the aria attributes, and hiding the buttons when javascript is not available
I've removed some of the extra params we won't be using straight away, to simplify things
I tweaked one of the polyfills slightly to match the behaviour I saw in chrome, and tested it again on safari for iOS

Post merge tasks

contribute unit tests back to @colinrotherham's PR against nhsuk-frontend
raise a separate PR for propagating label.id from input to label in nhsuk-frontend

Review checklist

Check database queries are correctly scoped to current_provider

github-actions · 2026-01-29T09:03:50Z

The review app is available at this URL:
https://pr-955.manage-breast-screening.non-live.screening.nhs.uk
You must authenticate with HTTP basic authentication. Ask the team for credentials.

MatMoore · 2026-01-29T16:33:36Z

manage_breast_screening/assets/js/stepper-input.js

+
+    // Polyfill default value on step up
+    if (isEmpty && event?.currentTarget === this.$buttonStepUp) {
+      $input.valueAsNumber = min === 0 ? 1 : min


this is the polyfill I changed. If the input is blank and min is 0, step up sets it to 1, not 0.

MatMoore · 2026-01-29T16:35:45Z

manage_breast_screening/assets/js/stepper-input.test.js

+
+  beforeEach(async () => {
+    document.body.innerHTML = `
+      <div class="nhsuk-form-group app-stepper-input" data-module="app-stepper-input" data-max="20" data-min="0">


it's awkward having to specify all this HTML here... for the nhsuk-frontend version, we can just render the nunjucks macro. I considered bringing in nunjucks as a dependency and rendering the jinja component as if it was nunjucks, but I thought this would complicate things too much.

MatMoore · 2026-01-29T16:38:23Z

manage_breast_screening/assets/js/stepper-input.test.js

+    expect(liveRegion.innerText).toBe('2')
+  })
+
+  it('assumes the min value when stepping down if the input is empty', async () => {


Note: these two tests are technically testing jsdom, as this behaviour is normally provided by a browser, but I thought it was worth including as it helps to document the intended behaviour.

MatMoore · 2026-01-29T16:39:21Z

manage_breast_screening/assets/sass/components/_button.scss

 .nhsuk-form-group .app-button--link {
  display: block;
 }
+


This scss is all unchanged from the nhsuk-frontend PR, excpept I've renamed the class prefixes to app-

MatMoore · 2026-01-29T16:41:59Z

manage_breast_screening/core/jinja2/macros/icon.jinja

@@ -0,0 +1,40 @@
+{#


This might become obsolete soon if the icons are accepted into the design system, but I copied the macro structure as I thought it would be handy to have. If we need another custom SVG at any point we can just add it here.

This allows timeouts to cause a redirect to the persona login in local dev.

This repurposes Colin's proposed code for the design system. See nhsuk/nhsuk-frontend#1719 I've stripped out a few options that we don't need right now in order to focus on the use case we have. Should this be accepted into the design system, we'll back out these changes, but the way we call the component will be very similar.

This extends our existing version of IntegerField so that it renders with a stepper when the StepperInput widget is specified.

sonarqubecloud · 2026-01-29T16:44:56Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

MatMoore · 2026-01-29T16:47:08Z

manage_breast_screening/nhsuk_forms/tests/fields/test_integer_field.py

+
+    def test_renders_stepper_input(self, form_class):
+        actual = form_class()["stepper_field"].as_field_group()
+        expected = render_to_string(


I figured out I could render the underlying component like this to simplify the test. This means the test is not sensitive to the implementation of the jinja component, only that we pass through the right params from the field to the component.

We should do this for the other fields too but I didn't want to overload this PR.

MatMoore changed the title ~~stepper component~~ [wip] stepper component Jan 28, 2026

MatMoore added the deploy label Jan 28, 2026

MatMoore had a problem deploying to review January 28, 2026 17:12 — with GitHub Actions Failure

MatMoore force-pushed the DTOSS-12115-stepper-component branch from 5109562 to 6f1f116 Compare January 28, 2026 17:14

MatMoore had a problem deploying to review January 28, 2026 17:16 — with GitHub Actions Failure

MatMoore force-pushed the DTOSS-12115-stepper-component branch from 6f1f116 to 707124a Compare January 29, 2026 08:58

MatMoore temporarily deployed to review January 29, 2026 08:59 — with GitHub Actions Inactive

MatMoore force-pushed the DTOSS-12115-stepper-component branch from 707124a to fd4995b Compare January 29, 2026 10:30

MatMoore temporarily deployed to review January 29, 2026 10:31 — with GitHub Actions Inactive

MatMoore force-pushed the DTOSS-12115-stepper-component branch from fd4995b to 2d0bd7a Compare January 29, 2026 10:33

MatMoore temporarily deployed to review January 29, 2026 10:35 — with GitHub Actions Inactive

MatMoore force-pushed the DTOSS-12115-stepper-component branch from 2d0bd7a to cd6d31c Compare January 29, 2026 15:19

MatMoore had a problem deploying to review January 29, 2026 15:23 — with GitHub Actions Failure

MatMoore had a problem deploying to review January 29, 2026 15:41 — with GitHub Actions Failure

MatMoore had a problem deploying to review January 29, 2026 16:21 — with GitHub Actions Failure

MatMoore changed the title ~~[wip] stepper component~~ Stepper component for use on the additional images form Jan 29, 2026

MatMoore changed the title ~~Stepper component for use on the additional images form~~ Stepper component for use on the additional image details form Jan 29, 2026

MatMoore commented Jan 29, 2026

View reviewed changes

MatMoore added 7 commits January 29, 2026 16:43

remove some empty files

9616a10

use settings.LOGIN_URL rather than hardcoding auth:login

1f6cb25

This allows timeouts to cause a redirect to the persona login in local dev.

add a debug url for debugging custom components

09b5d21

Add plus/minus icons for stepper

53f06b2

update nhsuk-frontend

01aca9a

allow stepper-input to be used with django forms

97dd7a2

This extends our existing version of IntegerField so that it renders with a stepper when the StepperInput widget is specified.

MatMoore force-pushed the DTOSS-12115-stepper-component branch from bc8c847 to 97dd7a2 Compare January 29, 2026 16:43

MatMoore marked this pull request as ready for review January 29, 2026 16:44

MatMoore had a problem deploying to review January 29, 2026 16:45 — with GitHub Actions Failure

MatMoore commented Jan 29, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper component for use on the additional image details form #955

Stepper component for use on the additional image details form #955

MatMoore commented Jan 28, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

MatMoore Jan 29, 2026

Uh oh!

MatMoore Jan 29, 2026 •

edited

Loading

Uh oh!

MatMoore Jan 29, 2026 •

edited

Loading

Uh oh!

MatMoore Jan 29, 2026

Uh oh!

MatMoore Jan 29, 2026

Uh oh!

sonarqubecloud bot commented Jan 29, 2026

Uh oh!

MatMoore Jan 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Stepper component for use on the additional image details form #955

Are you sure you want to change the base?

Stepper component for use on the additional image details form #955

Conversation

MatMoore commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira link

Review notes

Post merge tasks

Review checklist

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

MatMoore Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

MatMoore Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MatMoore Jan 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MatMoore Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

MatMoore Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Jan 29, 2026

Quality Gate passed

Uh oh!

MatMoore Jan 29, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

MatMoore commented Jan 28, 2026 •

edited

Loading

MatMoore Jan 29, 2026 •

edited

Loading

MatMoore Jan 29, 2026 •

edited

Loading