Merge pull request #773 from primer/release-12.3.0

Release 12.3.0

.github/CONTRIBUTING.md

@@ -50,17 +50,17 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
 
 **Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.
 
-### Updating Primer modules
+### Updating Primer CSS modules
 
-Anyone can open a pull request on Primer. You do not need to work at GitHub or be a member of the org to open a pull request.
+Anyone can open a pull request on Primer CSS. You do not need to work at GitHub or be a member of the org to open a pull request.
 
-1. Fork and clone [this repository](https://github.com/primer/primer).
+1. Fork and clone [this repository](https://github.com/primer/css).
 2. Configure and install the dependencies: `npm install`
 3. Create a new branch from master `git checkout -b my-branch-name`
 4. Make your changes and commit them.
 5. Push your branch and open a pull request. Add a comment describing your proposed changes and request a review from `@primer/ds-core`.
 6. Wait for CI tests to finish.
-   - If the tests pass, you should see a status check telling you which alpha version of primer you can install with npm to test your work in other projects.
+   - If the tests pass, you should see a status check telling you which alpha version of `@primer/css` you can install with npm to test your work in other projects.
    - If the tests fail, review the logs and address any issues.
    - If the builds fail for any other reason (as they occasionally do), they may need to be manually restarted.
 7. When CI tests pass, a new npm alpha release will be posted under the CI checks, you can use this npm version for testing in your project or with a GitHub site if you are staff.
@@ -71,7 +71,7 @@ Here are a few things you can do that will increase the likelihood of your pull
 - Keep your change as focused as possible. If there are multiple changes you would like to make that are not dependent upon each other, consider submitting them as separate pull requests.
 - Write a [good commit message](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
 
-## Releasing a new Primer version
+## Releasing a new Primer CSS version
 See [RELEASING.md](../RELEASING.md) for our release process.
 
 ## Resources
@@ -80,6 +80,6 @@ See [RELEASING.md](../RELEASING.md) for our release process.
 - [Using Pull Requests](https://help.github.com/articles/using-pull-requests/)
 - [GitHub Help](https://help.github.com)
 
-[fork]: https://github.com/primer/primer/fork
-[pr]: https://github.com/primer/primer/compare
-[style]: https://styleguide.github.com/primer/principles/
+[fork]: https://github.com/primer/css/fork
+[pr]: https://github.com/primer/css/compare
+[style]: https://primer.style/css/principles

.github/ISSUE_TEMPLATE/primer-bug-report.md

@@ -1,6 +1,6 @@
 ---
-name: Primer bug report
-about: Create a report to help us improve primer
+name: Primer CSS bug report
+about: Create a report to help us improve Primer CSS
 
 ---
 

.github/ISSUE_TEMPLATE/primer-feature-request.md

@@ -1,5 +1,5 @@
 ---
-name: Primer feature request
+name: Primer CSS feature request
 about: Suggest an idea for this project
 
 ---

CHANGELOG.md

@@ -1,3 +1,26 @@
+# 12.3.0
+
+### :rocket: Enhancement
+- More color utilities! [#760](https://github.com/primer/css/pull/760) ([@shawnbot](https://github.com/shawnbot))
+- Add pink to Primer! 💖🌸💕🌷💞🎀💗🌺💝 [#776](https://github.com/primer/css/pull/776), [#778](https://github.com/primer/css/pull/778) ([@emplums](https://github.com/emplums)))
+
+### :house: Internal
+- Update storybook [#777](https://github.com/primer/css/pull/777) ([@emplums](https://github.com/emplums))
+- Add bundle size report [#772](https://github.com/primer/css/pull/772) ([@shawnbot](https://github.com/shawnbot))
+
+### :memo: Documentation
+- Update Primer references to Primer CSS [#771](https://github.com/primer/css/pull/771) ([@emplums](https://github.com/emplums))
+- Add Edit on GitHub links to docs [#770](https://github.com/primer/css/pull/770) ([@emplums](https://github.com/emplums))
+- Anchor Link in Docs [#768](https://github.com/primer/css/pull/768) ([@emplums](https://github.com/emplums))
+
+### :house: Internal
+- Update RELEASING [#757](https://github.com/primer/css/pull/757) ([@simurai](https://github.com/simurai))
+
+### Committers
+- [@emplums](https://github.com/emplums)
+- [@shawnbot](https://github.com/shawnbot)
+- [@simurai](https://github.com/simurai)
+
 # 12.2.3
 
 ### :bug: Bug Fix

DEVELOP.md

@@ -1,4 +1,4 @@
-# Primer Development
+# Primer CSS Development
 
 If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way. If you have any questions or problems, don't hesitate to [file an issue](https://github.com/primer/css/issues/new).
 
@@ -60,23 +60,13 @@ If, for whatever reason, the dev server isn't syncing files from `src/` to `page
     script/sync
     ```
 
-    **If you find yourself needing to do this often, please [file an issue](/primer/primer/issues/new) and tag `@shawnbot`**. :bow:
+    **If you find yourself needing to do this often, please [file an issue](/primer/css/issues/new) and tag `@shawnbot`**. :bow:
 
 ### The pages directory
-The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we plan to host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
+The [pages directory](./pages/) contains all of the files that map to URLs on the site. Because we host the site at `primer.style/css` (and because of the way that Now's path aliasing feature works), we nest all of our documentation under the [css subdirectory](./pages/css).
 
 The sync task maintains a list of files copied from `src/` in `pages/css/.gitignore`, which ensures that none of these generated files are checked into git.
 
-### Sync internals
-We use [Metalsmith] to sync the source docs to the `pages` directory and transform them in the following ways:
-
-1. We filter the list of files to only Markdown documents (`**/*.md`).
-1. Many bundle `README.md`s wrap the actual documentation content in `<!-- %docs -->` HTML comments that usually include YAML frontmatter. In these instances, we extract the content that portion and reformat the frontmatter.
-1. We filter out any Markdown files that _don't_ include a `path` frontmatter key, and rename the destination file to match the `path` (e.g. `path: foo/bar` writes to `pages/css/foo/bar.md`).
-1. We set the `source` frontmatter key to a fully-qualified `github.com` URL for the source file so that we can link directly to it.
-1. We read the list of files from `pages/css/.gitignore` and delete them from the filesystem, then write the new list of paths so that they aren't committed to git.
-
-All of the logic for syncing the source docs (and transforming them in transit) is controlled in [`lib/sync.js`](./lib/sync.js), and each "step" in the transformation (as well as the watching) is implemented as a Metalsmith plugin.
 
 ### URL tests
 We have a script that catches inadvertent URL changes caused by renaming or deleting Markdown docs:
@@ -124,7 +114,6 @@ npm run
 
 
 [@primer/css]: https://www.npmjs.com/package/@primer/css
-[metalsmith]: https://metalsmith.io/
 [run-scripts]: https://docs.npmjs.com/cli/run-script
 [storybook]: https://storybook.js.org/
 [npm]: https://www.npmjs.com/

RELEASING.md

@@ -1,18 +1,18 @@
 # Releasing a new version of Primer CSS 🎉
 
+## Prepare the release (in `primer/css`)
 
-## In this repo
+1. Decide which [PRs](https://github.com/primer/css/pulls) should be part of the next release and if it will be a major, minor or patch `<version>`. You may also check the [release tracking project
+](https://github.com/primer/css/projects/2#column-4482699) or ask your team members in Slack.
 
-1. Check off all of the boxes in your release PR.
+1. Create a new release branch from `master` and name it `release-<version>`.
 
-1. Test your changes with the latest release candidate version [in github/github](#in-github-github).
+1. Start merging existing PRs into the release branch. Note: You have to change the base branch from `master` to the `release-<version>` branch before merging.
 
-1. Once the release PR is approved and you've done necessary testing, merge it. After tests run, the site will be deployed and `@primer/css` will be published with your changes.
-
-1. Create a new release branch for the next release from `master` and name it `release-<version>`. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, and removing irrelevant headings:
+1. Create a new PR for the `release-<version>` branch. Please use the following template for the PR description, linking to the relevant issues and/or pull requests for each change, removing irrelevant headings and checking off all of the boxes of the ship checklist:
 
     ```md
-    # Primer [Major|Minor|Patch] Release
+    # Primer CSS [Major|Minor|Patch] Release
 
     Version: 📦 **0.0.0**
     Approximate release date: 📆 DD/MM/YY
@@ -25,13 +25,13 @@
 
     ### :bug: Bug Fix
     - [ ] Description #
-    
+
     ### :nail_care: Polish
     - [ ] Description #
-    
+
     ### :memo: Documentation
     - [ ] Description #
-    
+
     ### :house: Internal
     - [ ] Description #
 
@@ -40,45 +40,66 @@
     ### Ship checklist
 
     - [ ] Update `CHANGELOG.md`
-    - [ ] Update the `version` field in `package.json` to match the release version
-    - [ ] [Create a new release](https://github.com/primer/css/releases/new)
-    - [ ] [Update github/github](https://github.com/primer/css/blob/master/RELEASING.md#in-githubgithub)
-    - [ ] Create a new pull request for the next release
+    - [ ] Update the `version` field in `package.json`
+    - [ ] Test the release candidate version with `github/github`
+    - [ ] Merge this PR and [create a new release](https://github.com/primer/css/releases/new)
+    - [ ] Update `github/github`
+
+    For more details, see [RELEASING.md](https://github.com/primer/css/blob/master/RELEASING.md).
 
     /cc @primer/ds-core
     ```
 
+1. Update `CHANGELOG.md`
+
+1. Update the `version` field in `package.json` to match the release version. You may also run the `npm version v<version>` command.
+
 1. Wait for your checks to pass, and take note of the version that [primer/publish] lists in your status checks.
 
     **ProTip:** The release candidate version will always be `<version>-rc.<sha>`, where `<version>` comes from the branch name and `<sha>` is the 7-character commit SHA.
 
-### In `github/github`:
 
-1. Create a new branch.
+## Test the release candidate (in `github/github`):
+
+1. Create a new branch in the `github/github` repo, name it `primer-<version>`.
 
 1. Update the Primer CSS version to the published release candidate with:
 
     ```sh
     bin/npm install @primer/css@<version>-rc.<sha>
     ```
 
-    Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
+    Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
 
-1. If you need to make changes to github/github due to the Primer release, do them in a branch and merge _that_ into your release branch after testing.
+1. If you need to make changes to github/github due to the Primer CSS release, do them in a branch and merge _that_ into your release branch after testing.
 
 1. Add or re-request reviewers and fix any breaking tests.
 
 1. Test on review-lab.
 
-1. Publish `@primer/css` to the `latest` dist-tag by merging the release branch and waiting for [primer/publish] to finish.
 
-1. Install the latest published version with:
+## Publish the release (in `primer/css`)
+
+1. If the release PR got approved and you've done necessary testing, merge it.
+
+    After tests run, the docs site will be deployed and `@primer/css` will be published with your changes to the `latest` dist-tag. You can check [npm](https://www.npmjs.com/package/@primer/css?activeTab=versions) to see if [primer/publish] has finished.
+
+1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
+
+1. Copy the changes from the [CHANGELOG] and paste them into the release notes.
+
+1. Publish 🎉
+
+
+## Update github.com (in `github/github`):
+
+1. Install the latest published version in the same `primer-<version>` branch created earlier with:
 
     ```
     bin/npm install @primer/css@<version>
     ```
 
-    Then commit and push the changes to `package.json`, `package-lock.json`, and `vendor/npm`.
+    Then commit and push the changes to `package.json`, `package-lock.json`, `LICENSE` and `vendor/npm`.
 
 1. Fix any breaking tests.
 
@@ -87,11 +108,12 @@
 
 ### Publish the release
 
-1. [Create a new release](https://github.com/primer/primer/releases/new) with tag `v<version>`.
+1. [Create a new release](https://github.com/primer/css/releases/new) with tag `v<version>`.
 
 2. Copy the changes from the [CHANGELOG] and paste them into the release notes.
 
 3. Publish 🎉
 
+
 [changelog]: ../CHANGELOG.md
 [primer/publish]: https://github.com/primer/publish

docs/markdown.js

@@ -1,15 +1,24 @@
 import React from 'react'
-import {Heading, Link} from '@primer/components'
+import {Link} from '@primer/components'
+import {MarkdownHeading} from '@primer/blueprints'
 import {CodeExample} from '@primer/blueprints/next-components'
 import Outline from './Outline'
 
-export const H1 = props => <Heading fontSize={6} fontWeight="light" {...props} />
+export const H1 = props => <MarkdownHeading {...props} />
+export const H2 = props => <MarkdownHeading as="h2" {...props} />
+export const H3 = props => <MarkdownHeading as="h3" {...props} />
+export const H4 = props => <MarkdownHeading as="h4" {...props} />
+export const H5 = props => <MarkdownHeading as="h5" {...props} />
 
 export default function getComponents(page = {}) {
   const {outline: getOutline = () => []} = page
 
   return {
     h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
     // render links with our component
     a: Link,
     // render code blocks with our wrapper around react-live