From a4c7f4ce5804cf67db671c332f7556cd2973c21a Mon Sep 17 00:00:00 2001
From: Maria Navarro <maria.navarro@bigcommerce.com>
Date: Tue, 8 Feb 2022 13:52:16 -0600
Subject: [PATCH] feat(docs): update button page to use new layout

---
 .../components/CodePreview/CodePreview.tsx    |   4 -
 packages/docs/pages/button.tsx                | 340 +++++++++++-------
 2 files changed, 208 insertions(+), 136 deletions(-)

diff --git a/packages/docs/components/CodePreview/CodePreview.tsx b/packages/docs/components/CodePreview/CodePreview.tsx
index 748fea409..1b7f69ee6 100644
--- a/packages/docs/components/CodePreview/CodePreview.tsx
+++ b/packages/docs/components/CodePreview/CodePreview.tsx
@@ -89,7 +89,3 @@ export const CodePreview: React.FC<CodePreviewProps> = (props) => {
     </BigDesign.Box>
   );
 };
-
-CodePreview.defaultProps = {
-  scope: defaultScope,
-};
diff --git a/packages/docs/pages/button.tsx b/packages/docs/pages/button.tsx
index 1c6c1e229..ab69dd8c1 100644
--- a/packages/docs/pages/button.tsx
+++ b/packages/docs/pages/button.tsx
@@ -1,145 +1,221 @@
 import { Button, H1, Panel, Text } from '@bigcommerce/big-design';
 import { AddIcon, ArrowDropDownIcon } from '@bigcommerce/big-design-icons';
-import React, { useEffect, useState } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
 import { ButtonPropTable, MarginPropTable } from '../PropTables';
 
 const ButtonPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <Text>Buttons are calls to action used throughout the product experience.</Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Button actionType="normal" isLoading={false} variant="primary">
