Add type="tel" to Input

LatitudeFinancialOSS · Mar 25, 2021 · ee81d22 · ee81d22
1 parent 7351f27
commit ee81d22
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/src/components/Input.test.js b/src/components/Input.test.js
@@ -85,6 +85,14 @@ describe("Input", () => {
     expect(input).toHaveAttribute("type", "email");
   });
 
+  it("type tel", () => {
+    render(<FormWithInput label="Mobile number" type="tel" />);
+
+    const input = screen.getByLabelText("Mobile number");
+
+    expect(input).toHaveAttribute("type", "tel");
+  });
+
   it("numeric variant", () => {
     render(<FormWithInput label="New credit limit" variant="numeric" />);
 

diff --git a/src/components/internal/InternalInput.js b/src/components/internal/InternalInput.js
@@ -5,7 +5,7 @@ import useBackground from "../../hooks/useBackground";
 import useResponsivePropsCSS from "../../hooks/useResponsivePropsCSS";
 import { mergeProps } from "../../utils/component";
 
-const TYPES = ["text", "password", "email"];
+const TYPES = ["text", "password", "email", "tel"];
 const VARIANTS = ["text", "numeric", "decimal"];
 const COLORS = ["grey.t05", "white"];
 

diff --git a/website/src/pages/components/input/index.js b/website/src/pages/components/input/index.js
@@ -86,6 +86,12 @@ function InputPage() {
                   ? "New credit limit"
                   : variant === "decimal"
                   ? "Amount"
+                  : type === "password"
+                  ? "Password"
+                  : type === "email"
+                  ? "Email"
+                  : type === "tel"
+                  ? "Mobile number"
                   : "Name",
             },
             {