primer · shawnbot · Aug 17, 2018 · Aug 17, 2018 · Aug 17, 2018 · Aug 17, 2018
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,6 @@
 .DS_Store
 coverage/
 dist/
+docs/TEMP/
 node_modules
 npm-debug.log
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/components/index.html b/docs/components/index.html
diff --git a/docs/demos/index.html b/docs/demos/index.html
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/sandbox/index.html b/docs/sandbox/index.html
@@ -1,22 +1,18 @@
-<!DOCTYPE html><html><head><title>primer-react</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-navigation/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="assets/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."></head><body><script>(function(){
+<!DOCTYPE html><html><head><title>primer-react</title><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="generator" content="Compositor X0"><link rel="stylesheet" href="https://unpkg.com/primer-buttons/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-forms/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-layout/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-navigation/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-product/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-tooltips/build/build.css"><link rel="stylesheet" href="https://unpkg.com/primer-utilities/build/build.css"><link rel="icon" href="https://primer.github.io/favicon.png"><link rel="apple-touch-icon" href="assets/apple-touch-icon.png"><meta name="og:title" content="Primer React"><meta name="description" content="Primer components built with React.js."></head><body><script>(function(){
       var redirect = sessionStorage.redirect;
       delete sessionStorage.redirect;
       if (redirect && redirect != location.href) {
         history.replaceState(null, null, redirect);
       }
-    })();</script><div id="root"><style>* { box-sizing: border-box; }
+    })();</script><div id="root"><div class="css-16dlsi6"><nav class="css-cd5ysi UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components/">Components</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos/">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox/">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v2.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">primer-react@2.0.0-beta</a></span></div></nav></div><div class="css-19midj6"><div class="css-gajhq5"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><h1 class="css-phyopm">Hello World!</h1><p class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="css-1aecbjm">This is a box with <span class="css-nakqe">some mono text</span>.</div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>p<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
+  All <span class="token keyword">of</span> the primer<span class="token operator">-</span>react <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>/components<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">></span></span> are available <span class="token keyword">in</span> <span class="token keyword">this</span> sandbox<span class="token operator">!</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BorderBox</span> <span class="token attr-name">my</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
+  This is a box <span class="token keyword">with</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">fontFamily</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mono<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>some mono text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span><span class="token punctuation">.</span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BorderBox</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div><style>* { box-sizing: border-box; }
     body {
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: undefined;
-    }</style><div class="css-qurhtp"><nav class="css-0 UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline css-gajhq5" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline css-gajhq5 selected" aria-current="page" px="3" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="css-3c0b3d"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="css-0 text-blue" href="https://github.com/primer/primer-react/releases/v2.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">primer-react@2.0.0-beta</a></span></div></nav><div class="css-19midj6"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="css-19kzrtu"><h1 class="css-phyopm">Hello World!</h1><p class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="css-1aecbjm">This is a box with <span class="css-nakqe">some mono text</span>.</div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
-
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Box</span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">is</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>p<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
-    All <span class="token keyword">of</span> the primer<span class="token operator">-</span>react <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>/components<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">></span></span> are available <span class="token keyword">in</span> <span class="token keyword">this</span> sandbox<span class="token operator">!</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>BorderBox</span> <span class="token attr-name">my</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-    This is a box <span class="token keyword">with</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">fontFamily</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mono<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>some mono text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span><span class="token punctuation">.</span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>BorderBox</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Box</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div></div></body></html><script src="/primer-react/bundle.js"></script>
+    }</style></div></body></html><script src="/primer-react/bundle.js"></script>
diff --git a/html.js → examples/.html.js b/html.js → examples/.html.js
@@ -22,7 +22,7 @@ module.exports = ({
     <link rel='stylesheet' href='https://unpkg.com/primer-product/build/build.css'/>
     <link rel='stylesheet' href='https://unpkg.com/primer-tooltips/build/build.css'/>
     <link rel='stylesheet' href='https://unpkg.com/primer-utilities/build/build.css'/>
-    <link rel='icon' href='assets/favicon.png' />
+    <link rel='icon' href='https://primer.github.io/favicon.png' />
     <link rel='apple-touch-icon' href='assets/apple-touch-icon.png' />
     <meta name='og:title' content='Primer React' />
     <meta name='description' content='Primer components built with React.js.' />

diff --git a/examples/_app.js b/examples/_app.js
@@ -1,42 +1,39 @@
 import React from 'react'
-import {ThemeProvider} from 'emotion-theming'
 import PropTypes from 'prop-types'
-import {NavLink} from 'react-router-dom'
-import Styles from './doc-components/Styles'
 import Octicon, {Package} from '@githubprimer/octicons-react'
-import {Box, Link, Text, UnderlineNav, UnderlineNavLink, theme} from '../src'
+import {NavLink} from 'react-router-dom'
+import {Styles} from './doc-components'
+import {Box, Link, Sticky, Text, UnderlineNav, UnderlineNavLink} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
 const releaseURL = `https://github.com/${repository}/releases/v${version}`
 
+function TopNavLink(props) {
+  return <UnderlineNavLink is={NavLink} px={3} {...props} />
+}
+
 export default function Page({render}) {
   return (
     <React.Fragment>
+      <Sticky bg="white" zIndex={100}>
+        <UnderlineNav
+          pl={3}
+          mb={3}
+          actions={
+            <Text color="gray.5" fontFamily="mono" px={4}>
+              <Octicon icon={Package} className="mr-2" />
+              <Link href={releaseURL}>{pkg}</Link>
+            </Text>
+          }
+        >
+          <TopNavLink to="/components/">Components</TopNavLink>
+          <TopNavLink to="/demos/">Demos</TopNavLink>
+          <TopNavLink to="/sandbox/">Sandbox</TopNavLink>
+        </UnderlineNav>
+      </Sticky>
+      <Box p={3}>{render()}</Box>
       <Styles />
-      <ThemeProvider theme={theme}>
-        <Box color="bodytext">
-          <UnderlineNav
-            actions={
-              <Text color="gray.5" fontFamily="mono" px={4}>
-                <Octicon icon={Package} className="mr-2" />
-                <Link href={releaseURL}>{pkg}</Link>
-              </Text>
-            }
-          >
-            <UnderlineNavLink is={NavLink} to="/components" px={3}>
-              Components
-            </UnderlineNavLink>
-            <UnderlineNavLink is={NavLink} to="/demos" px={3}>
-              Demos
-            </UnderlineNavLink>
-            <UnderlineNavLink is={NavLink} to="/sandbox" px={3}>
-              Sandbox
-            </UnderlineNavLink>
-          </UnderlineNav>
-          <Box p={3}>{render()}</Box>
-        </Box>
-      </ThemeProvider>
     </React.Fragment>
   )
 }

diff --git a/examples/component-examples/Avatar.js b/examples/component-examples/Avatar.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Box, Avatar} from '../../src'
 
-const AvatarExample = {
+export default {
   name: 'Avatar',
   element: (
     <div>
@@ -33,5 +33,3 @@ const AvatarExample = {
     </div>
   )
 }
-
-export default AvatarExample
diff --git a/examples/component-examples/BorderBox.js b/examples/component-examples/BorderBox.js
@@ -2,7 +2,7 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {BorderBox, Box} from '../../src'
 
-const BorderBoxExample = {
+export default {
   name: 'BorderBox',
   element: (
     <div>
@@ -45,5 +45,3 @@ const BorderBoxExample = {
     </div>
   )
 }
-
-export default BorderBoxExample
diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
@@ -19,7 +19,7 @@ const colors = [...Object.entries(theme.colors)].reduce((keys, [key, value]) =>
 
 const textColors = ['white', 'gray.5', 'black']
 
-const BoxExample = {
+export default {
   name: 'Box',
   element: (
     <div>
@@ -64,5 +64,3 @@ const BoxExample = {
     </div>
   )
 }
-
-export default BoxExample
diff --git a/examples/component-examples/BranchName.js b/examples/component-examples/BranchName.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Octicon, {GitBranch} from '@githubprimer/octicons-react'
 import {Detail, LiveEditor} from '@compositor/kit'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 import {BranchName} from '../../src'
 
 const linkedBranch = `<BranchName is="a" href="/">
@@ -13,7 +13,7 @@ const branchOcticon = `<BranchName>
   a_new_feature_branch
 </BranchName>`
 
-const BranchNameExample = {
+export default {
   name: 'BranchName',
   element: (
     <div>
@@ -27,5 +27,3 @@ const BranchNameExample = {
     </div>
   )
 }
-
-export default BranchNameExample
diff --git a/examples/component-examples/Buttons.js b/examples/component-examples/Buttons.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
-import ExampleHeading from '../doc-components/ExampleHeading'
+import {ExampleHeading} from '../doc-components'
 import {Box, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
 
-const ButtonExample = {
+export default {
   name: 'Buttons',
   element: (
     <div>
@@ -58,5 +58,3 @@ const ButtonExample = {
     </div>
   )
 }
-
-export default ButtonExample
diff --git a/examples/component-examples/CircleBadge.js b/examples/component-examples/CircleBadge.js
@@ -13,7 +13,7 @@ const sizes = `<CircleBadge bg="blue.5" size="small"><img src="https://avatars0.
 <CircleBadge bg="blue.5" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue.5" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 
-const CircleBadgeExample = {
+export default {
   name: 'CircleBadge',
   element: (
     <div>
@@ -36,5 +36,3 @@ const CircleBadgeExample = {
     </div>
   )
 }
-
-export default CircleBadgeExample