From 54f4345e6ac464feca8bde746621346062910b78 Mon Sep 17 00:00:00 2001
From: Bethany Seeger <bseeger@codeforamerica.org>
Date: Tue, 17 Oct 2023 11:25:13 -0400
Subject: [PATCH] This adds `postfix` capabilities to both Money and Number
 Inputs.

Co-Authored-By: Lauren Kemperman; lkemperman@codeforamerica.org
---
 README.md                                     |  49 +++++++++++-------
 readme-assets/money-input-with-postfix.png    | Bin 0 -> 6038 bytes
 readme-assets/number-input-with-postfix.png   | Bin 0 -> 5109 bytes
 .../templates/fragments/inputs/money.html     |   3 +-
 .../templates/fragments/inputs/number.html    |  29 ++++++-----
 5 files changed, 47 insertions(+), 34 deletions(-)
 create mode 100644 readme-assets/money-input-with-postfix.png
 create mode 100644 readme-assets/number-input-with-postfix.png

diff --git a/README.md b/README.md
index df15bedbb..63b01173f 100644
--- a/README.md
+++ b/README.md
@@ -862,32 +862,33 @@ A convenience live template for text area inputs is provided through `cfa:inputT
 ### Number
 
 Number inputs are used to gather numbers from users. The number input makes use
-of `inputmode="numeric"`
-which
-will cause mobile devices to display the number pad when entering values into the input. The number
-input
-is useful for gathering numbers that don't already have a specific input type, such as the phone,
-money,
-date or SSN inputs.
+of `inputmode="numeric"` which will cause mobile devices to display the number pad when entering
+values into the input. The number input is useful for gathering numbers that don't already have a
+specific input type, such as the phone, money, date or SSN inputs.
 
 Number inputs have an optional `title` parameter, which when passed will set the `title` attribute
-on the input
-The text given for the title will be displayed as a tooltip when the user hovers over the input as
-well as in
-client-side HTML based validation errors. The default title if one is not passed will
+on the input The text given for the title will be displayed as a tooltip when the user hovers over
+the input as well as in client-side HTML based validation errors. The default title if one is not
+passed will
 be `Please make sure you are entering a positive, whole number or decimal value with 2 decimal places.`
 
 Number inputs also have an optional `pattern` parameter which represents a regex pattern that must
-be met for the input to be valid.
-The default regex pattern is `^\d*(\.\d{0,2})?$` which allows for any positive number with up to 2
-decimal places.
+be met for the input to be valid. The default regex pattern is `^\d*(\.\d{0,2})?$` which allows for
+any positive number with up to 2 decimal places.
 A different pattern can be passed if you wish to change this default behavior. If you change
-the `pattern`
-make sure you also change the `title` to represent your new pattern.
+the `pattern` make sure you also change the `title` to represent your new pattern.
 
 Number inputs have an optional `placeholder` parameter.
 
-A convenience live template for numbers is provided through `cfa:inputNumber`.
+Number inputs have an optional `postfix` parameter. When set, this will put the passed in string at
+the end of the number input, like so:
+
+<img src="readme-assets/number-input-with-postfix.png"  width=40% height=40% alt="image of number input with postfix message">
+
+In this `postfix` example, the string passed in was "hrs". The string will not get submitted with
+the input data and is only shown in the user interface.
+
+A live template for numbers is provided through `cfa:inputNumber`.
 
 ### Social Security Number
 
@@ -937,10 +938,18 @@ Money inputs are used to gather monetary values. Visually, they are displayed as
 a dollar sign `$` prefixed in front of the input. Money inputs have an optional `placeholder`
 parameter.
 
-We also provide a convenience validator for money inputs, `@Money`
-which validates that entered values are valid monetary values.
+Money inputs have an optional `postfix` parameter. When set, this will put the passed in string at
+the end of the money input, like so:
+
+<img src="readme-assets/money-input-with-postfix.png"  width=40% height=40% alt="image of money input with postfix message">
+
+In this `postfix` example, the string passed in was "/hr". The string will not get submitted with
+the input data and is only shown in the user interface.
+
+We also provide a validator for money inputs, `@Money`, which validates that entered
+values are valid monetary values.
 
-A convenience live template for money inputs is provided through `cfa:inputMoney`.
+A live template for money inputs is provided through `cfa:inputMoney`.
 
 ### Phone
 
diff --git a/readme-assets/money-input-with-postfix.png b/readme-assets/money-input-with-postfix.png
new file mode 100644
index 0000000000000000000000000000000000000000..870b22ff0b2387270607b3ba4ff3ad743f544546
GIT binary patch
literal 6038
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
Cs!T@!

literal 0
HcmV?d00001

diff --git a/readme-assets/number-input-with-postfix.png b/readme-assets/number-input-with-postfix.png
new file mode 100644
index 0000000000000000000000000000000000000000..0f173b42f3b5cea3d9accd920571039c779e91b5
GIT binary patch
literal 5109
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

literal 0
HcmV?d00001

diff --git a/src/main/resources/templates/fragments/inputs/money.html b/src/main/resources/templates/fragments/inputs/money.html
index 17651a768..e1f8b2bfb 100644
--- a/src/main/resources/templates/fragments/inputs/money.html
+++ b/src/main/resources/templates/fragments/inputs/money.html
@@ -26,8 +26,9 @@
               aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
               aria-invalid=${hasError}"
              th:value="${fieldData.getOrDefault(inputName, '')}">
+      <div th:if="${postfix != null}" th:text="${postfix}" class="text-input-group__postfix"></div>
     </div>
     <th:block
         th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
-</th:block>
\ No newline at end of file
+</th:block>
diff --git a/src/main/resources/templates/fragments/inputs/number.html b/src/main/resources/templates/fragments/inputs/number.html
index 3ac697562..a4038cf3e 100644
--- a/src/main/resources/templates/fragments/inputs/number.html
+++ b/src/main/resources/templates/fragments/inputs/number.html
@@ -17,19 +17,22 @@
        th:if="${hasHelpText}"
        th:id="${inputName + '-help-text'}"
        th:text="${helpText}"></p>
-    <input type="text" inputmode="numeric"
-           class="text-input form-width--med"
-           th:id="${inputName}"
-           th:name="${inputName}"
-           th:placeholder="${placeholder}"
-           th:attr="
-            title=${hasTitle ? title : #messages.msg('general.inputs.number')},
-            pattern=${hasPattern ? pattern : '^\d*(\.\d{0,2})?$'},
-            aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
-            aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
-            aria-invalid=${hasError}"
-           th:value="${fieldData.getOrDefault(inputName, '')}">
+    <div class="text-input-group form-width--med">
+      <input type="text" inputmode="numeric"
+             class="text-input form-width--med"
+             th:id="${inputName}"
+             th:name="${inputName}"
+             th:placeholder="${placeholder}"
+             th:attr="
+              title=${hasTitle ? title : #messages.msg('general.inputs.number')},
+              pattern=${hasPattern ? pattern : '^\d*(\.\d{0,2})?$'},
+              aria-describedby=${hasHelpText ? inputName + '-help-text' : ''},
+              aria-labelledby=${hasAriaLabel ? ariaLabel : ''},
+              aria-invalid=${hasError}"
+             th:value="${fieldData.getOrDefault(inputName, '')}">
+      <div th:if="${postfix != null}" th:text="${postfix}" class="text-input-group__postfix"></div>
+    </div>
     <th:block
         th:replace="~{fragments/inputError :: validationError(inputName=${inputName})}"></th:block>
   </div>
-</th:block>
\ No newline at end of file
+</th:block>