Merge pull request #196 from primer/counter-label

Update CounterLabel to use Styled System & Emotion

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: undefined;
-    }</style><div class="css-qurhtp"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" px="3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" px="3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" px="3" 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">[email protected]</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><span tag="p" class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</span><div class="css-spz2u4">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">
+    }</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">[email protected]</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><span tag="p" class="css-0">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</span><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>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/component-examples/CounterLabel.js

@@ -7,8 +7,8 @@ const CounterLabelExample = {
   element: (
     <div>
       <LiveEditor code={`<CounterLabel>12</CounterLabel>`} scope={{CounterLabel}} />
-      <LiveEditor code={`<CounterLabel theme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}} />
-      <LiveEditor code={`<CounterLabel theme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel scheme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel scheme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}} />
     </div>
   )
 }

src/CounterLabel.js

@@ -1,14 +1,15 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {mapWhitespaceProps} from './props'
+import {withSystemProps, COMMON} from './system-props'
 
-export default function CounterLabel({theme, children, ...rest}) {
-  const {className} = mapWhitespaceProps(rest)
-  return <span className={classnames(className, 'Counter', theme && `Counter--${theme}`)}>{children}</span>
+function CounterLabel({scheme, children, className}) {
+  return <span className={classnames(className, 'Counter', scheme && `Counter--${scheme}`)}>{children}</span>
 }
 
 CounterLabel.propTypes = {
   children: PropTypes.node,
-  theme: PropTypes.oneOf(['gray', 'gray-light'])
+  scheme: PropTypes.oneOf(['gray', 'gray-light'])
 }
+
+export default withSystemProps(CounterLabel, COMMON)

src/__tests__/CounterLabel.js

@@ -1,28 +1,26 @@
 import React from 'react'
 import CounterLabel from '../CounterLabel'
-import {render, renderClasses, rendersClass} from '../utils/testing'
+import {render} from '../utils/testing'
+import {COMMON} from '../system-props'
 
 describe('CounterLabel', () => {
   xit('is a system component', () => {
     expect(CounterLabel.systemComponent).toEqual(true)
   })
 
   it('renders a <span> with the "Counter" class', () => {
-    expect(render(<CounterLabel />)).toEqual(render(<span className="Counter" />))
+    expect(render(<CounterLabel />).type).toEqual('span')
+    expect(render(<CounterLabel />).props.className).toContain('Counter')
   })
 
   it('respects the "theme" prop', () => {
-    expect(renderClasses(<CounterLabel theme="gray" />)).toEqual(['Counter', 'Counter--gray'])
-    expect(renderClasses(<CounterLabel theme="gray-light" />)).toEqual(['Counter', 'Counter--gray-light'])
+    expect(render(<CounterLabel scheme="gray" />).props.className).toContain('Counter--gray')
+    expect(render(<CounterLabel scheme="gray-light" />).props.className).toContain('Counter--gray-light')
     // FIXME: should we test invalid values like this?
     // expect(renderClasses(<CounterLabel theme="red" />)).toEqual(['Counter', 'Counter--red'])
   })
 
-  it('respects margin utility prop', () => {
-    expect(rendersClass(<CounterLabel m={4} />, 'm-4')).toEqual(true)
-  })
-
-  it('respects padding utility prop', () => {
-    expect(rendersClass(<CounterLabel p={4} />, 'p-4')).toEqual(true)
+  it('implements layout system props', () => {
+    expect(CounterLabel).toImplementSystemProps(COMMON)
   })
 })