Merge pull request #18 from primer/task/counter-component

CounterLabel component
primer · May 21, 2018 · 1229a4c · 1229a4c
2 parents cb6d2ba + 4b78324
commit 1229a4c
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 21 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/src/CounterLabel.js b/src/CounterLabel.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import classnames from 'classnames'
+
+const CounterLabel = ({ theme, children}) => (
+    <span
+      className={classnames(
+        'Counter',
+        theme ? `Counter--${theme}` : null,
+      )}
+    >
+      {children}
+    </span>
+)
+
+export default CounterLabel
diff --git a/src/Index.js b/src/Index.js
@@ -18,12 +18,24 @@ import ButtonPrimary from './ButtonPrimary'
 import ButtonSecondary from './ButtonSecondary'
 import ButtonDanger from './ButtonDanger'
 import Flash from './Flash'
+import CounterLabel from './CounterLabel'
 
 const Index = props => (
   <Page>
     <KitProvider>
       <Library>
         <Library.Nav />
+        <Example name="CounterLabel">
+          <CounterLabel>
+            12
+          </CounterLabel>
+          <CounterLabel theme={'gray'}>
+            13
+          </CounterLabel>
+          <CounterLabel theme={'gray-light'}>
+            13
+          </CounterLabel>
+        </Example>
         <Example name='Heading'>
           <Heading>
             Heading