Create a DoDont wrapper component (#69)

* Create a DoDont wrapper component

* Use apostrophe

Author: colebemis

docs/content/components/do-dont.mdx

@@ -1,5 +1,5 @@
 ---
-title: Do/Dont
+title: Do/Don't
 ---
 
 The `Do` and `Dont` components are used for providing good and bad examples within documentation.
@@ -9,38 +9,37 @@ The `Do` and `Dont` components are used for providing good and bad examples with
 To use these components in your MDX files, import them like so:
 
 ```js
-import {Do, Dont} from '@primer/gatsby-theme-doctocat'
-```
-
-If you plan to create side-by-side Do/Don't examples, you'll also want to import the `Grid` component from `@primer/components`:
-
-```js
-import {Grid} from '@primer/components'
+import {DoDont, Do, Dont} from '@primer/gatsby-theme-doctocat'
 ```
 
 ### Side-by-side
 
-To create a side-by-side Do/Don't example, you can wrap the `Do` and `Dont` components with the `Grid` component:
+To create a side-by-side Do/Don't example, wrap the `Do` and `Dont` components with the `DoDont` component:
 
 ```jsx live
-<Grid gridTemplateColumns={['1fr', '1fr', '1fr 1fr']} gridGap={3}>
+<DoDont>
   <Do src="https://user-images.githubusercontent.com/586552/63106528-06de5100-bf51-11e9-8a5e-98583ed74874.png">
     Use brief and direct communication
   </Do>
   <Dont src="https://user-images.githubusercontent.com/586552/63106527-06de5100-bf51-11e9-858c-72de6a5c728a.png">
     Don't use wordy and redundant copy
   </Dont>
-</Grid>
+</DoDont>
 ```
 
 _Note: Caption text should describe the image and be able to stand on its own._
 
-### Isolation
+### Stacked
 
-The `Do` and `Dont` components don't always have to be used together. Here's an example of how you might use the `Do` component in isolation:
+The `DoDont` component also accepts a `stacked` prop to create stacked Do/Don't examples:
 
 ```jsx live
-<Do src="https://user-images.githubusercontent.com/586552/63046880-46e5fb00-bea1-11e9-836d-be1b1c7d963f.png">
-  Use a container class to give the text a max-width
-</Do>
+<DoDont stacked>
+  <Do src="https://user-images.githubusercontent.com/586552/63046880-46e5fb00-bea1-11e9-836d-be1b1c7d963f.png">
+    Use a container class to give the text a max-width
+  </Do>
+  <Dont src="https://user-images.githubusercontent.com/586552/63046881-46e5fb00-bea1-11e9-87ee-80dbeb0bea1c.png">
+    Don't let the text span the entire width of the window
+  </Dont>
+</DoDont>
 ```

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,4 +1,4 @@
-import * as components from '@primer/components'
-import {Hero, Caption, Do, Dont} from '@primer/gatsby-theme-doctocat'
+import * as primerComponents from '@primer/components'
+import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 
-export default {...components, Hero, Caption, Do, Dont}
+export default {...primerComponents, ...doctocatComponents}

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -19,7 +19,7 @@
   children:
     - title: Caption
       url: /components/caption
-    - title: Do/Dont
+    - title: Do/Don't
       url: /components/do-dont
 - title: Contributing
   url: /contributing

theme/index.js

@@ -1,5 +1,5 @@
 export {default as Caption} from './src/components/caption'
-export {Do, Dont} from './src/components/do-dont'
+export {DoDont, Do, Dont} from './src/components/do-dont'
 export {default as Container} from './src/components/container'
 export {default as Head} from './src/components/head'
 export {default as Header} from './src/components/header'

theme/src/components/do-dont.js

@@ -1,8 +1,24 @@
-import {CircleOcticon, Flex, Text} from '@primer/components'
+import {CircleOcticon, Flex, Text, Grid} from '@primer/components'
 import {Check, X} from '@primer/octicons-react'
 import React from 'react'
 import Caption from './caption'
 
+export function DoDont({stacked, children}) {
+  return (
+    <Grid
+      gridTemplateColumns={['1fr', null, stacked ? '1fr' : '1fr 1fr']}
+      gridGap={3}
+      mb={3}
+    >
+      {children}
+    </Grid>
+  )
+}
+
+DoDont.defaultProps = {
+  stacked: false,
+}
+
 export function Do({src, children}) {
   return (
     <Flex flexDirection="column">
@@ -20,7 +36,7 @@ export function Do({src, children}) {
         </Text>
       </Flex>
       <img src={src} width="100%" />
-      <Caption>{children}</Caption>
+      <Caption mb={0}>{children}</Caption>
     </Flex>
   )
 }
@@ -42,7 +58,7 @@ export function Dont({src, children}) {
         </Text>
       </Flex>
       <img src={src} width="100%" />
-      <Caption>{children}</Caption>
+      <Caption mb={0}>{children}</Caption>
     </Flex>
   )
 }