From 90e56562ebb569997a1f432d56a18206ce3356cb Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Fri, 8 Oct 2021 11:40:44 -0500
Subject: [PATCH 1/2] feat(docs): update modal page to use new layout

---
 packages/docs/pages/modal.tsx | 200 +++++++++++++++++++---------------
 1 file changed, 110 insertions(+), 90 deletions(-)

diff --git a/packages/docs/pages/modal.tsx b/packages/docs/pages/modal.tsx
index 0c4ab20de..a6c699fb4 100644
--- a/packages/docs/pages/modal.tsx
+++ b/packages/docs/pages/modal.tsx
@@ -1,106 +1,126 @@
 import { Button, H1, Modal, Panel, Text } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
 import { ModalPropTable } from '../PropTables';
 
 const ModalPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel header="Modal variant">
-            <Text>
-              A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the
-              page until they complete a specific task.
-            </Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <H1>Modal</H1>
 
-                return (
-                  <>
-                    <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          Modals sit on top of the page, containing additional content or functionality without leaving the context of a
+          page.
+        </Text>
+        <Text bold>When to use it:</Text>
+        <List>
+          <List.Item>To focus on a particular on an specific task or content.</List.Item>
+          <List.Item>To confirm high impact actions (e.g. deleting a configuration).</List.Item>
+        </List>
+      </Panel>
 
-                    <Modal
-                      actions={[
-                        { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
-                        { text: 'Apply', onClick: () => setIsOpen(false) },
-                      ]}
-                      header="Modal title"
-                      isOpen={isOpen}
-                      onClose={() => setIsOpen(false)}
-                      closeOnEscKey={true}
-                      closeOnClickOutside={false}
-                    >
-                      <Text>
-                        Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
-                        pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute elit
-                        occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet fugiat.
-                      </Text>
-                    </Modal>
-                  </>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Dialog variant">
-            <Text>
-              Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a Modal. The
-              purpose of a dialog is to act as a safety net for a user attempting a destructive action.
-            </Text>
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'modal-variant',
+              title: 'Modal Variant',
+              render: () => (
+                <>
+                  <Text>
+                    A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting
+                    with the page until they complete a specific task.
+                  </Text>
 
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [isOpen, setIsOpen] = useState(false);
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const [isOpen, setIsOpen] = useState(false);
 
-                return (
-                  <>
-                    <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+                      return (
+                        <>
+                          <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
 
-                    <Modal
-                      actions={[
-                        { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
-                        { text: 'Apply', onClick: () => setIsOpen(false) },
-                      ]}
-                      header="Dialog title"
-                      isOpen={isOpen}
-                      onClose={() => setIsOpen(false)}
-                      closeOnEscKey={true}
-                      closeOnClickOutside={false}
-                      variant="dialog"
-                    >
-                      <Text>
-                        Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
-                        pariatur.
-                      </Text>
-                    </Modal>
-                  </>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <ModalPropTable />,
-    },
-  ];
+                          <Modal
+                            actions={[
+                              { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
+                              { text: 'Apply', onClick: () => setIsOpen(false) },
+                            ]}
+                            header="Modal title"
+                            isOpen={isOpen}
+                            onClose={() => setIsOpen(false)}
+                            closeOnEscKey={true}
+                            closeOnClickOutside={false}
+                          >
+                            <Text>
+                              Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
+                              pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute
+                              elit occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet
+                              fugiat.
+                            </Text>
+                          </Modal>
+                        </>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+            {
+              id: 'dialog-variant',
+              title: 'Dialog variant',
+              render: () => (
+                <>
+                  <Text>
+                    Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a Modal.
+                    The purpose of a dialog is to act as a safety net for a user attempting a destructive action.
+                  </Text>
 
-  return (
-    <>
-      <H1>Modal</H1>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const [isOpen, setIsOpen] = useState(false);
+
+                      return (
+                        <>
+                          <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
+
+                          <Modal
+                            actions={[
+                              { text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
+                              { text: 'Apply', onClick: () => setIsOpen(false) },
+                            ]}
+                            header="Dialog title"
+                            isOpen={isOpen}
+                            onClose={() => setIsOpen(false)}
+                            closeOnEscKey={true}
+                            closeOnClickOutside={false}
+                            variant="dialog"
+                          >
+                            <Text>
+                              Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
+                              pariatur.
+                            </Text>
+                          </Modal>
+                        </>
+                      );
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </>
+              ),
+            },
+          ]}
+        />
+      </Panel>
 
-      <PageNavigation items={items} />
+      <Panel header="Props" headerId="props">
+        <ModalPropTable renderPanel={false} />
+      </Panel>
     </>
   );
 };

From 69119f384fdf7863a5d502ad901e4329f9996f65 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Fri, 8 Oct 2021 11:52:25 -0500
Subject: [PATCH 2/2] fix: simply title

---
 packages/docs/pages/modal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/docs/pages/modal.tsx b/packages/docs/pages/modal.tsx
index a6c699fb4..95e68c09b 100644
--- a/packages/docs/pages/modal.tsx
+++ b/packages/docs/pages/modal.tsx
@@ -26,8 +26,8 @@ const ModalPage = () => {
           id="implementation"
           routes={[
             {
-              id: 'modal-variant',
-              title: 'Modal Variant',
+              id: 'modal',
+              title: 'Modal',
               render: () => (
                 <>
                   <Text>
@@ -71,8 +71,8 @@ const ModalPage = () => {
               ),
             },
             {
-              id: 'dialog-variant',
-              title: 'Dialog variant',
+              id: 'dialog',
+              title: 'Dialog',
               render: () => (
                 <>
                   <Text>