Add <Medallion /> component

Component for displaying useful information alongside a label of some
form, usually inside a button

components/Medallion/Medallion.css

@@ -0,0 +1,21 @@
+.root {
+  border-radius: 4px;
+  display: inline-block;
+  box-sizing: border-box;
+  min-height: var(--size-regular);
+  line-height: var(--size-regular);
+  font-family: var(--font-avenir);
+  font-size: var(--size-sm-i);
+  text-align: center;
+  padding: var(--size-sm-iv) var(--size-sm-iii);
+}
+
+.light {
+  color: currentColor;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.dark {
+  color: currentColor;
+  background-color: rgba(0, 0, 0, 0.1);
+}

components/Medallion/Medallion.js

@@ -0,0 +1,29 @@
+import React, { PropTypes } from 'react';
+import cx from 'classnames';
+
+import css from './Medallion.css';
+
+const Medallion = ({ className, variant, children, ...rest }) => (
+  <span
+    { ...rest }
+    className={ cx(
+      css.root,
+      css[variant],
+      className,
+    ) }
+  >
+    { children }
+  </span>
+);
+
+Medallion.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.string,
+  variant: PropTypes.oneOf(['light', 'dark']),
+};
+
+Medallion.defaultProps = {
+  variant: 'light',
+};
+
+export default Medallion;

components/Medallion/Medallion.story.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+import { withKnobs, number } from '@kadira/storybook-addon-knobs';
+import Medallion from './Medallion';
+
+const stories = storiesOf('Medallion', module);
+stories.addDecorator(withKnobs);
+
+stories.add('Light Medallion', () => (
+  <Medallion>{ number('children', 2) }</Medallion>
+))
+.add('Dark Medallion', () => (
+  <Medallion variant="dark">{ number('children', 2) }</Medallion>
+));

components/Medallion/Medallion.test.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render } from 'react-dom';
+
+import Medallion from './Medallion';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  render(<Medallion>label</Medallion>, div);
+});