Merge pull request #98 from primer/release-0.0.7-beta

0.0.7 Beta Release Tracking

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+coverage/
 dist/
 node_modules
 npm-debug.log

README.md

@@ -16,17 +16,13 @@ Install primer-react in your project with:
 
 ## Local Development
 
-Run `primer-react` locally when adding or updating components.
-
-Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
-
 To run `primer-react` locally when adding or updating components:
 
-1. Clone this repo: `$ git clone https://github.com/primer/primer-react.git`
+1. Clone this repo: `git clone https://github.com/primer/primer-react`
 1. Install dependencies: `npm install`
-1. Run the dev app with: `npm start`
+1. Run the dev app: `npm start`
 
-Remember to build docs before publishing with: `npm run build`
+Remember to build the documentation before publishing with `npm run build:docs`
 
 ### Code Style
 
@@ -72,6 +68,11 @@ npm t -- --watch
 See [`src/__tests__/example.js`](src/__tests__/example.js) for an
 example of how we're testing our components.
 
+#### Code coverage
+
+A code coverage report is included in the `npm test` output, and
+test coverage data is generated in the `coverage/` directory.
+
 ## Principles
 
 - Everything is a component.

examples/_app.js

@@ -1,21 +1,32 @@
 import React from 'react'
-import { NavLink } from 'react-router-dom'
-import CSS from './doc-components/CSS'
+import PropTypes from 'prop-types'
+import {NavLink} from 'react-router-dom'
+import Styles from './doc-components/Styles'
 
