Merge pull request #132 from primer/release-0.0.11-beta

Release Tracking 0.0.11-beta

.eslintrc.json

@@ -3,8 +3,5 @@
     "plugin:github/es6",
     "plugin:github/react",
     "plugin:jsx-a11y/recommended"
-  ],
-  "rules": {
-    "jsx-a11y/no-autofocus": "warn"
-  }
+  ]
 }

docs/sandbox/index.html

@@ -9,9 +9,14 @@
       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 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">
+    }</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.11-beta">[email protected]</a></span></div></nav><div class="p-3"><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><p class="">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="my-4 p-2 border bg-white rounded-1">This is a box with <span class="text-mono">some mono text</span>.</div></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></body></html><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 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 attr-name">tag</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>p<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
+    All <span class="token keyword">of</span> the primer<span class="token operator">-</span>react <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>/components<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">></span></span> are available <span class="token keyword">in</span> <span class="token keyword">this</span> sandbox<span class="token operator">!</span>
+  <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>Box</span> <span class="token attr-name">my</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 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">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
+    This is a box <span class="token keyword">with</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">mono</span><span class="token punctuation">></span></span>some mono text<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 punctuation">.</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Box</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></div></body></html><script src="/primer-react/bundle.js"></script>

examples/_app.js

@@ -3,7 +3,7 @@ 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 {Block, Link, Text, UnderlineNav} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
@@ -32,7 +32,7 @@ export default function Page({render}) {
             Sandbox
           </NavLink>
         </UnderlineNav>
-        {render()}
+        <Block p={3}>{render()}</Block>
       </div>
     </React.Fragment>
   )

examples/component-examples/Block.js

@@ -9,7 +9,7 @@ const textColors = ['white', 'gray', 'black']
 const BlockExample = {
   name: 'Block',
   element: (
-    <Block p={4}>
+    <div>
       <table>
         <thead>
           <tr>
@@ -56,7 +56,7 @@ const BlockExample = {
           ))}
         </tbody>
       </table>
-    </Block>
+    </div>
   )
 }
 

examples/component-examples/Box.js

