Merge pull request #86 from primer/release-0.0.6-beta

0.0.6-beta release tracking
primer · Jun 29, 2018 · fc71e36 · fc71e36
2 parents f043ea1 + 06beb55
commit fc71e36
Show file tree

Hide file tree

Showing 75 changed files with 2,464 additions and 823 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,3 @@
 {
-  "presets": ["env", "react"]
-}
+  "presets": ["env", "stage-0", "react"]
+}
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,12 @@
+{
+  "extends": [
+    "plugin:github/es6",
+    "plugin:github/react",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "rules": {
+    "jsx-a11y/no-autofocus": "warn",
+    "react/prop-types": "warn",
+    "react/sort-prop-types": "warn"
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,4 @@
+.DS_Store
+dist/
 node_modules
 npm-debug.log
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1,2 @@
+save=true
+save-exact=true
diff --git a/.travis.yml b/.travis.yml
@@ -4,5 +4,10 @@ node_js:
   - 8
 
 script:
+  - npm run lint
   - npm test
   - npm run build
+  - npm run build:docs
+
+notifications:
+    slack: github:4OisIoqZYyMlWcw3hFtZgbmh
diff --git a/README.md b/README.md
@@ -20,11 +20,43 @@ Run `primer-react` locally when adding or updating components.
 
 Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
 
-Install dependencies: `npm install`
+To run `primer-react` locally when adding or updating components:
 
-Run app with: `npm run start`
+1. Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
+1. Install dependencies: `npm install`
+1. Run the dev app with: `npm start`
 
-Build docs before publishing: `npm run build`
+Remember to build docs before publishing with: `npm run build`
+
+### Code Style
+
+We use the [React configuration](https://github.com/github/eslint-plugin-github/blob/master/lib/configs/react.js)
+from [GitHub's eslint plugin](https://github.com/github/eslint-plugin-github)
+to lint our JavaScript. To check your work before pushing, run:
+
+```
+npm run lint
+```
+
+Or, you can use [npx] to run eslint on one or more specific files:
+
+
+```sh
+# lint the component and the tests in src/__tests__
+npx eslint src/**/MyComponent.js
+```
+
+**Protip:** The [eslint `--fix` flag](https://eslint.org/docs/user-guide/command-line-interface#--fix)
+can automatically fix most linting errors, such as those involving whitespace
+or incorrect ordering of object keys and imports. You can fix those issues
+across the entire project with:
+
+```sh
+npm run lint -- --fix
+```
+
+**Protip:** `npm run lint -- --quiet` (or `npx eslint --quiet ...`) will
+suppress warnings so that you can focus on fixing errors.
 
 ### Testing
 
@@ -48,3 +80,6 @@ example of how we're testing our components.
 - Keep system constrained by only including props needed per component.
 - Favor extending or wrapping components for more complex operations.
 - Maintain design system consistency with utilities as props (for spacing, color, font-size, line-height, widths, and radii).
+
+
+[npx]: https://www.npmjs.com/package/npx
diff --git a/docs/.DS_Store b/docs/.DS_Store
diff --git a/docs/404.html b/docs/404.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+
+  <title>primer-react</title>
+
+  <script>
+    sessionStorage.redirect = location.href;
+  </script>
+
+  <meta http-equiv="refresh" content="0;URL='/primer-react'"></meta>
+</head>
+
+<body>
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+</body>
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/components/index.html b/docs/components/index.html
diff --git a/docs/demos/index.html b/docs/demos/index.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/sandbox/index.html b/docs/sandbox/index.html
@@ -1,11 +1,17 @@
-<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><head><title>primer-react</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-navigation/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="assets/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."></head><style>* { box-sizing: border-box; }
+<!DOCTYPE html><html><head><title>primer-react</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-navigation/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="assets/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."></head><body><script>(function(){
+      var redirect = sessionStorage.redirect;
+      delete sessionStorage.redirect;
+      if (redirect && redirect != location.href) {
+        history.replaceState(null, null, redirect);
+      }
+    })();</script><div id="root"><style>* { box-sizing: border-box; }
     body {
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.5;
-    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline" href="/primer-react/components">primer-react</a><a class="UnderlineNav-item no-underline" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div></nav><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><span>To get started with the Sandbox, start adding some primer-react components</span></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
+    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline" href="/primer-react/components">primer-react</a><a class="UnderlineNav-item no-underline" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div></nav><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><span class="">To get started with the Sandbox, start adding some primer-react components</span></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
 
   <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Block</span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>
     <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span><span class="token punctuation">></span></span>To <span class="token keyword">get</span> started <span class="token keyword">with</span> the Sandbox<span class="token punctuation">,</span> start adding some primer<span class="token operator">-</span>react components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Block</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div><script src="/primer-react/bundle.js"></script>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Block</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div></body></html><script src="/primer-react/bundle.js"></script>
diff --git a/examples/_app.js b/examples/_app.js
@@ -4,22 +4,6 @@ import CSS from './doc-components/CSS'
 
 const Page = ({ render }) => (
   <React.Fragment>
-    <head>
-      <title>primer-react</title>
-      <meta name='viewport' content='width=device-width,initial-scale=1' />
-      <meta name='generator' content='Compositor X0' />
-      <link rel='stylesheet' href='https://unpkg.com/primer-buttons/build/build.css' />
-      <link rel='stylesheet' href='https://unpkg.com/primer-forms/build/build.css' />
-      <link rel='stylesheet' href='https://unpkg.com/primer-layout/build/build.css' />
-      <link rel='stylesheet' href='https://unpkg.com/primer-navigation/build/build.css' />
-      <link rel='stylesheet' href='https://unpkg.com/primer-product/build/build.css'/>
-      <link rel='stylesheet' href='https://unpkg.com/primer-tooltips/build/build.css'/>
-      <link rel='stylesheet' href='https://unpkg.com/primer-utilities/build/build.css'/>
-      <link rel='icon' href='assets/favicon.png' />
-      <link rel='apple-touch-icon' href='assets/apple-touch-icon.png' />
-      <meta name='og:title' content='Primer React' />
-      <meta name='description' content='Primer components built with React.js.' />
-    </head>
     <CSS />
     <div className='text-dark-gray'>
       <nav className='UnderlineNav'>

diff --git a/examples/component-examples/BranchName.js b/examples/component-examples/BranchName.js
@@ -1,23 +1,22 @@
 import React from 'react'
-import { Detail } from '@compositor/kit'
-import Octicon from '@github/octicons-react'
-import { BranchName } from '../../src'
+import Octicon, {GitBranch} from '@github/octicons-react'
+import {Detail} from '@compositor/kit'
 import ExampleHeading from '../doc-components/ExampleHeading'
+import {BranchName} from '../../src'
 
-const BranchNameExample =
-  {
-    name: 'BranchName',
-    element: (
-      <div>
-        <BranchName>a_new_feature_branch</BranchName>
-        <Detail>
-          <ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
-          <BranchName tag='a' href='/'>a_new_feature_branch</BranchName>
-          <ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
-          <BranchName><Octicon name='git-branch' /> a_new_feature_branch</BranchName>
-        </Detail>
-      </div>
-    )
-  }
+const BranchNameExample = {
+  name: 'BranchName',
+  element: (
+    <div>
+      <BranchName>a_new_feature_branch</BranchName>
+      <Detail>
+        <ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
+        <BranchName tag='a' href='/'>a_new_feature_branch</BranchName>
+        <ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
+        <BranchName><Octicon icon={GitBranch} /> a_new_feature_branch</BranchName>
+      </Detail>
+    </div>
+  )
+}
 
 export default BranchNameExample
diff --git a/examples/component-examples/CircleOcticon.js b/examples/component-examples/CircleOcticon.js
@@ -1,14 +1,14 @@
 import React from 'react'
-import { CircleOcticon } from '../../src'
+import {Check} from '@github/octicons-react'
+import {CircleOcticon} from '../../src'
 
-const CircleOcticonExample =
-  {
-    name: 'CircleOcticon',
-    element: (
-      <div className='d-flex'>
-        <CircleOcticon name='check' size='32' bg='green' color='white'/>
-      </div>
-    )
-  }
+const CircleOcticonExample = {
+  name: 'CircleOcticon',
+  element: (
+    <div className='d-flex'>
+      <CircleOcticon icon={Check} size={32} bg='green' color='white' />
+    </div>
+  )
+}
 
 export default CircleOcticonExample
diff --git a/examples/component-examples/Flex.js b/examples/component-examples/Flex.js
@@ -0,0 +1,85 @@
+import React from 'react'
+import { PropsForm } from '@compositor/kit'
+import { FlexContainer, FlexItem, Block, Text, theme } from  '../../src'
+import ExampleHeading from '../doc-components/ExampleHeading'
+
+const propObj = {
+  wrap: ['wrap', 'nowrap'],
+  direction: ['row', 'row-reverse', 'column'],
+  justifyContent: ['start', 'end', 'center', 'between', 'around'],
+  alignItems: ['start', 'end', 'center', 'baseline', 'stretch'],
+  alignContent: ['start', 'end', 'center', 'between', 'around', 'stretch'],
+}
+
+const FlexExample = {
+  name: 'Flex',
+  element: (
+    <Block p={2}>
+        <ExampleHeading mt={2}>FlexContainer</ExampleHeading>
+        <PropsForm>
+          <FlexContainer
+            wrap='wrap'
+            direction='row'
+            justifyContent='start'
+            alignItems='start'
+            alignContent='start'
+            flexAuto={true}
+            alignSelf='start'
+            width={300}
+            height={300}
+            border={true}
+          >
+            <Block p={3} bg='blue'>Item 1</Block>
+            <Block p={3} bg='green'>Item 2</Block>
+            <Block p={3} bg='yellow'>Item 3</Block>
+            <Block p={3} bg='red'>Item 4</Block>
+            <Block p={3} bg='purple'>Item 5</Block>
+          </FlexContainer>
+          {Object.keys(propObj).map(key =>
+            <PropsForm.Select name={key}>
+              {propObj[key].map((value, i) => (
+                <option>{value}</option>))}
+            </PropsForm.Select>
+          )}
+        </PropsForm>
+        <ExampleHeading mt={2}>FlexContainer + FlexItems set to flexAuto</ExampleHeading>
+        <FlexContainer wrap='nowrap' width={300} height={300} border={true}>
+          <FlexItem flexAuto>
+            <Block p={3} bg='blue'>Item 1</Block>
+          </FlexItem>
+          <FlexItem flexAuto>
+            <Block p={3} bg='green'>Item 2</Block>
+          </FlexItem>
+          <FlexItem flexAuto>
+            <Block p={3} bg='yellow'>Item 3</Block>
+          </FlexItem>
+        </FlexContainer>
+        <ExampleHeading mt={2}>FlexContainer + FlexItems with first item set to alignSelf='center'</ExampleHeading>
+        <FlexContainer wrap='nowrap' width={300} height={300} border={true}>
+          <FlexItem alignSelf='center'>
+            <Block p={3} bg='blue'>Item 1</Block>
+          </FlexItem>
+          <FlexItem>
+            <Block p={3} bg='green'>Item 2</Block>
+          </FlexItem>
+          <FlexItem>
+            <Block p={3} bg='yellow'>Item 3</Block>
+          </FlexItem>
+        </FlexContainer>
+        <ExampleHeading mt={2}>FlexContainer + FlexItems using tag prop set to  "p"</ExampleHeading>
+        <FlexContainer wrap='nowrap' width={300} height={300} border={true}>
+          <FlexItem tag="p">
+            <Block p={3} bg='blue'>Item 1</Block>
+          </FlexItem>
+          <FlexItem tag="p">
+            <Block p={3} bg='green'>Item 2</Block>
+          </FlexItem>
+          <FlexItem tag="p">
+            <Block p={3} bg='yellow'>Item 3</Block>
+          </FlexItem>
+        </FlexContainer>
+    </Block>
+  )
+}
+
+export default FlexExample
diff --git a/examples/component-examples/StateLabel.js b/examples/component-examples/StateLabel.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import Octicon from '@github/octicons-react'
+import Octicon, {GitBranch} from '@github/octicons-react'
 import { Block, StateLabel } from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
@@ -86,7 +86,7 @@ const StateLabelExample =
               <StateLabel small scheme='purple'>Purple</StateLabel>
             </span>
             <span className='mr-2'>
-              <StateLabel small scheme='green' icon={<Octicon name='git-branch'/>}>
+              <StateLabel small scheme='green' icon={<Octicon icon={GitBranch} />}>
                 Custom Octicon
               </StateLabel>
             </span>

diff --git a/examples/component-examples/index.js b/examples/component-examples/index.js
@@ -12,6 +12,7 @@ export { default as Details } from './Details'
 export { default as Dropdown } from './Dropdown'
 export { default as DonutChart} from './DonutChart'
 export { default as Flash } from './Flash'
+export { default as Flex } from './Flex'
 export { default as FontSizes } from './FontSizes'
 export { default as Form } from './Form'
 export { default as Heading } from './Heading'

diff --git a/examples/components.js b/examples/components.js
@@ -4,9 +4,10 @@ import SideNav from './doc-components/SideNav'
 import * as examples from './component-examples'
 
 const ComponentPage = () => {
+  const basename = process.env.NODE_ENV === 'development' ? '/components' : '/primer-react/components'
   return (
     <Library
-      basename='/components'
+      basename={basename}
       title='Primer-react Library'
       examples={Object.values(examples)}
       renderSideNav={({

diff --git a/examples/demos.js b/examples/demos.js
@@ -24,9 +24,10 @@ const examples = [
 ]
 
 const DemoPage = () => {
+  const basename = process.env.NODE_ENV === 'development' ? '/demos' : '/primer-react/demo'
   return (
     <Library
-      basename='/demos'
+      basename={basename}
       title='Demo Library'
       examples={examples}
       renderSideNav={({

diff --git a/examples/demos/MergeDetail.js b/examples/demos/MergeDetail.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { CircleOcticon, Text, Block } from '../../src'
+import {Check} from '@github/octicons-react'
+import {Block, CircleOcticon, Text} from '../../src'
 
 const stateColorMap = {
   ready: 'green',
@@ -13,7 +14,7 @@ const MergeDetail = ({ state }) => {
   return (
     <div className='p-2 d-flex border-bottom'>
       <Block mt={2}>
-        <CircleOcticon name='check' size={32} bg={stateColorMap[state]} color='white'/>
+        <CircleOcticon icon={Check} size={32} bg={stateColorMap[state]} color='white' />
       </Block>
       <Block p={2} display='inline'>
         <Text tag='p' p={0} m={0} fontSize={2} fontWeight='bold'>This branch has no conflicts with the base branch</Text>
@@ -24,7 +25,7 @@ const MergeDetail = ({ state }) => {
 }
 
 MergeDetail.propTypes = {
-  state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired,
+  state: PropTypes.oneOf(Object.keys(stateColorMap)).isRequired,
 }
 
 export default MergeDetail
diff --git a/examples/index.js b/examples/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import ComponentPage from './components'
+
+const Index = () => {
+  return (
+      <ComponentPage/>
+  )
+}
+
+export default Index