-const Page = ({ render }) => (
+const Page = ({render}) => (
   <React.Fragment>
-    <CSS />
-    <div className='text-dark-gray'>
-      <nav className='UnderlineNav'>
-        <div className='UnderlineNav-body'>
-          <NavLink to='/components' className='UnderlineNav-item no-underline' activeClassName='selected'>primer-react</NavLink>
-          <NavLink to='/demos' className='UnderlineNav-item no-underline' activeClassName='selected'>Demos</NavLink>
-          <NavLink to='/sandbox' className='UnderlineNav-item no-underline' activeClassName='selected'>Sandbox</NavLink>
+    <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
+          </NavLink>
+          <NavLink to="/demos" className="UnderlineNav-item no-underline" activeClassName="selected">
+            Demos
+          </NavLink>
+          <NavLink to="/sandbox" className="UnderlineNav-item no-underline" activeClassName="selected">
+            Sandbox
+          </NavLink>
         </div>
       </nav>
       {render()}
     </div>
   </React.Fragment>
 )
 
+Page.propTypes = {
+  render: PropTypes.func
+}
+
 export default Page

examples/component-examples/Avatar.js

@@ -1,25 +1,22 @@
 import React from 'react'
-import { Block } from '../../src'
+import {Block} from '../../src'
 import GitHubAvatar from '../doc-components/GitHubAvatar'
 
-const AvatarExample =
-  {
-    name: 'Avatar',
-    element: (
-      <div>
-        <Block mb={2}>
-          <GitHubAvatar username='primer' size={128} />
-        </Block>
-        <Block mb={2}>
-          <GitHubAvatar username='github' size={64} />
-        </Block>
-        <Block mb={2}>
-          <GitHubAvatar username='reactjs' size={32} />
-          {' '}
-          <GitHubAvatar username='npm' />
-        </Block>
-      </div>
-    )
-  }
+const AvatarExample = {
+  name: 'Avatar',
+  element: (
+    <div>
+      <Block mb={2}>
+        <GitHubAvatar username="primer" size={128} />
+      </Block>
+      <Block mb={2}>
+        <GitHubAvatar username="github" size={64} />
+      </Block>
+      <Block mb={2}>
+        <GitHubAvatar username="reactjs" size={32} /> <GitHubAvatar username="npm" />
+      </Block>
+    </div>
+  )
+}
 
 export default AvatarExample

examples/component-examples/Block.js

@@ -1,44 +1,62 @@
+/* eslint-disable import/no-named-as-default-member */
 import React from 'react'
-import { Text, Block } from  '../../src'
+import theme from '../../src/theme'
+import {Block, Text} from '../../src'
+
+const colors = Object.keys(theme.colors.bg)
+const textColors = ['white', 'gray', 'black']
 
 const BlockExample = {
   name: 'Block',
   element: (
-    <table>
-      <tbody>
-        {[
-          // 'black',
-          'white',
-          'gray-dark',
-          'gray',
-          'gray-light',
-          'blue',
-          'blue-light',
-          'green',
-          'green-light',
-          'red',
-          'red-light',
-          'yellow',
-          'yellow-light',
-          'purple',
-          'purple-light',
-          // 'shade-gradient'
-        ].map((bg, i, style) => (
-          <tr key={i}>
-            <td>
-              <Text mono nowrap>{`bg='${bg}'`}</Text>
-            </td>
-            {['white', 'gray', 'black'].map((fg, j) => (
-              <td key={j}>
-                <Block p={3} mb={2} bg={bg} border={bg === 'white'}>
-                  <Text color={fg}>{fg}</Text>
-                </Block>
-              </td>
-            ))}
+    <Block p={4}>
+      <table>
+        <thead>
+          <tr>
+            <th className="text-left">
+              <Text tag="div" pb={4} mono>
+                color
+              </Text>
+            </th>
+            <th colSpan={textColors.length}>
+              <Text tag="div" pb={4} mono>
+                bg={`{color}`}
+              </Text>
+            </th>
+            <th>
+              <Text tag="div" pb={4} mono>
+                borderColor
+              </Text>
+            </th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {colors.map(color => (
+            <tr key={color}>
+              <td>
+                <Text mono nowrap mr={3}>
+                  {color}
+                </Text>
+              </td>
+              {textColors.map(fg => (
+                <td key={fg}>
+                  <Block p={3} mb={2} bg={color} fg={fg} border={color === 'white'}>
+                    <Text mono>{fg}</Text>
+                  </Block>
+                </td>
+              ))}
+              <td>
+                {color in theme.colors.border ? (
+                  <Block p={3} mb={2} ml={3} borderColor={color}>
+                    <Text mono>{color}</Text>
+                  </Block>
+                ) : null}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Block>
   )
 }
 

examples/component-examples/Box.js

@@ -1,20 +1,31 @@
 import React from 'react'
-import { Box } from '../../src'
+import {Box} from '../../src'
 
-const BoxExample =
-  {
-    name: 'Box',
-    element: (
-      <div>
-        <Box m={2}>This is a box</Box>
-        <Box p={2} m={2}>This is a box with padding.</Box>
-        <Box shadow p={2} m={2}>This is a box with shadow.</Box>
-        <Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
-        <Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
-        <Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
-        <Box border={[true, 'green']} p={2} m={2}>This is a box with a green border.</Box>
-      </div>
-    )
-  }
+const BoxExample = {
+  name: 'Box',
+  element: (
+    <div>
+      <Box m={2}>This is a box</Box>
+      <Box p={2} m={2}>
+        This is a box with padding.
+      </Box>
+      <Box shadow p={2} m={2}>
+        This is a box with shadow.
+      </Box>
+      <Box shadow="medium" p={2} m={2}>
+        This is a box with a medium shadow.
+      </Box>
+      <Box shadow="large" p={2} m={2}>
+        This is a box with a large shadow.
+      </Box>
+      <Box shadow="extra-large" p={2} m={2}>
+        This is a box with an extra-large shadow.
+      </Box>
+      <Box border={[true, 'green']} p={2} m={2}>
+        This is a box with a green border.
+      </Box>
+    </div>
+  )
+}
 
 export default BoxExample

examples/component-examples/BranchName.js

@@ -11,9 +11,13 @@ const BranchNameExample = {
       <BranchName>a_new_feature_branch</BranchName>
       <Detail>
         <ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
-        <BranchName tag='a' href='/'>a_new_feature_branch</BranchName>
+        <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>
+        <BranchName>
+          <Octicon icon={GitBranch} /> a_new_feature_branch
+        </BranchName>
       </Detail>
     </div>
   )

examples/component-examples/Buttons.js

@@ -1,26 +1,18 @@
 import React from 'react'
-import {
-  Block,
-  Button,
-  ButtonLink,
-  ButtonDanger,
-  ButtonPrimary,
-  ButtonOutline
-} from '../../src'
+import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline} from '../../src'
 
-const ButtonExample =
-{
+const ButtonExample = {
   name: 'Buttons',
   element: (
     <div>
       <Block mb={2}>
         <Button> Button </Button>
       </Block>
       <Block mb={2}>
-        <Button size='sm'> Button small </Button>
+        <Button size="sm"> Button small </Button>
       </Block>
       <Block mb={2}>
-        <Button size='large'> Button large </Button>
+        <Button size="large"> Button large </Button>
       </Block>
       <Block mb={2}>
         <ButtonDanger> ButtonDanger </ButtonDanger>
@@ -38,7 +30,7 @@ const ButtonExample =
         <Button linkStyle> Button linkStyle </Button>
       </Block>
       <Block mb={2}>
-        <ButtonLink href='https://www.goatslive.com/'>This is an {'<a>'} styled as a button</ButtonLink>
+        <ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>
       </Block>
     </div>
   )

examples/component-examples/Caret.js

@@ -1,19 +1,20 @@
 import React from 'react'
-import { Block, Caret, Text, Box } from '../../src'
+import {Block, Caret, Text, Box} from '../../src'
 
-const CaretExample =
-  {
-    name: 'Caret',
-    element: (
-      <Block p={4}>
-        {Caret.locations.map((loc, i) => (
-          <Box p={2} mb={4} position='relative' maxWidth={300} minHeight={96} shadow key={i}>
-            <Text fontSize={1} mono>location='{loc}'</Text>
-            <Caret location={loc} />
-          </Box>
-        ))}
-      </Block>
-    )
-  }
+const CaretExample = {
+  name: 'Caret',
+  element: (
+    <Block p={4}>
+      {Caret.locations.map(loc => (
+        <Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow key={loc}>
+          <Text fontSize={1} mono>
+            location='{loc}'
+          </Text>
+          <Caret location={loc} />
+        </Box>
+      ))}
+    </Block>
+  )
+}
 
 export default CaretExample