Skip to content

Commit 560a8cc

Browse files
author
Emily
authored
Merge pull request #98 from primer/release-0.0.7-beta
0.0.7 Beta Release Tracking
2 parents fc71e36 + e4bf03c commit 560a8cc

Some content is hidden

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

68 files changed

+4698
-3729
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.DS_Store
2+
coverage/
23
dist/
34
node_modules
45
npm-debug.log

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,13 @@ Install primer-react in your project with:
1616

1717
## Local Development
1818

19-
Run `primer-react` locally when adding or updating components.
20-
21-
Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
22-
2319
To run `primer-react` locally when adding or updating components:
2420

25-
1. Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
21+
1. Clone this repo: `git clone https://github.com/primer/primer-react`
2622
1. Install dependencies: `npm install`
27-
1. Run the dev app with: `npm start`
23+
1. Run the dev app: `npm start`
2824

29-
Remember to build docs before publishing with: `npm run build`
25+
Remember to build the documentation before publishing with `npm run build:docs`
3026

3127
### Code Style
3228

@@ -72,6 +68,11 @@ npm t -- --watch
7268
See [`src/__tests__/example.js`](src/__tests__/example.js) for an
7369
example of how we're testing our components.
7470

71+
#### Code coverage
72+
73+
A code coverage report is included in the `npm test` output, and
74+
test coverage data is generated in the `coverage/` directory.
75+
7576
## Principles
7677

7778
- Everything is a component.

‎docs/bundle.js‎

Lines changed: 16 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/components/index.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/demos/index.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/index.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎examples/_app.js‎

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
11
import React from 'react'
2-
import { NavLink } from 'react-router-dom'
3-
import CSS from './doc-components/CSS'
2+
import PropTypes from 'prop-types'
3+
import {NavLink} from 'react-router-dom'
4+
import Styles from './doc-components/Styles'
45

