feat(docs): add new layout to Spacing page (#821)

Co-authored-by: bc-andreadao <[email protected]>

packages/docs/pages/spacing.tsx

@@ -1,8 +1,8 @@
 import { Box, Button, Flex, H1, Panel, Text } from '@bigcommerce/big-design';
-import React, { useContext } from 'react';
+import React, { Fragment, useContext } from 'react';
 import styled, { ThemeContext } from 'styled-components';
 
-import { CodePreview, NextLink, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List, NextLink } from '../components';
 
 const BlueBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.colors.primary,
@@ -11,79 +11,90 @@ const BlueBox = styled(Box)(({ theme }) => ({
   width: theme.spacing.large,
 }));
 
-const StyledText = styled(Text)`
-  padding: 0;
-  margin: 0;
-`;
-
 const SpacingPage = () => {
   const { spacing } = useContext(ThemeContext);
 
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel header="Applying to a property">
-            <Text>
-              Spacing can be used directly on certain properties that expect a size value, like{' '}
-              <NextLink href="/margin">Margin</NextLink> and <NextLink href="/padding">Padding</NextLink>.
-            </Text>
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              <>
-                <Button marginRight="medium">Button</Button>
-                <Button>Button</Button>
-              </>
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-          <Panel header="Applying to a style">
-            <Text>You can also use spacing directly from the theme to style other components, for example:</Text>
-
-            <CodePreview>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const StyledBox = styled(Box)(({ theme }) => ({
-                  backgroundColor: theme.colors.primary,
-                  height: theme.spacing.large,
-                  width: theme.spacing.large,
-                }));
-
-                return <StyledBox />;
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'spacing',
-      title: 'Spacing values',
-      render: () => (
-        <Panel header="Spacing values">
-          <Flex justifyContent="space-around">
-            {Object.keys(spacing)
-              .reverse()
-              .map((key) => (
-                <Flex alignItems="center" key={key} flexDirection="column" paddingBottom="small">
-                  <StyledText>{key}</StyledText>
-                  <BlueBox marginTop="medium" style={{ width: spacing[key], height: spacing[key] }} />
-                </Flex>
-              ))}
-          </Flex>
-        </Panel>
-      ),
-    },
-  ];
-
   return (
     <>
       <H1>Spacing</H1>
 
-      <PageNavigation items={items} />
+      <Panel header="Overview" headerId="overview">
+        <Text>
+          BigDesign core theme provides a pre-defined set of spacing values that are primarily used with any of the{' '}
+          <Code primary>padding</Code> and <Code primary>margin</Code> props. There are a few ways we can consume these
+          values.
+        </Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>
+            Using the <NextLink href="/margin">Margin</NextLink> and <NextLink href="/padding">Padding</NextLink> props.
+          </List.Item>
+          <List.Item>Consuming it from the theme in a custom component.</List.Item>
+        </List>
+      </Panel>
+
+      <Panel header="Implementation" headerId="implementation">
+        <ContentRoutingTabs
+          id="implementation"
+          routes={[
+            {
+              id: 'property',
+              title: 'Applying to a property',
+              render: () => (
+                <Fragment key="property">
+                  <Text>
+                    Certain components will include <Code primary>padding</Code> and <Code primary>margin</Code> props.
+                    You can use the spacing keys to apply spacing values to those props.
+                  </Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    <>
+                      <Button marginRight="medium">Button</Button>
+                      <Button>Button</Button>
+                    </>
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+            {
+              id: 'style',
+              title: 'Applying to a style',
+              render: () => (
+                <Fragment key="style">
+                  <Text>You can also use spacing directly from the theme to style other components.</Text>
+                  <CodePreview>
+                    {/* jsx-to-string:start */}
+                    {function Example() {
+                      const StyledBox = styled(Box)(({ theme }) => ({
+                        backgroundColor: theme.colors.primary,
+                        height: theme.spacing.large,
+                        width: theme.spacing.large,
+                      }));
+
+                      return <StyledBox />;
+                    }}
+                    {/* jsx-to-string:end */}
+                  </CodePreview>
+                </Fragment>
+              ),
+            },
+          ]}
+        />
+      </Panel>
+
+      <Panel header="Spacing values" headerId="spacing-values">
+        <Flex justifyContent="space-around">
+          {Object.keys(spacing)
+            .reverse()
+            .map((key) => (
+              <Flex alignItems="center" key={key} flexDirection="column" paddingBottom="small">
+                <Code>{key}</Code>
+                <BlueBox marginTop="medium" style={{ width: spacing[key], height: spacing[key] }} />
+              </Flex>
+            ))}
+        </Flex>
+      </Panel>
     </>
   );
 };