@@ -9,7 +9,7 @@ const BoxExample = {
       <Box p={2} m={2}>
         This is a box with padding.
       </Box>
-      <Box shadow p={2} m={2}>
+      <Box shadow="small" p={2} m={2}>
         This is a box with shadow.
       </Box>
       <Box shadow="medium" p={2} m={2}>
@@ -21,7 +21,7 @@ const BoxExample = {
       <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}>
+      <Box borderColor="green" p={2} m={2}>
         This is a box with a green border.
       </Box>
     </div>

examples/component-examples/Buttons.js

@@ -6,7 +6,7 @@ import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
 const ButtonExample = {
   name: 'Buttons',
   element: (
-    <Block p={4}>
+    <div>
       <Block mb={2}>
         <Button> Button </Button>
       </Block>
@@ -44,7 +44,7 @@ const ButtonExample = {
           <OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />
         </Block>
       </Block>
-    </Block>
+    </div>
   )
 }
 

examples/component-examples/Caret.js

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

examples/component-examples/CaretBox.js

@@ -1,26 +1,26 @@
 import React from 'react'
 import {PropsForm} from '@compositor/kit'
-import {Block, Caret, CaretBox, theme} from '../../src'
+import {Caret, CaretBox, theme} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
 const CaretBoxExample = {
   name: 'CaretBox',
   element: (
-    <Block p={2}>
+    <div>
       <ExampleHeading mt={2}>CaretBox</ExampleHeading>
       <PropsForm>
-        <CaretBox my={4} p={2} minHeight={100} border={[true, 'purple']}>
+        <CaretBox my={4} p={2} minHeight={100} borderColor="purple">
           CaretBox
         </CaretBox>
         <PropsForm.Select name="caret">{Caret.locations.map(loc => <option key={loc}>{loc}</option>)}</PropsForm.Select>
-        <PropsForm.Select name="border">
+        <PropsForm.Select name="borderColor">
           {Object.keys(theme.colors.border).map(borderColor => <option key={borderColor}>{borderColor}</option>)}
         </PropsForm.Select>
         <PropsForm.Select name="bg">
           {Object.keys(theme.colors.bg).map(bgColor => <option key={bgColor}>{bgColor}</option>)}
         </PropsForm.Select>
       </PropsForm>
-    </Block>
+    </div>
   )
 }
 

examples/component-examples/Dropdown.js

@@ -6,7 +6,7 @@ const DropdownExample = {
   name: 'Dropdown',
   element: (
     <div>
-      <Block my={4}>
+      <Block mb={4}>
         <ExampleHeading>Dropdown Primary</ExampleHeading>
         <Dropdown scheme={'primary'}>
           <ul>

examples/component-examples/Flex.js

@@ -14,10 +14,11 @@ const propObj = {
 const FlexExample = {
   name: 'Flex',
   element: (
-    <Block p={2}>
-      <ExampleHeading mt={2}>FlexContainer</ExampleHeading>
+    <div>
+      <ExampleHeading>FlexContainer</ExampleHeading>
       <PropsForm>
         <FlexContainer
+          display="flex"
           wrap="wrap"
           direction="row"
           justifyContent="start"
@@ -51,7 +52,7 @@ const FlexExample = {
           </PropsForm.Select>
         ))}
       </PropsForm>
-      <ExampleHeading mt={2}>FlexContainer + FlexItems set to flexAuto</ExampleHeading>
+      <ExampleHeading mt={3}>FlexContainer + FlexItems set to flexAuto</ExampleHeading>
       <FlexContainer wrap="nowrap" width={300} height={300} border>
         <FlexItem flexAuto>
           <Block p={3} bg="blue">
@@ -105,7 +106,7 @@ const FlexExample = {
           </Block>
         </FlexItem>
       </FlexContainer>
-    </Block>
+    </div>
   )
 }
 

examples/component-examples/MergeStatus.js

@@ -5,16 +5,16 @@ const MergeStatusExample = {
   name: 'MergeStatus',
   element: (
     <div>
-      <Block m={2}>
+      <Block mb={2}>
         <MergeStatus state="pending" />
       </Block>
-      <Block m={2}>
+      <Block mb={2}>
         <MergeStatus state="invalid" />
       </Block>
-      <Block m={2}>
+      <Block mb={2}>
         <MergeStatus state="merged" />
       </Block>
-      <Block m={2}>
+      <Block mb={2}>
         <MergeStatus state="ready" />
       </Block>
     </div>

examples/component-examples/Tooltip.js

@@ -9,23 +9,25 @@ const TooltipExample = {
       <Box p={3}>
         <Tooltip text="Hello, Tooltip!">Text with a tooltip</Tooltip>
       </Box>
-      <Block p={2}>
+      <Block p={2} my={2}>
         <ExampleHeading mt={3}>Directions</ExampleHeading>
-        {Tooltip.directions.map(d => (
-          <Box p={3} key={d}>
-            <Tooltip text="Hello, Tooltip!" direction={d}>
-              Tooltip direction={d}
+        {Tooltip.directions.map(dir => (
+          <Box p={3} my={2} key={dir}>
+            <Tooltip text="Hello, Tooltip!" direction={dir}>
+              Tooltip direction={dir}
             </Tooltip>
           </Box>
         ))}
         <ExampleHeading mt={3}>Alignment</ExampleHeading>
-        <Box p={3}>
-          <Tooltip text="Hello, Tooltip!" direction="ne" align="left">
-            Tooltip align left
-          </Tooltip>
-        </Box>
+        {Tooltip.alignments.map(align => (
+          <Box p={3} my={2} key={align}>
+            <Tooltip text="Hello, Tooltip!" direction="ne" align={align}>
+              Tooltip align={align}
+            </Tooltip>
+          </Box>
+        ))}
         <ExampleHeading mt={3}>Word wrap</ExampleHeading>
-        <Box p={3}>
+        <Box p={3} my={2}>
           <Tooltip
             text="Hello, Tooltip! This tooltip has a sentence that will wrap to a newline."
             wrap
@@ -36,7 +38,7 @@ const TooltipExample = {
           </Tooltip>
         </Box>
         <ExampleHeading mt={3}>No Delay</ExampleHeading>
-        <Box p={3}>
+        <Box p={3} my={2}>
           <Tooltip noDelay text="Hello, Tooltip!">
             Text with a tooltip
           </Tooltip>

examples/component-examples/UnderlineNav.js

@@ -7,7 +7,7 @@ import {NavLink} from 'react-router-dom'
 export default {
   name: 'UnderlineNav',
   element: (
-    <Block p={4}>
+    <div>
       <Block mb={4}>
         <ExampleHeading>
           Using <Text mono>{'<UnderlineNavLink>'}</Text>
@@ -44,6 +44,6 @@ export default {
           <NavLink to="/">Selected</NavLink>
         </UnderlineNav>
       </Block>
-    </Block>
+    </div>
   )
 }

examples/demos.js

@@ -3,25 +3,39 @@ import {Library, LiveEditor} from '@compositor/kit'
 import SideNav from './doc-components/SideNav'
 import MergeBox from './demos/MergeBox'
 import MergeButton from './demos/MergeButton'
+import {Block} from '../src'
 
 const examples = [
   {
     name: 'MergeBox',
     element: (
-      <span className="mr-2">
+      <Block p={4}>
         <LiveEditor
-          code={`<MergeBox state='pending' numCommits={21} repoUrl={'https://github.com/primer/primer-react'} branchName={'master'}/>`}
+          code={`<MergeBox
+  state='pending'
+  numCommits={21}
+  repoUrl='https://github.com/primer/primer-react'
+  branchName='master'
+  onMerge={() => alert('merge!')}
+/>`}
           scope={{MergeBox}}
         />
-      </span>
+      </Block>
     )
   },
   {
     name: 'MergeButton',
     element: (
-      <span className="mr-2">
-        <LiveEditor code={`<MergeButton scheme='primary'/>`} scope={{MergeButton}} />
-      </span>
+      <Block p={4}>
+        <LiveEditor
+          code={`<MergeButton
+  primary
+  numCommits={2}
+  onClick={() => alert('merge!')}
+/>`}
+          scope={{MergeButton}}
+        />
+      </Block>
     )
   }
 ]

examples/demos/MergeActions.js

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types'
 import {Block, ButtonLink, Link, Text} from '../../src'
 import MergeButton from './MergeButton'
 
-const MergeActions = ({numCommits, repoUrl, branchName, state}) => {
+const MergeActions = ({numCommits, onClick, desktopUrl, state}) => {
   return (
     <Block py={3} px={4} bg="gray-light" style={{borderBottomLeftRadius: '3px', borderBottomRightRadius: '3px'}}>
-      <MergeButton primary={state === 'ready'} numCommits={numCommits} />
+      <MergeButton primary={state === 'ready'} numCommits={numCommits} onClick={onClick} />
       <Text ml={2}>You can also </Text>
-      <Link nounderline href={`x-github-client://openRepo/${repoUrl}?branch=${branchName}`}>
+      <Link nounderline href={desktopUrl}>
         open this in Github Desktop
       </Link>
       <Text> or view </Text>
@@ -18,9 +18,9 @@ const MergeActions = ({numCommits, repoUrl, branchName, state}) => {
 }
 
 MergeActions.propTypes = {
-  branchName: PropTypes.string.isRequired,
-  numCommits: PropTypes.number.isRequired,
-  repoUrl: PropTypes.string.isRequired,
+  desktopUrl: PropTypes.string.isRequired,
+  numCommits: MergeButton.propTypes.numCommits,
+  onClick: PropTypes.func.isRequired,
   state: PropTypes.string.isRequired
 }