5-
const Page = ({ render }) => (
6+
const Page = ({render}) => (
67
<React.Fragment>
7-
<CSS />
8-
<div className='text-dark-gray'>
9-
<nav className='UnderlineNav'>
10-
<div className='UnderlineNav-body'>
11-
<NavLink to='/components' className='UnderlineNav-item no-underline' activeClassName='selected'>primer-react</NavLink>
12-
<NavLink to='/demos' className='UnderlineNav-item no-underline' activeClassName='selected'>Demos</NavLink>
13-
<NavLink to='/sandbox' className='UnderlineNav-item no-underline' activeClassName='selected'>Sandbox</NavLink>
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
14+
</NavLink>
15+
<NavLink to="/demos" className="UnderlineNav-item no-underline" activeClassName="selected">
16+
Demos
17+
</NavLink>
18+
<NavLink to="/sandbox" className="UnderlineNav-item no-underline" activeClassName="selected">
19+
Sandbox
20+
</NavLink>
1421
</div>
1522
</nav>
1623
{render()}
1724
</div>
1825
</React.Fragment>
1926
)
2027

28+
Page.propTypes = {
29+
render: PropTypes.func
30+
}
31+
2132
export default Page

‎examples/component-examples/Avatar.js‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,22 @@
11
import React from 'react'
2-
import { Block } from '../../src'
2+
import {Block} from '../../src'
33
import GitHubAvatar from '../doc-components/GitHubAvatar'
44

5-
const AvatarExample =
6-
{
7-
name: 'Avatar',
8-
element: (
9-
<div>
10-
<Block mb={2}>
11-
<GitHubAvatar username='primer' size={128} />
12-
</Block>
13-
<Block mb={2}>
14-
<GitHubAvatar username='github' size={64} />
15-
</Block>
16-
<Block mb={2}>
17-
<GitHubAvatar username='reactjs' size={32} />
18-
{' '}
19-
<GitHubAvatar username='npm' />
20-
</Block>
21-
</div>
22-
)
23-
}
5+
const AvatarExample = {
6+
name: 'Avatar',
7+
element: (
8+
<div>
9+
<Block mb={2}>
10+
<GitHubAvatar username="primer" size={128} />
11+
</Block>
12+
<Block mb={2}>
13+
<GitHubAvatar username="github" size={64} />
14+
</Block>
15+
<Block mb={2}>
16+
<GitHubAvatar username="reactjs" size={32} /> <GitHubAvatar username="npm" />
17+
</Block>
18+
</div>
19+
)
20+
}
2421

2522
export default AvatarExample

‎examples/component-examples/Block.js‎

Lines changed: 53 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,62 @@
1+
/* eslint-disable import/no-named-as-default-member */
12
import React from 'react'
2-
import { Text, Block } from '../../src'
3+
import theme from '../../src/theme'
4+
import {Block, Text} from '../../src'
5+
6+
const colors = Object.keys(theme.colors.bg)
7+
const textColors = ['white', 'gray', 'black']
38

49
const BlockExample = {
510
name: 'Block',
611
element: (
7-
<table>
8-
<tbody>
9-
{[
10-
// 'black',
11-
'white',
12-
'gray-dark',
13-
'gray',
14-
'gray-light',
15-
'blue',
16-
'blue-light',
17-
'green',
18-
'green-light',
19-
'red',
20-
'red-light',
21-
'yellow',
22-
'yellow-light',
23-
'purple',
24-
'purple-light',
25-
// 'shade-gradient'
26-
].map((bg, i, style) => (
27-
<tr key={i}>
28-
<td>
29-
<Text mono nowrap>{`bg='${bg}'`}</Text>
30-
</td>
31-
{['white', 'gray', 'black'].map((fg, j) => (
32-
<td key={j}>
33-
<Block p={3} mb={2} bg={bg} border={bg === 'white'}>
34-
<Text color={fg}>{fg}</Text>
35-
</Block>
36-
</td>
37-
))}
12+
<Block p={4}>
13+
<table>
14+
<thead>
15+
<tr>
16+
<th className="text-left">
17+
<Text tag="div" pb={4} mono>
18+
color
19+
</Text>
20+
</th>
21+
<th colSpan={textColors.length}>
22+
<Text tag="div" pb={4} mono>
23+
bg={`{color}`}
24+
</Text>
25+
</th>
26+
<th>
27+
<Text tag="div" pb={4} mono>
28+
borderColor
29+
</Text>
30+
</th>
3831
</tr>
39-
))}
40-
</tbody>
41-
</table>
32+
</thead>
33+
<tbody>
34+
{colors.map(color => (
35+
<tr key={color}>
36+
<td>
37+
<Text mono nowrap mr={3}>
38+
{color}
39+
</Text>
40+
</td>
41+
{textColors.map(fg => (
42+
<td key={fg}>
43+
<Block p={3} mb={2} bg={color} fg={fg} border={color === 'white'}>
44+
<Text mono>{fg}</Text>
45+
</Block>
46+
</td>
47+
))}
48+
<td>
49+
{color in theme.colors.border ? (
50+
<Block p={3} mb={2} ml={3} borderColor={color}>
51+
<Text mono>{color}</Text>
52+
</Block>
53+
) : null}
54+
</td>
55+
</tr>
56+
))}
57+
</tbody>
58+
</table>
59+
</Block>
4260
)
4361
}
4462

‎examples/component-examples/Box.js‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,31 @@
11
import React from 'react'
2-
import { Box } from '../../src'
2+
import {Box} from '../../src'
33

4-
const BoxExample =
5-
{
6-
name: 'Box',
7-
element: (
8-
<div>
9-
<Box m={2}>This is a box</Box>
10-
<Box p={2} m={2}>This is a box with padding.</Box>
11-
<Box shadow p={2} m={2}>This is a box with shadow.</Box>
12-
<Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
13-
<Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
14-
<Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
15-
<Box border={[true, 'green']} p={2} m={2}>This is a box with a green border.</Box>
16-
</div>
17-
)
18-
}
4+
const BoxExample = {
5+
name: 'Box',
6+
element: (
7+
<div>
8+
<Box m={2}>This is a box</Box>
9+
<Box p={2} m={2}>
10+
This is a box with padding.
11+
</Box>
12+
<Box shadow p={2} m={2}>
13+
This is a box with shadow.
14+
</Box>
15+
<Box shadow="medium" p={2} m={2}>
16+
This is a box with a medium shadow.
17+
</Box>
18+
<Box shadow="large" p={2} m={2}>
19+
This is a box with a large shadow.
20+
</Box>
21+
<Box shadow="extra-large" p={2} m={2}>
22+
This is a box with an extra-large shadow.
23+
</Box>
24+
<Box border={[true, 'green']} p={2} m={2}>
25+
This is a box with a green border.
26+
</Box>
27+
</div>
28+
)
29+
}
1930

2031
export default BoxExample

0 commit comments

Comments
 (0)