Merge pull request #210 from primer/rename-block

Rename Block and Box ✨
primer · Aug 14, 2018 · d6941a4 · d6941a4
2 parents c5dec78 + 02c03a1
commit d6941a4
Show file tree

Hide file tree

Showing 45 changed files with 659 additions and 653 deletions.
diff --git a/README.md b/README.md
@@ -24,7 +24,7 @@ All of our components are exported by name from `primer-react`, so you can impor
 
 ```js
 import {
-  Block,
+  Box,
   Button,
   Heading,
   Text

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/index.html b/docs/index.html
diff --git a/docs/sandbox/index.html b/docs/sandbox/index.html
@@ -11,12 +11,12 @@
       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/v1.0.0-beta" blacklist="css,color,bg,m,mt,mr,mb,ml,mx,my,p,pt,pr,pb,pl,px,py">primer-react@1.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>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>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>Box</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>
+  <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>Box</span><span class="token punctuation">></span></span>
-<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Block</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>
+  <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>
diff --git a/examples/_app.js b/examples/_app.js
@@ -4,7 +4,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, UnderlineNavLink, theme} from '../src'
+import {Box, Link, Text, UnderlineNav, UnderlineNavLink, theme} from '../src'
 import {name, repository, version} from '../package.json'
 
 const pkg = `${name}@${version}`
@@ -15,7 +15,7 @@ export default function Page({render}) {
     <React.Fragment>
       <Styles />
       <ThemeProvider theme={theme}>
-        <Block color="bodytext">
+        <Box color="bodytext">
           <UnderlineNav
             actions={
               <Text color="gray.5" fontFamily="mono" px={4}>
@@ -34,8 +34,8 @@ export default function Page({render}) {
               Sandbox
             </UnderlineNavLink>
           </UnderlineNav>
-          <Block p={3}>{render()}</Block>
-        </Block>
+          <Box p={3}>{render()}</Box>
+        </Box>
       </ThemeProvider>
     </React.Fragment>
   )

diff --git a/examples/component-examples/Avatar.js b/examples/component-examples/Avatar.js
@@ -1,35 +1,35 @@
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
-import {Block, Avatar} from '../../src'
+import {Box, Avatar} from '../../src'
 
 const AvatarExample = {
   name: 'Avatar',
   element: (
     <div>
-      <Block mb={2}>
+      <Box mb={2}>
         <LiveEditor
           code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
           scope={{Avatar}}
         />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor
           code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
           scope={{Avatar}}
         />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor
           code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`}
           scope={{Avatar}}
         />
