Update do/dont visual style, add indented prop (#376)

* Update do/dont visual style, add `indented` prop

* Update do/dont indented colors

* Add changeset

* Fix changeset package

Author: vdepizzol

.changeset/clever-lions-kiss.md

@@ -0,0 +1,5 @@
+---
+'@primer/gatsby-theme-doctocat': minor
+---
+
+New visual styles for Do/Dont components

docs/content/components/do-dont.mdx

@@ -45,3 +45,18 @@ The `DoDontContainer` component also accepts a `stacked` prop to create stacked
   </Dont>
 </DoDontContainer>
 ```
+
+### Indented
+
+`Do` and `Dont` components can also be indented to increase the clarity of the example message within the documentation:
+
+```jsx live
+<DoDontContainer stacked>
+  <Do indented>
+    Place pane regions on the left to display navigation, filtering, or an overview for entities such as users, bots, apps, etc.
+  </Do>
+  <Dont indented>
+    Don't display more than three columns of information on a page.
+  </Dont>
+</DoDontContainer>
+```

theme/src/components/do-dont.js

@@ -1,5 +1,4 @@
 import {Box, StyledOcticon, Text} from '@primer/react'
-import {CheckCircleFillIcon, XCircleFillIcon} from '@primer/octicons-react'
 import React from 'react'
 
 export function DoDontContainer({stacked, children}) {
@@ -15,22 +14,48 @@ DoDontContainer.defaultProps = {
 }
 
 export function Do(props) {
-  return <DoDontBase {...props} title="Do" icon={CheckCircleFillIcon} iconBg="success.fg" />
+  return <DoDontBase {...props} title="Do" bg="success.fg" borderColor="success.muted" />
 }
 
 export function Dont(props) {
-  return <DoDontBase {...props} title="Don't" icon={XCircleFillIcon} iconBg="danger.fg" />
+  return <DoDontBase {...props} title="Don’t" bg="danger.fg" borderColor="danger.muted" />
 }
 
-function DoDontBase({children, title, icon: Icon, iconBg}) {
+function DoDontBase({children, title, bg, borderColor, indented}) {
   return (
     <Box sx={{display: 'flex', flexDirection: 'column'}}>
-      <Box sx={{display: 'flex', alignSelf: 'start', flexDirection: 'row', alignItems: 'center', mb: '2'}}>
-        <StyledOcticon icon={Icon} sx={{color: iconBg}} />
-        <Text sx={{fontWeight: 'bold', color: 'fg.default', ml: 2}}>{title}</Text>
+      <Box
+        sx={{
+          display: 'flex',
+          alignSelf: 'start',
+          flexDirection: 'row',
+          alignItems: 'center',
+          mb: '2',
+          backgroundColor: bg,
+          borderRadius: '2',
+          color: 'fg.onEmphasis',
+          paddingX: '2'
+        }}
+      >
+        <Text sx={{fontWeight: 'bold', fontSize: '1', color: 'fg.onEmphasis'}}>{title}</Text>
       </Box>
       <Box sx={{'& *:last-child': {mb: 0}, img: {maxWidth: '100%'}, display: 'flex', flexDirection: 'column'}}>
-        {children}
+        {indented ? (
+          <Box
+            as="blockquote"
+            sx={{
+              margin: '0',
+              borderLeftWidth: '4px',
+              borderLeftStyle: 'solid',
+              borderLeftColor: borderColor,
+              paddingLeft: '3'
+            }}
+          >
+            {children}
+          </Box>
+        ) : (
+          children
+        )}
       </Box>
     </Box>
   )