Add currency to text patterns (#31564)

* add support for currency/prefix/suffix

* fix spacing

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).

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;