Formatted input component (Currency)

[erichwelz]

TDS issue

Problem Statement

As a customer I would like to see a formatted input ie text field on display so that I can understand the purpose of the field. IE for formatting

Recommendation

• Description of the proposed solution

An input field that accepts a formatter on loss of focus. IE number field to enter currency, text field to display the formatted result

Design intent

(This space is intentionally left blank. The motivation and design intent go here.)

Designs

• Screenshots
• Sketch file
• InVision links

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided Then the text is displayed as a child And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

Meta

• Willing to design solution: Yes/No
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• Do any similar components already exist in TDS (core or community): Yes/No
• Does this pattern exist already but isn’t a community component? (include url)
• Which teams/applications do you think would use this improvement?
• High impact: Yes/No

[theetrain]

Summary from DPA meeting:

• client side value formatting is a great idea we would like to see implemented
• this can be built using a set of approved onChange handlers that can be plugged into existing form components
  • if there are some open source options, please link to them here
• output of this story can be a set of approved and documented input formatting functions for designers to see and experience, and for developers to consume

[varunj90]

TDS core team will be looking into this as part of revamping form fields EPIC: https://telusdigital.atlassian.net/browse/TDS-1430