Update system font stack to system-ui for testing

.github/CONTRIBUTING.md

@@ -1,9 +1,5 @@
 ## Contributing
 
-[fork]: https://github.com/primer/primer/fork
-[pr]: https://github.com/primer/primer/compare
-[style]: https://styleguide.github.com/primer/principles/
-
 Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 
 ## Using the issue tracker
@@ -75,113 +71,15 @@ 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 🎉
-
-This section is targeted at maintainers of primer, to instruct them on the processes for releasing a new version.
-
-### In `primer/primer`:
-
-1. Find or create a new pull request with a release branch from `master` and name it `release-<version>`.
-
- (CI will publish a release candidate version to npm for branches prefixed with `release`. These version numbers have a `rc.<number>` suffix on them)
-
- For the pull request you can use the following template.
-
- ```md
-  # Primer Minor Release
-
-  Tracking Issue for next release: 📦 **0.0.0**
-  Approximate release date: 📆
-
-  ### Must
-
-  - [ ]
-
-  ### Should
-
-  - [ ]
-
-  ### Could
-
-  - [ ]
-
-  ----
-
-  ### Ship checklist
-
-  - [ ] Update CHANGELOG
-  - [ ] Run version bump
-  - [ ] Update primer.github.io
-  - [ ] Update github/github
-  - [ ] Update the style guide
-  - [ ] Update the release tag note
-  - [ ] Create a new pull request for the next release
-
-  /cc @primer/ds-core
- ```
-
-2. Go through the tracking issue and make sure everything that should be merged in is merged in.
-
-3. Once your builds finish, click on the details links for the continuous-integration/travis-ci/push build.  Expand the `Deploying application` output and you should be able to find an outputted change log here. Copy this and update the [CHANGELOG.md](https://github.com/primer/primer/blob/master/CHANGELOG.md) file.
-
-4. Run the version bump in your terminal: `npm run bump`.
-
-5. Test your changes with the latest release candidate version in the appropriate places (styleguide, storybook, github/github).
-
-6. Once the release PR is approved and you've done necessary testing, merge to `master`. This will trigger a publish to npm.
-
-### In `github/github`:
-
-1. Create a new branch
-
-2. Update the primer version in your terminal  `bin/npm install primer@<version>`.
-
-3. Update `stylelint-config-primer` in your terminal to the appropriate version `bin/npm install stylelint-config-primer@latest`.
-
-4. If you need to make changes to github/github due to the Primer release, make a separate branch. When ready, merge that branch into your release branch.
-
-5. Add reviewers.
-
-6. Check that every deleted vendor file has an accompanying updated vendor file and that the version numbers look correct.
-
-7. Test on review-lab.
-
-8. When ready, merge! 🎉
-
-
-## Other items that need to be done after publishing Primer
-
-#### Update the Style Guide
-
-1. In [github/styleguide](https://github.com/github/styleguide), update `primer` to your newly released version in your terminal:
-
-  `npm install primer@latest`
-
-2. Then  run: `script/update-primer-docs`.
-
-3. Commit changes, make PR, get it approved, merge! 🚀
-
-#### Update [primer.github.io](primer.github.io)
-
-1. Edit  [index.html](https://github.com/primer/primer.github.io/blob/master/index.html) to include the latest version.
-
-#### Update Storybook
-
-1. Pull the latest from master on primer/primer (after merging in release branch).
-
-2. Run `npm run publish-storybook`.
-
-#### Publish release tag
-
-1. Create a new release tag [here](https://github.com/primer/primer/releases/new).
-
-2. Copy the changes from the [CHANGELOG](https://github.com/primer/primer/blob/master/CHANGELOG.md) and paste it into the release notes.
-
-3. Publish 🎉
-
+## Releasing a new Primer version
+See [RELEASING.md](../RELEASING.md) for our release process.
 
 ## Resources
 
 - [Contributing to Open Source on GitHub](https://guides.github.com/activities/contributing-to-open-source/)
 - [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/

.gitignore

@@ -1,8 +1,9 @@
+*.lerna_backup
+*.log
+*/*/package-lock.json
 .DS_Store
+.changelog
 .sass-cache
-node_modules
-*.log
-build
 _site
-*.lerna_backup
-.changelog
+build
+node_modules

.npmrc

@@ -1,2 +1,3 @@
 save=true
 save-exact=true
+no-package-lock=true

.storybook/lib/storiesFromMarkdown.js

@@ -1,65 +1,27 @@
-import remark from 'remark'
-import parents from 'unist-util-parents'
-import select from 'unist-util-select'
-import findBefore from 'unist-util-find-before'
+import parseCodeBlocks from 'code-blocks/lib/fromString'
 import htmlToReact from 'html-to-react'
-import parsePairs from 'parse-pairs'
-import React from 'react'
-import ReactDOMServer from 'react-dom/server'
-import {Octicon} from '../Octicon'
 
 const htmlParser = new htmlToReact.Parser()
 
-const railsOcticonToReact = (html) => {
-  // <%= octicon "tools" %> to <Octicon name="tools" />
-  const octre = /<%= octicon[\(\s]["']([a-z\-]+)["'][^%]*%>/gi
-  html = html.replace(octre, (match, name) => {
-    return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
-  })
-  return html
-}
-
-const parseBlockAttrs = (node, file) => {
-  const pairs = node.lang.replace(/^html\s*/, '')
-  const attrs = pairs.length ? parsePairs(pairs) : {}
-  attrs.title = attrs.title
-    || getPreviousHeading(node)
-    || `story @ ${file}:${node.position.start.line}`
-  node.block = attrs
-  return node
-}
-
-const nodeToStory = (node, file) => {
-  const html = railsOcticonToReact(node.value)
-  const {title} = node.block
+const blockToStory = block => {
   return {
-    title,
-    story: () => htmlParser.parse(html),
-    html,
-    file,
-    node,
+    title: block.title,
+    story: () => htmlParser.parse(block.value),
+    block,
   }
 }
 
-const getPreviousHeading = node => {
-  const heading = findBefore(node.parent, node, 'heading')
-  return (heading && !heading.used)
-    ? (heading.used = true, heading.children.map(c => c.value).join(''))
-    : undefined
-}
-
-export default req => {
-  return req.keys()
-    .filter(file => !file.match(/node_modules/))
-    .reduce((stories, file) => {
-      const content = req(file)
-      const ast = parents(remark.parse(content))
-      const path = file.replace(/^\.\//, '')
-      return stories.concat(
-        select(ast, 'code[lang^=html]')
-          .map(parseBlockAttrs)
-          .filter(({block}) => block.story !== "false")
-          .map(node => nodeToStory(node, path))
-      )
-    }, [])
+export default function storiesFromMarkdown(req) {
+  return req.keys().reduce((stories, file) => {
+    const markdown = req(file)
+    const path = file.replace(/^\.\//, '')
+    const blocks = parseCodeBlocks(markdown, path)
+      .filter(block => {
+        // read: ```html *
+        // skip: ```html * story="false"
+        return block.lang === 'html' && block.info.story !== 'false'
+      })
+      .map(blockToStory)
+    return stories.concat(blocks)
+  }, [])
 }

.travis.yml

@@ -1,6 +1,6 @@
 language: node_js
 node_js:
-  - 7
+  - 8
 
 env:
   global:

CHANGELOG.md

@@ -1,3 +1,46 @@
+# 10.10.0
+
+#### :rocket: Enhancement
+* [#573](https://github.com/primer/primer/pull/573) Add Progress component. ([@emilybrick](https://github.com/emilybrick))
+* [#561](https://github.com/primer/primer/pull/561) Add HTML `hidden` attribute docs, increase `[hidden]` selector specificity. ([@shawnbot](https://github.com/shawnbot) h/t @jonrohan)
+
+#### :bug: Bug Fix
+* [#604](https://github.com/primer/primer/pull/604) Fix Button group focus ring z-index issues. ([@shawnbot](https://github.com/shawnbot))
+* [#570](https://github.com/primer/primer/pull/570) Make `.blankslate-narrow` responsive. ([@crhallberg](https://github.com/crhallberg))
+* [#591](https://github.com/primer/primer/pull/591) Add fs-extra to `primer-module-build.dependencies`. ([@shawnbot](https://github.com/shawnbot))
+
+#### :memo: Documentation
+* [#585](https://github.com/primer/primer/pull/585) Improve contributing docs and add DEVELOP.md. ([@shawnbot](https://github.com/shawnbot))
+
+#### :house: Internal
+* [#597](https://github.com/primer/primer/pull/597) Fix primerize, add "fresh" run-script, etc. ([@shawnbot](https://github.com/shawnbot))
+
+#### Committers: 3
+- Chris Hallberg ([crhallberg](https://github.com/crhallberg))
+- Emily Brick ([emilybrick](https://github.com/emilybrick))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+
+# 10.9.0
+#### :rocket: Enhancement
+* [#586](https://github.com/primer/primer/pull/586) Hiding .Counter component when it's empty.. ([@jonrohan](https://github.com/jonrohan))
+* [#545](https://github.com/primer/primer/pull/545) Simplify responsive utilities with $responsive-variants. ([@shawnbot](https://github.com/shawnbot))
+* [#557](https://github.com/primer/primer/pull/557) Add !important to [hidden]. ([@muan](https://github.com/muan))
+
+#### :memo: Documentation
+* [#580](https://github.com/primer/primer/pull/580) Remove invalid button classes. ([@shawnbot](https://github.com/shawnbot))
+
+#### :house: Internal
+* [#581](https://github.com/primer/primer/pull/581) Use code-blocks. ([@shawnbot](https://github.com/shawnbot))
+* [#530](https://github.com/primer/primer/pull/530) Adding user details to storybook publish script. ([@jonrohan](https://github.com/jonrohan))
+* [#579](https://github.com/primer/primer/pull/579) Upgrade to lerna@2.11, rebuild package-lock. ([@shawnbot](https://github.com/shawnbot))
+
+#### Committers: 5
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Mickaël Derriey ([mderriey](https://github.com/mderriey))
+- Mu-An Chiou ([muan](https://github.com/muan))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Sophie Shepherd ([sophshep](https://github.com/sophshep))
+
 # 10.8.1
 #### :bug: Bug Fix
 * [#554](https://github.com/primer/primer/pull/554) Fixes peer dependency issues ([@emplums](https://github.com/emplums))

DEVELOP.md

@@ -0,0 +1,88 @@
+# Primer Development
+
+If you've made it this far, **thank you**! We appreciate your contribution, and hope that this document helps you along the way.
+
+## Structure
+The project is structured as a [monorepo] made up of lots of small npm modules, many of which depend on each other. We use [Lerna] to manage, version, and publish all of the packages together.
+
+The top-level `package.json` is not published, but tracks common dependencies for developing Primer, and hosts some useful npm [run-scripts]. See the [scripts section](#scripts) for more info.
+
+## Workflow
+The typical Primer workflow looks something like this:
+
+1. [Install](#install)
+2. [Start Storybook](#storybook)
+3. Navigate to the module you're working on and modify the SCSS and/or markdown files.
+4. Test your changes in Storybook.
+5. Push your work to a new branch to test it on Travis and have it reviewed by the Primer "core" team.
+
+## Install
+Run `npm install` to install the npm dependencies and automatically run link all of the local packages together with `npm run bootstrap`.
+
+### Troubleshooting install problems
+If you run into trouble installing, it's always best to ensure that you're starting from a clean slate by running the following from the repository root directory:
+
+```sh
+npm run fresh
+```
+
+If _that_ gives you problems, then you can try manually deleting everything and starting over:
+
+```
+rm -rf node_modules
+rm -f package-lock.json */*/package-lock.json
+npm install
+```
+
+**You may need to do this whenever switching between branches with different dependencies, submodules, or versions of Node and/or npm.** The Primer core team generally uses the latest major version of Node (10 as of this writing), but our CI tests run Node 8 and npm 6. You can check which versions you're running with:
+
+```sh
+npm --version
+node --version
+```
+
+## Storybook
+Run `npm start` to start up [Storybook], then visit [localhost:3000](http://localhost:3000) to test your work. By default, all `html` code blocks of all `*.md` files in each module will be rendered as stories and listed under the module's name in the left-hand nav. File changes should trigger live reload automatically after a brief delay.
+
+If the package you're working on has a `stories.js`, it probably includes a snippet like this:
+
+```js
+const stories = storiesOf('Module name', module)
+
+storiesFromMarkdown(require.context('.', true, /\.md$/))
+  .forEach(({title, story}) => {
+    stories.add(title, story)
+  })
+```
+
+This is how we find all of the Markdown files in the package directory and generate stories from their code blocks. Storybook sections are labeled by the first argument to `storiesOf()` (in the above example, "Module name"), and individual stories get their titles from either the previous Markdown heading or the `title` attribute in the fenced code block. See the [`code-blocks` docs](https://npmjs.com/package/code-blocks) and the [`storiesFromMarkdown()` source](./.storybook/lib/storiesFromMarkdown.js) for more info.
+
+## CSS packages
+All of the Primer CSS packages live in the [modules](./modules) subdirectory, including the [`primer`](./modules/package) omnibus package.
+
+## Tools
+Many tools specific to development of Primer CSS live in the [tools](./tools) subdirectory. 
+
+## Scripts
+The [`script` directory](./script) houses a collection of scripts that we use to maintain, test, build, and publish packages. Some scripts of note:
+
+* `script/check-imports` compares the list of Primer npm dependencies for each package with SCSS `@import` statements in its source, and warns if any mismatches (dependencies without corresponding imports, or vice-versa) are found.
+* `script/compare-published` compares the latest published versions of each Primer CSS package with the `version` field in its local `package.json`, and reports any discrepancies.
+* `script/get-packages` lists all of the package subdirectories from both `modules` and `tools` directories, and is useful for iterating in shell scripts:
+
+    ```sh
+    for pkg in $(script/get-packages); do
+      echo $pkg
+    done
+    ```
+
+    If you're looking for more detail, you can also run `npx lerna ls`, which will list the packages by name along with their versions.
+
+Scripts like `lint-scss`, `notify`, and `test-docs` are called from individual packages to run specific common tasks; `npm-run` and `npm-run-all` are used more generally to run monorepo-installed npm utilities within the package directory, and can probably be refactored to simply run [npx].
+
+
+[monorepo]: https://github.com/babel/babel/blob/master/doc/design/monorepo.md
+[Lerna]: https://github.com/lerna/lerna
+[run-scripts]: https://docs.npmjs.com/cli/run-script
+[Storybook]: https://storybook.js.org/
+[npx]: https://www.npmjs.com/package/npx