[WIP] Add stepper input component

[colinrotherham]

Description

This PR adds a new stepper input component with +/- stepper buttons

It was built using prototype from @edwardhorsford and utilises:

• Add small buttons and inline form groups #1643
• [v10] Add support for icon buttons #1712

To do: Add screen reader status announcements (see prototype code)

Checklist

• Tested against our testing policy (Resolution, Browser & Accessibility)
• Follows our coding standards and style guide
• CHANGELOG entry

[colinrotherham]

I've compared the prototype icons and they're slightly smaller than our default size

E.g. Here's the "Close" icon in red, rotated to compare with the new "Plus" icon

[edwardhorsford]

This is awesome to see @colinrotherham!

Some thoughts:

• I reckon we should avoid numberInput - to me this implies it's a general component for numbers, when in reality it's a subset. I think stepper / stepperInput might be the more conventional name?
• I didn't do it in my prototype, but you could conceive that it could optionally accept text to go inside each button - either alongside the icons or instead of.
• I reckon these icons are a bit large / weighty (very subjective though)
• In my prototype I used centred text for the input. That's probably unconventional but I felt made the component as a whole seem more balanced - would be interested in what others think.

[anandamaryon1]

Very cool and works well.

Agree with the decision to centre the number in the input, to better relate to to both stepper buttons.

Being able to use arrow keys is a nice touch, guessing that's just the underlying input type number though.

Struggle to think of many use-cases for this though, don't think we have many services where you fill a basket of items. I suppose it helps in situations where the user is primarily using a mouse and can avoid breaking flow to use the keyboard? Or on touch devices where the keyboard is a little more unwieldy?

[edwardhorsford]

@anandamaryon1

There was a good article by Nielson Norman group about them. Agree the usages are limited. Besides the mouse/tablet only scenario, I'd see them as being most effective where users may need to make small adjustments to a value relative to a current value.

You could speculate for NHS that might be adjusting dosages - 0, 25ml, 50ml, 75ml, etc. Or 'how many times a week do you do x' type surveys. Agreed it's probably not that common though!

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[anandamaryon1]

A stepper in the wild: https://ukhsa-dashboard.data.gov.uk/cover/childhood-vaccinations