GC-2176/Add ability to remove dollar sign from CurrencyInput component (

#433)

* Add prop and test to remove dollar sign from CurrencyInput

* Update version and changelog

* Oooops left on one too many zeros in versions

CHANGELOG.md

@@ -1,5 +1,9 @@
 # CHANGELOG
 
+## v2.0.0
+- Removing beta tag since this is no longer in beta
+- Adds a `showDollarSign` prop to the `CurrencyInput` component so we can hide it at will
+
 ## v2.0.0-beta.64
 - Fixes import of `UserCircle` icon
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.64",
+  "version": "2.0.0",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/CurrencyInput/CurrencyInput.vue

@@ -56,6 +56,10 @@ export default {
     selectOnFocus: {
       type: Boolean,
       default: true
+    },
+    showDollarSign: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['update:modelValue', 'input', 'change', 'focus', 'blur'],
@@ -132,7 +136,7 @@ export default {
         return;
       }
 
-      const formattedValue = this.formatter.format(value);
+      let formattedValue = this.formatter.format(value);
 
       const { type, prevValue, editIndex }  = stringDiff(this.formattedValue, formattedValue);
 
@@ -148,16 +152,23 @@ export default {
       const separatorOffset = countOccurrences(formattedValue, ',') - countOccurrences(this.formattedValue, ',');
       let newCaretPosition = inputEl.selectionStart + separatorOffset;
 
-      // If the user is inputting or deleting at the 0th index (the `$` sign), increment the caret position by an additional 1
-      if (newCaretPosition === 0 || newCaretPosition === 1) {
+      // If the user is inputting or deleting at the 0th index (the `$` sign), increment the caret position by an additional 1 unless showDollarSign is false
+      if (this.showDollarSign && (newCaretPosition === 0 || newCaretPosition === 1)) {
         newCaretPosition = 2;
+      } else if (!this.showDollarSign && newCaretPosition === 0) {
+        newCaretPosition = 1;
       }
 
       // If the user replaces a '0' value, keep the caret position on the integer side of the decimal
       if (type === 'edit' && editIndex <= this.formattedValue.indexOf('.') && prevValue === '0') {
         newCaretPosition--;
       }
 
+      // If showDollarSign is false, remove it from formatted value
+      if (!this.showDollarSign) {
+        formattedValue = formattedValue.slice(1);
+      }
+
       // Update the value and formatted value
       this.$emit('update:modelValue', this.formatter.parse(formattedValue));
       this.formattedValue = formattedValue;

src/components/CurrencyInput/__tests__/CurrencyInput.spec.js

@@ -65,4 +65,19 @@ describe('Currency input', () => {
     expect(helperText).toBeInTheDocument();
   });
 
+  describe('if show dollar sign is false', () => {
+
+    it('does not show the dollar sign', async () => {
+      const props = { ...initialProps, showDollarSign: false };
+      const { getByLabelText } = render(CurrencyInput, {
+        props
+      });
+      const currencyInput = getByLabelText(props.inputProps.label);
+
+      await fireEvent.update(currencyInput, '6.00');
+      expect(currencyInput.value).toEqual('6.00');
+    });
+
+  });
+
 });