feat(Button): Icon support and default style updates (#51)

docs/wrapper.js

@@ -1,22 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import { ThemeProvider } from '../src';
 
-const GlobalStyle = createGlobalStyle `
-  * {
-    box-sizing: border-box;
-  }
-`
+const GlobalStyle = createGlobalStyle`
+    @font-face {
+      font-family: "Tiempos";
+      font-weight: 500;
+      font-style: normal;
+      src: url(//cdn.heydoctor.com/fonts/TiemposHeadlineWeb-Semibold.woff2) format('woff2');
+    }
 
-class App extends Component {
-  render() {
-    return (
-      <>
-        <GlobalStyle />
-        <ThemeProvider>{this.props.children}</ThemeProvider>
-      </>
-    );
-  }
-}
+    * {
+      font-family: "Avenir", sans-serif !important;
+    }
 
-export default App;
+    h1 {
+      font-family: "Tiempos", serif !important;
+      font-size: 38px;
+    }
+`;
+
+export default ({ children }) => (
+  <ThemeProvider>
+    <>
+      <GlobalStyle />
+      {children}
+    </>
+  </ThemeProvider>
+);

package.json

@@ -69,7 +69,7 @@
     "react-router-dom": "^4.2.2",
     "react-testing-library": "^6.0.0",
     "rimraf": "^2.6.3",
-    "rollup": "^1.2.2",
+    "rollup": "^1.17.0",
     "rollup-plugin-babel": "^4.3.2",
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-filesize": "^6.0.1",

src/Alert/Alert.js

@@ -7,24 +7,22 @@ import { getComponentVariant, createComponent } from '../utils';
 const StyledAlert = createComponent({
   name: 'Alert',
   style: ({ variant, theme }) => {
-    const { backgroundColor, fontColor } = getComponentVariant(theme, 'Alert', variant);
+    const variantStyles = getComponentVariant(theme, 'Alert', variant);
 
     return css`
       padding: 1rem;
       margin-bottom: 1rem;
       border: 0;
       font-size: 14px;
       font-family: ${theme.typography.fontFamily || 'inherit'};
-      border-radius: ${theme.elementRadius}px;
-      border-left: 4px solid ${fontColor};
-      background: ${backgroundColor};
-      color: ${fontColor};
+      border-radius: ${theme.radius}px;
 
       a {
         color: inherit;
         text-decoration: underline;
       }
 
+      ${variantStyles}
       ${space};
     `;
   },

src/Alert/Alert.mdx

@@ -14,7 +14,7 @@ Alerts are typically used to display meaningful copy to users - typically notify
 
 <PropsTable of={Alert} />
 
-## Exammples
+## Examples
 
 <Playground>
   <Alert variant="success">

src/Badge/Badge.js

@@ -2,23 +2,21 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from 'styled-components';
 import { space } from 'styled-system';
-import { getComponentVariant, createComponent } from '../utils';
+import { getComponentVariant, createComponent, getComponentSize } from '../utils';
 
 const StyledBadge = createComponent({
   name: 'Badge',
   tag: 'span',
   style: ({ variant, theme, size }) => {
-    const { backgroundColor, fontColor } = getComponentVariant(theme, 'Badge', variant);
-    const fontSize = theme.fontSizes[size];
+    const variantStyles = getComponentVariant(theme, 'Badge', variant);
+    const sizeStyles = getComponentSize(theme, 'Badge', size);
 
     return css`
-      padding: ${fontSize / 3}px ${fontSize / 1.5}px;
-      font-size: ${theme.fontSizes[size]}px;
-      font-family: ${theme.typography.fontFamily || 'inherit'};
+      font-family: inherit;
       font-weight: bold;
-      border-radius: ${fontSize}px;
-      background: ${backgroundColor};
-      color: ${fontColor};
+
+      ${variantStyles};
+      ${sizeStyles};
       ${space};
     `;
   },

src/Badge/Badge.mdx

@@ -16,9 +16,19 @@ Documentation and examples for badges, our small count and labeling component.
 
 ## Examples
 
+### Variants
+
 <Playground>
   <Badge>I'm Ze Best</Badge>
   <Badge variant="success" ml={2}>I'm So Successful</Badge>
   <Badge variant="danger" ml={2}>I'm So Dangerous</Badge>
   <Badge variant="warning" ml={2}>💁‍♀️ Caution</Badge>
 </Playground>
+
+### Sizes
+
+<Playground>
+  <Badge size="sm">Small</Badge>
+  <Badge ml={2}>Medium</Badge>
+  <Badge size="lg" ml={2}>Large</Badge>
+</Playground>

src/Badge/__snapshots__/Badge.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`Badge 1`] = `
 <DocumentFragment>
   .c0 {
-  padding: 4px 8px;
-  font-size: 12px;
   font-family: inherit;
   font-weight: bold;
-  border-radius: 12px;
-  background: #CADCFF;
+  background-color: #CADCFF;
   color: #0958F3;
+  font-size: 14px;
+  border-radius: 14px;
+  padding: 5px 10px;
 }
 
 <span