@primer/gatsby-theme-doctocat 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/gatsby-theme-doctocat
 
+## 3.3.0
+
+### Minor Changes
+
+- [`82bd051`](https://github.com/primer/doctocat/commit/82bd051ab35e5939a9ad5a3e89c26e2a63ce5df2) [#376](https://github.com/primer/doctocat/pull/376) Thanks [@vdepizzol](https://github.com/vdepizzol)! - New visual styles for Do/Dont components
+
+### Patch Changes
+
+- [`0d35f17`](https://github.com/primer/doctocat/commit/0d35f17a34ebfc468e15a23783a55379b8f0e125) [#402](https://github.com/primer/doctocat/pull/402) Thanks [@ichelsea](https://github.com/ichelsea)! - Added underlines to links in markdown documents
+
 ## 3.2.1
 
 ### Patch Changes
@@ -183,4 +193,4 @@
 
 - [`5fb29c9`](https://github.com/primer/doctocat/commit/5fb29c9000dd2a26919f661d969142fa1938d329) [#187](https://github.com/primer/doctocat/pull/187) Thanks [@mvasilkov](https://github.com/mvasilkov)! - Fix typo in an internal import
 
-* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chrevon` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)
+* [`cab38c3`](https://github.com/primer/doctocat/commit/cab38c38eb00a9645991147b28a47a535dcd1d41) [#190](https://github.com/primer/doctocat/pull/190) Thanks [@colebemis](https://github.com/colebemis)! - Update the navigation dropdown icon from a `chevron` to a `caret` to follow our [progressive disclosure guidelines](https://primer.style/design/ui-patterns/progressive-disclosure#progressive-disclosure-ui-patterns)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/gatsby-theme-doctocat",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -15,9 +15,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-primer-react": "0.7.3",
+    "eslint-plugin-primer-react": "0.7.4",
     "eslint-plugin-react": "^7.26.1",
-    "gatsby": "^2.24.52",
+    "gatsby": "^2.32.13",
     "prettier": "^2.4.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
@@ -34,17 +34,17 @@
     "@mdx-js/react": "^1.0.21",
     "@primer/component-metadata": "^0.4.0",
     "@primer/react": "^34.5.0",
-    "@primer/octicons-react": "^16.0.0",
+    "@primer/octicons-react": "^16.3.1",
     "@styled-system/theme-get": "^5.0.12",
-    "@testing-library/jest-dom": "^4.1.0",
+    "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^9.1.3",
     "axios": "^0.21.2",
     "babel-jest": "^24.9.0",
     "copy-to-clipboard": "^3.2.0",
-    "date-fns": "^2.0.1",
+    "date-fns": "^2.28.0",
     "details-element-polyfill": "^2.4.0",
     "downshift": "^3.2.10",
-    "find-up": "^4.1.0",
+    "find-up": "^6.3.0",
     "framer-motion": "^1.4.2",
     "fuse.js": "^3.4.5",
     "gatsby-plugin-catch-links": "^2.1.2",
@@ -66,12 +66,12 @@
     "pluralize": "^8.0.0",
     "preval.macro": "^3.0.0",
     "prism-react-renderer": "^1.2.0",
-    "prismjs": "^1.25.0",
+    "prismjs": "^1.27.0",
     "react-addons-text-content": "^0.0.4",
     "react-element-to-jsx-string": "^14.0.3",
     "react-focus-on": "^3.3.0",
-    "react-frame-component": "^4.1.1",
-    "react-helmet": "^5.2.1",
+    "react-frame-component": "^5.2.1",
+    "react-helmet": "^6.1.0",
     "react-live": "^2.1.2",
     "react-measure": "^2.3.0",
     "read-pkg-up": "^6.0.0",

package/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>
   )

package/src/components/link.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import themeGet from '@styled-system/theme-get'
+
+const Link = styled.a`
+  text-decoration: underline;
+  text-underline-offset: 25%;
+  color: ${themeGet('colors.accent.fg')};
+`
+
+export default Link

package/src/components/wrap-root-element.js

@@ -1,5 +1,6 @@
 import {MDXProvider} from '@mdx-js/react'
-import {Link, ThemeProvider} from '@primer/react'
+import {ThemeProvider} from '@primer/react'
+import Link from './link'
 import React from 'react'
 import mdxComponents from '../mdx-components'
 import Blockquote from './blockquote'

package/src/search.worker.js

@@ -3,7 +3,7 @@ import debounce from 'lodash.debounce'
 ;(function searchWorker() {
   let fuse = null
 
-  // [MKT]: I landed on the debouce wait value of 50 based mostly on
+  // [MKT]: I landed on the debounce wait value of 50 based mostly on
   // experimentation. With both `leading` and `trailing` set to `true`, this
   // feels pretty snappy.
   //