Merge pull request #113 from primer/release-0.0.9-beta

Release tracking v0.0.10-beta

.eslintrc.json

@@ -5,8 +5,6 @@
     "plugin:jsx-a11y/recommended"
   ],
   "rules": {
-    "jsx-a11y/no-autofocus": "warn",
-    "react/prop-types": "warn",
-    "react/sort-prop-types": "warn"
+    "jsx-a11y/no-autofocus": "warn"
   }
 }

docs/sandbox/index.html

@@ -9,7 +9,7 @@
       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 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">
+    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.9-beta">[email protected]</a></span></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>

examples/_app.js

@@ -2,31 +2,42 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {NavLink} from 'react-router-dom'
 import Styles from './doc-components/Styles'
+import Octicon, {Package} from '@githubprimer/octicons-react'
+import {Link, Text, UnderlineNav} from '../src'
+import {name, repository, version} from '../package.json'
 
-const Page = ({render}) => (
-  <React.Fragment>
-    <Styles />
-    <div className="text-dark-gray">
-      <nav className="UnderlineNav">
-        <div className="UnderlineNav-body">
-          <NavLink to="/components" className="UnderlineNav-item no-underline" activeClassName="selected">
-            primer-react
+const pkg = `${name}@${version}`
+const releaseURL = `https://github.com/${repository}/releases/v${version}`
+
+export default function Page({render}) {
+  return (
+    <React.Fragment>
+      <Styles />
+      <div className="text-dark-gray">
+        <UnderlineNav
+          actions={
+            <Text color="gray-light" mono px={4}>
+              <Octicon icon={Package} className="mr-2" />
+              <Link href={releaseURL}>{pkg}</Link>
+            </Text>
+          }
+        >
+          <NavLink to="/components" className="px-3">
+            Components
           </NavLink>
-          <NavLink to="/demos" className="UnderlineNav-item no-underline" activeClassName="selected">
+          <NavLink to="/demos" className="px-3">
             Demos
           </NavLink>
-          <NavLink to="/sandbox" className="UnderlineNav-item no-underline" activeClassName="selected">
+          <NavLink to="/sandbox" className="px-3">
             Sandbox
           </NavLink>
-        </div>
-      </nav>
-      {render()}
-    </div>
-  </React.Fragment>
-)
+        </UnderlineNav>
+        {render()}
+      </div>
+    </React.Fragment>
+  )
+}
 
 Page.propTypes = {
   render: PropTypes.func
 }
-
-export default Page

examples/component-examples/Buttons.js

@@ -1,10 +1,12 @@
 import React from 'react'
-import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline} from '../../src'
+import ExampleHeading from '../doc-components/ExampleHeading'
+import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
+import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
 
 const ButtonExample = {
   name: 'Buttons',
   element: (
-    <div>
+    <Block p={4}>
       <Block mb={2}>
         <Button> Button </Button>
       </Block>
@@ -32,7 +34,17 @@ const ButtonExample = {
       <Block mb={2}>
         <ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>
       </Block>
-    </div>
+      <Block mb={2}>
+        <ExampleHeading>Octicon Buttons</ExampleHeading>
+        <OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />
+        <Text color="red">
+          <OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} />
+        </Text>
+        <Block>
+          <OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
+        </Block>
+      </Block>
+    </Block>
   )
 }
 

examples/component-examples/CircleBadge.js

