feat(docs): update breakpoints page to use new layout

bigcommerce · Jan 14, 2022 · e67905c · e67905c
1 parent fdbbba7
commit e67905c
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 43 deletions.
diff --git a/packages/docs/components/Code/styled.tsx b/packages/docs/components/Code/styled.tsx
@@ -10,7 +10,7 @@ export const StyledCode = styled.code<CodeProps>`
     highlight &&
     !primary &&
     css`
-      background-color: ${theme.colors.warning10};
+      background-color: ${theme.colors.warning20};
       padding: ${theme.spacing.xxSmall};
     `};
 

diff --git a/packages/docs/pages/breakpoints.tsx b/packages/docs/pages/breakpoints.tsx
@@ -1,63 +1,133 @@
-import { Box, H1, Panel, Text } from '@bigcommerce/big-design';
+import { BoxProps, Box as Container, H1, Message, Panel, Text } from '@bigcommerce/big-design';
 import { breakpointValues } from '@bigcommerce/big-design-theme';
 import React from 'react';
 import styled from 'styled-components';
 
-import { Code, CodePreview } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, GuidelinesTable } from '../components';
+
+const Box: React.FC<BoxProps> = ({ children, ...props }) => (
+  <Container backgroundColor="secondary10" border="box" {...props}>
+    {children}
+  </Container>
+);
 
 const BreakpointsPage = () => (
   <>
     <H1>Breakpoints</H1>
 
-    <Panel>
+    <Panel header="Overview" headerId="overview">
       <Text>
-        We provide access to our breakpoints' <Code>@media</Code> queries. Our breakpoints include{' '}
-        <Code primary>mobile</Code>, <Code primary>tablet</Code> and <Code primary>desktop</Code> . Values for each
-        breakpoint are <Code>{breakpointValues.mobile}</Code>, <Code>{breakpointValues.tablet}</Code>, and{' '}
+        BigDesign exposes a set of <Code primary>breakpoints</Code> and <Code primary>breakpointValues</Code> that can
+        be used to create responsive layouts and components. Our breakpoints include <Code primary>mobile</Code>,{' '}
+        <Code primary>tablet</Code> and <Code primary>desktop</Code>. For each breakpoint, the breakpoint values are{' '}
+        <Code>{breakpointValues.mobile}</Code>, <Code>{breakpointValues.tablet}</Code>, and{' '}
         <Code>{breakpointValues.desktop}</Code> respectively.
       </Text>
-      <CodePreview>
-        {/* jsx-to-string:start */}
-        {function Example() {
-          const StyledBox = styled(Box)`
-            height: ${({ theme }) => theme.spacing.xxxLarge};
-            width: 100%;
+    </Panel>
 
-            ${({ theme }) => theme.breakpoints.tablet} {
-              width: 60%;
-            }
+    <Panel header="Implementation" headerId="implementation">
+      <ContentRoutingTabs
+        id="implementation"
+        routes={[
+          {
+            id: 'basic',
+            title: 'Basic',
+            render: () => (
+              <>
+                <Text>
+                  Most utility components contain responsive props. You can pass in an object with{' '}
+                  <Code primary>breakpoints</Code> as keys to provide values at each breakpoint. BigDesign is
+                  mobile-first in nature, so bigger screen size values will override smaller ones.
+                </Text>
 
-            ${({ theme }) => theme.breakpoints.desktop} {
-              width: 30%;
-            }
-          `;
+                <CodePreview scope={{ Box }}>
+                  {/* jsx-to-string:start */}
+                  <Box padding={{ mobile: 'none', tablet: 'small', desktop: 'xLarge' }}>
+                    This box has responsive props!
+                  </Box>
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              </>
+            ),
+          },
+          {
+            id: 'extending',
+            title: 'Extending',
+            render: () => (
+              <>
+                <Message
+                  messages={[
+                    { text: 'Before extending a component, if possible, use one of BigDesigns core components.' },
+                  ]}
+                  type="warning"
+                  marginVertical="medium"
+                />
+                <Text>
+                  If you need a customized wrapper you can extend one of our utility components (
+                  <Code primary>Box</Code>, <Code primary>Flex</Code>, or <Code primary>Grid</Code>) using{' '}
+                  <Code>styled-components</Code>. Exposed on the <Code primary>theme</Code> object is the{' '}
+                  <Code primary>breakpoints</Code> key. The values returned are <Code>@media</Code> queries ready for
+                  consumtion.
+                </Text>
 
-          return <StyledBox backgroundColor="secondary20" />;
-        }}
-        {/* jsx-to-string:end */}
-      </CodePreview>
-    </Panel>
-    <Panel header="Breakpoint values">
-      <Text>
-        We also expose the <Code primary>breakpointValues</Code> for each breakpoint.
-      </Text>
+                <CodePreview scope={{ Box }}>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const StyledBox = styled(Box)`
+                      height: ${({ theme }) => theme.spacing.xxxLarge};
+                      width: 100%;
 
-      <CodePreview>
-        {/* jsx-to-string:start */}
-        {function Example() {
-          const StyledBox = styled(Box)`
-            height: ${({ theme }) => theme.spacing.xxxLarge};
-            width: 100%;
+                      ${({ theme }) => theme.breakpoints.tablet} {
+                        width: 60%;
+                      }
 
-            ${({ theme }) => theme.breakpoints.desktop} {
-              width: ${({ theme }) => theme.breakpointValues.tablet};
-            }
-          `;
+                      ${({ theme }) => theme.breakpoints.desktop} {
+                        width: 30%;
+                      }
+                    `;
+
+                    return <StyledBox />;
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              </>
+            ),
+          },
+          {
+            id: 'breakpoint-values',
+            title: 'Breakpoint Values',
+            render: () => (
+              <>
+                <Text>
+                  <Code primary>breakpointValues</Code> are also exposed on the <Code primary>theme</Code> object. Each
+                  value is the <Code>px</Code> value of each breakpoint.
+                </Text>
+
+                <CodePreview scope={{ Box }}>
+                  {/* jsx-to-string:start */}
+                  {function Example() {
+                    const StyledBox = styled(Box)`
+                      height: ${({ theme }) => theme.spacing.xxxLarge};
+                      width: 100%;
+
+                      ${({ theme }) => theme.breakpoints.desktop} {
+                        width: ${({ theme }) => theme.breakpointValues.tablet};
+                      }
+                    `;
+
+                    return <StyledBox />;
+                  }}
+                  {/* jsx-to-string:end */}
+                </CodePreview>
+              </>
+            ),
+          },
+        ]}
+      />
+    </Panel>
 
-          return <StyledBox backgroundColor="secondary20" />;
-        }}
-        {/* jsx-to-string:end */}
-      </CodePreview>
+    <Panel header="Do's and Don'ts" headerId="guidelines">
+      <GuidelinesTable recommended={['Use built in responsive props, where applicable.']} discouraged={[]} />
     </Panel>
   </>
 );