refactor status labels to look the same

Author: shawnbot

docs/src/PackageHeader.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import {Comment, Info, FileCode, Alert, PrimitiveDot} from '@githubprimer/octicons-react'
 import {BorderBox, Box, Flex, Link, StyledOcticon as Octicon, Text} from '@primer/components'
+import StatusLabel from './StatusLabel'
 
 export default function PackageHeader(props) {
   const {description, internal = false, package: pkg, source = '', status, status_issue: issue, ...rest} = props
@@ -38,12 +39,7 @@ export default function PackageHeader(props) {
   return (
     <Flex justifyContent="space-between" mb={4} {...rest}>
       <Text is="div" fontSize={1}>
-        {status ? (
-          <BorderBox is="a" href="/css/whats-new/status-key" display="inline-block" px={2} py={1} mr={2}>
-            <Octicon icon={PrimitiveDot} color={getStatusColor(status)} mr={2} />
-            {status}
-          </BorderBox>
-        ) : null}
+        {status ? <StatusLabel status={status} is="a" href="/css/whats-new/status-key" mr={2} /> : null}
         {info}
       </Text>
       <Box>
@@ -69,14 +65,3 @@ PackageHeader.propTypes = {
   source: PropTypes.string,
   status: PropTypes.string
 }
-
-function getStatusColor(status) {
-  return (
-    {
-      stable: 'green.6',
-      'new release': 'yellow.7',
-      deprecated: 'red.7',
-      experimental: 'orange.5'
-    }[status.toLowerCase()] || 'gray.5'
-  )
-}

docs/src/StatusLabel.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+import {BorderBox, StyledOcticon as Octicon, Text} from '@primer/components'
+import {PrimitiveDot} from '@githubprimer/octicons-react'
+
+const StyledLabel = styled(BorderBox)`
+  display: inline-block;
+  white-space: nowrap;
+`
+
+export const STATUS_COLORS = {
+  stable: 'green.6',
+  'new release': 'green.6',
+  experimental: 'yellow.7',
+  'in review': 'yellow.7',
+  deprecated: 'red.6'
+}
+
+export default function StatusLabel({status, children, ...rest}) {
+  return (
+    <StyledLabel px={2} py={1} {...rest}>
+      <Octicon icon={PrimitiveDot} color={getStatusColor(status)} mr={2} />
+      <Text color='black' fontSize={1}>{children || status}</Text>
+    </StyledLabel>
+  )
+}
+
+export function getStatusColor(status) {
+  return STATUS_COLORS[status.toLowerCase()] || 'gray.5'
+}