@@ -0,0 +1,37 @@
+import React from 'react'
+import Octicon, {Zap} from '@githubprimer/octicons-react'
+import {LiveEditor} from '@compositor/kit'
+import {Block, CircleBadge, Heading} from '../../src'
+
+const octicon = `<CircleBadge size="medium">
+  <Octicon icon={Zap}/>
+</CircleBadge>`
+
+const image = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+`
+
+const sizes = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+<CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
+
+const CircleBadgeExample = {
+  name: 'CircleBadge',
+  element: (
+    <div>
+      <Block mb={2} pt={2}>
+        <Heading fontSize={3}>Small, medium & large</Heading>
+        <LiveEditor code={sizes} scope={{CircleBadge, Octicon, Zap}} />
+      </Block>
+      <Block mb={2}>
+        <Heading fontSize={3}>With Octicon as child</Heading>
+        <LiveEditor code={octicon} scope={{CircleBadge, Octicon, Zap}} />
+      </Block>
+      <Block mb={2} pt={2}>
+        <Heading fontSize={3}>{`With <img> as a child & bg prop`}</Heading>
+        <LiveEditor code={image} scope={{CircleBadge, Octicon, Zap}} />
+      </Block>
+    </div>
+  )
+}
+
+export default CircleBadgeExample

examples/component-examples/Flash.js

@@ -9,13 +9,13 @@ const FlashExample = {
         <Flash> Flash </Flash>
       </Block>
       <Block mb={3}>
-        <Flash yellow> Flash yellow </Flash>
+        <Flash scheme="yellow"> Flash yellow </Flash>
       </Block>
       <Block mb={3}>
-        <Flash red> Flash red </Flash>
+        <Flash scheme="red"> Flash red </Flash>
       </Block>
       <Block mb={3}>
-        <Flash green> Flash green </Flash>
+        <Flash scheme="green"> Flash green </Flash>
       </Block>
       <Block mb={3}>
         <Flash full> Flash full </Flash>

examples/component-examples/Link.js

@@ -14,13 +14,13 @@ const LinkExample = {
         </Link>
       </Block>
       <Block mb={1}>
-        <Link gray href="https://github.com">
+        <Link scheme="gray" href="https://github.com">
           Link gray
         </Link>
       </Block>
       <Block mb={1}>
-        <Link graydark href="https://github.com">
-          Link graydark
+        <Link scheme="gray-dark" href="https://github.com">
+          Link gray-dark
         </Link>
       </Block>
     </div>

examples/component-examples/UnderlineNav.js

@@ -0,0 +1,49 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import React from 'react'
+import ExampleHeading from '../doc-components/ExampleHeading'
+import {Block, Text, UnderlineNav, UnderlineNavLink} from '../../src'
+import {NavLink} from 'react-router-dom'
+
+export default {
+  name: 'UnderlineNav',
+  element: (
+    <Block p={4}>
+      <Block mb={4}>
+        <ExampleHeading>
+          Using <Text mono>{'<UnderlineNavLink>'}</Text>
+        </ExampleHeading>
+        <UnderlineNav>
+          <UnderlineNavLink href="#foo" selected>
+            Selected
+          </UnderlineNavLink>
+          <UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
+          <UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
+        </UnderlineNav>
+      </Block>
+
+      <Block mb={4}>
+        <ExampleHeading>
+          Using <Text mono>{'<a>'}</Text> tags
+        </ExampleHeading>
+        <UnderlineNav>
+          <a href="#foo">Foo</a>
+          <a href="#bar" selected>
+            Selected
+          </a>
+          <a href="#baz">Baz</a>
+        </UnderlineNav>
+      </Block>
+
+      <Block mb={4}>
+        <ExampleHeading>
+          Using <Text mono>{'<NavLink>'}</Text> from react-router
+        </ExampleHeading>
+        <UnderlineNav>
+          <NavLink to="#foo">Foo</NavLink>
+          <NavLink to="#bar">Two</NavLink>
+          <NavLink to="/">Selected</NavLink>
+        </UnderlineNav>
+      </Block>
+    </Block>
+  )
+}

examples/component-examples/index.js

@@ -6,6 +6,7 @@ export {default as Buttons} from './Buttons'
 export {default as Caret} from './Caret'
 export {default as CaretBox} from './CaretBox'
 export {default as CircleOcticon} from './CircleOcticon'
+export {default as CircleBadge} from './CircleBadge'
 export {default as Colors} from './Colors'
 export {default as CounterLabel} from './CounterLabel'
 export {default as Details} from './Details'
@@ -22,3 +23,4 @@ export {default as MergeStatus} from './MergeStatus'
 export {default as StateLabel} from './StateLabel'
 export {default as Text} from './Text'
 export {default as Tooltip} from './Tooltip'
+export {default as UnderlineNav} from './UnderlineNav'

examples/demos/MergeActions.js

@@ -18,9 +18,10 @@ const MergeActions = ({numCommits, repoUrl, branchName, state}) => {
 }
 
 MergeActions.propTypes = {
+  branchName: PropTypes.string.isRequired,
   numCommits: PropTypes.number.isRequired,
   repoUrl: PropTypes.string.isRequired,
-  branchName: PropTypes.string.isRequired
+  state: PropTypes.string.isRequired
 }
 
 export default MergeActions

examples/demos/MergeBox.js

@@ -24,10 +24,10 @@ const MergeBox = ({state, repoUrl, branchName, numCommits}) => {
 }
 
 MergeBox.propTypes = {
-  state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired,
-  repoUrl: PropTypes.string.isRequired,
   branchName: PropTypes.string.isRequired,
-  numCommits: PropTypes.number.isRequired
+  numCommits: PropTypes.number.isRequired,
+  repoUrl: PropTypes.string.isRequired,
+  state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired
 }
 
 export default MergeBox

examples/demos/MergeButton.js

@@ -72,9 +72,9 @@ const MergeButton = ({primary, onClick, numCommits}) => {
 }
 
 MergeButton.propTypes = {
-  primary: PropTypes.bool,
+  numCommits: PropTypes.number.isRequired,
   onClick: PropTypes.func.isRequired,
-  numCommits: PropTypes.number.isRequired
+  primary: PropTypes.bool
 }
 
 export default MergeButton

package.json

@@ -1,6 +1,6 @@
 {
   "name": "primer-react",
-  "version": "0.0.9-beta",
+  "version": "0.0.10-beta",
   "description": "Primer react components",
   "main": "dist/index.umd.js",
   "module": "dist/index.esm.js",
@@ -11,17 +11,15 @@
     "lint": "eslint src examples",
     "prepublishOnly": "npm run build",
     "start": "x0 dev examples -op 8888",
-    "test": "jest"
+    "test": "jest",
+    "watch": "jest --watch --no-coverage"
   },
   "files": [
     "dist",
     "src",
     "examples"
   ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/primer/primer-react.git"
-  },
+  "repository": "primer/primer-react",
   "keywords": [
     "react",
     "components",

src/BranchName.js

@@ -1,10 +1,9 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
-const BranchName = ({children, href, tag}) => {
-  const Tag = tag === 'a' ? 'a' : 'span'
-
+export default function BranchName({children, href, tag: Tag}) {
   // We don't want someone to use href on a non tag
-  if (tag !== 'a') {
+  if (Tag !== 'a') {
     href = null
   }
 
@@ -15,4 +14,12 @@ const BranchName = ({children, href, tag}) => {
   )
 }
 
-export default BranchName
+BranchName.defaultProps = {
+  tag: 'a'
+}
+
+BranchName.propTypes = {
+  children: PropTypes.node,
+  href: PropTypes.string,
+  tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
+}

src/Button.js

@@ -24,13 +24,14 @@ function Button({tag: Tag = 'button', children, size, block, linkStyle, grouped,
 
 Button.propTypes = {
   block: PropTypes.bool,
+  children: PropTypes.node,
+  disabled: PropTypes.bool,
   grouped: PropTypes.bool,
+  linkStyle: PropTypes.bool,
+  onClick: PropTypes.func,
   scheme: PropTypes.string,
   size: PropTypes.oneOf(['sm', 'large']),
-  tag: PropTypes.oneOf(['button', 'a', 'summary']),
-  linkStyle: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func
+  tag: PropTypes.oneOf(['button', 'a', 'summary'])
 }
 
 export default Button

src/Caret.js

@@ -103,7 +103,7 @@ Caret.defaultProps = {
 Caret.propTypes = {
   borderColor: PropTypes.string,
   borderWidth: PropTypes.number,
-  location: PropTypes.oneOf(Caret.locations),
   fill: PropTypes.string,
+  location: PropTypes.oneOf(Caret.locations),
   size: PropTypes.number
 }