docs(box): update inline example

move Grid components under the Layout section
telus · Nov 8, 2017 · 1960428 · 1960428
1 parent 16cf678
commit 1960428
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/config/styleguide.config.js b/config/styleguide.config.js
@@ -132,17 +132,20 @@ module.exports = {
               toggleByEnv('Box', path.resolve('src/components/Box/Box.jsx'), undefined),
             ])
           },
+          sections: compact([
+            {
+              name: 'Grid',
+              components() {
+                return [
+                  path.resolve('src/old-components/Grid/Container/Container.jsx'),
+                  path.resolve('src/old-components/Grid/Row/Row.jsx'),
+                  path.resolve('src/old-components/Grid/Column/Column.jsx'),
+                ]
+              },
+            },
+          ]),
         },
-        {
-          name: 'Grid',
-          components() {
-            return [
-              path.resolve('src/old-components/Grid/Container/Container.jsx'),
-              path.resolve('src/old-components/Grid/Row/Row.jsx'),
-              path.resolve('src/old-components/Grid/Column/Column.jsx'),
-            ]
-          },
-        },
+
         {
           name: 'Content',
           components() {

diff --git a/src/components/Box/Box.md b/src/components/Box/Box.md
@@ -73,9 +73,12 @@ When wrapping a Box element around a series of elements, use the `between` prop
 
 ```jsx
 <Box inline between={3}>
-  <Link href="//telus.com">Home</Link>
-  <Link href="//telus.com">Shop</Link>
-  <Link href="//telus.com">My Account</Link>
-  <Link href="//telus.com">Support</Link>
+  <Link href="//telus.com">Phones</Link>
+  <Box inline>|</Box>
+  <Link href="//telus.com">Pre-Owned</Link>
+  <Box inline>|</Box>
+  <Link href="//telus.com">Prepaid</Link>
+  <Box inline>|</Box>
+  <Link href="//telus.com">Sale</Link>
 </Box>
 ```