Merge pull request #62 from primer/task/status-icon

Merge Status Component

Author: Emily

docs/bundle.js

@@ -25,6 +25,7 @@ import {
   TextInput,
   Label,
   Link,
+  MergeStatus,
   StateLabel,
   Text,
   Tooltip,
@@ -212,10 +213,10 @@ const Index = props => (
           <Details render={() => 'hi'}/>
         </Block>
       </Example>
-      <Example name="Dropdown">
+      <Example name='Dropdown'>
         <Block my={4}>
-          <Heading tag="h2">Dropdown Primary</Heading>
-          <Dropdown scheme={"primary"}>
+          <Heading tag='h2'>Dropdown Primary</Heading>
+          <Dropdown scheme={'primary'}>
             <ul>
               <li>Item 1</li>
               <li>Item 2</li>
@@ -224,7 +225,7 @@ const Index = props => (
           </Dropdown>
         </Block>
         <Block my={4}>
-          <Heading tag="h2">Dropdown</Heading>
+          <Heading tag='h2'>Dropdown</Heading>
           <Dropdown>
             <ul>
               <li>Item 1</li>
@@ -234,8 +235,8 @@ const Index = props => (
           </Dropdown>
         </Block>
         <Block my={4}>
-          <Heading tag="h2">Dropdown with title</Heading>
-          <Dropdown title="Options">
+          <Heading tag='h2'>Dropdown with title</Heading>
+          <Dropdown title='Options'>
             <ul>
               <li>Item 1</li>
               <li>Item 2</li>
@@ -460,11 +461,16 @@ const Index = props => (
           </Block>
         </Detail>
       </Example>
+      <Example name='MergeStatus'>
+        <span className='mr-2'>
+          <MergeStatus state='pending'/>
+        </span>
+      </Example>
       <Example name='Text'>
         <Text tag='div'>Text</Text>
         <Text tag='div' fontWeight='bold'>Text bold</Text>
         <Text tag='div' color='green'>Text green</Text>
-        <Text tag='div' lineHeight='condensed'>Text lineHeight "condensed"</Text>
+        <Text tag='div' lineHeight='condensed'>Text lineHeight 'condensed'</Text>
         <Text tag='div' fontSize={4}>Text fontSize 4</Text>
         <Text tag='div' p={4}>Text padding 4</Text>
       </Example>

docs/index.html

@@ -27,7 +27,7 @@ function Button({
   );
 
   return (
-    <Tag {...props} type="button" disabled={disabled} onClick={disabled ? undefined : onClick} className={classes}>
+    <Tag {...props} type='button' disabled={disabled} onClick={disabled ? undefined : onClick} className={classes}>
       {children}
     </Tag>
   )

examples/index.js

@@ -0,0 +1,17 @@
+import React, {Fragment} from 'react'
+import classnames from 'classnames'
+import Octicon from '@github/octicons-react'
+import StateLabel from './StateLabel'
+
+const stateColorMap = {
+  ready: 'green',
+  invalid: 'invalid',
+  merged: 'purple',
+  pending: 'yellow'
+}
+
+export default function MergeStatus({ state }) {
+  return (
+    <StateLabel scheme={stateColorMap[state]} small icon={<Octicon name='git-merge'/>} />
+  )
+}

src/Button.js

@@ -1,6 +1,9 @@
 import React, {Fragment} from 'react'
 import classnames from 'classnames'
 import Octicon from '@github/octicons-react'
+import theme from './theme'
+
+const { colors } = theme
 
 const stateColorMap = {
   open: 'green',
@@ -26,6 +29,15 @@ function getOcticon(state) {
   return <Octicon name={name}/>
 }
 
+const getIconComponent = (icon, children) => {
+  if (icon && children) {
+    return <span className='mr-1'>{icon}</span>
+  } else if (icon) {
+    return <span className='d-flex m-1'>{icon}</span>
+  }
+  return null
+}
+
 export default function StateLabel(props) {
   const {
     state,
@@ -34,20 +46,25 @@ export default function StateLabel(props) {
     children,
   } = props
 
-  let {icon} = props
+  let { icon } = props
   if (icon !== false) {
     icon = icon || getOcticon(state)
   }
 
   const color = scheme || stateColorMap[state]
+  const styleProps = {}
+  if (color === 'yellow') {
+    styleProps.style = {backgroundColor: colors.yellow[7]}
+  }
+  const iconComponent = getIconComponent(icon, children)
   return (
     <span className={classnames(
       'State', {
         'State--small': small
       },
-      color ? `State--${color}` : null
-    )}>
-      {icon ? <span className='mr-1'>{icon}</span> : null}
+      color && color !== 'yellow' ? `State--${color}` : null,
+    )} {...styleProps}>
+      {iconComponent}
       {children}
     </span>
   )

src/MergeStatus.js

@@ -5,7 +5,7 @@ exports[`StateLabel renders states as specific colors 1`] = `
   className="State State--green"
 >
   <span
-    className="mr-1"
+    className="d-flex m-1"
   >
     <svg
       aria-hidden="true"
@@ -38,7 +38,7 @@ exports[`StateLabel renders states as specific colors 2`] = `
   className="State State--green"
 >
   <span
-    className="mr-1"
+    className="d-flex m-1"
   >
     <svg
       aria-hidden="true"
@@ -71,7 +71,7 @@ exports[`StateLabel renders states as specific colors 3`] = `
   className="State State--purple"
 >
   <span
-    className="mr-1"
+    className="d-flex m-1"
   >
     <svg
       aria-hidden="true"
@@ -104,7 +104,7 @@ exports[`StateLabel renders states as specific colors 4`] = `
   className="State State--red"
 >
   <span
-    className="mr-1"
+    className="d-flex m-1"
   >
     <svg
       aria-hidden="true"

src/StateLabel.js

@@ -27,6 +27,7 @@ export { default as Heading } from './Heading'
 export { default as Label } from './Label'
 export { default as BranchName } from './BranchName'
 export { default as Link } from './Link'
+export { default as MergeStatus } from './MergeStatus'
 export { default as Text } from './Text'
 export { default as Tooltip } from './Tooltip'