-                Label
-              </Button>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Variants">
-            <Text>
-              There are three types of variants to choose from: <Code>primary</Code>, <Code>secondary</Code>, and{' '}
-              <Code>subtle</Code>. You can determine what type of variant by using the <Code primary>variant</Code>{' '}
-              prop.
-            </Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <>
-                <Button variant="primary">Primary</Button>
-                <Button variant="secondary">Secondary</Button>
-                <Button variant="subtle">Subtle</Button>
-              </>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Action types">
-            <Text>
-              There are two action types: <Code>normal</Code> &amp; <Code>destructive</Code>. They are used to indicate
-              the nature of the action when clicking on the button.
-            </Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <>
-                <Button actionType="normal">Normal</Button>
-                <Button actionType="destructive">Destructive</Button>
-              </>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Loading">
-            <Text>The loading state is used when clicking a button will perform a asyncronous action.</Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function LoadingButton() {
-                const [isLoading, setLoading] = useState(false);
-
-                function simulateNetworkRequest() {
-                  return new Promise((resolve) => setTimeout(resolve, 2000));
-                }
-
-                useEffect(() => {
-                  if (isLoading) {
-                    simulateNetworkRequest().then(() => {
-                      setLoading(false);
-                    });
-                  }
-                }, [isLoading]);
-
-                const handleClick = () => setLoading(true);
-
-                return (
-                  <Button variant="primary" isLoading={isLoading} onClick={!isLoading ? handleClick : () => null}>
-                    Click to load
-                  </Button>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Disabled">
-            <Text>
-              A disabled state is used to indicate no action can be done using the button by passing a{' '}
-              <Code primary>disabled</Code> prop.
-            </Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <>
-                <Button disabled>Disabled</Button>
-                <Button disabled variant="secondary">
-                  Disabled
-                </Button>
-                <Button disabled variant="subtle">
-                  Disabled
-                </Button>
-              </>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Icons">
-            <Text>
-              A button can also include icons on either side of the text (or both). When using{' '}
-              <Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp; <Code primary>iconRight</Code>{' '}
-              components will be removed.
-            </Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <>
-                <Button iconOnly={<AddIcon title="add" />} />
-                <Button iconLeft={<AddIcon />}>Label</Button>
-                <Button iconLeft={<AddIcon />} iconRight={<ArrowDropDownIcon />}>
-                  Label
-                </Button>
-                <Button iconRight={<ArrowDropDownIcon />}>Label</Button>
-              </>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <ButtonPropTable inheritedProps={<MarginPropTable collapsible />} />,
-    },
-  ];
-
   return (
     <>
       <H1>Button</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          <Code primary>Buttons</Code> trigger an immediate action, which can continue within the current page, a new
+          page or modal.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>
+            Use <Code primary>Primary Buttons</Code> for the most important action on a page (e.g. creating an object,
+            saving changes).
+          </List.Item>
+          <List.Item>
+            Use <Code primary>Secondary Buttons</Code> for other important page actions that are not the primary task on
+            the page.
+          </List.Item>
+          <List.Item>
+            Use <Code primary>Subtle Buttons</Code> alongside <Code primary>Secondary</Code> or{' '}
+            <Code primary> Primary Buttons</Code> for teritiary actions, like to cancel or visit a related task.
+          </List.Item>
+          <List.Item>
+            Use <Code primary>Destructive Buttons</Code> in confirmations for important actions that cannot be undone
+            (like deleting something).
+          </List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'basic',
+              title: 'Basic',
+              render: () => (
+                <>
+                  <Text>Buttons are calls to action used throughout the product experience.</Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Button actionType="normal" isLoading={false} variant="primary">
+                      Label
+                    </Button>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+            {
+              id: 'variants',
+              title: 'Variants',
+              render: () => (
+                <Fragment key="variants">
+                  <Text>
+                    There are three types of variants to choose from: <Code>primary</Code>, <Code>secondary</Code>, and{' '}
+                    <Code>subtle</Code>. You can determine what type of variant by using the{' '}
+                    <Code primary>variant</Code> prop.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <>
+                      <Button variant="primary">Primary</Button>
+                      <Button variant="secondary">Secondary</Button>
+                      <Button variant="subtle">Subtle</Button>
+                    </>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'action-types',
+              title: 'Action Types',
+              render: () => (
+                <Fragment key="action-types">
+                  <Text>
+                    There are two action types: <Code>normal</Code> &amp; <Code>destructive</Code>. They are used to
+                    indicate the nature of the action when clicking on the button.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <>
+                      <Button actionType="normal">Normal</Button>
+                      <Button actionType="destructive">Destructive</Button>
+                    </>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'loading',
+              title: 'Loading',
+              render: () => (
+                <Fragment key="loading">
+                  <Text>The loading state is used when clicking a button will perform a asyncronous action.</Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function LoadingButton() {
+                      const [isLoading, setLoading] = useState(false);
+
+                      function simulateNetworkRequest() {
+                        return new Promise((resolve) => setTimeout(resolve, 2000));
+                      }
+
+                      useEffect(() => {
+                        if (isLoading) {
+                          simulateNetworkRequest().then(() => {
+                            setLoading(false);
+                          });
+                        }
+                      }, [isLoading]);
+
+                      const handleClick = () => setLoading(true);
+
+                      return (
+                        <Button variant="primary" isLoading={isLoading} onClick={!isLoading ? handleClick : () => null}>
+                          Click to load
+                        </Button>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'disabled',
+              title: 'Disabled',
+              render: () => (
+                <Fragment key="disabled">
+                  <Text>
+                    A disabled state is used to indicate no action can be done using the button by passing a{' '}
+                    <Code primary>disabled</Code> prop.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <>
+                      <Button disabled>Disabled</Button>
+                      <Button disabled variant="secondary">
+                        Disabled
+                      </Button>
+                      <Button disabled variant="subtle">
+                        Disabled
+                      </Button>
+                    </>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'icons',
+              title: 'Icons',
+              render: () => (
+                <Fragment key="icons">
+                  <Text>
+                    A button can also include icons on either side of the text (or both). When using{' '}
+                    <Code primary>iconOnly</Code>, the <Code primary>iconLeft</Code> &amp;{' '}
+                    <Code primary>iconRight</Code> components will be removed.
+                  </Text>
+
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <>
+                      <Button iconOnly={<AddIcon title="add" />} />
+                      <Button iconLeft={<AddIcon />}>Label</Button>
+                      <Button iconLeft={<AddIcon />} iconRight={<ArrowDropDownIcon />}>
+                        Label
+                      </Button>
+                      <Button iconRight={<ArrowDropDownIcon />}>Label</Button>
+                    </>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <ButtonPropTable inheritedProps={<MarginPropTable collapsible />} renderPanel={false} />
+      </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          recommended={[
+            <>Keep button labels short and concise.</>,
+            <>
+              Where there are multiple <Code primary>Buttons</Code> together, ensure the “default” action is the{' '}
+              <Code primary>Primary Button</Code>.
+            </>,
+            <>
+              <Code primary>Primary Buttons</Code> should only appear once per page.
+            </>,
+          ]}
+          discouraged={[
+            <>
+              Have more than one <Code primary>Primary Button</Code> on a page.
+            </>,
+          ]}
+        />
+      </Panel>
     </>
   );
 };