From c3fc645b2e0de5179d91fa168ab59f1e13a94464 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Mon, 21 Dec 2020 18:17:28 +0100
Subject: [PATCH 1/9] Prettier: remove singleQuote statement

---
 .prettierrc | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.prettierrc b/.prettierrc
index 52d65b1cbb..fa38fabd37 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,4 @@
 {
-  "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all"
 }

From baf5dda694371403d71319a2ad030d5d4b7458a5 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Mon, 21 Dec 2020 18:17:59 +0100
Subject: [PATCH 2/9] Input: Add number input type

Refs: #211
---
 src/lib/components/input/Input.component.js   | 90 ++++++++++++++++---
 .../components/input/Input.component.style.js | 41 +++++++++
 2 files changed, 121 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/input/Input.component.js b/src/lib/components/input/Input.component.js
index 733603152f..3b2380a78b 100644
--- a/src/lib/components/input/Input.component.js
+++ b/src/lib/components/input/Input.component.js
@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import React, { useRef } from "react";
 import { DebounceInput } from "react-debounce-input";
 import Checkbox from "../checkbox/Checkbox.component";
 import Select from "../select/Select.component";
@@ -8,12 +8,12 @@ import {
   InputContainer,
   LabelStyle,
   InputErrorMessage,
-  InputWrapper
+  InputWrapper,
 } from "./Input.component.style";
 
 export type Item = {
   label: string,
-  value: string | number
+  value: string | number,
 };
 
 type Items = Array<Item>;
