feat(docs): Update Link documentation page to use new layout (#712)

* feat(docs): delete items variable * feat(docs): add periods to the end of the sentences * feat(docs): fix typos and grammar
bigcommerce · Feb 10, 2022 · 4ae6247 · 4ae6247
1 parent 59676c2
commit 4ae6247
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 43 deletions.
diff --git a/packages/docs/pages/button.tsx b/packages/docs/pages/button.tsx
@@ -43,7 +43,7 @@ const ButtonPage = () => {
               id: 'basic',
               title: 'Basic',
               render: () => (
-                <>
+                <Fragment key="basic">
                   <Text>Buttons are calls to action used throughout the product experience.</Text>
                   <CodePreview>
                     {/* jsx-to-string:start */}
@@ -52,7 +52,7 @@ const ButtonPage = () => {
                     </Button>
                     {/* jsx-to-string:end */}
                   </CodePreview>
-                </>
+                </Fragment>
               ),
             },
             {
@@ -80,7 +80,7 @@ const ButtonPage = () => {
             },
             {
               id: 'action-types',
-              title: 'Action Types',
+              title: 'Action types',
               render: () => (
                 <Fragment key="action-types">
                   <Text>

diff --git a/packages/docs/pages/link.tsx b/packages/docs/pages/link.tsx
@@ -1,52 +1,84 @@
 import { H1, Link, Panel, Text } from '@bigcommerce/big-design';
-import React from 'react';
+import React, { Fragment } from 'react';
 
-import { CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable, List } from '../components';
 import { LinkPropTable, MarginPropTable } from '../PropTables';
 
 const LinkPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <Text>
-              A simple wrapper for anchor elements. Use instead of {'<a>'}. Supports all native anchor element
-              attributes.
-            </Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Link href="#">Link Example</Link>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="External link">
-            <Text>You can also include and external icon.</Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <Link href="#" target="_blank" external>
-                Learn More
-              </Link>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <LinkPropTable inheritedProps={<MarginPropTable collapsible />} />,
-    },
-  ];
-
   return (
     <>
       <H1>Link</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>Provides navigation to another page</Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>Navigate to an external webpage</List.Item>
+          <List.Item>Navigate to helpful documentation</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'basic',
+              title: 'Basic',
+              render: () => (
+                <Fragment key="basic">
+                  <Text>
+                    A simple wrapper for anchor elements. Use instead of {'<a>'}. Supports all native anchor element
+                    attributes.
+                  </Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Link href="#">Link example</Link>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'external-link',
+              title: 'External link',
+              render: () => (
+                <Fragment key="external-link">
+                  <Text>You can also include an external icon.</Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <Link href="#" target="_blank" external>
+                      Learn more
+                    </Link>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <LinkPropTable
+          inheritedProps={<MarginPropTable collapsible />}
+          renderPanel={false}
+          nativeElement={['a', 'all']}
+        />
+      </Panel>
+
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          recommended={[
+            <>
+              Use the <Code primary>external</Code> prop when a link navigates away from the control panel.
+            </>,
+            <>Usually within a sentence to provide additional guidance or information.</>,
+            <>Use descriptive text to set clear expectations of the link destination.</>,
+          ]}
+          discouraged={[<>Avoid using links for actions – use a button instead.</>]}
+        />
+      </Panel>
     </>
   );
 };