Merge branch 'dev' into avatar-stack

Author: jonrohan

.github/CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 [fork]: https://github.com/github/primer/fork
 [pr]: https://github.com/github/primer/compare
-[style]: http://primercss.io/guidelines/
+[style]: http://primer.github.io/guidelines/
 
 Hi there! We're thrilled that you'd like to contribute to this project. Your help is essential for keeping it great.
 
@@ -59,16 +59,16 @@ Good pull requests—patches, improvements, new features—are a fantastic help.
 
 ### Updating Primer modules
 
-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. 
+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. 
 
-1. Fork and clone [this repository](https://github.com/primer/primer-css).
+1. Fork and clone [this repository](https://github.com/primer/primer).
 2. Configure and install the dependencies: `npm install`
 3. Check out the dev branch `git checkout dev`
 3. Create a new branch from dev `git checkout -b my-branch-name`
 4. Make your changes and commit them.
 5. Push your branch and open a pull request against `dev`. 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-css 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 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.

.gitignore

@@ -6,3 +6,4 @@ node_modules
 build
 _site
 *.lerna_backup
+.changelog

.storybook/Octicon.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import {storiesOf} from '@storybook/react'
 import octicons from 'octicons'
-import SVGInline from 'react-svg-inline'
 
-const Octicon = (props) => {
+export const Octicon = (props) => {
   const {name} = props
   if (name in octicons) {
-    return <SVGInline svg={octicons[name].toSVG(props)} />
+    const svg = octicons[name].toSVG(props)
+    return <span dangerouslySetInnerHTML={ {__html: svg } }  />
   } else {
     throw new Error(`No such octicon: "${name}"!`)
   }

.storybook/config.js

@@ -1,11 +1,11 @@
 import React from 'react'
 import { configure, addDecorator } from '@storybook/react'
 import { setOptions } from '@storybook/addon-options'
-import '../modules/primer-css/index.scss'
+import '../modules/primer/index.scss'
 
 setOptions({
   name: 'Primer',
-  url: 'http://primercss.io/',
+  url: 'http://primer.github.io/',
   showDownPanel: false,
 })
 
@@ -16,7 +16,6 @@ addDecorator(story => (
 ))
 
 const contexts = [
-  require.context('.', true, /\.js$/),
   require.context('../modules', true, /stories.*\.js$/),
 ]
 

.storybook/lib/storiesFromMarkdown.js

@@ -4,11 +4,23 @@ import select from 'unist-util-select'
 import findBefore from 'unist-util-find-before'
 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 ["']([a-z\-]+)["'][^%]*%>/gi
+  html = html.replace(octre, (match, name) => {
+    return ReactDOMServer.renderToStaticMarkup(<Octicon name={name} />)
+  })
+  return html
+}
+
 const nodeToStory = (node, file) => {
-  const html = node.value
+  const html = railsOcticonToReact(node.value)
   const element = htmlParser.parse(html)
   const pairs = node.lang.replace(/^html\s*/, '')
   const attrs = pairs.length ? parsePairs(pairs) : {}

.storybook/preview-head.html

@@ -1,2 +1,2 @@
-<link rel="stylesheet" href="https://unpkg.com/primer-css@9.2.0/build/build.css">
+<link rel="stylesheet" href="https://unpkg.com/octicons@7.0.1/build/build.css">
 <script src="https://github.com/site/assets/styleguide.js" async></script>

.travis.yml

@@ -8,15 +8,17 @@ env:
     - secure: "EZewKKWQXmtCwPtYrPZq4OQblv2OyXR61qBIl3pOxGNVG2BCjD6VOgSaiYqkA9Qbt+ihfwQkiiLvTB68gbvRSiBFV9i+XLzKzt4S8CDI5RhTLAxZB3eQFVZRYzldchzWI4sdNhTvYS1kYXmsXQZD6vJmPSnFvOI/ddfzqvnNL4M="
     # github
     - secure: "J+1oWjvvXjyrwkY/4IFWKdN/weFmQcPwlRuFG4R0Gb3rYe4nqtC9l68sJvmS8asc8dQMhOhcUZCH6sjvo7l2WD4NuK4umPSbs+rJNUsfbvH4pZjStQIj/3ll1OfQelGDWAYQWhIfciYY4F3Bp0ZWTfKOppLQ2AVIYu1fPVXDdlo="
+    # github changelog
+    - secure: "KcGydAqL7ryDh2rTJJB4wU8NE5BRtnrRXDEcPBScSscO3zFsHXHBDvvO04B/9hFVatXzGYXmkn+FZ0P9QikhvebzdwwyqUG2SKFiHhMvbX0m0WtAhn5NqDuKU1r5qy5YQ18r/tiLfC9GSAlEpfLAH58pwpcn8srV3Mn/yKvlrfs="
 
 script:
   - npm test
 
 after_success:
   # this will short-circuit the publish step if it fails to interpolate $NPM_API_KEY
   - npm config set "//registry.npmjs.org/:_authToken=\${NPM_API_KEY}"
-  # copy the CHANGELOG.md primer-css for publishing
-  - cp CHANGELOG.md modules/primer-css
+  # copy the CHANGELOG.md primer for publishing
+  - cp CHANGELOG.md modules/primer
   - script/after_success
 
 deploy:

CHANGELOG.md

@@ -1,3 +1,46 @@
+# 10.0.0 (2017-11-10)
+
+#### :boom: Breaking Change
+* [#379](https://github.com/primer/primer-css/pull/379) Deprecating primer-cards and form-cards. ([@jonrohan](https://github.com/jonrohan))
+
+#### :rocket: Enhancement
+* [#371](https://github.com/primer/primer-css/pull/371) Add .details-reset. ([@muan](https://github.com/muan))
+* [#375](https://github.com/primer/primer-css/pull/375) New utilities & docs - fade out, hover grow, border white fade, responsive positioning, and circle. ([@sophshep](https://github.com/sophshep))
+* [#383](https://github.com/primer/primer-css/pull/383) Add 'Popover' component. ([@brandonrosage](https://github.com/brandonrosage))
+* [#377](https://github.com/primer/primer-css/pull/377) Refactor underline nav. ([@ampinsk](https://github.com/ampinsk))
+* [#337](https://github.com/primer/primer-css/pull/337) Add marketing buttons to primer-marketing-buttons. ([@gladwearefriends](https://github.com/gladwearefriends))
+* [#342](https://github.com/primer/primer-css/pull/342) Import Subhead component. ([@shawnbot](https://github.com/shawnbot))
+* [#341](https://github.com/primer/primer-css/pull/341) Import branch-name component from github/github. ([@shawnbot](https://github.com/shawnbot))
+
+#### :bug: Bug Fix
+* [#360](https://github.com/primer/primer-css/pull/360) Removing ::before ::after padding hack on markdown. ([@jonrohan](https://github.com/jonrohan))
+* [#320](https://github.com/primer/primer-css/pull/320) remove -webkit-text-decoration-skip override. ([@antons](https://github.com/antons))
+* [#359](https://github.com/primer/primer-css/pull/359) Change markdown li break to handle Safari 10.x user stylesheet bug. ([@feministy](https://github.com/feministy))
+* [#388](https://github.com/primer/primer-css/pull/388) [WIP] Button border-radius fix. ([@broccolini](https://github.com/broccolini))
+* [#307](https://github.com/primer/primer-css/pull/307) Do not suppress opacity transition for tooltipped-no-delay. ([@astorije](https://github.com/astorije))
+
+#### :house: Internal
+* [#382](https://github.com/primer/primer-css/pull/382) Update Button docs. ([@JasonEtco](https://github.com/JasonEtco))
+* [#390](https://github.com/primer/primer-css/pull/390) Updating storiesFromMarkdown to read in rails octicons helper and replace with react component. ([@jonrohan](https://github.com/jonrohan))
+* [#389](https://github.com/primer/primer-css/pull/389) Publish alpha release any time we're not on a release branch or master. ([@jonrohan](https://github.com/jonrohan))
+* [#384](https://github.com/primer/primer-css/pull/384) Adding a test to check for the current year in the license and source…. ([@jonrohan](https://github.com/jonrohan))
+* [#374](https://github.com/primer/primer-css/pull/374) Improve Pull Request template. ([@agisilaos](https://github.com/agisilaos))
+
+#### Committers: 13
+- Agisilaos Tsaraboulidis ([agisilaos](https://github.com/agisilaos))
+- Amanda Pinsker ([ampinsk](https://github.com/ampinsk))
+- Anton Sotkov ([antons](https://github.com/antons))
+- Brandon Rosage ([brandonrosage](https://github.com/brandonrosage))
+- Catherine Bui ([gladwearefriends](https://github.com/gladwearefriends))
+- Diana Mounter ([broccolini](https://github.com/broccolini))
+- Jason Etcovitch ([JasonEtco](https://github.com/JasonEtco))
+- Jon Rohan ([jonrohan](https://github.com/jonrohan))
+- Jérémie Astori ([astorije](https://github.com/astorije))
+- Mu-An ✌️ Chiou ([muan](https://github.com/muan))
+- Shawn Allen ([shawnbot](https://github.com/shawnbot))
+- Sophie Shepherd ([sophshep](https://github.com/sophshep))
+- liz abinante! ([feministy](https://github.com/feministy))
+
 # 9.6.0
 
 ### Added
@@ -24,7 +67,7 @@
 - Add deprecation warnings for `primer-cards` and `primer-forms/lib/form-validation.scss` #347 (these will be removed in v10.0.0)
 
 ### Changes
-- Update npm metadata for `primer-css`, `primer-core`, `primer-product`, and `primer-marketing` #328
+- Update npm metadata for `primer`, `primer-core`, `primer-product`, and `primer-marketing` #328
 - Remove `HEAD` heading from the changelog #327
 
 # 9.3.0
@@ -36,7 +79,7 @@
 ## Changes
 - Removes `docs` from `gitignore`
 - Removes the `^` from all dependencies so that we can publish exact versions
-- Consolidates release notes from various sources into one changelog located in `/modules/primer-css/CHANGELOG.md`
+- Consolidates release notes from various sources into one changelog located in `/modules/primer/CHANGELOG.md`
 
 # 9.2.0
 
@@ -47,7 +90,7 @@
 ## Changes
 
 - Remove per-module configurations (`.gitignore`, `.postcss.json`, `.stylelintrc.json`) and `CHANGELOG.md` files in #284
-- Replace most static `font-size`, `font-weight`, and `line-height` CSS property values with their [SCSS variable equivalents](https://github.com/primer/primer-css/blob/c9ea37316fbb73c4d9931c52b42bc197260c0bf6/modules/primer-support/lib/variables/typography.scss#L12-L33) in #252
+- Replace most static `font-size`, `font-weight`, and `line-height` CSS property values with their [SCSS variable equivalents](https://github.com/primer/primer/blob/c9ea37316fbb73c4d9931c52b42bc197260c0bf6/modules/primer-support/lib/variables/typography.scss#L12-L33) in #252
 - Refactor CI scripts to use Travis conditional deployment for release candidate and final release publish steps in #290
 
 # 9.1.1
@@ -94,7 +137,7 @@ This release also includes major improvements to our Travis build scripts to aut
 
 We discovered that `primer-core` specified and outdated version of `primer-base` in it's dependencies. The outdated version did not have `normalize.scss` included which could cause some issues. This has issue occurred during v7.0.0 when creating the new monorepo. Also fixes repo urls in `package.json` for individual packages.
 
-See PR [#243](https://github.com/primer/primer-css/pull/243)
+See PR [#243](https://github.com/primer/primer/pull/243)
 
 ## Changes
 
@@ -139,7 +182,7 @@ See PR [#243](https://github.com/primer/primer-css/pull/243)
 
 # 8.0.0 - Imports
 
-Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer-css/pull/239)
+Fixes issues with the ordering of imports in each of our meta-packages. See PR [#239](https://github.com/primer/primer/pull/239)
 
 
 ## Changes
@@ -155,7 +198,7 @@ Fixes issues with the ordering of imports in each of our meta-packages. See PR [
 
 # 7.0.0 - Monorepo
 
-In an effort to improve our publishing workflow we turned Primer CSS into a monorepo, made this repo the source of truth for Primer by removing Primer modules from GitHub, and setup Lerna for managing multiple packages and maintaining independent versioning for all our modules.
+In an effort to improve our publishing workflow we turned Primer into a monorepo, made this repo the source of truth for Primer by removing Primer modules from GitHub, and setup Lerna for managing multiple packages and maintaining independent versioning for all our modules.
 
 This is exciting because:
 
@@ -164,7 +207,7 @@ This is exciting because:
 - we no longer have files like package.json, scripts, and readme's in the GitHub app that don't really belong there
 - **we can accept pull requests from external contributors** again!
 
-See PR for more details on this change: https://github.com/primer/primer-css/pull/230
+See PR for more details on this change: https://github.com/primer/primer/pull/230
 
 ## Other changes:
 

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 GitHub Inc.
+Copyright (c) 2017 GitHub Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,37 +1,37 @@
-# Primer CSS
+# Primer
 
-[![npm version](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.org/package/primer-css)
-[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
+[![npm version](http://img.shields.io/npm/v/primer.svg)](https://www.npmjs.org/package/primer)
+[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)
 
-Primer is the CSS framework that powers GitHub's front-end design. Primer CSS includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
+Primer is the design system that powers GitHub. Primer includes 23 packages that are grouped into 3 core meta-packages for easy install. Each package and meta-package is independently versioned and distributed via npm, so it's easy to include all or part of Primer within your own project.
 
 ## Packages
 
-The Primer CSS repo is managed as a monorepo that is composed of many npm packages.
+The Primer repo is managed as a monorepo that is composed of many npm packages.
 
 ### Core Packages
 
 | Package | Version |
 |---|---|
-| **[primer-css](/modules/primer-css)** <br />Includes all 23 packages | [![npm](http://img.shields.io/npm/v/primer-css.svg)](https://www.npmjs.com/package/primer-css) |
+| **[primer](/modules/primer)** <br />Includes all 23 packages | [![npm](http://img.shields.io/npm/v/primer.svg)](https://www.npmjs.com/package/primer) |
 | [primer-core](/modules/primer-core) | [![npm](http://img.shields.io/npm/v/primer-core.svg)](https://www.npmjs.com/package/primer-core) |
 | [primer-product](/modules/primer-product) |  [![npm](http://img.shields.io/npm/v/primer-product.svg)](https://www.npmjs.com/package/primer-product) |
 | [primer-marketing](/modules/primer-marketing) | [![npm](http://img.shields.io/npm/v/primer-marketing.svg)](https://www.npmjs.com/package/primer-marketing) |
 
 ## Install
 
-This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-css` with this command.
+This repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer` with this command.
 
 ```sh
-$ npm install --save primer-css
+$ npm install --save primer
 ```
 
 ## Usage
 
 The source files included are written in [Sass][sass] (SCSS). After [installing](#install) with npm, you can add your project's `node_modules` directory to your Sass [include paths](https://github.com/sass/node-sass#includepaths) (AKA [load paths](http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/) in Ruby), then import it like this:
 
 ```scss
-@import "primer-css/index.scss";
+@import "primer/index.scss";
 ```
 
 You can import individual Primer modules by installing them with npm, for instance:
@@ -46,10 +46,10 @@ Then, you would import the module with:
 @import "primer-navigation/index.scss";
 ```
 
-Or, while you're figuring out which modules you need, you can import them directly from the `primer-css` [`packages` directory](./packages) like so:
+Or, while you're figuring out which modules you need, you can import them directly from the `primer` [`packages` directory](./packages) like so:
 
 ```scss
-@import "primer-css/modules/primer-navigation/index.css";
+@import "primer/modules/primer-navigation/index.css";
 ```
 
 
@@ -70,7 +70,7 @@ You can read more about primer in the [docs][docs].
 [MIT](./LICENSE) &copy; [GitHub](https://github.com/)
 
 [primer]: https://github.com/primer/primer
-[docs]: http://primercss.io/
+[docs]: http://primer.github.io/
 [npm]: https://www.npmjs.com/
 [install-npm]: https://docs.npmjs.com/getting-started/installing-node
 [sass]: http://sass-lang.com/