From ad0867eaa762655a8fc4d8a822782e66a6f22e84 Mon Sep 17 00:00:00 2001
From: Alison Joseph <alisonejoseph@gmail.com>
Date: Mon, 19 Oct 2020 15:13:53 -0500
Subject: [PATCH] fix: add time picker to website

---
 src/pages/components/date-picker/code.mdx  | 51 ++++++++++++++++++----
 src/pages/components/date-picker/usage.mdx | 51 ++++++++++++++++++----
 2 files changed, 86 insertions(+), 16 deletions(-)

diff --git a/src/pages/components/date-picker/code.mdx b/src/pages/components/date-picker/code.mdx
index 72cf9e104fa..3ef8429f191 100755
--- a/src/pages/components/date-picker/code.mdx
+++ b/src/pages/components/date-picker/code.mdx
@@ -64,9 +64,16 @@ usage documentation, see the Storybooks for each framework below.
       id: 'range-calendar',
       label: 'Range with calendar',
     },
+    ,
+    {
+      id: 'time-picker',
+      label: 'Time picker',
+    },
   ]}>
-  <ComponentVariant id="default-datepicker" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="default-datepicker"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -86,8 +93,10 @@ usage documentation, see the Storybooks for each framework below.
       />
     </DatePicker>
   `}</ComponentVariant>
-  <ComponentVariant id="single-calendar" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="single-calendar"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -107,8 +116,10 @@ usage documentation, see the Storybooks for each framework below.
       />
     </DatePicker>
   `}</ComponentVariant>
-  <ComponentVariant id="range-calendar" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="range-calendar"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -134,5 +145,29 @@ usage documentation, see the Storybooks for each framework below.
       />
     </DatePicker>
   `}</ComponentVariant>
-
-  </ComponentDemo>
+  <ComponentVariant
+    id="time-picker"
+    knobs={{
+      TimePicker: ['light'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/timepicker--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+    }}>{`
+    <TimePicker id="time-picker">
+      <TimePickerSelect id="time-picker-select-1">
+        <SelectItem value="AM" text="AM" />
+        <SelectItem value="PM" text="PM" />
+      </TimePickerSelect>
+      <TimePickerSelect id="time-picker-select-2" >
+        <SelectItem value="Time zone 1" text="Time zone 1" />
+        <SelectItem value="Time zone 2" text="Time zone 2" />
+      </TimePickerSelect>
+    </TimePicker>
+  `}</ComponentVariant>
+</ComponentDemo>
diff --git a/src/pages/components/date-picker/usage.mdx b/src/pages/components/date-picker/usage.mdx
index 55f55586edc..c02100fa3cc 100755
--- a/src/pages/components/date-picker/usage.mdx
+++ b/src/pages/components/date-picker/usage.mdx
@@ -64,9 +64,16 @@ for scheduling tasks.
       id: 'range-calendar',
       label: 'Range with calendar',
     },
+    ,
+    {
+      id: 'time-picker',
+      label: 'Time picker',
+    },
   ]}>
-  <ComponentVariant id="default-datepicker" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="default-datepicker"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -86,8 +93,10 @@ for scheduling tasks.
       />
     </DatePicker>
   `}</ComponentVariant>
-  <ComponentVariant id="single-calendar" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="single-calendar"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -107,8 +116,10 @@ for scheduling tasks.
       />
     </DatePicker>
   `}</ComponentVariant>
-  <ComponentVariant id="range-calendar" knobs={{
-      DatePicker: ['light']
+  <ComponentVariant
+    id="range-calendar"
+    knobs={{
+      DatePicker: ['light'],
     }}
     links={{
       React:
@@ -134,8 +145,32 @@ for scheduling tasks.
       />
     </DatePicker>
   `}</ComponentVariant>
-
-  </ComponentDemo>
+  <ComponentVariant
+    id="time-picker"
+    knobs={{
+      TimePicker: ['light'],
+    }}
+    links={{
+      React:
+        'https://react.carbondesignsystem.com/?path=/story/timepicker--default',
+      Angular:
+        'https://angular.carbondesignsystem.com/?path=/story/components-time-picker--simple',
+      Vue:
+        'http://vue.carbondesignsystem.com/?path=/storycomponents-cvdatepicker--default',
+      Vanilla: 'https://the-carbon-components.netlify.com/?nav=date-picker',
+    }}>{`
+    <TimePicker id="time-picker">
+      <TimePickerSelect id="time-picker-select-1">
+        <SelectItem value="AM" text="AM" />
+        <SelectItem value="PM" text="PM" />
+      </TimePickerSelect>
+      <TimePickerSelect id="time-picker-select-2" >
+        <SelectItem value="Time zone 1" text="Time zone 1" />
+        <SelectItem value="Time zone 2" text="Time zone 2" />
+      </TimePickerSelect>
+    </TimePicker>
+  `}</ComponentVariant>
+</ComponentDemo>
 
 ## Formatting