Merge pull request #417 from primer/styled-octicons

Create @primer/styled-octicons package

.github/workflows/push.yml

@@ -107,8 +107,15 @@ jobs:
         with:
           name: octicons
           path: ./lib/build
-      - uses: ./.github/actions/build_node
+      - name: Build @primer/octicons-react
+        uses: ./.github/actions/build_node
         env:
           NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
         with:
           args: octicons_react
+      - name: Build @primer/styled-octicons
+        uses: ./.github/actions/build_node
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        with:
+          args: octicons_styled

docs/content/packages/styled-system.mdx

@@ -0,0 +1,44 @@
+---
+title: Styled System
+status: Experimental 
+source: 'https://github.com/primer/octicons/tree/v2/lib/octicons_styled'
+---
+
+[![npm version](https://img.shields.io/npm/v/@primer/styled-octicons/canary.svg)](https://www.npmjs.org/package/@primer/styled-octicons)
+
+The `@primer/styled-octicons` package wraps icon components from [`@primer/octicons-v2-react`](/packages/react) with [system props](https://primer.style/components/system-props), making them easier to style in projects that use [styled system](https://styled-system.com/)—like [Primer Components](https://primer.style/components).
+
+## Install
+
+```shell
+npm install @primer/styled-octicons@canary
+```
+
+## Usage
+
+`@primer/styled-octicons`  exports each icons as a named export. This allows you to import only the icons you need:
+
+```jsx
+import {AlertIcon} from '@primer/styled-octicons'
+
+export () => (
+  <AlertIcon color="red.6" mr={2} />
+)
+```
+
+## System props
+
+All icon components in `@primer/styled-octicons` get `color` and `space` system props as well as the `sx` prop. Read our [System Props](https://primer.style/components/system-props) documentation for a full list of available props.
+
+
+## Props
+
+In addition to system props, icon components in `@primer/styled-octicons` accept the same props as components in `@primer/octicons-v2-react`:
+
+| Name | Type | Default | Description |
+| :- | :- | :-: | :- |
+| aria-label | String | | Sets the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute of the `<svg>`. If no `aria-label` is defined, `aria-hidden` will be set to `true`.  |
+| className | String | | Sets the `class` attribute on the `<svg>` |
+| size | Number \| `"small"` \| `"medium"` \| `"large"` | `16` | The height of the icon. Width will be scaled proportionally. |
+| verticalAlign | `"middle"` \| `"text-bottom"` \| `"text-top"` \| `"top"` \| `"unset"` | `"text-bottom"` | The vertical alignment of the `<svg>` |
+

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -11,3 +11,5 @@
       url: /packages/javascript
     - title: React
       url: /packages/react
+    - title: Styled System
+      url: /packages/styled-system

lib/octicons_react/script/build.js

@@ -74,6 +74,7 @@ ${icons.map(({name}) => `declare const ${name}: Icon`).join('\n')}
 
 export {
   Icon,
+  IconProps,
   ${icons.map(({name}) => name).join(',\n  ')}
 }`
   return fse.writeFile(file, code, 'utf8').then(() => {

lib/octicons_styled/.babelrc

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

lib/octicons_styled/.eslintignore

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

lib/octicons_styled/.eslintrc.json

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

lib/octicons_styled/.gitignore

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

lib/octicons_styled/.npmignore

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

lib/octicons_styled/.nvmrc

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

lib/octicons_styled/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 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_styled/README.md

@@ -0,0 +1,5 @@
+# @primer/styled-octicons
+
+[![npm version](https://img.shields.io/npm/v/@primer/styled-octicons.svg)](https://www.npmjs.org/package/@primer/styled-octicons)
+
+See https://primer.style/octicons/packages/styled-system