-      </Block>
-      <Block>
+      </Box>
+      <Box>
         <LiveEditor
           code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`}
           scope={{Avatar}}
         />
-      </Block>
+      </Box>
     </div>
   )
 }

diff --git a/examples/component-examples/Block.js b/examples/component-examples/Block.js
diff --git a/examples/component-examples/BorderBox.js b/examples/component-examples/BorderBox.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import {LiveEditor} from '@compositor/kit'
+import {BorderBox, Box} from '../../src'
+
+const BorderBoxExample = {
+  name: 'BorderBox',
+  element: (
+    <div>
+      <Box mb={6}>
+        <LiveEditor code={`<BorderBox>This is a BorderBox</BorderBox>`} scope={{BorderBox}} />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor code={`<BorderBox p={2}>This is a BorderBox with padding.</BorderBox>`} scope={{BorderBox}} />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor
+          code={`<BorderBox boxShadow="small" m={4} p={2}>This is a BorderBox with shadow.</BorderBox>`}
+          scope={{BorderBox}}
+        />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor
+          code={`<BorderBox boxShadow="medium" m={4} p={2}>This is a BorderBox with a medium shadow.</BorderBox>`}
+          scope={{BorderBox}}
+        />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor
+          code={`<BorderBox boxShadow="large" m={4} p={2}>This is a BorderBox with a large shadow.</BorderBox>`}
+          scope={{BorderBox}}
+        />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor
+          code={`<BorderBox boxShadow="extra-large" m={4} p={2}>This is a BorderBox with an extra-large shadow.</BorderBox>`}
+          scope={{BorderBox}}
+        />
+      </Box>
+      <Box mb={6}>
+        <LiveEditor
+          code={`<BorderBox borderColor="green.5" p={2}>This is a BorderBox with a green border.</BorderBox>`}
+          scope={{BorderBox}}
+        />
+      </Box>
+    </div>
+  )
+}
+
+export default BorderBoxExample
diff --git a/examples/component-examples/Box.js b/examples/component-examples/Box.js
@@ -1,41 +1,66 @@
+/* eslint-disable import/no-named-as-default-member */
 import React from 'react'
 import {LiveEditor} from '@compositor/kit'
-import {Box, Block} from '../../src'
+import theme from '../../src/theme'
+import {Box, Text, Heading} from '../../src'
+
+const Mono = props => <Text fontFamily="mono" {...props} />
+
+const colors = [...Object.entries(theme.colors)].reduce((keys, [key, value]) => {
+  if (key !== 'bg' && key !== 'border') {
+    if (Array.isArray(value)) {
+      return keys.concat(Object.keys(value).map(i => `${key}.${i}`))
+    } else {
+      keys.push(key)
+    }
+  }
+  return keys
+}, [])
+
+const textColors = ['white', 'gray.5', 'black']
 
 const BoxExample = {
   name: 'Box',
   element: (
     <div>
-      <Block mb={6}>
-        <LiveEditor code={`<Box>This is a box</Box>`} scope={{Box}} />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor code={`<Box p={2}>This is a box with padding.</Box>`} scope={{Box}} />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor code={`<Box boxShadow="small" m={4} p={2}>This is a box with shadow.</Box>`} scope={{Box}} />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor
-          code={`<Box boxShadow="medium" m={4} p={2}>This is a box with a medium shadow.</Box>`}
-          scope={{Box}}
-        />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor
-          code={`<Box boxShadow="large" m={4} p={2}>This is a box with a large shadow.</Box>`}
-          scope={{Box}}
-        />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor
-          code={`<Box boxShadow="extra-large" m={4} p={2}>This is a box with an extra-large shadow.</Box>`}
-          scope={{Box}}
-        />
-      </Block>
-      <Block mb={6}>
-        <LiveEditor code={`<Box borderColor="green.5" p={2}>This is a box with a green border.</Box>`} scope={{Box}} />
-      </Block>
+      <table>
+        <thead>
+          <tr>
+            <th className="text-left">
+              <Box pb={4}>color</Box>
+            </th>
+            <th colSpan={textColors.length}>
+              <Mono pb={4}>bg={`{color}`}</Mono>
+            </th>
+            <th>
+              <Mono pb={4}>borderColor</Mono>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {colors.map(color => (
+            <tr key={color}>
+              <td>
+                <Mono mr={3}>{color}</Mono>
+              </td>
+              {textColors.map(fg => (
+                <td key={fg}>
+                  <Box p={3} mb={2} bg={color} color={fg} border={color === 'white' ? 1 : null}>
+                    <Mono>{fg}</Mono>
+                  </Box>
+                </td>
+              ))}
+              <td>
+                <Box p={3} mb={2} ml={3} borderColor={color} border={1}>
+                  <Mono>{color}</Mono>
+                </Box>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <Heading fontSize="3">Code Example</Heading>
+      <LiveEditor code={`<Box bg="red.0" p={3} color="red.5">Danger, Will Robinson</Box>`} scope={{Box}} />
     </div>
   )
 }

diff --git a/examples/component-examples/Buttons.js b/examples/component-examples/Buttons.js
@@ -2,43 +2,43 @@ import React from 'react'
 import {Hubot, Pencil, X} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
 import ExampleHeading from '../doc-components/ExampleHeading'
-import {Block, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
+import {Box, Button, ButtonLink, ButtonDanger, ButtonPrimary, ButtonOutline, OcticonButton, Text} from '../../src'
 
 const ButtonExample = {
   name: 'Buttons',
   element: (
     <div>
-      <Block mb={2}>
+      <Box mb={2}>
         <LiveEditor code={`<Button> Button </Button>`} scope={{Button}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<Button size="sm"> Button small </Button>`} scope={{Button}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<Button size="large"> Button large </Button>`} scope={{Button}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<ButtonDanger> ButtonDanger </ButtonDanger>`} scope={{ButtonDanger}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<ButtonPrimary> ButtonPrimary </ButtonPrimary>`} scope={{ButtonPrimary}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<ButtonOutline> ButtonOutline </ButtonOutline>`} scope={{ButtonOutline}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<Button block> Button block </Button>`} scope={{Button}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor code={`<Button linkStyle> Button linkStyle </Button>`} scope={{Button}} />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <LiveEditor
           code={`<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>`}
           scope={{ButtonLink}}
         />
-      </Block>
-      <Block mb={2}>
+      </Box>
+      <Box mb={2}>
         <ExampleHeading>Octicon Buttons</ExampleHeading>
         <LiveEditor
           code={`<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />`}
@@ -48,13 +48,13 @@ const ButtonExample = {
           code={`<Text color="red.5"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>`}
           scope={{OcticonButton, Text, X}}
         />
-        <Block>
+        <Box>
           <LiveEditor
             code={`<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />`}
             scope={{OcticonButton, Hubot}}
           />
-        </Block>
-      </Block>
+        </Box>
+      </Box>
     </div>
   )
 }