Merge branch 'release-10.0.0' into popover

Author: broccolini

.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/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>

CHANGELOG.md

@@ -1,3 +1,17 @@
+# 10.0.0
+
+### Added
+- New module `primer-subhead`. The Subhead is a simple header with a bottom border. It's designed to be used on settings and configuration pages.
+- Importing `.input-group` into `primer-forms` module.
+- New module `primer-branch-name` "A nice, consistent way to display branch names."
+
+### Removed
+- Removing `primer-cards` module.
+- Removing `.form-cards` styles.
+
+### Changes
+- Moving `primer-breadcrumb` from `primer-marketing` to `primer-core`
+
 # 9.6.0
 
 ### Added

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

modules/primer-cards/LICENSE renamed to modules/primer-branch-name/LICENSE

@@ -0,0 +1,69 @@
+# Primer CSS / Branch Name
+
+[![npm version](http://img.shields.io/npm/v/primer-branch-name.svg)](https://www.npmjs.org/package/primer-branch-name)
+[![Build Status](https://travis-ci.org/primer/primer-css.svg?branch=master)](https://travis-ci.org/primer/primer-css)
+
+> A nice, consistent way to display branch names.
+
+This repository is a module of the full [primer-css][primer-css] repository.
+
+## Install
+
+This repository is distributed with [npm]. After [installing npm][install-npm], you can install `primer-branch-name` with this command.
+
+```
+$ npm install --save primer-branch-name
+```
+
+## Usage
+
+The source files included are written in [Sass][sass] (SCSS) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.
+
+```scss
+@import "primer-branch-name/index.scss";
+```
+
+You can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._
+
+## Build
+
+For a compiled **CSS** version of this module, an npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package:
+
+```
+$ npm run build
+```
+
+## Documentation
+
+<!-- %docs
+title: Branch name
+status: Stable
+-->
+
+Branch names can be a link name or not:
+
+```html
+<span class="branch-name">a_new_feature_branch</span>
+<a href="#url" class="branch-name">a_new_feature_branch</a>
+```
+
+You may also include an octicon before the branch name text:
+
+```html
+<span class="branch-name">
+  <%= octicon("git-branch") width:16 height:16 %>
+  a_new_feature_branch
+</span>
+```
+
+<!-- %enddocs -->
+
+## License
+
+[MIT](./LICENSE) &copy; [GitHub](https://github.com/)
+
+[primer-css]: https://github.com/primer/primer
+[docs]: http://primercss.io/
+[npm]: https://www.npmjs.com/
+[install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[sass]: http://sass-lang.com/

modules/primer-branch-name/README.md

@@ -0,0 +1,3 @@
+// support files
+@import "primer-support/index.scss";
+@import "./lib/branch-name.scss";

modules/primer-branch-name/index.scss

@@ -0,0 +1,20 @@
+// A nice way to display branch names inside the UI. Can be a link or not.
+// stylelint-disable selector-max-type
+.branch-name {
+  display: inline-block;
+  padding: 2px 6px;
+  font: 12px $mono-font;
+  color: rgba($black, 0.6);
+  background-color: lighten($blue-100, 3%);
+  border-radius: 3px;
+
+  .octicon {
+    margin: 1px -2px 0 0;
+    color: desaturate($blue-300, 70%);
+  }
+}
+
+// When a branch name is a link
+// stylelint-disable selector-no-qualifying-type
+a.branch-name { color: $text-blue; }
+// stylelint-enable selector-no-qualifying-type

modules/primer-branch-name/lib/branch-name.scss

@@ -1,41 +1,32 @@
 {
-  "version": "0.5.1",
-  "name": "primer-cards",
-  "description": "Card-like containers to group semantically related content together on marketing websites at GitHub.",
+  "version": "0.0.1",
+  "name": "primer-branch-name",
+  "description": "A nice, consistent way to display branch names.",
   "homepage": "http://primercss.io/",
-  "author": "GitHub, Inc.",
-  "license": "MIT",
-  "style": "build/build.css",
-  "main": "build/index.js",
   "primer": {
-    "category": "marketing",
+    "category": "product",
     "module_type": "components"
   },
-  "files": [
-    "index.scss",
-    "lib",
-    "build"
-  ],
-  "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-cards",
+  "author": "GitHub, Inc.",
+  "license": "MIT",
+  "style": "index.scss",
+  "main": "build/index.js",
+  "repository": "https://github.com/primer/primer-css/tree/master/modules/primer-branch-name",
   "bugs": {
     "url": "https://github.com/primer/primer-css/issues"
   },
   "scripts": {
+    "test-docs": "../../script/test-docs",
     "build": "../../script/npm-run primer-module-build index.scss",
     "prepare": "npm run build",
     "lint": "../../script/lint-scss",
-    "test": "../../script/npm-run-all build lint"
+    "test": "../../script/npm-run-all build lint test-docs"
   },
   "dependencies": {
-    "primer-marketing-support": "1.3.1",
     "primer-support": "4.4.1"
   },
   "keywords": [
-    "cards",
-    "css",
     "github",
-    "primer",
-    "primercss",
-    "style"
+    "primer"
   ]
 }