feat(docs): spacing documentation (#145)

bigcommerce · Aug 12, 2019 · c6756ec · c6756ec
1 parent 7d755d8
commit c6756ec
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 6 deletions.
diff --git a/packages/docs/PropTables/IconPropTable.tsx b/packages/docs/PropTables/IconPropTable.tsx
@@ -8,8 +8,8 @@ export const IconPropTable: React.FC = () => (
     <PropTable.Prop name="color" types={<Link href="/colors">Color</Link>}>
       Sets the icon color given a color name from our <Link href="/colors">palette</Link>.
     </PropTable.Prop>
-    <PropTable.Prop name="size" types={[<Link href="/utilities/spacing">Spacing</Link>, 'number']}>
-      Determines the size of the icon. Accepts a <Link href="/utilities/spacing">Spacing</Link> value or a number of px.
+    <PropTable.Prop name="size" types={[<Link href="/spacing">Spacing</Link>, 'number']}>
+      Determines the size of the icon. Accepts a <Link href="/spacing">Spacing</Link> value or a number of px.
     </PropTable.Prop>
   </PropTable>
 );
diff --git a/packages/docs/components/SideNav/SideNav.tsx b/packages/docs/components/SideNav/SideNav.tsx
@@ -23,6 +23,9 @@ export const SideNav: React.FC = () => {
         <SideNavLink href="/Icons/IconsPage" as="/icons">
           Icons
         </SideNavLink>
+        <SideNavLink href="/Spacing/SpacingPage" as="/spacing">
+          Spacing
+        </SideNavLink>
       </SideNavGroup>
 
       <SideNavGroup title="Forms">

diff --git a/packages/docs/next.config.js b/packages/docs/next.config.js
@@ -35,6 +35,7 @@ module.exports = {
     '/panel': { page: '/Panel/PanelPage' },
     '/progress/bar': { page: '/Progress/ProgressBarPage' },
     '/progress/circle': { page: '/Progress/ProgressCirclePage' },
+    '/spacing': { page: '/Spacing/SpacingPage' },
     '/tabs': { page: '/Tabs/TabsPage' },
     '/tooltip': { page: '/Tooltip/TooltipPage' },
     '/typography': { page: '/Typography/TypographyPage' },

diff --git a/packages/docs/pages/Spacing/SpacingPage.tsx b/packages/docs/pages/Spacing/SpacingPage.tsx
@@ -0,0 +1,74 @@
+import { Box, Button, Flex, H0, H2, Link, Text } from '@bigcommerce/big-design';
+import { ThemeInterface } from '@bigcommerce/big-design-theme';
+import React, { useContext } from 'react';
+import styled, { ThemeContext } from 'styled-components';
+
+import { Code, CodePreview } from '../../components';
+
+type Spacings = ThemeInterface['spacing'];
+type Spacing = keyof Spacings;
+
+const BlueBox = styled(Box)(({ theme }) => ({
+  backgroundColor: theme.colors.primary,
+  display: 'inline-block',
+  height: theme.spacing.large,
+  width: theme.spacing.large,
+}));
+
+const StyledText = styled(Text)`
+  padding: 0;
+  margin: 0;
+`;
+
+export default () => {
+  const { spacing } = useContext(ThemeContext);
+
+  return (
+    <>
+      <H0>Spacing</H0>
+
+      <Text>
+        Spacing can be used directly on certain properties that expect a size value, like{' '}
+        <Link href="/utilities/margin">Margin</Link> and <Link href="/utilities/padding">Padding</Link>.
+      </Text>
+
+      <CodePreview>
+        {/* jsx-to-string:start */}
+        <>
+          <Button marginRight="medium">Button</Button>
+          <Button>Button</Button>
+        </>
+        {/* jsx-to-string:end */}
+      </CodePreview>
+
+      <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>
+
+      <H2>Available Spacing</H2>
+
+      <Flex justifyContent="space-around">
+        {Object.keys(spacing)
+          .reverse()
+          .map(key => (
+            <Flex alignItems="center" key={key} flexDirection="column" paddingBottom="xxxLarge">
+              <StyledText>{key}</StyledText>
+              <BlueBox marginTop="medium" style={{ width: spacing[key], height: spacing[key] }} />
+            </Flex>
+          ))}
+      </Flex>
+    </>
+  );
+};
diff --git a/packages/docs/pages/Utilities/MarginPage.tsx b/packages/docs/pages/Utilities/MarginPage.tsx
@@ -10,7 +10,7 @@ export default () => (
 
     <Text>
       Some of our components expose a simple way to modify their margin. The following example showcases the simples way
-      to use the margin prop by giving it a <Link href="/utilities/spacing">Spacing</Link> value.
+      to use the margin prop by giving it a <Link href="/spacing">Spacing</Link> value.
     </Text>
 
     <CodePreview>
@@ -22,7 +22,7 @@ export default () => (
     <Text>
       You can also specify margins with an object to handle different margins with different
       <Link href="/utilities/breakpoints"> breakpoints</Link>. All values must be of
-      <Link href="/utilities/spacing"> Spacing</Link> type.
+      <Link href="/spacing"> Spacing</Link> type.
     </Text>
 
     <CodePreview>

diff --git a/packages/docs/pages/Utilities/PaddingPage.tsx b/packages/docs/pages/Utilities/PaddingPage.tsx
@@ -10,7 +10,7 @@ export default () => (
 
     <Text>
       Some of our components expose a simple way to modify their padding. The following example showcases the simples
-      way to use the padding prop by giving it a <Link href="/utilities/spacing">Spacing</Link> value.
+      way to use the padding prop by giving it a <Link href="/spacing">Spacing</Link> value.
     </Text>
 
     <CodePreview>
@@ -24,7 +24,7 @@ export default () => (
     <Text>
       You can also specify paddings with an object to handle different paddings with different
       <Link href="/utilities/breakpoints"> breakpoints</Link>. All values must be of
-      <Link href="/utilities/spacing"> Spacing</Link> type.
+      <Link href="/spacing"> Spacing</Link> type.
     </Text>
 
     <CodePreview>