Remove deprecated components (#361)

* Flex -> Box

* Grid -> Box

* Position -> Box

* Absolute -> Box

* Fixed -> Box

* Sticky -> Box

* Relative -> Box

* Update imports

* BorderBox -> Box

* Remove sass dependency

* Use sx prop instead of system props

* Update theme/src/components/header.js

* Update theme/src/components/header.js

* Update theme/src/components/table-of-contents.js

* Create large-rabbits-enjoy.md

Author: colebemis

.changeset/large-rabbits-enjoy.md

@@ -0,0 +1,5 @@
+---
+"@primer/gatsby-theme-doctocat": patch
+---
+
+Refactor internals to not use deprecated Primer React components

docs/content/components/caption.mdx

@@ -14,13 +14,13 @@ The caption component can be used to append a caption to images used in document
 ## Example
 
 ```jsx live
-<Flex alignItems="center" flexDirection="column">
+<Box display="flex" alignItems="center" flexDirection="column">
   <img
     alt=""
     src="https://s3.us-west-2.amazonaws.com/photos.puppyspot.com/breeds/245/card/500000291_medium.jpg"
   />
   <Caption>A beautiful husky puppy.</Caption>
-</Flex>
+</Box>
 ```
 
 <Note variant="warning">

docs/content/usage/customization.mdx

@@ -3,7 +3,7 @@ title: Customization
 description: Here are a few ways you can customize your Doctocat site.
 ---
 
-import {BorderBox} from '@primer/react'
+import {Box} from '@primer/react'
 import {Contributors} from '@primer/gatsby-theme-doctocat'
 
 ## Site metadata
@@ -98,7 +98,14 @@ module.exports = {
 
 If you have the `repository` in `package.json` and `repoRootPath` in `gatsby-config.js` set up correctly (as described [above](#edit-on-github-link)), Doctocat will automatically display contributors on the bottom of every page, like so:
 
-<BorderBox p={4} mb={3}>
+<Box
+  borderWidth="1px"
+  borderStyle="solid"
+  borderColor="border.default"
+  borderRadius={2}
+  p={4}
+  mb={3}
+>
   <Contributors
     contributors={[
       {
@@ -117,7 +124,7 @@ If you have the `repository` in `package.json` and `repoRootPath` in `gatsby-con
       },
     ]}
   />
-</BorderBox>
+</Box>
 
 These contributors are determined by commits. However, we know that commits aren't the only way to contribute. You can use [front matter](/usage/front-matter#additional-contributors) to give credit to people who aren't listed in the commit history but still contributed.
 

docs/content/usage/front-matter.mdx

@@ -2,7 +2,7 @@
 title: Front matter
 ---
 
-import {BorderBox} from '@primer/react'
+import {Box} from '@primer/react'
 import {StatusLabel} from '@primer/gatsby-theme-doctocat'
 import StorybookLink from '@primer/gatsby-theme-doctocat/src/components/storybook-link'
 import SourceLink from '@primer/gatsby-theme-doctocat/src/components/source-link'
@@ -80,9 +80,9 @@ source: https://github.com/path/to/code
 
 If the `source` front matter variable is defined, Doctocat will add a source code link to the top of the page, like this:
 
-<BorderBox p={4} mb={3}>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={4} mb={3}>
   <SourceLink href="#" />
-</BorderBox>
+</Box>
 
 <Note>
 
@@ -103,9 +103,9 @@ storybook: https://primer.style/view-components/stories/?path=/story/primer-avat
 
 If the `storybook` front matter variable is defined, Doctocat will add a storybook link to the top of the page, like this:
 
-<BorderBox p={4} mb={3}>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={4} mb={3}>
   <StorybookLink href="#" />
-</BorderBox>
+</Box>
 
 
 ## Additional contributors

docs/gatsby-config.js

@@ -13,5 +13,4 @@ module.exports = {
       },
     },
   ],
-  plugins: ['gatsby-plugin-sass'],
 }

docs/package.json

@@ -12,8 +12,6 @@
     "@primer/gatsby-theme-doctocat": "*",
     "@primer/react": "^34.5.0",
     "gatsby": "^2.24.52",
-    "gatsby-plugin-sass": "^2.1.0",
-    "node-sass": "^4.12.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

theme/.eslintrc.json

@@ -20,6 +20,7 @@
     "react/prop-types": "off",
     "react/display-name": "off",
     "eslint-comments/no-use": "off",
-    "no-shadow": "off"
+    "no-shadow": "off",
+    "primer-react/no-system-props": ["warn", {"includeUtilityComponents": true}]
   }
 }

theme/src/components/caption.js

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

theme/src/components/code.js

@@ -1,8 +1,8 @@
-import {Absolute, Box, Relative, Text} from '@primer/react'
+import {Box, Text} from '@primer/react'
 import Highlight, {defaultProps} from 'prism-react-renderer'
-import Prism from '../prism'
-import githubTheme from '../github'
 import React from 'react'
+import githubTheme from '../github'
+import Prism from '../prism'
 import ClipboardCopy from './clipboard-copy'
 import LiveCode from './live-code'
 
@@ -15,41 +15,38 @@ function Code({className, children, live, noinline, metastring}) {
   }
 
   return (
-    <Relative
+    <Box
       sx={{
         // Make <pre> adjust to the width of the container
         // https://stackoverflow.com/a/14406386
         display: 'table',
         tableLayout: 'fixed',
-        width: '100%'
+        width: '100%',
+        position: 'relative'
       }}
     >
-      <Absolute sx={{top: 0, right: 0, p: 2}}>
+      <Box sx={{top: 0, right: 0, p: 2, position: 'absolute'}}>
         <ClipboardCopy value={code} />
-      </Absolute>
+      </Box>
       <Highlight {...defaultProps} Prism={Prism} code={code} language={language} theme={githubTheme}>
         {({className, style, tokens, getLineProps, getTokenProps}) => (
           <Box
             as="pre"
             className={className}
-            mt={0}
-            mb={3}
-            p={3}
-            border={0}
             style={{...style, overflow: 'auto'}}
-            sx={{borderRadius: 2}}
+            sx={{borderRadius: 2, mt: 0, mb: 3, p: 3, border: 0}}
           >
             {tokens.map((line, i) => (
               <div key={i} {...getLineProps({line, key: i})}>
                 {line.map((token, key) => (
-                  <Text key={key} fontFamily="mono" fontSize={1} {...getTokenProps({token, key})} />
+                  <Text key={key} {...getTokenProps({token, key})} sx={{fontFamily: 'mono', fontSize: 1}} />
                 ))}
               </div>
             ))}
           </Box>
         )}
       </Highlight>
-    </Relative>
+    </Box>
   )
 }
 

theme/src/components/container.js

@@ -3,7 +3,7 @@ import React from 'react'
 
 function Container({children}) {
   return (
-    <Box id="skip-nav" width="100%" maxWidth={960} p={5} mx="auto">
+    <Box id="skip-nav" sx={{width: '100%', maxWidth: 960, p: 5, mx: 'auto'}}>
       {children}
     </Box>
   )