[WIP] Add stepper input component

packages/nhsuk-frontend-review/src/examples/all-icons.njk

@@ -30,6 +30,8 @@
         "Chevron right circle": "chevron-right-circle",
         "Cross": "cross",
         "Tick": "tick",
+        "Minus": "minus",
+        "Plus": "plus",
         "Search": "search",
         "User": "user"
       } %}

packages/nhsuk-frontend-review/src/layouts/page.njk

@@ -28,6 +28,7 @@
 {% from "nhsuk/components/label/macro.njk" import label %}
 {% from "nhsuk/components/legend/macro.njk" import legend %}
 {% from "nhsuk/components/notification-banner/macro.njk" import notificationBanner %}
+{% from "nhsuk/components/stepper-input/macro.njk" import stepperInput %}
 {% from "nhsuk/components/pagination/macro.njk" import pagination %}
 {% from "nhsuk/components/panel/macro.njk" import panel %}
 {% from "nhsuk/components/password-input/macro.njk" import passwordInput %}

packages/nhsuk-frontend/src/nhsuk/components/_index.scss

@@ -22,6 +22,7 @@
 @forward "date-input";
 @forward "file-upload";
 @forward "password-input";
+@forward "stepper-input";
 
 // Content presentation
 @forward "details";

packages/nhsuk-frontend/src/nhsuk/components/button/_index.scss

@@ -216,6 +216,10 @@ $button-shadow-size: $nhsuk-button-shadow-size;
     padding-top: 0;
     padding-bottom: 0;
 
+    // Prevent users from selecting icon button text
+    // e.g. When double clicking a stepper button
+    user-select: none;
+
     .nhsuk-icon {
       margin: 0 nhsuk-spacing(1);
 

packages/nhsuk-frontend/src/nhsuk/components/index.mjs

@@ -5,6 +5,7 @@ export * from './error-summary/error-summary.mjs'
 export * from './file-upload/file-upload.mjs'
 export * from './header/header.mjs'
 export * from './notification-banner/notification-banner.mjs'
+export * from './stepper-input/stepper-input.mjs'
 export * from './password-input/password-input.mjs'
 export * from './radios/radios.mjs'
 export * from './skip-link/skip-link.mjs'

packages/nhsuk-frontend/src/nhsuk/components/stepper-input/_index.scss

@@ -0,0 +1,24 @@
+@use "../../core/settings" as *;
+@use "../../core/tools" as *;
+@forward "../button";
+@forward "../input";
+
+////
+/// Stepper input component
+///
+/// @group components/stepper-input
+////
+
+@include nhsuk-exports("nhsuk/components/stepper-input") {
+  // Hide the buttons by default, JS removes this attribute
+  .nhsuk-stepper-input__step-down[hidden],
+  .nhsuk-stepper-input__step-up[hidden] {
+    display: none;
+  }
+
+  @include nhsuk-media-query($from: mobile) {
+    .nhsuk-stepper-input__input {
+      text-align: center;
+    }
+  }
+}

packages/nhsuk-frontend/src/nhsuk/components/stepper-input/_stepper-input.scss

@@ -0,0 +1 @@
+@forward ".";

packages/nhsuk-frontend/src/nhsuk/components/stepper-input/accessibility.puppeteer.test.mjs

@@ -0,0 +1,19 @@
+import {
+  axe,
+  getOptions,
+  goToComponent
+} from '@nhsuk/frontend-helpers/puppeteer.mjs'
+
+import { examples } from './fixtures.mjs'
+
+describe('Stepper input', () => {
+  describe.each(Object.entries(examples))('%s', (name, example) => {
+    it.each(getOptions(name, example))(
+      '$title passes accessibility tests',
+      async (options) => {
+        await goToComponent(page, 'stepper-input', options)
+        return expect(axe(page)).resolves.toHaveNoViolations()
+      }
+    )
+  })
+})

packages/nhsuk-frontend/src/nhsuk/components/stepper-input/fixtures.mjs

@@ -0,0 +1,163 @@
+/**
+ * Nunjucks macro option examples
+ *
+ * @satisfies {{ [example: string]: MacroExample }}
+ */
+const fixtures = {
+  'default': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      name: 'example',
+      min: 0
+    }
+  },
+  'with hint': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      hint: {
+        text: 'Include additional and repeat images'
+      },
+      id: 'with-hint-text',
+      name: 'example',
+      min: 0
+    },
+    screenshot: {
+      viewports: ['watch', 'mobile', 'tablet', 'desktop']
+    }
+  },
+  'with error message': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      errorMessage: {
+        text: 'Enter how many images were taken'
+      },
+      id: 'with-error-message',
+      name: 'example',
+      min: 0
+    }
+  },
+  'with hint and error': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      hint: {
+        text: 'Include additional and repeat images'
+      },
+      errorMessage: {
+        text: 'Enter how many images were taken'
+      },
+      id: 'with-error-message',
+      name: 'example'
+    },
+    screenshot: {
+      viewports: ['watch', 'mobile', 'tablet', 'desktop']
+    }
+  },
+  'with button text': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      stepDownButton: {
+        text: 'Decrease'
+      },
+      stepUpButton: {
+        text: 'Increase'
+      },
+      id: 'with-button-text',
+      name: 'example',
+      min: 0,
+      value: 2
+    }
+  },
+  'without page heading': {
+    context: {
+      label: {
+        text: 'How many images were taken?'
+      },
+      id: 'without-heading',
+      name: 'example',
+      min: 0
+    }
+  },
+  'min': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      id: 'width-class',
+      name: 'example'
+    },
+    variants: [
+      {
+        description: 'with 5',
+        context: {
+          min: 5
+        }
+      },
+      {
+        description: 'with 10',
+        context: {
+          min: 10
+        }
+      }
+    ]
+  },
+  'max': {
+    context: {
+      label: {
+        text: 'How many images were taken?',
+        size: 'l',
+        isPageHeading: true
+      },
+      id: 'width-class',
+      name: 'example',
+      min: 0
+    },
+    variants: [
+      {
+        description: 'with 5',
+        context: {
+          max: 5
+        }
+      },
+      {
+        description: 'with 10',
+        context: {
+          max: 10
+        }
+      }
+    ]
+  }
+}
+
+/**
+ * Nunjucks macro option examples
+ * (with typed keys)
+ *
+ * @type {Record<keyof typeof fixtures, MacroExample>}
+ */
+export const examples = fixtures
+
+/**
+ * @import { MacroExample } from '#lib'
+ */