From 817330fe4867b55b4a1245d8737e1c39949199d3 Mon Sep 17 00:00:00 2001
From: "GROUPEVSC\\julien_schiano" <jschianodicola@oui.sncf>
Date: Fri, 5 Feb 2021 09:01:09 +0100
Subject: [PATCH 1/3] new DatePicker and DateTimePicker with darkMode

---
 .../components/form/dateTimePicker/DatePicker.tsx    | 12 ++++++++++++
 .../form/dateTimePicker/DateTimePicker.tsx           | 12 ++++++++++++
 pages/components/inputtext/index.tsx                 |  9 +++++++++
 3 files changed, 33 insertions(+)
 create mode 100644 components/kit/components/form/dateTimePicker/DatePicker.tsx
 create mode 100644 components/kit/components/form/dateTimePicker/DateTimePicker.tsx

diff --git a/components/kit/components/form/dateTimePicker/DatePicker.tsx b/components/kit/components/form/dateTimePicker/DatePicker.tsx
new file mode 100644
index 0000000..0ab28fe
--- /dev/null
+++ b/components/kit/components/form/dateTimePicker/DatePicker.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DatePicker = () => {
+    return (
+        <label className="text-gray-700" htmlFor="date">
+            <input
+                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                type="date"
+            />
+        </label>
+    );
+};
diff --git a/components/kit/components/form/dateTimePicker/DateTimePicker.tsx b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
new file mode 100644
index 0000000..e755f0a
--- /dev/null
+++ b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export const DateTimePicker = () => {
+    return (
+        <label className="text-gray-700" htmlFor="datetime">
+            <input
+                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                type="datetime-local"
+            />
+        </label>
+    );
+};
diff --git a/pages/components/inputtext/index.tsx b/pages/components/inputtext/index.tsx
index dad54be..af6423d 100644
--- a/pages/components/inputtext/index.tsx
+++ b/pages/components/inputtext/index.tsx
@@ -6,6 +6,8 @@ import InputText from '../../../components/kit/components/form/inputtext/InputTe
 import InputArea from '../../../components/kit/components/form/inputtext/InputArea';
 import InputGroup from '../../../components/kit/components/form/inputtext/InputGroup';
 import { TimePicker } from '../../../components/kit/components/form/dateTimePicker/TimePicker';
+import { DatePicker } from '../../../components/kit/components/form/dateTimePicker/DatePicker';
+import { DateTimePicker } from '../../../components/kit/components/form/dateTimePicker/DateTimePicker';
 
 const InputTextPage: FC = () => {
     return (
@@ -103,6 +105,13 @@ const InputTextPage: FC = () => {
             <ComponentLayout title="Group" element={<InputGroup />} component={InputText} />
             <ComponentLayout title="textarea" element={<InputArea />} component={InputArea} />
             <ComponentLayout title="Time Picker" element={<TimePicker />} component={TimePicker} />
+            <ComponentLayout title="Date Picker" element={<DatePicker />} component={DatePicker} showSwitchMode />
+            <ComponentLayout
+                title="DateTime Picker"
+                element={<DateTimePicker />}
+                component={DateTimePicker}
+                showSwitchMode
+            />
         </AppLayout>
     );
 };

From 8a1ddd9c87599a2616d9df9d59cac71bdbc8eeab Mon Sep 17 00:00:00 2001
From: "GROUPEVSC\\julien_schiano" <jschianodicola@oui.sncf>
Date: Fri, 5 Feb 2021 09:04:11 +0100
Subject: [PATCH 2/3] new DatePicker and dateTimePicker with darkmode

---
 components/kit/components/form/dateTimePicker/DatePicker.tsx    | 2 +-
 .../kit/components/form/dateTimePicker/DateTimePicker.tsx       | 2 +-
 components/kit/components/form/dateTimePicker/TimePicker.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/kit/components/form/dateTimePicker/DatePicker.tsx b/components/kit/components/form/dateTimePicker/DatePicker.tsx
index 0ab28fe..8c95a21 100644
--- a/components/kit/components/form/dateTimePicker/DatePicker.tsx
+++ b/components/kit/components/form/dateTimePicker/DatePicker.tsx
@@ -4,7 +4,7 @@ export const DatePicker = () => {
     return (
         <label className="text-gray-700" htmlFor="date">
             <input
-                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                className="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
                 type="date"
             />
         </label>
diff --git a/components/kit/components/form/dateTimePicker/DateTimePicker.tsx b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
index e755f0a..9bbec7e 100644
--- a/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
+++ b/components/kit/components/form/dateTimePicker/DateTimePicker.tsx
@@ -4,7 +4,7 @@ export const DateTimePicker = () => {
     return (
         <label className="text-gray-700" htmlFor="datetime">
             <input
-                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
+                className="border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1 dark:bg-gray-800 dark:text-white dark:border-none"
                 type="datetime-local"
             />
         </label>
diff --git a/components/kit/components/form/dateTimePicker/TimePicker.tsx b/components/kit/components/form/dateTimePicker/TimePicker.tsx
index f2b34d7..0ba5d24 100644
--- a/components/kit/components/form/dateTimePicker/TimePicker.tsx
+++ b/components/kit/components/form/dateTimePicker/TimePicker.tsx
@@ -4,7 +4,7 @@ export const TimePicker = () => {
     return (
         <label className="text-gray-700" htmlFor="time">
             <input
-                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1"
+                className="appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent flex-1"
                 type="time"
             />
         </label>

From 4728156c45767f6081d77e37d9f7cedd0e61bb78 Mon Sep 17 00:00:00 2001
From: "GROUPEVSC\\julien_schiano" <jschianodicola@oui.sncf>
Date: Thu, 18 Feb 2021 18:47:20 +0100
Subject: [PATCH 3/3] update number of Input in Forms

---
 components/kit/components/form/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/kit/components/form/index.tsx b/components/kit/components/form/index.tsx
index 0d901f7..0f9b377 100644
--- a/components/kit/components/form/index.tsx
+++ b/components/kit/components/form/index.tsx
@@ -5,7 +5,7 @@ const Forms: FC = () => {
     const formSections = [
         {
             title: 'Inputs',
-            items: 10,
+            items: 14,
             img: 'images/sections/input.png',
             link: '/components/inputtext',
         },