add package header

docs/pages/_app.js

@@ -4,7 +4,7 @@ import {MDXProvider} from '@mdx-js/tag'
 import Head from 'next/head'
 import {withMDXLive} from 'mdx-live'
 import {BaseStyles, Box, Flex, Link, theme} from '@primer/components'
-import {SideNav, Header, IndexHero} from '../src/components'
+import {Header, PackageHeader, SideNav, IndexHero} from '../src/components'
 import {rootPage} from '../src/utils'
 
 import 'primer/index.scss'
@@ -56,6 +56,7 @@ export default class MyApp extends App {
               <Box color="gray.9" maxWidth={1012} width="100%" my={6} mx="auto" px={6}>
                 <div className="markdown-body">
                   {meta.title ? <h1>{meta.title}</h1> : null}
+                  <PackageHeader {...meta} />
                   <MDXProvider components={components}>
                     <Component {...page} />
                   </MDXProvider>

docs/src/PackageHeader.js

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Octicon, {Comment, FileCode, PrimitiveDot} from '@githubprimer/octicons-react'
+import {BorderBox, Box, Flex, Link, Text} from '@primer/components'
+
+export default function PackageHeader(props) {
+  const {
+    'package': pkg,
+    source,
+    status,
+    status_issue: issue,
+    ...rest
+  } = props
+
+  return (
+    <Flex justifyContent="space-between" mb={4} {...rest} >
+      <Box>
+        {status ? (
+          <BorderBox is="a" href="/css/whats-new/status-key" display="inline-block" px={2} py={1} mr={2}>
+            <Text color={getStatusColor(status)} mr={2}>
+              <Octicon icon={PrimitiveDot} />
+            </Text>
+            {status}
+          </BorderBox>
+        ) : null}
+        {pkg ? (
+          <>
+            <Text fontWeight="bold" mr={2}>Package:</Text>
+            <Link href={`https://npm.im/${pkg.name}`}>{pkg.name}</Link>
+          </>
+        ) : (
+          <Text fontWeight="bold">
+            Not yet part of Primer CSS
+          </Text>
+        )}
+      </Box>
+      <Box textAlign="right">
+        {issue ? <Link href={issue} ml={2}><Octicon icon={Comment} /></Link> : null}
+        {source ? <Link href={source} ml={2}><Octicon icon={FileCode} /></Link> : null}
+      </Box>
+    </Flex>
+  )
+}
+
+PackageHeader.propTypes = {
+  package: PropTypes.shape({
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  source: PropTypes.string.isRequired,
+  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/components.js

@@ -3,4 +3,5 @@ export {default as Header} from './Header'
 export {default as IndexHero} from './IndexHero'
 export {default as Link} from './Link'
 export {default as NodeLink} from './NodeLink'
+export {default as PackageHeader} from './PackageHeader'
 export {default as SideNav} from './SideNav'