Merge branch 'master' into release-14.0.0

Author: Emily Plummer

.babelrc

@@ -1,16 +1,19 @@
 {
   "presets": [
-    "next/babel"
+    ["@babel/preset-react", {"modules": false}],
+    ["@babel/preset-env", {"modules": false}]
   ],
   "plugins": [
     "macros",
     "add-react-displayname",
-    "babel-plugin-styled-components"
+    "babel-plugin-styled-components",
+    "@babel/plugin-proposal-object-rest-spread"
   ],
   "env": {
     "test": {
       "presets": [
-        ["next/babel", {"preset-env": {"modules": "commonjs"}}]
+        ["@babel/preset-react", {"modules": "commonjs"}],
+        ["@babel/preset-env", {"modules": "commonjs"}]
       ]
     }
   }

.github/main.workflow

@@ -0,0 +1,26 @@
+name: Primer Components Workflow
+on: [push]
+
+jobs:
+  publish:
+    name: Publish
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm test
+
+      - name: Publish to the npm registry
+        uses: "primer/publish@v2.0.0"
+        with:
+          args: "-- --unsafe-perm --allow-same-version"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

.github/workflows/main.yml

@@ -1,9 +1,5 @@
-.*.swp
+.test
+node_modules
 .DS_Store
-*.log
-*.tgz
-.next/
-.test/
 coverage/
 dist/
-node_modules

.gitignore

@@ -100,13 +100,10 @@ Categories of system props are exported from `src/constants.js`:
 
 ## Writing documentation
 
-We use [Next.js](https://github.com/zeit/next.js/) and [MDX Docs](https://github.com/jxnblk/mdx-docs/) to power our documentation site at [https://primer.style/components](https://primer.style/components/).
+We use [Doctocat](https://github.com/primer/doctocat) to power our documentation site at [https://primer.style/components](https://primer.style/components/).
 
-To add a new component to our documentation site:
+To add a new component to our documentation site, create a new file with the `.md` extension for your component in `docs/content/components`.
 
-1. Create a new file with the `.md` extension for your component in `pages/components/docs`.
-2. Copy & paste the template from `doc-template.md` & replace placeholder brackets with relevant information.
-3. Add the new file to the `index.js` in `pages/components/docs`
 
 ## Deployment
 We deploy the Primer Components site using [Now]. Install the Now CLI and log in with:

CONTRIBUTING.md

@@ -117,7 +117,7 @@ const App = (props) => {
 
 #### Static CSS rendering
 
-If you're rendering React components both server-side _and_ client-side, we suggest following [styled-component's server-side rendering instructions](https://www.styled-components.com/docs/advanced#server-side-rendering) to avoid the flash of unstyled content for server-rendered components. This repo's [documentation template component](https://github.com/primer/components/blob/master/pages/_document.js) demonstrates how to do this in [Next.js].
+If you're rendering React components both server-side _and_ client-side, we suggest following [styled-component's server-side rendering instructions](https://www.styled-components.com/docs/advanced#server-side-rendering) to avoid the flash of unstyled content for server-rendered components.
 
 ## Local Development
 
@@ -143,4 +143,3 @@ To run `@primer/components` locally when adding or updating components:
 [styled-components]: https://www.styled-components.com/docs
 [Primer CSS]: https://github.com/primer/primer
 [flash of unstyled content]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
-[Next.js]: https://github.com/zeit/next.js

README.md

@@ -0,0 +1,91 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# Gatsby
+public/

docs/.gitignore

@@ -0,0 +1,57 @@
+import * as styledSystem from 'styled-system'
+import PropTypes from 'prop-types'
+import systemPropTypes from '@styled-system/prop-types'
+import themeGet from '@styled-system/theme-get'
+import {theme} from '@primer/components'
+
+const {get: getKey, compose, system} = styledSystem
+
+export const get = key => themeGet(key, getKey(theme, key))
+
+const whiteSpace = system({
+  whiteSpace: {
+    property: 'whiteSpace',
+    cssProperty: 'whiteSpace'
+  }
+})
+
+export const TYPOGRAPHY = compose(
+  styledSystem.typography,
+  whiteSpace
+)
+
+TYPOGRAPHY.propTypes = {
+  ...systemPropTypes.typography,
+  whiteSpace: PropTypes.oneOf(['normal', 'nowrap', 'pre-wrap', 'pre', 'pre-line'])
+}
+
+export const COMMON = compose(
+  styledSystem.space,
+  styledSystem.color,
+  styledSystem.display
+)
+COMMON.propTypes = {
+  ...systemPropTypes.space,
+  ...systemPropTypes.color
+}
+export const BORDER = compose(
+  styledSystem.border,
+  styledSystem.shadow
+)
+BORDER.propTypes = {
+  ...systemPropTypes.border,
+  ...systemPropTypes.shadow
+}
+
+// these are 1:1 with styled-system's API now,
+// so you could consider dropping the abstraction
+export const LAYOUT = styledSystem.layout
+export const POSITION = styledSystem.position
+export const FLEX = styledSystem.flexbox
+export const GRID = styledSystem.grid
+
+TYPOGRAPHY.propTypes = systemPropTypes.typography
+LAYOUT.propTypes = systemPropTypes.layout
+POSITION.propTypes = systemPropTypes.position
+FLEX.propTypes = systemPropTypes.flexbox
+GRID.propTypes = systemPropTypes.grid