Skip to content

Commit 28520e8

Browse files
author
Emily
authored
Merge pull request #113 from primer/release-0.0.9-beta
Release tracking v0.0.10-beta
2 parents 52dd875 + 7e72ce8 commit 28520e8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+961
-174
lines changed

Diff for: ‎.eslintrc.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@
55
"plugin:jsx-a11y/recommended"
66
],
77
"rules": {
8-
"jsx-a11y/no-autofocus": "warn",
9-
"react/prop-types": "warn",
10-
"react/sort-prop-types": "warn"
8+
"jsx-a11y/no-autofocus": "warn"
119
}
1210
}

Diff for: ‎docs/bundle.js

+17-17
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎docs/components/index.html

+6-1
Large diffs are not rendered by default.

Diff for: ‎docs/demos/index.html

+1-1
Large diffs are not rendered by default.

Diff for: ‎docs/index.html

+6-1
Large diffs are not rendered by default.

Diff for: ‎docs/sandbox/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
margin: 0;
1010
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
1111
line-height: 1.5;
12-
}</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">
12+
}</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">
1313

1414
<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>
1515
<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>

Diff for: ‎examples/_app.js

+29-18
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,42 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33
import {NavLink} from 'react-router-dom'
44
import Styles from './doc-components/Styles'
5+
import Octicon, {Package} from '@githubprimer/octicons-react'
6+
import {Link, Text, UnderlineNav} from '../src'
7+
import {name, repository, version} from '../package.json'
58

6-
const Page = ({render}) => (
7-
<React.Fragment>
8-
<Styles />
9-
<div className="text-dark-gray">
10-
<nav className="UnderlineNav">
11-
<div className="UnderlineNav-body">
12-
<NavLink to="/components" className="UnderlineNav-item no-underline" activeClassName="selected">
13-
primer-react
9+
const pkg = `${name}@${version}`
10+
const releaseURL = `https://github.com/${repository}/releases/v${version}`
11+
12+
export default function Page({render}) {
13+
return (
14+
<React.Fragment>
15+
<Styles />
16+
<div className="text-dark-gray">
17+
<UnderlineNav
18+
actions={
19+
<Text color="gray-light" mono px={4}>
20+
<Octicon icon={Package} className="mr-2" />
21+
<Link href={releaseURL}>{pkg}</Link>
22+
</Text>
23+
}
24+
>
25+
<NavLink to="/components" className="px-3">
26+
Components
1427
</NavLink>
15-
<NavLink to="/demos" className="UnderlineNav-item no-underline" activeClassName="selected">
28+
<NavLink to="/demos" className="px-3">
1629
Demos
1730
</NavLink>
18-
<NavLink to="/sandbox" className="UnderlineNav-item no-underline" activeClassName="selected">
31+
<NavLink to="/sandbox" className="px-3">
1932
Sandbox
2033
</NavLink>
21-
</div>
22-
</nav>
23-
{render()}
24-
</div>
25-
</React.Fragment>
26-
)
34+
</UnderlineNav>
35+
{render()}
36+
</div>
37+
</React.Fragment>
38+
)
39+
}
2740

2841
Page.propTypes = {
2942
render: PropTypes.func
3043
}
31-
32-
export default Page

Diff for: ‎examples/component-examples/Buttons.js

+15-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React from 'react'
2-
import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline} from '../../src'
2+
import ExampleHeading from '../doc-components/ExampleHeading'
3+
import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
4+
import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
35

46
const ButtonExample = {
57
name: 'Buttons',
68
element: (
7-
<div>
9+
<Block p={4}>
810
<Block mb={2}>
911
<Button> Button </Button>
1012
</Block>
@@ -32,7 +34,17 @@ const ButtonExample = {
3234
<Block mb={2}>
3335
<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>
3436
</Block>
35-
</div>
37+
<Block mb={2}>
38+
<ExampleHeading>Octicon Buttons</ExampleHeading>
39+
<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />
40+
<Text color="red">
41+
<OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} />
42+
</Text>
43+
<Block>
44+
<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
45+
</Block>
46+
</Block>
47+
</Block>
3648
)
3749
}
3850

