Merge pull request #223 from primer/release-7.4.0

Minor release 7.4.0

.travis.yml

@@ -25,3 +25,6 @@ deploy:
     on:
       branch: master
       tags: false
+
+notifications:
+  slack: 'github:4OisIoqZYyMlWcw3hFtZgbmh'

README.md

@@ -21,14 +21,15 @@ The octicons node.js library is the main JavaScript library. With [a JavaScript
 | Package | Version |
 |---|---|
 | **[octicons](/lib/octicons_node)** <br />Node.js package with Javascript API | [![npm version](https://img.shields.io/npm/v/octicons.svg)](https://www.npmjs.org/package/octicons) |
+| **[@github/octicons-react](/lib/octicons_react)** <br />React octicons components | [![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react) |
 
 ### Ruby
 
 | Package | Version |
 |---|---|
 | **[octicons](/lib/octicons_gem)** <br />Ruby gem with Ruby API | [![Gem version](https://img.shields.io/gem/v/octicons.svg)](https://rubygems.org/gems/octicons) |
 | [octicons_helper](/lib/octicons_helper)<br />Rails helper for using octicons|  [![Gem version](https://img.shields.io/gem/v/octicons_helper.svg)](https://rubygems.org/gems/octicons_helper) |
-| [jekyll-octicons](/lib/jekyll-octicons)<br />Jekyll plugin for using octicons | [![Gem version](https://img.shields.io/gem/v/jekyll-octicons.svg)](https://rubygems.org/gems/jekyll-octicons) |
+| [jekyll-octicons](/lib/octicons_jekyll)<br />Jekyll plugin for using octicons | [![Gem version](https://img.shields.io/gem/v/jekyll-octicons.svg)](https://rubygems.org/gems/jekyll-octicons) |
 
 ## License
 

lerna.json

@@ -4,7 +4,8 @@
     "lib/octicons_node",
     "lib/octicons_gem",
     "lib/octicons_helper",
-    "lib/jekyll-octicons"
+    "lib/octicons_jekyll",
+    "lib/octicons_react"
   ],
-  "version": "7.3.0"
+  "version": "7.4.0"
 }

lib/octicons_gem/Gemfile

@@ -5,6 +5,6 @@ gemspec
 group :development, :test do
   gem "minitest"
   gem "rake"
-  gem "rubocop"
-  gem "rubocop-github"
+  gem "rubocop", "0.50"
+  gem "rubocop-github", "0.5.0"
 end

lib/octicons_gem/lib/octicons/version.rb

@@ -1,3 +1,3 @@
 module Octicons
-  VERSION = "7.3.0".freeze
+  VERSION = "7.4.0".freeze
 end

lib/octicons_gem/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octicons_gem",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "Don't install",
   "scripts": {
     "postinstall": "bundle install --path vendor/bundle",

lib/octicons_helper/lib/octicons_helper/version.rb

@@ -1,3 +1,3 @@
 module OcticonsHelper
-  VERSION = "7.3.0".freeze
+  VERSION = "7.4.0".freeze
 end

lib/octicons_helper/octicons_helper.gemspec

@@ -13,6 +13,6 @@ Gem::Specification.new do |s|
 
   s.require_paths = ["lib"]
 
-  s.add_dependency "octicons", "7.3.0"
+  s.add_dependency "octicons", "7.4.0"
   s.add_dependency "rails"
 end

lib/octicons_helper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "octicons_helper",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "A rails helper that makes including svg Octicons simple.",
   "scripts": {
     "version": "../../script/rubyversion ./lib/octicons_helper/version.rb",
@@ -21,6 +21,6 @@
   "rubygems": "octicons_helper",
   "homepage": "https://github.com/primer/octicons#readme",
   "dependencies": {
-    "octicons_gem": "7.3.0"
+    "octicons_gem": "7.4.0"
   }
 }

lib/jekyll-octicons/jekyll-octicons.gemspec → lib/octicons_jekyll/jekyll-octicons.gemspec

@@ -14,5 +14,5 @@ Gem::Specification.new do |s|
   s.require_paths = ["lib"]
 
   s.add_dependency "jekyll", "~> 3.1"
-  s.add_dependency "octicons", "7.3.0"
+  s.add_dependency "octicons", "7.4.0"
 end

lib/jekyll-octicons/lib/jekyll-octicons.rb → lib/octicons_jekyll/lib/jekyll-octicons.rb

@@ -1,4 +1,3 @@
-# rubocop:disable Naming/FileName
 require "octicons"
 require "jekyll-octicons/version"
 require "liquid"

lib/jekyll-octicons/lib/jekyll-octicons/version.rb → lib/octicons_jekyll/lib/jekyll-octicons/version.rb

@@ -3,6 +3,6 @@ module Liquid; class Tag; end; end
 
 module Jekyll
   class Octicons < Liquid::Tag
-    VERSION = "7.3.0".freeze
+    VERSION = "7.4.0".freeze
   end
 end

lib/jekyll-octicons/package.json → lib/octicons_jekyll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jekyll-octicons",
-  "version": "7.3.0",
+  "version": "7.4.0",
   "description": "A jekyll liquid plugin that makes including svg Octicons simple.",
   "scripts": {
     "version": "../../script/rubyversion ./lib/jekyll-octicons/version.rb",
@@ -21,6 +21,6 @@
   "rubygems": "jekyll-octicons",
   "homepage": "https://github.com/primer/octicons#readme",
   "dependencies": {
-    "octicons_gem": "7.3.0"
+    "octicons_gem": "7.4.0"
   }
 }

lib/octicons_node/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "7.3.0",
+  "version": "7.4.0",
   "name": "octicons",
   "description": "A scalable set of icons handcrafted with <3 by GitHub.",
   "homepage": "https://octicons.github.com",

lib/octicons_react/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["env", "stage-0", "react"],
+  "env": {
+    "production": {
+      "presets": ["next/babel"]
+    }
+  }
+}

lib/octicons_react/.eslintignore

@@ -0,0 +1 @@
+src/__generated__/

lib/octicons_react/.eslintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "plugin:github/recommended",
+    "plugin:github/es6",
+    "plugin:github/react"
+  ],
+  "rules": {
+  }
+}

lib/octicons_react/.gitignore

@@ -0,0 +1,4 @@
+.cache
+.next
+dist/
+src/__generated__/

lib/octicons_react/.npmignore

@@ -0,0 +1,9 @@
+*.config.js
+.*.sw?
+.*rc
+.cache
+.eslint*
+.gitignore
+.next
+script
+src

lib/octicons_react/.nvmrc

@@ -0,0 +1 @@
+8

lib/octicons_react/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 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.

lib/octicons_react/README.md

@@ -0,0 +1,200 @@
+# GitHub Octicons React Component
+
+[![npm version](https://img.shields.io/npm/v/%40github%2Focticons-react.svg)](https://www.npmjs.org/package/%40github%2Focticons-react)
+[![Build Status](https://travis-ci.org/primer/octicons.svg?branch=master)](https://travis-ci.org/primer/octicons)
+
+> [Octicons] for React
+
+## Install
+
+```
+$ npm install @github/octicons-react --save
+```
+
+## Usage
+
+### `<Octicon>`
+The `<Octicon>` component is really just the "shell" of an Octicon that renders
+the `<svg>` element and all of its attributes. To render a specific icon, you
+must pass it either via the `icon` prop, or as the only child:
+
+```jsx
+/**
+ * The prop form is shorter, but doesn't allow you to pass icon props.
+ */
+<Octicon icon={Icon} />
+
+/**
+ * The child form allows you to pass props.
+ */
+<Octicon><Icon x={10}/></Octicon>
+```
+
+Note that none of our builtin icons take props, so unless you're creating
+[custom icons](#custom-icons) you'll probably want to use the `icon` prop form.
+
+### Icons
+The `@github/octicons-react` module exports the `Octicon` component as
+`default` and the individual icon symbols as separate [named
+exports](https://ponyfoo.com/articles/es6-modules-in-depth#named-exports). This
+allows you to import only the icons that you need without blowing up your
+bundle:
+
+```jsx
+import React from 'react'
+import Octicon, {Beaker, Zap} from '@github/octicons-react'
+
+export default function Icon({boom}) {
+  return <Octicon icon={boom ? Zap : Beaker}/>
+}
+```
+
+If you were to compile this example with a tool that supports [tree-shaking][]
+(such as Webpack, Rollup, or Parcel) the resulting bundle would only include
+the "zap" and "beaker" icons.
+
+### All icons
+If you don't mind your bundle being huge or you need to be able to render
+arbitrarily named icons at runtime, you can import either of the following
+named exports:
+
+#### `getIconByName()`
+The `getIconByName` export is a function that takes a lowercase octicon name
+(such as `arrow-right`) and returns the corresponding icon class. Using this
+helper, it's possible to create an Octicon class that takes a `name` prop and
+resolves it to the right component:
+
+```jsx
+import React from 'react'
+import Octicon, {getIconByName} from '@github/octicons-react'
+
+export default function OcticonByName({name, ...props}) {
+  return <Octicon {...props} icon={getIcon(name)} />
+}
+```
+
+#### `iconsByName`
+The `iconsByName` export is an object that maps keys (such as `arrow-right` or
+`zap`) to component functions, which you can use to generate listings of all
+the octicons:
+
+```jsx
+import React from 'react'
+import Octicon, {iconsByName} from '@github/octicons-react'
+
+export default function OcticonsList() {
+  return (
+    <ul>
+      {Object.keys(iconsByName).map(key => (
+        <li key={key}>
+          <tt>{key}</tt>
+          <Octicon icon={iconsByName[key]}/>
+        </li>
+      ))}
+    </ul>
+  )
+}
+```
+
+### Vertical alignment
+By default the octicons have `vertical-align: text-bottom;` applied as inline
+styles. You can change the alignment via the `verticalAlign` prop, which can be
+either `middle`, `text-bottom`, `text-top`, or `top`.
+
+```js
+import Octicon, {Repo} from '@github/octicons-react'
+
+export default () => (
+  <h1>
+    <Octicon icon={Repo} size='large' verticalAlign='middle' /> github/github
+  </h1>
+)
+```
+
+
+### `ariaLabel`
+You have the option of adding accessibility information to the icon with the
+[`aria-label` attribute][aria-label] via the `ariaLabel` prop (note the
+capitalization of `L`!).
+
+```js
+// Example usage
+import Octicon, {Plus} from '@github/octicons-react'
+
+export default () => (
+  <button>
+    <Octicon icon={Plus} ariaLabel="Add new item" /> New
+  </button>
+)
+```
+
+
+### Sizes
+The `size` prop takes `small`, `medium`, and `large` values that can be used to
+render octicons at standard sizes:
+
+| Prop | Rendered Size |
+| :- | :- |
+| `size='small'` | 16px height by `computed` width |
+| `size='medium'` | 32px height by `computed` width |
+| `size='large'` | 64px height by `computed` width |
+
+```js
+// Example usage
+import Octicon, {LogoGithub} from '@github/octicons-react'
+
+export default () => (
+  <h1>
+    <a href='https://github.com'>
+      <Octicon icon={LogoGithub} size='large' ariaLabel='GitHub'/>
+    </a>
+  </h1>
+)
+```
+
+
+## Custom icons
+Each of our icon components is really just a function that renders its SVG
+`<path>`. To accommodate icons varying aspect ratios, the `Octicon` component
+determines the `viewBox` of the `<svg>` element by first looking for a `size`
+array on the icon component class. For instance, if you wanted to create a
+custom icon that consisted of three circles side by side, you could do this:
+
+```jsx
+import React from 'react'
+import Octicon from '@github/octicons-react'
+
+function CirclesIcon() {
+  return (
+    <React.Fragment>
+      <circle r={5} cx={5} cy={5}/>
+      <circle r={5} cx={15} cy={5}/>
+      <circle r={5} cx={25} cy={5}/>
+    </React.Fragment>
+  )
+}
+
+CirclesIcon.size = [30, 10]
+
+export default CirclesOcticon(props) {
+  return <Octicon {...props} icon={CirclesIcon} />
+}
+```
+
+
+## License
+
+(c) GitHub, Inc.
+
+When using the GitHub logos, be sure to follow the [GitHub logo
+guidelines](https://github.com/logos).
+
+[MIT](./LICENSE)  
+
+[octicons]: https://octicons.github.com/
+[primer]: https://github.com/primer/primer
+[docs]: http://primercss.io/
+[npm]: https://www.npmjs.com/
+[install-npm]: https://docs.npmjs.com/getting-started/installing-node
+[tree-shaking]: https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking
+[aria-label]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute