Merge pull request #67 from primer/release-0.0.4-beta

Beta Release 0.0.4
primer · Jun 15, 2018 · 6f5ec0d · 6f5ec0d
2 parents 8ef1b4e + 9762496
commit 6f5ec0d
Show file tree

Hide file tree

Showing 23 changed files with 493 additions and 125 deletions.
diff --git a/docs/MergeActions/index.html b/docs/MergeActions/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div style="border-bottom-left-radius:3px;border-bottom-right-radius:3px" class="py-3 px-4 bg-gray-light"><div class="BtnGroup"><button style="border-right:0" type="button" class="btn BtnGroup-item">Merge Pull Request</button><details class="details-reset details-reset d-flex float-right"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" type="button" class="btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div style="z-index:99999;width:300px" class="mt-1 position-absolute"><div class="rounded-1 position-relative bg-white border"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Create a merge commit</p><p class="m-0 f6">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Squash and merge</p><p class="m-0 f6">The<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Rebase and merge</p><p class="m-0 f6">The<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="ml-2">You can also </span><a class="text-blue no-underline" href="x-github-client://openRepo/undefined?branch=undefined">open this in Github Desktop</a><span> or view </span><button type="button" class="btn-link">command line instructions.</button></div></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/MergeBox/index.html b/docs/MergeBox/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div class="d-flex flex-items-start"><span class="State"><span class="d-flex m-1"><svg version="1.1" width="24" height="32" viewBox="0 0 12 16" aria-hidden="true" style="display:inline-block;fill:currentColor;vertical-align:text-bottom;user-select:none"><g><path fill-rule="evenodd" d="M10 7.01c-.73 0-1.38.41-1.73 1.02v-.02C7.22 7.99 6 7.65 5.14 6.99c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 1C.89 1 0 1.9 0 3.01a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.68c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.21c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></g></svg></span></span><div class="ml-3 rounded-1 position-relative bg-white border border-undefined"><div class="p-2 d-flex border-bottom"><div class="mt-2"><div style="width:32px;height:32px" class="circle d-flex flex-items-center flex-justify-center text-white"><svg version="1.1" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" style="display:inline-block;fill:currentColor;vertical-align:text-bottom;user-select:none"><g><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></g></svg></div></div><div class="p-2 d-inline"><p class="p-0 m-0 f4 text-bold">This branch has no conflicts with the base branch</p><p class="pt-1 m-0 f6">Merging can be performed automatically</p></div></div><div style="border-bottom-left-radius:3px;border-bottom-right-radius:3px" class="py-3 px-4 bg-gray-light"><div class="BtnGroup"><button style="border-right:0" type="button" class="btn BtnGroup-item">Merge Pull Request</button><details class="details-reset details-reset d-flex float-right"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" type="button" class="btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div style="z-index:99999;width:300px" class="mt-1 position-absolute"><div class="rounded-1 position-relative bg-white border"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Create a merge commit</p><p class="m-0 f6">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Squash and merge</p><p class="m-0 f6">The<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Rebase and merge</p><p class="m-0 f6">The<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="ml-2">You can also </span><a class="text-blue no-underline" href="x-github-client://openRepo/undefined?branch=undefined">open this in Github Desktop</a><span> or view </span><button type="button" class="btn-link">command line instructions.</button></div><svg width="16" height="16" style="pointer-events:none;position:absolute;right:100%;top:8px"><g transform="translate(16,8) rotate(90)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/MergeButton/index.html b/docs/MergeButton/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div class="BtnGroup"><button style="border-right:0" type="button" class="btn BtnGroup-item">Merge Pull Request</button><details class="details-reset details-reset d-flex float-right"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" type="button" class="btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div style="z-index:99999;width:300px" class="mt-1 position-absolute"><div class="rounded-1 position-relative bg-white border"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Create a merge commit</p><p class="m-0 f6">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Squash and merge</p><p class="m-0 f6">The<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Rebase and merge</p><p class="m-0 f6">The<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/MergeDetail/index.html b/docs/MergeDetail/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor x0"><title>primer-react</title><style>*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}</style></head><div id="root"><div class="p-2 d-flex border-bottom"><div class="mt-2"><div style="width:32px;height:32px" class="circle d-flex flex-items-center flex-justify-center text-white"><svg version="1.1" width="12" height="16" viewBox="0 0 12 16" aria-hidden="true" style="display:inline-block;fill:currentColor;vertical-align:text-bottom;user-select:none"><g><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></g></svg></div></div><div class="p-2 d-inline"><p class="p-0 m-0 f4 text-bold">This branch has no conflicts with the base branch</p><p class="pt-1 m-0 f6">Merging can be performed automatically</p></div></div></div><script src="/primer-react/bundle.js"></script>
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/examples/MergeActions.js b/examples/MergeActions.js
@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CircleOcticon from '../src/CircleOcticon'
+import Text from '../src/Text'
+import Block from '../src/Block'
+import Link from '../src/Link'
+import ButtonLink from '../src/ButtonLink'
+import MergeButton from './MergeButton'
+
+const MergeActions = ({ numCommits, repoUrl, branchName, state }) => {
+  return (
+    <Block py={3} px={4} bg='gray-light' style={{borderBottomLeftRadius: '3px', borderBottomRightRadius: '3px'}}>
+      <MergeButton primary={state === 'ready'} numCommits={numCommits} />
+      <Text ml={2}>You can also </Text>
+      <Link nounderline href={`x-github-client://openRepo/${repoUrl}?branch=${branchName}`}>open this in Github Desktop</Link>
+      <Text> or view </Text>
+      <ButtonLink>command line instructions.</ButtonLink>
+    </Block>
+  )
+}
+
+MergeActions.propTypes = {
+  numCommits: PropTypes.number.isRequired,
+  repoUrl: PropTypes.string.isRequired,
+  branchName: PropTypes.string.isRequired,
+}
+
+export default MergeActions
diff --git a/examples/MergeBox.js b/examples/MergeBox.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import MergeStatus from '../src/MergeStatus'
+import CaretBox from '../src/CaretBox'
+import MergeButton from './MergeButton'
+import MergeDetail from './MergeDetail'
+import MergeActions from './MergeActions'
+
+const stateColorMap = {
+  ready: 'green',
+  invalid: 'invalid',
+  merged: 'purple',
+  pending: 'yellow'
+}
+
+const MergeBox = ({ state, repoUrl, branchName, numCommits }) => {
+  return (
+    <div className='d-flex flex-items-start'>
+      <MergeStatus state={state}/>
+      <CaretBox ml={3} border={[true, stateColorMap[state]]} caret='left-top'>
+        <MergeDetail state={state}/>
+        <MergeActions state={state} numCommits={numCommits} repoUrl={repoUrl} branchName={branchName} />
+      </CaretBox>
+    </div>
+  )
+}
+
+MergeBox.propTypes = {
+  state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired,
+  repoUrl: PropTypes.string.isRequired,
+  branchName: PropTypes.string.isRequired,
+  numCommits: PropTypes.number.isRequired
+}
+
+export default MergeBox
diff --git a/examples/MergeButton.js b/examples/MergeButton.js
@@ -0,0 +1,72 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Details from '../src/Details'
+import Button from '../src/Button'
+import CaretBox from '../src/CaretBox'
+import Text from '../src/Text'
+import Block from '../src/Block'
+
+const MergeButton = ({ primary, onClick, numCommits, children}) => {
+  const arrowStyles = {
+    content: '',
+    border: '4px solid',
+    borderRightColor: 'transparent',
+    borderLeftColor: 'transparent',
+    borderBottomColor: 'transparent',
+    width: '0',
+    height: '0'
+  }
+
+  const borderStyles = {
+    borderTopLeftRadius: '0',
+    borderBottomLeftRadius: '0'
+  }
+
+  const buttonSchemeProps = {}
+  if (primary) {
+    buttonSchemeProps.scheme = 'primary'
+  }
+
+  return(
+    <div className='BtnGroup'>
+      <Button {...buttonSchemeProps} grouped onClick={onClick} style={{ borderRight: 0}}>
+        Merge Pull Request
+      </Button>
+      <Details className='details-reset d-flex float-right'>
+        {({open, toggle}) => (
+          <React.Fragment>
+            <Button tag='summary' {...buttonSchemeProps} onClick={toggle} style={borderStyles}>
+              <div className='d-inline-block v-align-middle' style={arrowStyles}/>
+            </Button>
+            <Block position='absolute' width={300} mt={1} style={{zIndex: 99999}}>
+              <CaretBox caret='top-left'>
+                <ul className='list-style-none p-0 m-0'>
+                  <li className='border-bottom py-2 pl-4 pr-2'>
+                    <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Create a merge commit</Text>
+                    <Text tag='p' m={0} fontSize={0}>All commits from this branch will be added to the base branch via a merge commit.</Text>
+                  </li>
+                  <li className='border-bottom py-2 pl-4 pr-2'>
+                    <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Squash and merge</Text>
+                    <Text tag='p' m={0} fontSize={0}>The {numCommits} from this branch will be combined into one commit in the base branch.</Text>
+                  </li>
+                  <li className='py-2 pl-4 pr-2'>
+                    <Text tag='p' m={0} fontSize={1} fontWeight='bold'>Rebase and merge</Text>
+                    <Text tag='p' fontSize={0} m={0}>The {numCommits} from this branch will be rebased and added to the base branch</Text>
+                  </li>
+                </ul>
+              </CaretBox>
+            </Block>
+          </React.Fragment>
+        )}
+      </Details>
+    </div>
+  )
+}
+
+MergeButton.propTypes = {
+  primary: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  numCommits: PropTypes.number.isRequired,
+}
+
+export default MergeButton
diff --git a/examples/MergeDetail.js b/examples/MergeDetail.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import CircleOcticon from '../src/CircleOcticon'
+import Text from '../src/Text'
+import Block from '../src/Block'
+
+const stateColorMap = {
+  ready: 'green',
+  invalid: 'invalid',
+  merged: 'purple',
+  pending: 'yellow'
+}
+
+const MergeDetail = ({ state }) => {
+  return (
+    <div className='p-2 d-flex border-bottom'>
+      <Block mt={2}>
+        <CircleOcticon name='check' size={32} bg={stateColorMap[state]} color='white'/>
+      </Block>
+      <Block p={2} display='inline'>
+        <Text tag='p' p={0} m={0} fontSize={2} fontWeight='bold'>This branch has no conflicts with the base branch</Text>
+        <Text tag='p' pt={1} m={0} fontSize={0}>Merging can be performed automatically</Text>
+      </Block>
+    </div>
+  )
+}
+
+MergeDetail.propTypes = {
+  state: PropTypes.oneOf(['ready', 'invalid', 'merged', 'pending']).isRequired,
+}
+
+export default MergeDetail
diff --git a/examples/index.js b/examples/index.js
@@ -15,6 +15,8 @@ import {
   ButtonLink,
   BranchName,
   Caret,
+  CaretBox,
+  CircleOcticon,
   CounterLabel,
   Details,
   DonutChart,
@@ -35,6 +37,8 @@ import Octicon from '@github/octicons-react'
 
 import Page from './Page'
 import Swatch from './Swatch'
+import MergeBox from './MergeBox'
+import MergeButton from  './MergeButton'
 import GitHubAvatar from './GitHubAvatar'
 
 const ExampleHeading = props => (
@@ -143,20 +147,32 @@ const Index = props => (
       </Example>
       <Example name='Caret'>
         <Block p={4}>
-          {['top', 'right', 'bottom', 'left'].map((edge, i) => (
-            <Box p={2} mb={4} position='relative' maxWidth={400} key={i}>
-              <Text mono>edge='{edge}'</Text>
-              <Caret edge={edge} />
-            </Box>
-          ))}
-          {['top', 'right', 'bottom', 'left'].map((edge, i) => (
-            <Box shadow='medium' p={2} mb={4} position='relative' maxWidth={400} key={i}>
-              <Text mono>edge='{edge}' in shadow='medium'</Text>
-              <Caret edge={edge} />
+          {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>
       </Example>
+      <Example name='CircleOcticon'>
+        <div className='d-flex'>
+          <CircleOcticon name='check' size='32' bg='green' color='white'/>
+        </div>
+      </Example>
+      <Example name='CaretBox'>
+        <Block p={2}>
+          <CaretBox my={4} p={2} caret='left' shadow>CaretBox with shadow</CaretBox>
+          <CaretBox my={4} p={2} caret='bottom' bg='gray-light' border={[true, 'red']}>gray-light CaretBox with red border</CaretBox>
+          <CaretBox my={4} p={2} bg='green-light' border={[true, 'green']}>green CaretBox</CaretBox>
+          <Detail>
+            <ExampleHeading mt={2}>Location, Location, Location</ExampleHeading>
+            {Caret.locations.map((loc, i) => (
+              <CaretBox my={4} p={2} caret={loc} key={i} minHeight={100} border={[true, 'purple']}>location='{loc}'</CaretBox>
+            ))}
+          </Detail>
+        </Block>
+      </Example>
       <Example name='Colors'>
         {['gray', 'blue', 'green', 'purple', 'yellow', 'orange'].map((hue, i) => (
           <div className='d-flex' key={i}>
@@ -462,8 +478,27 @@ const Index = props => (
         </Detail>
       </Example>
       <Example name='MergeStatus'>
-        <span className='mr-2'>
+        <Block m={2}>
           <MergeStatus state='pending'/>
+        </Block>
+        <Block m={2}>
+          <MergeStatus state='invalid'/>
+        </Block>
+        <Block m={2}>
+          <MergeStatus state='merged'/>
+        </Block>
+        <Block m={2}>
+          <MergeStatus state='ready'/>
+        </Block>
+      </Example>
+      <Example name='MergeBox'>
+        <span className='mr-2'>
+          <MergeBox state='ready' numCommits={21} repoUrl={'https://github.com/primer/primer-react'} branchName={'master'}/>
+        </span>
+      </Example>
+      <Example name='MergeButton'>
+        <span className='mr-2'>
+          <MergeButton scheme='primary'/>
         </span>
       </Example>
       <Example name='Text'>