Merge pull request #341 from primer/import-branch-name

Import branch-name component from github/github

modules/primer-branch-name/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 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
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

modules/primer-branch-name/README.md

@@ -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/index.scss

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

modules/primer-branch-name/lib/branch-name.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/package.json

@@ -0,0 +1,32 @@
+{
+  "version": "0.0.1",
+  "name": "primer-branch-name",
+  "description": "A nice, consistent way to display branch names.",
+  "homepage": "http://primercss.io/",
+  "primer": {
+    "category": "product",
+    "module_type": "components"
+  },
+  "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-docs"
+  },
+  "dependencies": {
+    "primer-support": "4.3.0"
+  },
+  "keywords": [
+    "github",
+    "primer"
+  ]
+}

modules/primer-css/package.json

@@ -32,6 +32,7 @@
     "primer-base": "1.4.0",
     "primer-blankslate": "1.3.0",
     "primer-box": "2.4.0",
+    "primer-branch-name": "0.0.1",
     "primer-breadcrumb": "1.3.0",
     "primer-buttons": "2.3.0",
     "primer-cards": "0.4.1",

modules/primer-product/package.json

@@ -32,6 +32,7 @@
     "primer-dropdown": "0.1.0",
     "primer-labels": "1.4.0",
     "primer-markdown": "3.6.0",
-    "primer-support": "4.3.0"
+    "primer-support": "4.3.0",
+    "primer-branch-name": "0.0.1"
   }
 }

tests/modules/test-document-styles.js

@@ -1,17 +1,25 @@
 const test = require("ava")
-const css = require(process.env.PWD)
+const css = require(process.cwd())
 const fs = require("fs")
 const glob = require("glob")
 
-var selectors, classnames = null
+let selectors
-const classRegex = /class="([^"]+)"/ig
+let classnames
+
+const classPatterns = [
+  // HTML class attributes
+  /class="([^"]+)"/ig,
+  // assume that ERB helpers generate an element with the same class
+  /<%= (\w+)\b/g,
+]
 
 // Find unique selectors from the cssstats selector list
 function uniqueSelectors(s) {
   s = s.map(s => {
     // split multi-selectors into last class used .foo .bar .baz
     return s.split(" ").pop()
-  }).filter(s => {
+  })
+  .filter(s => {
     // remove any selector that aren't just regular classnames eg. ::hover [type]
     return s.match(/^\.[a-z\-_]+$/ig)
   })
@@ -22,37 +30,42 @@ function uniqueSelectors(s) {
 
 // From the given glob sources array, read the files and return found classnames
 function documentedClassnames(sources) {
-  var cn = []
+  const classes = []
-  sources.forEach( f => {
+  const files = sources.reduce((acc, pattern) => {
-    glob.sync(f).forEach( g => {
+    return acc.concat(glob.sync(pattern))
-      var match = null
+  }, [])
 
-      // While we match a classRegex in the source
+  files.forEach(file => {
-      while ((match = classRegex.exec(fs.readFileSync(g, "utf8"))) != null) {
+    let match = null
+    const content = fs.readFileSync(file, "utf8")
 
-        // Get the matched classnames "..." and split by space into classes
+    classPatterns.forEach(pattern => {
-        cn = cn.concat(match[1].split(" "))
+      // match each pattern against the source
+      while (match = pattern.exec(content)) {
+        // get the matched classnames and split by whitespace into classes
+        const klasses = match[1].trim().split(/\s+/)
+        classes.push(...klasses)
       }
     })
   })
 
   // return only the unique classnames
-  return [...new Set(cn)]
+  return Array.from(new Set(classes))
 }
 
 // Before all the tests get the selectors and classnames
 test.before(t => {
   selectors = uniqueSelectors(css.cssstats.selectors.values)
   classnames = documentedClassnames([
-    'docs/*.md',
+    "docs/*.md",
-    'README.md'
+    "README.md"
   ])
 })
 
 test("Every selector class is documented", t => {
-  var undocumented = []
+  const undocumented = []
   selectors.forEach(selector => {
-    if (!classnames.includes(selector.replace(".", ""))) {
+    if (!classnames.includes(selector.replace(/^\./, ""))) {
       undocumented.push(selector)
     }
   })