diff --git a/src/platform/forms-system/src/js/types.js b/src/platform/forms-system/src/js/types.js index 7d87591c9329..9f4d634c24c3 100644 --- a/src/platform/forms-system/src/js/types.js +++ b/src/platform/forms-system/src/js/types.js @@ -216,6 +216,11 @@ * @typedef {'on' | 'off' | 'name' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'email' | 'username' | 'current-password' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension' | 'impp' | 'url' | 'photo' | OrAnyString} AutocompleteValue */ +/** + * Icon - any value from https://design.va.gov/storybook/?path=/docs/uswds-va-icon--docs + * @typedef {'credit_card' | 'comment' | 'attach_money' | OrAnyString} Icon + */ + /** * @typedef {Array<{ * pageKey: string, @@ -271,6 +276,7 @@ * @property {string} [classNames] additional CSS classes to add to the field * @property {boolean} [confirmRemove] For arrays. If true, will show a confirmation modal when removing an item. * @property {string} [confirmRemoveDescription] For arrays. Description for the confirmation modal when removing an item. + * @property {boolean} [currency] For textUI / vaTextInputField. If true, will show a currency symbol in the input field. * @property {string} [customTitle] For the review page, for arrays and some widgets. This doesn't appear to change any text, but is just used for a hack to prevent an outer DL wrapper. Often set to `' '`, and used with `useDlWrap: true` to get a11y issues to pass. Will format field title and body vertically instead of horizontally. `useDlWrap` will format text horizontally. * @property {number} [debounceRate] Used for AutoSuggest widget * @property {boolean} [displayEmptyObjectOnReview] For objects with empty properties object. This will display ui:title and ui:description on the review page. @@ -304,6 +310,10 @@ * @property {'' | '1' | '2' | '3' | '4' | '5'} [labelHeaderLevelStyle] The header style level for the label. For web components such as radio buttons or checkboxes. * @property {string} [messageAriaDescribedby] For web components. An optional message that will be read by screen readers when the input is focused. * @property {boolean} [monthSelect] For VaMemorableDate web component. If true, will use a select dropdown for the month instead of an input. + * @property {string} [inputPrefix] For textUI / VaTextInputField. Displays a fixed prefix string at the start of the input field. + * @property {Icon} [inputIconPrefix] For textUI / VaTextInputField. This property displays a prefix that accepts a string which represents icon name. + * @property {string} [inputSuffix] For textUI / VaTextInputField. Displays a fixed suffix string at the start of the input field. + * @property {Icon} [inputIconSuffix] For textUI / VaTextInputField. This property displays a suffix that accepts a string which represents icon name. * @property {(formData: any, schema: SchemaOptions, uiSchema: UISchemaOptions, index, path: string[]) => SchemaOptions} [replaceSchema] Replace the entire `schema` based on `formData`. Must provide the entire `schema` in the return. Recalculates on every form data change. * * Also accepts `title` one-off property to update `'ui:title'` as long as `'ui:title'` it is not defined. (can be useful if you are working inside of an array where `updateUiSchema` is not supported). diff --git a/src/platform/forms-system/src/js/web-component-fields/vaTextInputFieldMapping.jsx b/src/platform/forms-system/src/js/web-component-fields/vaTextInputFieldMapping.jsx index 0ed83ff06e72..dfec6d69acd6 100644 --- a/src/platform/forms-system/src/js/web-component-fields/vaTextInputFieldMapping.jsx +++ b/src/platform/forms-system/src/js/web-component-fields/vaTextInputFieldMapping.jsx @@ -39,6 +39,11 @@ export default function vaTextInputFieldMapping(props) { type: inputType, width: uiOptions?.width, charcount: uiOptions?.charcount, + currency: uiOptions?.currency, + inputSuffix: uiOptions?.inputSuffix, + inputIconSuffix: uiOptions?.inputIconSuffix, + inputPrefix: uiOptions?.inputPrefix, + inputIconPrefix: uiOptions?.inputIconPrefix, onInput: (event, value) => { // redux value or input value let newVal = value || event.target.value;