From ee81d225bc1e6c26252f6997053684cb876f551b Mon Sep 17 00:00:00 2001
From: Misha Moroshko <michael.moroshko@gmail.com>
Date: Thu, 25 Mar 2021 14:20:55 +1100
Subject: [PATCH] Add type="tel" to Input

---
 src/components/Input.test.js                | 8 ++++++++
 src/components/internal/InternalInput.js    | 2 +-
 website/src/pages/components/input/index.js | 6 ++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/Input.test.js b/src/components/Input.test.js
index e218b208..fd1f3c9d 100644
--- 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
index 6507223a..debe05d8 100644
--- 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
index e90a2f65..4f8b01b5 100644
--- 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",
             },
             {