From 2ecbe9d9757e78740600965a260deefa46bdd02e Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 12 Oct 2021 10:36:31 -0500
Subject: [PATCH] feat(docs): update timepicker page to use new layout

---
 packages/docs/pages/timepicker.tsx | 68 +++++++++++++++---------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/packages/docs/pages/timepicker.tsx b/packages/docs/pages/timepicker.tsx
index af1245ad8..252f52bff 100644
--- a/packages/docs/pages/timepicker.tsx
+++ b/packages/docs/pages/timepicker.tsx
@@ -1,47 +1,47 @@
 import { Form, FormGroup, H1, Panel, Text, Timepicker } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, List } from '../components';
 import { TimepickerPropTable } from '../PropTables';
 
 const TimepickerPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <Panel>
-          <Text>Timepicker is used to select a time in specific hours and minutes.</Text>
-          <CodePreview>
-            {/* jsx-to-string:start */}
-            {function Example() {
-              const [time, setTime] = useState<string>();
-
-              return (
-                <Form>
-                  <FormGroup>
-                    <Timepicker locale="en-US" value={time} onTimeChange={(value) => setTime(value)} />
-                  </FormGroup>
-                </Form>
-              );
-            }}
-            {/* jsx-to-string:end */}
-          </CodePreview>
-        </Panel>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <TimepickerPropTable />,
-    },
-  ];
-
   return (
     <>
       <H1>Timepicker</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Timepicker</Code>s allow users to choose a time value from the provided options. They can be
+          used for a wide range of scenarios like specifiying promotion start/end time, store location working hours and
+          so on.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>When there is a need to pick a time from predefined time options.</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <CodePreview>
+          {/* jsx-to-string:start */}
+          {function Example() {
+            const [time, setTime] = useState<string>();
+
+            return (
+              <Form>
+                <FormGroup>
+                  <Timepicker locale="en-US" value={time} onTimeChange={(value) => setTime(value)} />
+                </FormGroup>
+              </Form>
+            );
+          }}
+          {/* jsx-to-string:end */}
+        </CodePreview>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <TimepickerPropTable renderPanel={false} />
+      </Panel>
     </>
   );
 };