Diff for: ‎examples/component-examples/CircleBadge.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react'
2+
import Octicon, {Zap} from '@githubprimer/octicons-react'
3+
import {LiveEditor} from '@compositor/kit'
4+
import {Block, CircleBadge, Heading} from '../../src'
5+
6+
const octicon = `<CircleBadge size="medium">
7+
<Octicon icon={Zap}/>
8+
</CircleBadge>`
9+
10+
const image = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
11+
`
12+
13+
const sizes = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
14+
<CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
15+
<CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
16+
17+
const CircleBadgeExample = {
18+
name: 'CircleBadge',
19+
element: (
20+
<div>
21+
<Block mb={2} pt={2}>
22+
<Heading fontSize={3}>Small, medium & large</Heading>
23+
<LiveEditor code={sizes} scope={{CircleBadge, Octicon, Zap}} />
24+
</Block>
25+
<Block mb={2}>
26+
<Heading fontSize={3}>With Octicon as child</Heading>
27+
<LiveEditor code={octicon} scope={{CircleBadge, Octicon, Zap}} />
28+
</Block>
29+
<Block mb={2} pt={2}>
30+
<Heading fontSize={3}>{`With <img> as a child & bg prop`}</Heading>
31+
<LiveEditor code={image} scope={{CircleBadge, Octicon, Zap}} />
32+
</Block>
33+
</div>
34+
)
35+
}
36+
37+
export default CircleBadgeExample

Diff for: ‎examples/component-examples/Flash.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ const FlashExample = {
99
<Flash> Flash </Flash>
1010
</Block>
1111
<Block mb={3}>
12-
<Flash yellow> Flash yellow </Flash>
12+
<Flash scheme="yellow"> Flash yellow </Flash>
1313
</Block>
1414
<Block mb={3}>
15-
<Flash red> Flash red </Flash>
15+
<Flash scheme="red"> Flash red </Flash>
1616
</Block>
1717
<Block mb={3}>
18-
<Flash green> Flash green </Flash>
18+
<Flash scheme="green"> Flash green </Flash>
1919
</Block>
2020
<Block mb={3}>
2121
<Flash full> Flash full </Flash>

Diff for: ‎examples/component-examples/Link.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ const LinkExample = {
1414
</Link>
1515
</Block>
1616
<Block mb={1}>
17-
<Link gray href="https://github.com">
17+
<Link scheme="gray" href="https://github.com">
1818
Link gray
1919
</Link>
2020
</Block>
2121
<Block mb={1}>
22-
<Link graydark href="https://github.com">
23-
Link graydark
22+
<Link scheme="gray-dark" href="https://github.com">
23+
Link gray-dark
2424
</Link>
2525
</Block>
2626
</div>

Diff for: ‎examples/component-examples/UnderlineNav.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/* eslint-disable jsx-a11y/anchor-has-content */
2+
import React from 'react'
3+
import ExampleHeading from '../doc-components/ExampleHeading'
4+
import {Block, Text, UnderlineNav, UnderlineNavLink} from '../../src'
5+
import {NavLink} from 'react-router-dom'
6+
7+
export default {
8+
name: 'UnderlineNav',
9+
element: (
10+
<Block p={4}>
11+
<Block mb={4}>
12+
<ExampleHeading>
13+
Using <Text mono>{'<UnderlineNavLink>'}</Text>
14+
</ExampleHeading>
15+
<UnderlineNav>
16+
<UnderlineNavLink href="#foo" selected>
17+
Selected
18+
</UnderlineNavLink>
19+
<UnderlineNavLink href="#bar">Bar</UnderlineNavLink>
20+
<UnderlineNavLink href="#baz">Baz</UnderlineNavLink>
21+
</UnderlineNav>
22+
</Block>
23+
24+
<Block mb={4}>
25+
<ExampleHeading>
26+
Using <Text mono>{'<a>'}</Text> tags
27+
</ExampleHeading>
28+
<UnderlineNav>
29+
<a href="#foo">Foo</a>
30+
<a href="#bar" selected>
31+
Selected
32+
</a>
33+
<a href="#baz">Baz</a>
34+
</UnderlineNav>
35+
</Block>
36+
37+
<Block mb={4}>
38+
<ExampleHeading>
39+
Using <Text mono>{'<NavLink>'}</Text> from react-router
40+
</ExampleHeading>
41+
<UnderlineNav>
42+
<NavLink to="#foo">Foo</NavLink>
43+
<NavLink to="#bar">Two</NavLink>
44+
<NavLink to="/">Selected</NavLink>
45+
</UnderlineNav>
46+
</Block>
47+
</Block>
48+
)
49+
}

Diff for: ‎examples/component-examples/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export {default as Buttons} from './Buttons'
66
export {default as Caret} from './Caret'
77
export {default as CaretBox} from './CaretBox'
88
export {default as CircleOcticon} from './CircleOcticon'
9+
export {default as CircleBadge} from './CircleBadge'
910
export {default as Colors} from './Colors'
1011
export {default as CounterLabel} from './CounterLabel'
1112
export {default as Details} from './Details'
@@ -22,3 +23,4 @@ export {default as MergeStatus} from './MergeStatus'
2223
export {default as StateLabel} from './StateLabel'
2324
export {default as Text} from './Text'
2425
export {default as Tooltip} from './Tooltip'
26+
export {default as UnderlineNav} from './UnderlineNav'

Diff for: ‎examples/demos/MergeActions.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,10 @@ const MergeActions = ({numCommits, repoUrl, branchName, state}) => {
1818
}
1919

2020
MergeActions.propTypes = {
21+
branchName: PropTypes.string.isRequired,
2122
numCommits: PropTypes.number.isRequired,
2223
repoUrl: PropTypes.string.isRequired,
23-
branchName: PropTypes.string.isRequired
24+
state: PropTypes.string.isRequired
2425
}
2526

2627
export default MergeActions

Diff for: ‎examples/demos/MergeBox.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ const MergeBox = ({state, repoUrl, branchName, numCommits}) => {
2424
}
2525

2626
MergeBox.propTypes = {
27-
state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired,
28-
repoUrl: PropTypes.string.isRequired,
2927
branchName: PropTypes.string.isRequired,
30-
numCommits: PropTypes.number.isRequired
28+
numCommits: PropTypes.number.isRequired,
29+
repoUrl: PropTypes.string.isRequired,
30+
state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired
3131
}
3232

3333
export default MergeBox

Diff for: ‎examples/demos/MergeButton.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -72,9 +72,9 @@ const MergeButton = ({primary, onClick, numCommits}) => {
7272
}
7373

7474
MergeButton.propTypes = {
75-
primary: PropTypes.bool,
75+
numCommits: PropTypes.number.isRequired,
7676
onClick: PropTypes.func.isRequired,
77-
numCommits: PropTypes.number.isRequired
77+
primary: PropTypes.bool
7878
}
7979

8080
export default MergeButton

Diff for: ‎package-lock.json

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎package.json

+4-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "primer-react",
3-
"version": "0.0.9-beta",
3+
"version": "0.0.10-beta",
44
"description": "Primer react components",
55
"main": "dist/index.umd.js",
66
"module": "dist/index.esm.js",
@@ -11,17 +11,15 @@
1111
"lint": "eslint src examples",
1212
"prepublishOnly": "npm run build",
1313
"start": "x0 dev examples -op 8888",
14-
"test": "jest"
14+
"test": "jest",
15+
"watch": "jest --watch --no-coverage"
1516
},
1617
"files": [
1718
"dist",
1819
"src",
1920
"examples"
2021
],
21-
"repository": {
22-
"type": "git",
23-
"url": "git+https://github.com/primer/primer-react.git"
24-
},
22+
"repository": "primer/primer-react",
2523
"keywords": [
2624
"react",
2725
"components",

Diff for: ‎src/BranchName.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23

3-
const BranchName = ({children, href, tag}) => {
4-
const Tag = tag === 'a' ? 'a' : 'span'
5-
4+
export default function BranchName({children, href, tag: Tag}) {
65
// We don't want someone to use href on a non tag
7-
if (tag !== 'a') {
6+
if (Tag !== 'a') {
87
href = null
98
}
109

@@ -15,4 +14,12 @@ const BranchName = ({children, href, tag}) => {
1514
)
1615
}
1716

18-
export default BranchName
17+
BranchName.defaultProps = {
18+
tag: 'a'
19+
}
20+
21+
BranchName.propTypes = {
22+
children: PropTypes.node,
23+
href: PropTypes.string,
24+
tag: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
25+
}

Diff for: ‎src/Button.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,14 @@ function Button({tag: Tag = 'button', children, size, block, linkStyle, grouped,
2424

2525
Button.propTypes = {
2626
block: PropTypes.bool,
27+
children: PropTypes.node,
28+
disabled: PropTypes.bool,
2729
grouped: PropTypes.bool,
30+
linkStyle: PropTypes.bool,
31+
onClick: PropTypes.func,
2832
scheme: PropTypes.string,
2933
size: PropTypes.oneOf(['sm', 'large']),
30-
tag: PropTypes.oneOf(['button', 'a', 'summary']),
31-
linkStyle: PropTypes.bool,
32-
disabled: PropTypes.bool,
33-
onClick: PropTypes.func
34+
tag: PropTypes.oneOf(['button', 'a', 'summary'])
3435
}
3536

3637
export default Button

Diff for: ‎src/Caret.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ Caret.defaultProps = {
103103
Caret.propTypes = {
104104
borderColor: PropTypes.string,
105105
borderWidth: PropTypes.number,
106-
location: PropTypes.oneOf(Caret.locations),
107106
fill: PropTypes.string,
107+
location: PropTypes.oneOf(Caret.locations),
108108
size: PropTypes.number
109109
}

0 commit comments

Comments
 (0)