Add variant="decimal" to Input

LatitudeFinancialOSS · Oct 21, 2020 · 41c834c · 41c834c
1 parent 2d57cc7
commit 41c834c
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/src/components/Input.js b/src/components/Input.js
@@ -6,7 +6,7 @@ import { mergeProps } from "../utils/component";
 import Field from "./internal/Field";
 import InternalInput from "./internal/InternalInput";
 
-const { TYPES, VARIANTS, COLORS, NUMERIC_REGEX } = InternalInput;
+const { TYPES, VARIANTS, COLORS, NUMERIC_REGEX, DECIMAL_REGEX } = InternalInput;
 
 const DEFAULT_PROPS = {
   type: InternalInput.DEFAULT_PROPS.type,
@@ -24,6 +24,10 @@ const DEFAULT_PROPS = {
       return "Only 0-9 are allowed";
     }
 
+    if (variant === "decimal" && DECIMAL_REGEX.test(value) === false) {
+      return "Invalid";
+    }
+
     return null;
   },
 };

diff --git a/src/components/Input.test.js b/src/components/Input.test.js
@@ -87,6 +87,16 @@ describe("Input", () => {
     expect(input).toHaveAttribute("pattern", "[0-9]*");
   });
 
+  it("decimal variant", () => {
+    render(<FormWithInput label="Amount" variant="decimal" />);
+
+    const input = screen.getByLabelText("Amount");
+
+    expect(input).toHaveAttribute("type", "text");
+    expect(input).toHaveAttribute("inputmode", "decimal");
+    expect(input).not.toHaveAttribute("pattern");
+  });
+
   it("with numericPrefix", () => {
     render(
       <FormWithInput

diff --git a/src/components/internal/InternalInput.js b/src/components/internal/InternalInput.js
@@ -6,10 +6,11 @@ import useResponsivePropsCSS from "../../hooks/useResponsivePropsCSS";
 import { mergeProps } from "../../utils/component";
 
 const TYPES = ["text", "password"];
-const VARIANTS = ["text", "numeric"];
+const VARIANTS = ["text", "numeric", "decimal"];
 const COLORS = ["grey.t05", "white"];
 
 const NUMERIC_REGEX = /^\d*$/;
+const DECIMAL_REGEX = /^\d*(\.\d{2})?$/;
 
 const DEFAULT_PROPS = {
   type: "text",
@@ -26,6 +27,7 @@ InternalInput.TYPES = TYPES;
 InternalInput.VARIANTS = VARIANTS;
 InternalInput.COLORS = COLORS;
 InternalInput.NUMERIC_REGEX = NUMERIC_REGEX;
+InternalInput.DECIMAL_REGEX = DECIMAL_REGEX;
 InternalInput.DEFAULT_PROPS = DEFAULT_PROPS;
 
 function InternalInput(props) {
@@ -93,6 +95,18 @@ function InternalInput(props) {
     },
     [pasteAllowed]
   );
+  const variantProps =
+    variant === "numeric"
+      ? {
+          // See: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers
+          inputMode: "numeric",
+          pattern: "[0-9]*",
+        }
+      : variant === "decimal"
+      ? {
+          inputMode: "decimal",
+        }
+      : {};
 
   return (
     <div
@@ -110,11 +124,7 @@ function InternalInput(props) {
         data-parent-name={parentName}
         placeholder={placeholder}
         type={type}
-        {...(variant === "numeric" && {
-          // See: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers
-          inputMode: "numeric",
-          pattern: "[0-9]*",
-        })}
+        {...variantProps}
         maxLength={maxLength}
         disabled={disabled}
         onPaste={onPaste}