feat: add more inputs to sandbox

qawolf · Jul 9, 2020 · 2cd126f · 2cd126f
1 parent 21da52d
commit 2cd126f
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 0 deletions.
diff --git a/packages/sandbox/src/App.js b/packages/sandbox/src/App.js
@@ -17,6 +17,7 @@ import LogIn from './pages/LogIn';
 import NestedDataAttributes from './pages/NestedDataAttributes';
 import RadioInputs from './pages/RadioInputs';
 import Selects from './pages/Selects';
+import SpecialInputs from './pages/SpecialInputs';
 import TextInputs from './pages/TextInputs';
 import TimePickers from './pages/TimePickers';
 // CSS
@@ -58,6 +59,9 @@ function Navigation() {
       <li>
         <Link to="/selects">Selects</Link>
       </li>
+      <li>
+        <Link to="/special-inputs">Special inputs</Link>
+      </li>
       <li>
         <Link to="/text-inputs">Text inputs</Link>
       </li>
@@ -87,6 +91,7 @@ function App() {
         />
         <Route component={RadioInputs} path="/radio-inputs" />
         <Route component={Selects} path="/selects" />
+        <Route component={SpecialInputs} path="/special-inputs" />
         <Route component={TextInputs} path="/text-inputs" />
         <Route component={TimePickers} path="/time-pickers" />
         <Redirect to="/" />

diff --git a/packages/sandbox/src/pages/DatePickers/HtmlDatePickers.js b/packages/sandbox/src/pages/DatePickers/HtmlDatePickers.js
@@ -4,7 +4,12 @@ function HtmlDatePickers() {
   return (
     <div className="container">
       <h3>Native HTML</h3>
+      <h4>Date</h4>
       <input data-qa="html-date-picker" type="date" />
+      <h4>Week</h4>
+      <input data-qa="html-week-picker" type="week" />
+      <h4>Month</h4>
+      <input data-qa="html-month-picker" type="month" />
     </div>
   );
 }

diff --git a/packages/sandbox/src/pages/SpecialInputs/index.js b/packages/sandbox/src/pages/SpecialInputs/index.js
@@ -0,0 +1,15 @@
+import React from "react";
+
+function SpecialInputs() {
+  return (
+    <div className="container">
+      <h3>Native HTML</h3>
+      <h4>Color</h4>
+      <input data-qa="html-color-picker" type="color" />
+      <h4>Range</h4>
+      <input data-qa="html-range-picker" type="range" min="0" max="10" />
+    </div>
+  );
+}
+
+export default SpecialInputs;
diff --git a/packages/sandbox/src/pages/TextInputs/HtmlTextInputs.js b/packages/sandbox/src/pages/TextInputs/HtmlTextInputs.js
@@ -15,6 +15,18 @@ function HtmlTextInputs() {
       />
       <br />
       <br />
+      <input data-qa="html-search-input" placeholder="Search input" type="search" />
+      <br />
+      <br />
+      <input data-qa="html-email-input" placeholder="Email input" type="email" />
+      <br />
+      <br />
+      <input data-qa="html-url-input" placeholder="URL input" type="url" />
+      <br />
+      <br />
+      <input data-qa="html-tel-input" placeholder="Telephone input" type="tel" />
+      <br />
+      <br />
       <input
         data-qa="html-password-input"
         placeholder="Password input"

diff --git a/packages/sandbox/src/pages/TimePickers/HtmlTimePickers.js b/packages/sandbox/src/pages/TimePickers/HtmlTimePickers.js
@@ -4,7 +4,10 @@ function HtmlTimePickers() {
   return (
     <div className="container">
       <h3>Native HTML</h3>
+      <h4>Time</h4>
       <input data-qa="html-time-picker" type="time" />
+      <h4>Local date and time</h4>
+      <input data-qa="html-datetime-local-picker" type="datetime-local" />
     </div>
   );
 }