Do / Don't Component

docs/content/components/do-dont.mdx

@@ -0,0 +1,46 @@
+---
+title: Do/Dont
+---
+
+The `Do` and `Dont` components are used for providing good and bad examples within documentation.
+
+## Usage
+
+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'
+```
+
+### 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:
+
+```jsx live
+<Grid gridTemplateColumns={['1fr', '1fr', '1fr 1fr']} gridGap={3}>
+  <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>
+```
+
+_Note: Caption text should describe the image and be able to stand on its own._
+
+### Isolation
+
+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:
+
+```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>
+```

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

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

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

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

theme/index.js

@@ -1,4 +1,5 @@
 export {default as Caption} from './src/components/caption'
+export {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/caption.js

@@ -1,6 +1,8 @@
 import {Text} from '@primer/components'
 import React from 'react'
 
-const Caption = (props) => <Text as='p' my={3} fontSize='1' color='gray.5' {...props}/>
+function Caption(props) {
+  return <Text as="p" mt={2} mb={3} fontSize={1} color="gray.5" {...props} />
+}
 
 export default Caption

theme/src/components/do-dont.js

@@ -0,0 +1,48 @@
+import {CircleOcticon, Flex, Text} from '@primer/components'
+import {Check, X} from '@primer/octicons-react'
+import React from 'react'
+import Caption from './caption'
+
+export function Do({src, children}) {
+  return (
+    <Flex flexDirection="column">
+      <Flex alignSelf="start" flexDirection="row" alignItems="center" mb="2">
+        <CircleOcticon
+          icon={Check}
+          size={16}
+          bg="green.5"
+          color="white"
+          mr="2"
+          p="1"
+        />
+        <Text fontWeight="bold" color="gray.9" ml="1">
+          Do
+        </Text>
+      </Flex>
+      <img src={src} width="100%" />
+      <Caption>{children}</Caption>
+    </Flex>
+  )
+}
+
+export function Dont({src, children}) {
+  return (
+    <Flex flexDirection="column">
+      <Flex alignSelf="start" flexDirection="row" alignItems="center" mb="2">
+        <CircleOcticon
+          icon={X}
+          size={16}
+          bg="red.5"
+          color="white"
+          mr="2"
+          p="1"
+        />
+        <Text fontWeight="bold" color="gray.9" ml="1">
+          Don't
+        </Text>
+      </Flex>
+      <img src={src} width="100%" />
+      <Caption>{children}</Caption>
+    </Flex>
+  )
+}