@@ -26,8 +26,10 @@ type Props = {
   error?: string,
   id?: string,
   checked?: boolean,
-  onChange: () => void,
-  options?: Items
+  onChange: (e?: any) => void,
+  options?: Items,
+  min?: string,
+  max?: string,
 };
 
 const InputRenderer = ({
@@ -37,8 +39,48 @@ const InputRenderer = ({
   checked,
   onChange,
   options = [],
+  min,
+  max,
   ...rest
 }) => {
+  const inputEl = useRef(null);
+
+  const handleNumberClick = (e) => {
+    /*
+     ** Since react is using Synthetic event we have to do the following to be
+     ** able to programmatically dispatch the onChange event from the input
+     */
+    const valuePropDescriptor = Object.getOwnPropertyDescriptor(
+      window.HTMLInputElement.prototype,
+      "value",
+    );
+    if (valuePropDescriptor && inputEl.current) {
+      const nativeInputValueSetter = valuePropDescriptor.set;
+      if (nativeInputValueSetter) {
+        if (e.target.dataset.core === "up")
+          nativeInputValueSetter.call(
+            inputEl.current,
+            max
+              ? max && parseInt(value) + 1 <= parseInt(max)
+                ? parseInt(value) + 1
+                : parseInt(value)
+              : parseInt(value) + 1,
+          );
+        else
+          nativeInputValueSetter.call(
+            inputEl.current,
+            min
+              ? min && parseInt(value) - 1 >= parseInt(min)
+                ? parseInt(value) - 1
+                : parseInt(value)
+              : parseInt(value) - 1,
+          );
+      }
+      const event = new Event("input", { bubbles: true });
+      inputEl.current.dispatchEvent(event);
+    }
+  };
+
   const input = {
     select: (
       <Select
@@ -59,6 +101,33 @@ const InputRenderer = ({
       />
     ),
     textarea: <TextArea id={id} value={value} onChange={onChange} {...rest} />,
+    number: (
+      <div className="sc-number-input-wrapper">
+        <input
+          className="sc-input-type sc-number-input"
+          type="number"
+          id={id}
+          value={value}
+          onChange={onChange}
+          ref={inputEl}
+          min={min}
+          max={max}
+          {...rest}
+        />
+        <div className="carets-wrapper">
+          <i
+            className="fas fa-caret-up"
+            data-core="up"
+            onClick={handleNumberClick}
+          ></i>
+          <i
+            className="fas fa-caret-down"
+            data-core="down"
+            onClick={handleNumberClick}
+          ></i>
+        </div>
+      </div>
+    ),
     text: (
       <DebounceInput
         className="sc-input-type"
@@ -70,22 +139,23 @@ const InputRenderer = ({
         autoComplete="off"
         {...rest}
       />
-    )
+    ),
   };
 
-  return input[type] || input.text;
+  if (type) return input[type];
+  else return input.text;
 };
 
-const Input = ({ label, id, error, ...rest }: Props) => {
+const Input = ({ label, id, error, type, ...rest }: Props) => {
   return (
-    <InputContainer className="sc-input" error={error}>
+    <InputContainer className="sc-input" error={error} type={type}>
       {label && (
         <LabelStyle htmlFor={id} className="sc-input-label">
           {label}
         </LabelStyle>
       )}
       <InputWrapper className="sc-input-wrapper">
-        <InputRenderer id={id} {...rest} />
+        <InputRenderer id={id} type={type} {...rest} />
         {error && (
           <InputErrorMessage className="sc-input-error">
             {error}
diff --git a/src/lib/components/input/Input.component.style.js b/src/lib/components/input/Input.component.style.js
index acd952996b..a8f69d8c91 100644
--- a/src/lib/components/input/Input.component.style.js
+++ b/src/lib/components/input/Input.component.style.js
@@ -34,6 +34,47 @@ export const InputContainer = styled.div`
     outline: none;
   }
 
+  input[type="number"] {
+    /* Adding a padding to make room for the custom absolute postionned arrows */
+    padding-right: 20px;
+    -moz-appearance: textfield; /*For FireFox*/
+
+    &::-webkit-inner-spin-button {
+      /*For Webkits like Chrome and Safari*/
+      -webkit-appearance: none;
+      margin: 0;
+    }
+  }
+
+  ${(props) => {
+    if (props.type === "number")
+      return css`
+        .sc-input-wrapper {
+          align-items: center;
+          position: relative;
+          .carets-wrapper {
+            display: flex;
+            flex-direction: column;
+            ${(props) => {
+              const { textSecondary } = getTheme(props);
+              return css`
+                color: ${textSecondary};
+              `;
+            }};
+            position: absolute;
+            right: ${defaultTheme.padding.smaller};
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            i {
+              font-size: 0.8em;
+              cursor: pointer;
+            }
+          }
+        }
+      `;
+  }}
+
   ${(props) => {
     if (props.error) {
       return css`

From a8fe2471b2627ae2b8656e6587c7f5039d2a843f Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Mon, 21 Dec 2020 18:18:30 +0100
Subject: [PATCH 3/9] Input: Add number input to existing Input story

---
 stories/input.js | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/stories/input.js b/stories/input.js
index 4643c06809..efb0fcb84a 100644
--- a/stories/input.js
+++ b/stories/input.js
@@ -1,5 +1,5 @@
 //@flow
-import React from "react";
+import React, { useState } from "react";
 import { storiesOf } from "@storybook/react";
 import Input from "../src/lib/components/input/Input.component";
 import { action } from "@storybook/addon-actions";
@@ -9,7 +9,7 @@ import { Wrapper, Title } from "./common";
 const options = Array.from(new Array(1000), (_, index) => ({
   label: `Item ${index}`,
   value: index,
-  "data-cy": `Item_${index}`
+  "data-cy": `Item_${index}`,
 }));
 
 const ExampleInput = () => {
@@ -19,6 +19,8 @@ const ExampleInput = () => {
     }
   `;
 
+  const [numberValue, setNumberValue] = useState(1);
+
   return (
     <Wrapper>
       <Title>Input without label</Title>
@@ -53,7 +55,6 @@ const ExampleInput = () => {
           onChange={action("onChange")}
         />
       </CustomInput>
-
       <Title>Checkbox Input</Title>
       <Input
         id="id4"
@@ -103,6 +104,17 @@ const ExampleInput = () => {
         cols={50}
         rows={5}
       />
+      <Title>Number Input</Title>
+      <Input
+        id="id8"
+        value={numberValue}
+        onChange={(e) => {
+          if (e && e.target) setNumberValue(e.target.value);
+        }}
+        type="number"
+        min="0"
+        max="100"
+      />
     </Wrapper>
   );
 };

From 483a8ea2f4cf7b4126f7ba89b41af564e11354d2 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Mon, 21 Dec 2020 18:18:49 +0100
Subject: [PATCH 4/9] Input: Add tests snapshots for number input

---
 .../Input.component.test.js.snap              | 64 ++++++++++++++++---
 .../SearchInput.component.test.js.snap        | 12 ++--
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/input/__snapshots__/Input.component.test.js.snap b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
index e8b56c41ed..6f74d3d788 100644
--- a/src/lib/components/input/__snapshots__/Input.component.test.js.snap
+++ b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
@@ -10,7 +10,7 @@ exports[`Storyshots Input Default 1`] = `
     Input without label
   </h3>
   <div
-    className="sc-ifAKCX hULCSa sc-input"
+    className="sc-ifAKCX kwGiKK sc-input"
   >
     <div
       className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -34,7 +34,7 @@ exports[`Storyshots Input Default 1`] = `
     Input with label
   </h3>
   <div
-    className="sc-ifAKCX hULCSa sc-input"
+    className="sc-ifAKCX kwGiKK sc-input"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -63,7 +63,7 @@ exports[`Storyshots Input Default 1`] = `
     Input with error
   </h3>
   <div
-    className="sc-ifAKCX exwQMG sc-input"
+    className="sc-ifAKCX iDfclL sc-input"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -100,7 +100,7 @@ exports[`Storyshots Input Default 1`] = `
     className="sc-gqjmRU czbDPR"
   >
     <div
-      className="sc-ifAKCX exwQMG sc-input"
+      className="sc-ifAKCX iDfclL sc-input"
     >
       <label
         className="sc-EHOje glQODq sc-input-label"
@@ -135,7 +135,8 @@ exports[`Storyshots Input Default 1`] = `
     Checkbox Input
   </h3>
   <div
-    className="sc-ifAKCX hULCSa sc-input"
+    className="sc-ifAKCX kwGiKK sc-input"
+    type="checkbox"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -169,7 +170,8 @@ exports[`Storyshots Input Default 1`] = `
     Checkbox Input with error
   </h3>
   <div
-    className="sc-ifAKCX exwQMG sc-input"
+    className="sc-ifAKCX iDfclL sc-input"
+    type="checkbox"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -208,7 +210,8 @@ exports[`Storyshots Input Default 1`] = `
     Select Input
   </h3>
   <div
-    className="sc-ifAKCX hULCSa sc-input"
+    className="sc-ifAKCX kwGiKK sc-input"
+    type="select"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -341,7 +344,8 @@ exports[`Storyshots Input Default 1`] = `
     Textarea Input
   </h3>
   <div
-    className="sc-ifAKCX hULCSa sc-input"
+    className="sc-ifAKCX kwGiKK sc-input"
+    type="textarea"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -369,7 +373,8 @@ exports[`Storyshots Input Default 1`] = `
     Textarea Input with error
   </h3>
   <div
-    className="sc-ifAKCX exwQMG sc-input"
+    className="sc-ifAKCX iDfclL sc-input"
+    type="textarea"
   >
     <label
       className="sc-EHOje glQODq sc-input-label"
@@ -396,5 +401,46 @@ exports[`Storyshots Input Default 1`] = `
       </span>
     </div>
   </div>
+  <h3
+    className="sc-dnqmqq lgiIQQ"
+  >
+    Number Input
+  </h3>
+  <div
+    className="sc-ifAKCX iqCCSp sc-input"
+    type="number"
+  >
+    <div
+      className="sc-gzVnrw kvhoeX sc-input-wrapper"
+    >
+      <div
+        className="sc-number-input-wrapper"
+      >
+        <input
+          className="sc-input-type sc-number-input"
+          id="id8"
+          max="100"
+          min="0"
+          onChange={[Function]}
+          type="number"
+          value={1}
+        />
+        <div
+          className="carets-wrapper"
+        >
+          <i
+            className="fas fa-caret-up"
+            data-core="up"
+            onClick={[Function]}
+          />
+          <i
+            className="fas fa-caret-down"
+            data-core="down"
+            onClick={[Function]}
+          />
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap b/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
index 769175d251..97738cc821 100644
--- a/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
+++ b/src/lib/components/searchinput/__snapshots__/SearchInput.component.test.js.snap
@@ -20,7 +20,8 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs gpFhwS sc-searchinput"
     >
       <div
-        className="sc-ifAKCX hULCSa sc-input"
+        className="sc-ifAKCX kwGiKK sc-input"
+        type="text"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -74,7 +75,8 @@ exports[`Storyshots SearchInput Default 1`] = `
       data-cy="carlito_searchinput"
     >
       <div
-        className="sc-ifAKCX hULCSa sc-input"
+        className="sc-ifAKCX kwGiKK sc-input"
+        type="text"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -126,7 +128,8 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs cAmcWy sc-searchinput"
     >
       <div
-        className="sc-ifAKCX hULCSa sc-input"
+        className="sc-ifAKCX kwGiKK sc-input"
+        type="text"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"
@@ -179,7 +182,8 @@ exports[`Storyshots SearchInput Default 1`] = `
       className="sc-htoDjs cAmcWy sc-searchinput"
     >
       <div
-        className="sc-ifAKCX hULCSa sc-input"
+        className="sc-ifAKCX kwGiKK sc-input"
+        type="text"
       >
         <div
           className="sc-gzVnrw kvhoeX sc-input-wrapper"

From 47f7d84d7bbc72e925120878e5b8866c8d1550b1 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Wed, 6 Jan 2021 17:12:14 +0100
Subject: [PATCH 5/9] Input: Update wrapper positionning

Moved relative positioning to number input wrapper instead of global input wrapper. The initial positionning was causing caret displacement when an error was specified.

Refs: #211
---
 src/lib/components/input/Input.component.style.js |  4 +++-
 stories/input.js                                  | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/input/Input.component.style.js b/src/lib/components/input/Input.component.style.js
index a8f69d8c91..85f411a027 100644
--- a/src/lib/components/input/Input.component.style.js
+++ b/src/lib/components/input/Input.component.style.js
@@ -50,8 +50,10 @@ export const InputContainer = styled.div`
     if (props.type === "number")
       return css`
         .sc-input-wrapper {
+          .sc-number-input-wrapper {
+            position: relative;
+          }
           align-items: center;
-          position: relative;
           .carets-wrapper {
             display: flex;
             flex-direction: column;
diff --git a/stories/input.js b/stories/input.js
index efb0fcb84a..3ed8843b20 100644
--- a/stories/input.js
+++ b/stories/input.js
@@ -115,6 +115,18 @@ const ExampleInput = () => {
         min="0"
         max="100"
       />
+      <Title>Number Input with error</Title>
+      <Input
+        id="id9"
+        value={numberValue}
+        onChange={(e) => {
+          if (e && e.target) setNumberValue(e.target.value);
+        }}
+        type="number"
+        min="0"
+        max="100"
+        error="error"
+      />
     </Wrapper>
   );
 };

From 008d8ab7bc284ec6a200accaf7df3d7ca1045923 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Wed, 6 Jan 2021 17:33:05 +0100
Subject: [PATCH 6/9] Input: Update test after input story change

---
 .../Input.component.test.js.snap              | 48 ++++++++++++++++++-
 1 file changed, 47 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/input/__snapshots__/Input.component.test.js.snap b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
index 6f74d3d788..ed737dba71 100644
--- a/src/lib/components/input/__snapshots__/Input.component.test.js.snap
+++ b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
@@ -407,7 +407,7 @@ exports[`Storyshots Input Default 1`] = `
     Number Input
   </h3>
   <div
-    className="sc-ifAKCX iqCCSp sc-input"
+    className="sc-ifAKCX sKzsc sc-input"
     type="number"
   >
     <div
@@ -442,5 +442,51 @@ exports[`Storyshots Input Default 1`] = `
       </div>
     </div>
   </div>
+  <h3
+    className="sc-dnqmqq lgiIQQ"
+  >
+    Number Input with error
+  </h3>
+  <div
+    className="sc-ifAKCX kqgMrq sc-input"
+    type="number"
+  >
+    <div
+      className="sc-gzVnrw kvhoeX sc-input-wrapper"
+    >
+      <div
+        className="sc-number-input-wrapper"
+      >
+        <input
+          className="sc-input-type sc-number-input"
+          id="id9"
+          max="100"
+          min="0"
+          onChange={[Function]}
+          type="number"
+          value={1}
+        />
+        <div
+          className="carets-wrapper"
+        >
+          <i
+            className="fas fa-caret-up"
+            data-core="up"
+            onClick={[Function]}
+          />
+          <i
+            className="fas fa-caret-down"
+            data-core="down"
+            onClick={[Function]}
+          />
+        </div>
+      </div>
+      <span
+        className="sc-bZQynM iZyYwj sc-input-error"
+      >
+        error
+      </span>
+    </div>
+  </div>
 </div>
 `;

From b5063d7486804620b3f1e56bf573b27effe9732a Mon Sep 17 00:00:00 2001
From: YanJin <yanjin.cheng@scality.com>
Date: Thu, 7 Jan 2021 14:15:14 +0100
Subject: [PATCH 7/9] input: Improve the input number story with error

Refs: #211
---
 stories/input.js | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/stories/input.js b/stories/input.js
index 3ed8843b20..bc10f44dfa 100644
--- a/stories/input.js
+++ b/stories/input.js
@@ -104,7 +104,7 @@ const ExampleInput = () => {
         cols={50}
         rows={5}
       />
-      <Title>Number Input</Title>
+      <Title>Number Input (Max 100)</Title>
       <Input
         id="id8"
         value={numberValue}
@@ -114,18 +114,11 @@ const ExampleInput = () => {
         type="number"
         min="0"
         max="100"
-      />
-      <Title>Number Input with error</Title>
-      <Input
-        id="id9"
-        value={numberValue}
-        onChange={(e) => {
-          if (e && e.target) setNumberValue(e.target.value);
-        }}
-        type="number"
-        min="0"
-        max="100"
-        error="error"
+        error={
+          numberValue > 100
+            ? "The input number must be less than or equal to 100"
+            : ""
+        }
       />
     </Wrapper>
   );

From a03a1a323e2b09bb5f5ef742f5c516f34d487584 Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Fri, 8 Jan 2021 15:00:34 +0100
Subject: [PATCH 8/9] Input: Change input wrapper align to baseline when input
 is a number

---
 src/lib/components/input/Input.component.style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/input/Input.component.style.js b/src/lib/components/input/Input.component.style.js
index 85f411a027..a59ecfabc8 100644
--- a/src/lib/components/input/Input.component.style.js
+++ b/src/lib/components/input/Input.component.style.js
@@ -53,7 +53,7 @@ export const InputContainer = styled.div`
           .sc-number-input-wrapper {
             position: relative;
           }
-          align-items: center;
+          align-items: baseline;
           .carets-wrapper {
             display: flex;
             flex-direction: column;

From 3cac554f91dd0b7f909805e26951fb00f72f071d Mon Sep 17 00:00:00 2001
From: Alexis Le Dinh <alexisledinh@gmail.com>
Date: Fri, 8 Jan 2021 15:01:40 +0100
Subject: [PATCH 9/9] Input: update test after flexbox CSS change

---
 .../Input.component.test.js.snap              | 51 ++-----------------
 1 file changed, 3 insertions(+), 48 deletions(-)

diff --git a/src/lib/components/input/__snapshots__/Input.component.test.js.snap b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
index ed737dba71..fdb992bbae 100644
--- a/src/lib/components/input/__snapshots__/Input.component.test.js.snap
+++ b/src/lib/components/input/__snapshots__/Input.component.test.js.snap
@@ -404,10 +404,10 @@ exports[`Storyshots Input Default 1`] = `
   <h3
     className="sc-dnqmqq lgiIQQ"
   >
-    Number Input
+    Number Input (Max 100)
   </h3>
   <div
-    className="sc-ifAKCX sKzsc sc-input"
+    className="sc-ifAKCX kCKxBE sc-input"
     type="number"
   >
     <div
@@ -440,52 +440,7 @@ exports[`Storyshots Input Default 1`] = `
           />
         </div>
       </div>
-    </div>
-  </div>
-  <h3
-    className="sc-dnqmqq lgiIQQ"
-  >
-    Number Input with error
-  </h3>
-  <div
-    className="sc-ifAKCX kqgMrq sc-input"
-    type="number"
-  >
-    <div
-      className="sc-gzVnrw kvhoeX sc-input-wrapper"
-    >
-      <div
-        className="sc-number-input-wrapper"
-      >
-        <input
-          className="sc-input-type sc-number-input"
-          id="id9"
-          max="100"
-          min="0"
-          onChange={[Function]}
-          type="number"
-          value={1}
-        />
-        <div
-          className="carets-wrapper"
-        >
-          <i
-            className="fas fa-caret-up"
-            data-core="up"
-            onClick={[Function]}
-          />
-          <i
-            className="fas fa-caret-down"
-            data-core="down"
-            onClick={[Function]}
-          />
-        </div>
-      </div>
-      <span
-        className="sc-bZQynM iZyYwj sc-input-error"
-      >
-        error
-      </span>
+      
     </div>
   </div>
 </div>