message: refactor StateLabel using emotion
diff: import React from 'react'
  import PropTypes from 'prop-types'
  -import Octicon, {GitMerge, IssueClosed, IssueOpened, IssueReopened} from '@githubprimer/octicons-react'
  -import classnames from 'classnames'
  -import sass from 'sass.macro'
  -import {injectGlobal} from 'emotion'
  +import styled from 'react-emotion'
  import {colors} from './theme'
  import {withSystemProps, COMMON} from './system-props'
  -injectGlobal(sass`
  - @import "primer-support/index.scss";
  - @import "primer-labels/lib/states.scss";
  -`)
  -
  -const stateColorMap = {
  - open: 'green',
  - opened: 'green',
  - reopened: 'green',
  - closed: 'red',
  - merged: 'purple'
  -}
  -
  -const stateOcticonMap = {
  - open: IssueOpened,
  - opened: IssueOpened,
  - reopened: IssueReopened,
  - closed: IssueClosed,
  - merged: GitMerge
  -}
  -
  -function getOcticon(state) {
  - if (!state) {
  - return null
  - }
  - return <Octicon icon={stateOcticonMap[state]} />
  +const schemeMap = {
  + red: colors.red[6],
  + yellow: colors.yellow[7],
  + purple: colors.purple[5],
  + green: colors.green[5],
  + gray: colors.gray[5]
  }
  -function 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
  -}
  -
  -function StateLabel({state, className, scheme, icon, small, children}) {
  - 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)
  - const classes = classnames(
  - className,
  - 'State',
  - {
  - 'State--small': small
  - },
  - color && color !== 'yellow' ? `State--${color}` : null
  - )
  -
  +function StateLabel({state, className, icon, scheme, small, children}) {
  return (
  - <span className={classes} {...styleProps}>
  - {iconComponent}
  - {children}
  + <span className={className}>
  + {icon} {children}
  </span>
  )
  }
  +const styledLabel = styled(StateLabel)`
  + display: inline-flex;
  + align-items: center;
  + padding: 4px 8px;
  + font-weight: 600;
  + line-height: 20px;
  + color: #fff;
  + text-align: center;
  + background-color: ${props => (props.scheme ? schemeMap[props.scheme] : schemeMap.gray)};
  + border-radius: 3px;
  +`
  +
  StateLabel.propTypes = {
  - children: PropTypes.node,
  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
  - scheme: PropTypes.string,
  + scheme: PropTypes.oneOf('red', 'yellow', 'purple', 'green', 'gray'),
  small: PropTypes.bool,
  - state: PropTypes.oneOf(Object.keys(stateOcticonMap))
  }
  -export default withSystemProps(StateLabel, COMMON)
  +export default withSystemProps(styledLabel, COMMON)
  