Merge branch 'release-20.1.0' into colebemis-patch-1

.github/pull_request_template.md

@@ -15,4 +15,4 @@ Please provide before/after screenshots for any visual changes
 - [ ] Tested in Edge
 
 
-Take a look at the [What we look for in reviews](https://github.com/primer/components/blob/master/CONTRIBUTING.md#what-we-look-for-in-reviews) section of the contributing guidelines for more information on how we review PRs.
+Take a look at the [What we look for in reviews](https://github.com/primer/components/blob/main/CONTRIBUTING.md#what-we-look-for-in-reviews) section of the contributing guidelines for more information on how we review PRs.

.github/workflows/bundlesize.yml

@@ -2,7 +2,7 @@ name: 💾 Bundlesize
 on:
   push:
     branches-ignore:
-      - master
+      - main
 
 jobs:
   bundlesize:
@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           path: 'old'
-          ref: 'master'
+          ref: 'main'
       - uses: actions/checkout@v2
         with:
           path: 'new'

.github/workflows/publish.yml

@@ -2,6 +2,7 @@ name: Primer Components
 on: [push]
 
 jobs:
+
   publish:
     name: Publish
     runs-on: ubuntu-latest
@@ -12,9 +13,10 @@ jobs:
         run: yarn
 
       - name: Publish to the npm registry
-        uses: "primer/publish@v2.0.0"
+        uses: "primer/publish@3.0.0"
         with:
-          args: "-- --unsafe-perm --allow-same-version"
+          npm_args: "--unsafe-perm --allow-same-version"
+          default_branch: "main"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

CONTRIBUTING.md

@@ -64,7 +64,7 @@ Default values for system props can be set in `Component.defaultProps`.
 
 Prop Types from system props such as `COMMON` or `TYPOGRAPHY` as well as styled-system functions can be spread in the component's prop types declaration (see example below). These need to go *after* any built-in styles that you want to be overridable.
 
- ⚠️ **Make sure to always set the default `theme` prop to our [theme](https://github.com/primer/components/blob/master/src/theme-preval.js)! This allows consumers of our components to access our theme values without a ThemeProvider.**
+ ⚠️ **Make sure to always set the default `theme` prop to our [theme](https://github.com/primer/components/blob/main/src/theme-preval.js)! This allows consumers of our components to access our theme values without a ThemeProvider.**
 
 Additionally, every component should support [the `sx` prop](https://primer.style/components/overriding-styles); remember to add `${sx}` to the style literal and `...sx.propTypes` to the component's `propTypes`.
 
@@ -249,9 +249,9 @@ If everything looks great, the design systems team member will approve the pull
 
 ### Deploying
 
-All of our documentation sites use the [Now integration](https://github.com/organizations/primer/settings/installations/1007619) to deploy documentation changes whenever code is merged into master. The integration also creates a preview site every time you commit code to a branch. To view the preview site, navigate to the PR and find the comment from the `now` bot. This will include a link to the preview site for your branch.
+All of our documentation sites use the [Now integration](https://github.com/organizations/primer/settings/installations/1007619) to deploy documentation changes whenever code is merged into main. The integration also creates a preview site every time you commit code to a branch. To view the preview site, navigate to the PR and find the comment from the `now` bot. This will include a link to the preview site for your branch.
 
-Once you merge your branch into master, any changes to the docs will automatically deploy. No further action is necessary.
+Once you merge your branch into main, any changes to the docs will automatically deploy. No further action is necessary.
 
 ### Path aliasing
 

README.md

@@ -13,11 +13,11 @@
   <a aria-label="contributors graph" href="https://github.com/primer/components/graphs/contributors">
     <img src="https://img.shields.io/github/contributors/primer/components.svg">
   </a>
-  <a aria-label="last commit" href="https://github.com/primer/components/commits/master">
+  <a aria-label="last commit" href="https://github.com/primer/components/commits/main">
     <img alt="" src=
   "https://img.shields.io/github/last-commit/primer/components.svg">
   </a>
-  <a aria-label="license" href="https://github.com/primer/components/blob/master/LICENSE">
+  <a aria-label="license" href="https://github.com/primer/components/blob/main/LICENSE">
     <img src="https://img.shields.io/github/license/primer/components.svg" alt="">
   </a>
 </p>
@@ -41,8 +41,8 @@ yarn add @primer/components
 
 
 ## Contributing
- We love collaborating with folks inside and outside of GitHub and welcome contributions! 
- 
+ We love collaborating with folks inside and outside of GitHub and welcome contributions!
+
 > 👉 See [the contributing docs](CONTRIBUTING.md) for more info on code style, testing, coverage, and troubleshooting.
 
 

docs/content/Header.md

@@ -0,0 +1,82 @@
+---
+title: Header
+---
+
+Use the `Header` component to create a header that has all of its items aligned vertically with consistent horizontal spacing.
+
+## Default example
+
+All items directly under the Header component should be a `Header.Item` component. Inside these components can be anything (text, forms, images...), and the `Header.Item` component will make sure these elements vertically align with each other.
+
+`Header.Item` elements have a built-in margin that will need to be overridden with the `mr={0}` props for the last element in the container. We relied on the prop here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
+
+```jsx live
+<Header>
+  <Header.Item>
+    <Header.Link href="#" fontSize={2}>
+      <StyledOcticon icon={MarkGithubIcon} size={32} mr={2} />
+      <span>GitHub</span>
+    </Header.Link>
+  </Header.Item>
+  <Header.Item full>Menu</Header.Item>
+  <Header.Item mr={0}>
+    <Avatar
+      src="https://github.com/octocat.png"
+      size={20}
+      square
+      alt="@octocat"
+    />
+  </Header.Item>
+</Header>
+```
+
+## Header with full-size item example 
+
+```jsx live
+<Header>
+  <Header.Item>Item 1</Header.Item>
+  <Header.Item
+    full
+    border={1}
+    borderStyle="solid"
+  >
+    Item 2
+  </Header.Item>
+  <Header.Item mr={0}>Item 3</Header.Item>
+</Header>
+```
+
+## Header with links example
+
+```jsx live
+<Header>
+  <Header.Item>
+    <Header.Link href="#">About</Header.Link>
+  </Header.Item>
+  <Header.Item>
+    <Header.Link href="#">Releases</Header.Link>
+  </Header.Item>
+  <Header.Item>
+    <Header.Link href="#">Team</Header.Link>
+  </Header.Item>
+</Header>
+```
+
+## System props
+
+`Header` and `Header.Item` components get `COMMON` and `BORDER` system props. `Header.Link` component gets `COMMON`, `BORDER`, and `TYPOGRAPHY` system props. Read our [System Props](/system-props) doc page for a full list of available props.
+
+## Component props
+
+### Header.Item
+
+| Prop name  | Type    | Description                                                                            |
+| :--------- | :------ | :------------------------------------------------------------------------------------- |
+| full | Boolean | stretches item to fill the available space |
+
+### Header.Link
+
+| Prop name  | Type    | Description                                                                            |
+| :--------- | :------ | :------------------------------------------------------------------------------------- |
+| as | String | sets the HTML tag for the component |
+| href | String | URL to be used for the Link |

docs/content/getting-started.md

@@ -71,7 +71,7 @@ This will apply the same `color`, `font-family`, and `line-height` styles to the
 
 ## Theming
 
-Components are styled using Primer's [theme](https://github.com/primer/components/blob/master/src/theme-preval.js) by default, but you can provide your own theme by using [styled-component's](https://styled-components.com/) `<ThemeProvider>`. If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/master/src/theme-preval.js) with your custom theme, pass your theme to the `<ThemeProvider>` in the root of your application like so:
+Components are styled using Primer's [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) by default, but you can provide your own theme by using [styled-component's](https://styled-components.com/) `<ThemeProvider>`. If you'd like to fully replace the Primer [theme](https://github.com/primer/components/blob/main/src/theme-preval.js) with your custom theme, pass your theme to the `<ThemeProvider>` in the root of your application like so:
 
 ```jsx
 import {ThemeProvider} from 'styled-components'

docs/content/index.md

@@ -30,4 +30,4 @@ To run `@primer/components` locally when adding or updating components:
 2. Install dependencies: `yarn`
 3. Run the dev app: `yarn start`
 
-> 👉 See [the contributing docs](https://github.com/primer/components/blob/master/CONTRIBUTING.md) for more info on code style, testing, and coverage.
+> 👉 See [the contributing docs](https://github.com/primer/components/blob/main/CONTRIBUTING.md) for more info on code style, testing, and coverage.

docs/content/primer-theme.md

@@ -4,13 +4,13 @@ title: Primer Theme
 
 import {theme} from '@primer/components'
 
-Primer React components come with built-in access to our Primer theme. The [theme file](https://github.com/primer/components/blob/master/src/theme-preval.js) contains an object which holds values for common variables such as color, fonts, box shadows, and more. Our theme file pulls many of its color and typography values from [primer-primitives](https://github.com/primer/primer-primitives).
+Primer React components come with built-in access to our Primer theme. The [theme file](https://github.com/primer/components/blob/main/src/theme-preval.js) contains an object which holds values for common variables such as color, fonts, box shadows, and more. Our theme file pulls many of its color and typography values from [primer-primitives](https://github.com/primer/primer-primitives).
 
 Many of our theme keys correspond to system props on our components. For example, if you'd like to set the max width on a `<Box>` set the `maxWidth` prop to `medium`: `<Box maxWidth='medium'>`
 
 In the background, [styled-system](https://github.com/styled-system/styled-system) does the work of finding the `medium` value from `maxWidth` key in the theme file and applying the corresponding CSS.
 
-Our full theme can be found [here](https://github.com/primer/components/blob/master/src/theme-preval.js).
+Our full theme can be found [here](https://github.com/primer/components/blob/main/src/theme-preval.js).
 
 ### Custom Theming
 

docs/gatsby-config.js

@@ -11,6 +11,7 @@ module.exports = {
       resolve: '@primer/gatsby-theme-doctocat',
       options: {
         repoRootPath: '..',
+        defaultBranch: 'main'
       },
     },
     {

docs/package.json

@@ -11,7 +11,7 @@
     "node": ">= 10.x"
   },
   "dependencies": {
-    "@primer/gatsby-theme-doctocat": "0.24.1",
+    "@primer/gatsby-theme-doctocat": "^0.25.3",
     "@primer/octicons-react": "^10.0.0",
     "@styled-system/prop-types": "^5.1.0",
     "@styled-system/theme-get": "^5.1.0",

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -10,13 +10,14 @@ import {
   PersonIcon,
   MailIcon,
   GitCommitIcon,
-  FlameIcon
+  FlameIcon,
+  MarkGithubIcon
 } from '@primer/octicons-react'
 import State from '../../../components/State'
 
 export default {
-  ...primerComponents,
   ...doctocatComponents,
+  ...primerComponents,
   State,
   CheckIcon,
   SearchIcon,
@@ -27,5 +28,6 @@ export default {
   PersonIcon,
   MailIcon,
   GitCommitIcon,
-  FlameIcon
+  FlameIcon,
+  MarkGithubIcon
 }

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -57,6 +57,8 @@
       url: /Flex
     - title: Grid
       url: /Grid
+    - title: Header
+      url: /Header
     - title: Heading
       url: /Heading
     - title: Label