search

hmcts / design-system-backlog

This is a place for the HMCTS design team to coordinate the development of new components and patterns for the HMCTS Design System.
8 stars 1 forks source link

Currency input #32

Closed robarmes closed 5 years ago

robarmes commented 6 years ago

ezgif com-video-to-gif

robarmes commented 6 years ago

When to use this component Use the Currency input component whenever you need users to tell you an amount of money in a particular currency, for example pounds sterling or euros.

How it works The Currency input component shows users which unit of currency they need to enter their amount in. (there is some hidden, screen-reader friendly label text on those inputs, for example “Enter amount in £”.)

Preventing non-numeric characters The component uses input type=”text” rather than type=number to ensure that all users can enter the decimal symbol.

The Currency input component has a progressive enhancement that prevents non-numeric input. To use this enhancement, install the numeric input component or include numeric-input.js on the page and include the attribute data-non-numeric on the input.

Research on this component This component has been tested in prototypes of several payment products with complete success.

adamsilver commented 5 years ago

https://govuk-currency-input.herokuapp.com/ https://github.com/hannalaakso/accessible-currency-input

Good one ^

adamsilver commented 5 years ago

I've created something for us to review on Wednesday. http://hmcts-frontend.herokuapp.com/components/currency-input

PeteWilliams commented 5 years ago

One thing to consider is alignment. Traditionally in things like Excel or anything tabular, numeric/currency input is right-aligned so decimal places line up, tens line up with tens, hundreds line up with hundreds etc. Makes comparisons and any mental arithmetic easier.

This is less important when the input is used on it's own, but potentially more important when entering a whole bunch of numbers (which we do in a couple places in CMC - example). Could consider always right-aligning, or having a secondary class to right-align when used in tables/groups.

Also in the CMC version, the currency prefix is styled differently: image I wasn't involved with the design/testing of this, but I suspect it's to make it clear that it's not editable - you could argue in your design that it being just black text inside a textbox visually implies that it is an editable part of the field's value.

adamsilver commented 5 years ago

Thanks @PeteWilliams. I've updated it based on your crit:

image

adamsilver commented 5 years ago

Going to use a text input with number pattern as explained here: https://adamsilver.io/articles/form-design-when-to-use-the-number-input/

adamsilver commented 5 years ago

Ready for review/approval: http://hmcts-design-system.herokuapp.com/components/currency-input

PeteWilliams commented 5 years ago

Have reviewed/approved this. And also to note, this pattern has already been successfully tested in CMC. Is there a label to add when something is approved, or do we just remove the 'in progress' one?

adamsilver commented 5 years ago

We just remove it. Thanks, Pete. All done.

On Fri, 15 Mar 2019, 14:15 PeteWilliams, notifications@github.com wrote:

Have reviewed/approved this. And also to note, this pattern has already been successfully tested in CMC. Is there a label to add when something is approved, or do we just remove the 'in progress' one?

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/hmcts/design-system-backlog/issues/32#issuecomment-473302271, or mute the thread https://github.com/notifications/unsubscribe-auth/AACRKzFe_t1p0t7AdXbS702yGYClwK88ks5vW6sCgaJpZM4WcpcM .