Merge pull request #143 from primer/release-0.0.12-beta

Release v0.0.12-beta

docs/demos/index.html

@@ -9,7 +9,7 @@
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.5;
-    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><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="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.11-beta">[email protected]</a></span></div></nav><div class="p-3"><div class="nanotx9z16"><div class="nanolgtq4w"><div class="mr-3"><nav class="menu"><a class="menu-heading no-underline link-gray-dark active" aria-current="page" href="/demos/">Demo Library</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeBox">MergeBox</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeButton">MergeButton</a></nav></div></div><style>.nanolgtq4w{width:192px;flex:none;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:1px solid #f6f6f6}</style><div class="nano1pfbsnd"><div width="256" height="192" class="nano1moj4mh"><a class="nano1d78h17" href="/demos/MergeBox"><div p="2" class="nano15alqsq"><div class="p-4"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="d-flex flex-items-start"><span class="State" style="background-color:#dbab09"><span class="d-flex m-1"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M10 7.01c-.73 0-1.38.41-1.73 1.02v-.02C7.22 7.99 6 7.65 5.14 6.99c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 1C.89 1 0 1.9 0 3.01a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.68c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.21c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></span></span><div class="ml-3 border border-yellow bg-white rounded-1 position-relative"><div class="p-2 d-flex border-bottom"><div class="mt-2"><div style="width:32px;height:32px" class="circle d-flex flex-items-center flex-justify-center bg-yellow text-white"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></svg></div></div><div class="p-2 d-inline"><p class="p-0 m-0 f4 text-bold">This branch has no conflicts with the base branch</p><p class="pt-1 m-0 f6">Merging can be performed automatically</p></div></div><div class="py-3 px-4 bg-gray-light" style="border-bottom-left-radius:3px;border-bottom-right-radius:3px"><div class="BtnGroup"><button style="border-right:0" type="button" class="btn BtnGroup-item">Merge Pull Request</button><details class="details-reset details-reset d-flex float-right"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" type="button" class="btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div class="mt-1 position-absolute" style="z-index:99999;width:300px"><div class="border bg-white rounded-1 position-relative"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Create a merge commit</p><p class="m-0 f6">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Squash and merge</p><p class="m-0 f6">The<!-- --> 21 commits<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Rebase and merge</p><p class="m-0 f6">The<!-- --> 21 commits<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="ml-2">You can also </span><a class="text-blue no-underline" href="x-github-client://openRepo/https://github.com/primer/primer-react?branch=master">open this in Github Desktop</a><span class=""> or view </span><button type="button" class="btn-link">command line instructions.</button></div><svg width="16" height="16" style="pointer-events:none;position:absolute;right:100%;top:8px"><g transform="translate(16,8) rotate(90)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#d9d0a5" stroke-width="1"></path></g></svg></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>MergeBox</span>
+    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><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="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.12-beta">[email protected]</a></span></div></nav><div class="p-3"><div class="nanotx9z16"><div class="nanolgtq4w"><div class="mr-3"><nav class="menu"><a class="menu-heading no-underline link-gray-dark active" aria-current="page" href="/demos/">Demo Library</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeBox">MergeBox</a><a class="menu-item no-underline link-gray-dark" href="/demos/MergeButton">MergeButton</a></nav></div></div><style>.nanolgtq4w{width:192px;flex:none;height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-right:1px solid #f6f6f6}</style><div class="nano1pfbsnd"><div width="256" height="192" class="nano1moj4mh"><a class="nano1d78h17" href="/demos/MergeBox"><div p="2" class="nano15alqsq"><div class="p-4"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="d-flex flex-items-start"><span class="State" style="background-color:#dbab09"><span class="d-flex m-1"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M10 7.01c-.73 0-1.38.41-1.73 1.02v-.02C7.22 7.99 6 7.65 5.14 6.99c-.75-.58-1.5-1.61-1.89-2.44A1.993 1.993 0 0 0 2 1C.89 1 0 1.9 0 3.01a2 2 0 0 0 1 1.72v6.56c-.59.35-1 .99-1 1.72 0 1.11.89 2 2 2a1.993 1.993 0 0 0 1-3.72V7.68c.67.7 1.44 1.27 2.3 1.69.86.42 2.03.63 2.97.64v-.02c.36.61 1 1.02 1.73 1.02 1.11 0 2-.89 2-2 0-1.11-.89-2-2-2zm-6.8 6c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.21c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zm8 6c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z"></path></svg></span></span><div class="ml-3 border border-yellow bg-white rounded-1 position-relative"><div class="p-2 d-flex border-bottom"><div class="mt-2"><div style="width:32px;height:32px" class="circle d-flex flex-items-center flex-justify-center bg-yellow text-white"><svg aria-hidden="true" class="octicon" height="32" role="img" viewBox="0 0 12 16" width="24" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M12 5.5l-8 8-4-4L1.5 8 4 10.5 10.5 4 12 5.5z"></path></svg></div></div><div class="p-2 d-inline"><p class="p-0 m-0 f4 text-bold">This branch has no conflicts with the base branch</p><p class="pt-1 m-0 f6">Merging can be performed automatically</p></div></div><div class="py-3 px-4 bg-gray-light" style="border-bottom-left-radius:3px;border-bottom-right-radius:3px"><div class="BtnGroup"><button style="border-right:0" type="button" class="btn BtnGroup-item">Merge Pull Request</button><details class="details-reset details-reset d-flex float-right"><summary style="border-top-left-radius:0;border-bottom-left-radius:0" type="button" class="btn"><div class="d-inline-block v-align-middle" style="content:;border:4px solid;border-right-color:transparent;border-left-color:transparent;border-bottom-color:transparent;width:0;height:0"></div></summary><div class="mt-1 position-absolute" style="z-index:99999;width:300px"><div class="border bg-white rounded-1 position-relative"><ul class="list-style-none p-0 m-0"><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Create a merge commit</p><p class="m-0 f6">All commits from this branch will be added to the base branch via a merge commit.</p></li><li class="border-bottom py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Squash and merge</p><p class="m-0 f6">The<!-- --> 21 commits<!-- --> from this branch will be combined into one commit in the base branch.</p></li><li class="py-2 pl-4 pr-2"><p class="m-0 f5 text-bold">Rebase and merge</p><p class="m-0 f6">The<!-- --> 21 commits<!-- --> from this branch will be rebased and added to the base branch</p></li></ul><svg width="16" height="16" style="pointer-events:none;position:absolute;bottom:100%;left:8px"><g transform="translate(8,16) rotate(180)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#e1e4e8" stroke-width="1"></path></g></svg></div></div></details></div><span class="ml-2">You can also </span><a class="text-blue no-underline" href="x-github-client://openRepo/https://github.com/primer/primer-react?branch=master">open this in Github Desktop</a><span class=""> or view </span><button type="button" class="btn-link">command line instructions.</button></div><svg width="16" height="16" style="pointer-events:none;position:absolute;right:100%;top:8px"><g transform="translate(16,8) rotate(90)"><path d="M-8,0L0,8L8,0L-8,0Z" fill="#fff"></path><path d="M-8,0L0,8L8,0" fill="none" stroke="#d9d0a5" stroke-width="1"></path></g></svg></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>MergeBox</span>
   <span class="token attr-name">state</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>pending<span class="token punctuation">'</span></span>
   <span class="token attr-name">numCommits</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">21</span><span class="token punctuation">}</span></span>
   <span class="token attr-name">repoUrl</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>https://github.com/primer/primer-react<span class="token punctuation">'</span></span>

docs/sandbox/index.html

@@ -9,7 +9,7 @@
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.5;
-    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><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="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.11-beta">[email protected]</a></span></div></nav><div class="p-3"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><p class="">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="my-4 p-2 border bg-white rounded-1">This is a box with <span class="text-mono">some mono text</span>.</div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
+    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><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="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.12-beta">[email protected]</a></span></div></nav><div class="p-3"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><p class="">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="my-4 p-2 border bg-white rounded-1">This is a box with <span class="text-mono">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>Block</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>

examples/_app.js

@@ -3,7 +3,7 @@ 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 {Block, Link, Text, UnderlineNav} from '../src'
+import {Block, Link, Text, UnderlineNav, UnderlineNavLink} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
@@ -22,15 +22,15 @@ export default function Page({render}) {
             </Text>
           }
         >
-          <NavLink to="/components" className="px-3">
+          <UnderlineNavLink tag={NavLink} to="/components" px={3}>
             Components
-          </NavLink>
-          <NavLink to="/demos" className="px-3">
+          </UnderlineNavLink>
+          <UnderlineNavLink tag={NavLink} to="/demos" px={3}>
             Demos
-          </NavLink>
-          <NavLink to="/sandbox" className="px-3">
+          </UnderlineNavLink>
+          <UnderlineNavLink tag={NavLink} to="/sandbox" px={3}>
             Sandbox
-          </NavLink>
+          </UnderlineNavLink>
         </UnderlineNav>
         <Block p={3}>{render()}</Block>
       </div>

examples/component-examples/Avatar.js

@@ -1,19 +1,34 @@
 import React from 'react'
-import {Block} from '../../src'
-import GitHubAvatar from '../doc-components/GitHubAvatar'
+import {LiveEditor} from '@compositor/kit'
+import {Block, Avatar} from '../../src'
 
 const AvatarExample = {
   name: 'Avatar',
   element: (
     <div>
       <Block mb={2}>
-        <GitHubAvatar username="primer" size={128} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <GitHubAvatar username="github" size={64} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <GitHubAvatar username="reactjs" size={32} /> <GitHubAvatar username="npm" />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`}
+          scope={{Avatar}}
+        />
+      </Block>
+      <Block>
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`}
+          scope={{Avatar}}
+        />
       </Block>
     </div>
   )