feat(docs): update popover page to use new layout (#688)

bigcommerce · Jan 21, 2022 · 0e4425d · 0e4425d
1 parent 21f929f
commit 0e4425d
Showing 1 changed file with 30 additions and 26 deletions.
diff --git a/packages/docs/pages/popover.tsx b/packages/docs/pages/popover.tsx
@@ -1,20 +1,27 @@
 import { Button, H1, Panel, Popover, Text } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, GuidelinesTable, List } from '../components';
 import { BoxPropTable, PaddingPropTable, PopoverPropTable } from '../PropTables';
 
 const PopoverPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <Panel>
-          <Text>
-            Popover is a component that floats around its anchor element. It's commonly used for building other
-            components such as dropdowns, tooltips, combobox, etc.
-          </Text>
+  return (
+    <>
+      <H1>Popover</H1>
+
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Popover</Code> is a component that floats around its anchor element. It's commonly used for
+          building other components such as dropdowns, tooltips, combobox, etc.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>Wanting to show additional content or information.</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <>
           <CodePreview>
             {/* jsx-to-string:start */}
             {function Example() {
@@ -39,30 +46,27 @@ const PopoverPage = () => {
             }}
             {/* jsx-to-string:end */}
           </CodePreview>
-        </Panel>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => (
+        </>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
         <PopoverPropTable
           inheritedProps={
             <>
               <BoxPropTable collapsible />
               <PaddingPropTable collapsible />
             </>
           }
+          renderPanel={false}
         />
-      ),
-    },
-  ];
+      </Panel>
 
-  return (
-    <>
-      <H1>Popover</H1>
-
-      <PageNavigation items={items} />
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          recommended={['Tie popup to click or hover events on elements.', 'Use concise textual phrases.']}
+          discouraged={['Always display the popover.']}
+        />
+      </Panel>
     </>
   );
 };