Update Do/Don't component API

[colebemis]

Problem

While creating design guidelines for Octicons, I ran into limitations with the Do/Don't component API that prevented me from rendering do/don't examples as I wanted.

I didn't want the images to scale to fill all the available space because I wanted to avoid the 1px grid lines appearing blurry. Instead, I wanted the images to keep their natural width and be centered inside a container with the same background color:

The current Do/Don't component API, however, did not allow me to control how images are rendered:

<Do src="https://example.com/do.png">
  Use brief and direct communication
</Do>

Solution

I updated the Do/Don't component API to allow consumers to control how images are rendered:

- <Do src="https://example.com/do.png">
-   Use brief and direct communication
- </Do>
+ <Do>
+   <img src="https://example.com/do.png" alt="" />
+   <Caption>Use brief and direct communication</Caption>
+ </Do>

This API allows me to create the Octicons design guidelines do/don't example (pictured above) like so:

<Do>
  <Flex bg="gray.1" justifyContent="center">
    <img src="https://example.com/do.png" alt="" />
  </Flex>
  <Caption>Use brief and direct communication</Caption>
</Do>

This API also allows people to create do/don't examples with more than just images. For example, using code in do/don't examples could be useful in CLI guidelines:

<DoDontContainer>
  <Do>
    <Code>✓ Checks passing</Code>
    <Caption>Use checks for success messages</Caption>
  </Do>
  <Dont>
    <Code>✓ Checks failing</Code>
    <Caption>Don't use checks for failure messages</Caption>
  </Dont>
</DoDontContainer>

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

doctocat – ./

🔍 Inspect: https://vercel.com/primer/doctocat/muh2rr2cb
✅ Preview: https://doctocat-git-do-dont-refactor.primer.vercel.app

gatsby-theme-primer-example – ./

🔍 Inspect: https://vercel.com/primer/gatsby-theme-primer-example/3fdx9al0k
✅ Preview: https://gatsby-theme-primer-example-git-do-dont-refactor.primer.vercel.app

[emplums]

👍 this seams reasonable!

[colebemis]

FYI I'm going to hold off on merging this until I have changesets set up in this repo so I can test out the release process.

[changeset-bot]

🦋 Changeset detected

Latest commit: ea38980

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/gatsby-theme-doctocat	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR