remove box shadow from MoneyInput, add step and prefix props (#1094)

user-interviews · Dec 7, 2023 · 480ec92 · 480ec92
1 parent 9f129c7
commit 480ec92
Show file tree

Hide file tree

Showing 5 changed files with 187 additions and 3 deletions.
diff --git a/spec/__snapshots__/Storyshots.test.js.snap b/spec/__snapshots__/Storyshots.test.js.snap
@@ -10425,7 +10425,7 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
     onKeyUp={[Function]}
     placeholder="Please enter a number"
     type="text"
-    value="$1,250.99"
+    value="$ 1,250.99"
   />
   <br />
   <h2
@@ -10442,6 +10442,94 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/MoneyInput Prefix 1`] = `
+<div
+  className="FormGroup"
+>
+  <label
+    className="InputLabel"
+    htmlFor="money-input-3"
+  >
+    Incentive amount
+  </label>
+  <div
+    className="FormGroup__helper-text"
+  >
+    Change the prefix
+  </div>
+  <input
+    className="MoneyInput form-control"
+    disabled={false}
+    id="money-input-3"
+    inputMode="decimal"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    placeholder="Please enter a number"
+    type="text"
+    value="USD$ 500"
+  />
+  <br />
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Value: 
+    500
+  </h2>
+</div>
+`;
+
+exports[`Storyshots Components/MoneyInput Step 1`] = `
+<div
+  className="FormGroup"
+>
+  <label
+    className="InputLabel"
+    htmlFor="money-input-2"
+  >
+    Incentive amount
+  </label>
+  <div
+    className="FormGroup__helper-text"
+  >
+    Use the Up Arrow (↑) or Down Arrow (↓) to adjust the incremental value change
+  </div>
+  <input
+    className="MoneyInput form-control"
+    disabled={false}
+    id="money-input-2"
+    inputMode="decimal"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    placeholder="Please enter a number"
+    type="text"
+    value="$ 200"
+  />
+  <br />
+  <h2
+    className="Heading Heading--xxl Heading--bold"
+    style={
+      Object {
+        "textAlign": undefined,
+      }
+    }
+  >
+    Value: 
+    200
+  </h2>
+</div>
+`;
+
 exports[`Storyshots Components/Pill Default 1`] = `
 <div>
   <h4

diff --git a/src/MoneyInput/MoneyInput.jsx b/src/MoneyInput/MoneyInput.jsx
@@ -34,6 +34,14 @@ MoneyInput.propTypes = {
     Placeholder if no value
   */
   placeholder: PropTypes.string,
+  /**
+    Include a prefix eg. £ or $
+  */
+  prefix: PropTypes.string,
+  /**
+    Incremental value change on arrow down and arrow up key press
+  */
+  step: PropTypes.number,
   /**
     Transform the raw value from the input before parsing. Needs to return string.
   */
@@ -51,6 +59,8 @@ MoneyInput.defaultProps = {
   intlConfig: { locale: 'en-US', currency: 'USD' },
   maxLength: undefined,
   placeholder: undefined,
+  prefix: '$ ',
+  step: undefined,
   transformRawValue: undefined,
   value: undefined,
   onValueChange: undefined,

diff --git a/src/MoneyInput/MoneyInput.mdx b/src/MoneyInput/MoneyInput.mdx
@@ -20,3 +20,15 @@ import * as ComponentStories from './MoneyInput.stories';
 ### Default
 
 <Canvas of={ComponentStories.Default} />
+
+### Step
+
+Adjust the `step` prop to adjust the incremental value change on arrow down and arrow up key press
+
+<Canvas of={ComponentStories.Step} />
+
+### Prefix
+
+Adjust the `prefix` prop. Default is `$ `
+
+<Canvas of={ComponentStories.Prefix} />
diff --git a/src/MoneyInput/MoneyInput.scss b/src/MoneyInput/MoneyInput.scss
@@ -2,10 +2,9 @@
 
 .MoneyInput {
   @include synth-font-type-30;
-  box-shadow: $input-box-shadow;
 
   &:focus {
-    border: 0.06rem solid $ux-blue-500;
+    border: 1px solid $ux-blue-500;
     box-shadow: $input-focus-box-shadow;
     color: $input-focus-color;
   }

diff --git a/src/MoneyInput/MoneyInput.stories.jsx b/src/MoneyInput/MoneyInput.stories.jsx
@@ -47,3 +47,78 @@ Default.args = {
   placeholder: 'Please enter a number',
   decimalsLimit: 2,
 };
+
+export const Step = (args) => {
+  const [value, setValue] = useState(200);
+
+  const handleOnValueChange = (val) => {
+    if (!val) {
+      setValue('');
+      return;
+    }
+    setValue(val);
+  };
+
+  return (
+    <>
+      <FormGroup
+        helperText="Use the Up Arrow (↑) or Down Arrow (↓) to adjust the incremental value change"
+        label="Incentive amount"
+        labelHtmlFor="money-input-2"
+      >
+        <MoneyInput
+          value={value}
+          onValueChange={handleOnValueChange}
+          {...args}
+        />
+        <br />
+        <Heading>Value: {value}</Heading>
+      </FormGroup>
+    </>
+  );
+};
+
+Step.args = {
+  decimalsLimit: 2,
+  id: 'money-input-2',
+  placeholder: 'Please enter a number',
+  step: 1,
+};
+
+export const Prefix = (args) => {
+  const [value, setValue] = useState(500);
+
+  const handleOnValueChange = (val) => {
+    if (!val) {
+      setValue('');
+      return;
+    }
+    setValue(val);
+  };
+
+  return (
+    <>
+      <FormGroup
+        helperText="Change the prefix"
+        label="Incentive amount"
+        labelHtmlFor="money-input-3"
+      >
+        <MoneyInput
+          value={value}
+          onValueChange={handleOnValueChange}
+          {...args}
+        />
+        <br />
+        <Heading>Value: {value}</Heading>
+      </FormGroup>
+    </>
+  );
+};
+
+Prefix.args = {
+  decimalsLimit: 2,
+  id: 'money-input-3',
+  placeholder: 'Please enter a number',
+  prefix: 'USD$ ',
+  step: 1,
+};