feat: Add Toast component

package.json

@@ -29,18 +29,19 @@
   },
   "dependencies": {
     "lodash": "^4.17.11",
-    "popper.js": "^1.14.4",
-    "react-portal": "^4.1.5",
-    "styled-system": "^3.1.11",
+    "mitt": "^1.1.3",
     "polished": "^2.0.0",
+    "popper.js": "^1.14.4",
     "prop-types": "^15.6.1",
     "react-animations": "^1.0.0",
+    "react-portal": "^4.1.5",
     "react-transition-group": "^2.5.0",
-    "styled-components": "^4.0.0"
+    "styled-system": "^3.1.11"
   },
   "peerDependencies": {
     "react": "^16.5.0",
-    "react-dom": "^16.5.0"
+    "react-dom": "^16.5.0",
+    "styled-components": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.1.2",
@@ -72,7 +73,7 @@
     "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-filesize": "^5.0.1",
     "standard-version": "^4.4.0",
-    "styled-components": "^4.0.0"
+    "styled-components": "^4.0.3"
   },
   "resolutions": {
     "babel-core": "^7.0.0-bridge.0"

src/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import { css } from 'styled-components';
 import Popper from 'popper.js';
 import Box from '../Box';
 import Portal from '../Portal';
-import { createComponent } from '../utils';
+import { createComponent, themeGet } from '../utils';
 
 const DropdownTrigger = createComponent({
   name: 'DropdownTrigger',
@@ -162,9 +162,15 @@ export default class Dropdown extends React.Component {
 
 const DropdownHeader = createComponent({
   name: 'DropdownHeader',
+  style: css`
+    padding: 0.75rem 1rem 0;
+  `,
+});
+
+const DropdownHeaderInner = createComponent({
+  name: 'DropdownHeaderInner',
   style: css`
     padding: 0 0 0.25rem;
-    margin-bottom: 0.5rem;
     border-bottom: 2px solid ${p => p.theme.colors.grayLight};
   `,
 });
@@ -182,16 +188,18 @@ Dropdown.Title = createComponent({
 
 Dropdown.Header = ({ title, children }) => (
   <DropdownHeader>
-    {title && <Dropdown.Title>{title}</Dropdown.Title>}
-    {children}
+    <DropdownHeaderInner>
+      {title && <Dropdown.Title>{title}</Dropdown.Title>}
+      {children}
+    </DropdownHeaderInner>
   </DropdownHeader>
 );
 
 Dropdown.Body = createComponent({
   name: 'DropdownBody',
   as: Box,
   style: css`
-    padding: 12px;
+    padding: 1rem;
   `,
 });
 
@@ -216,8 +224,8 @@ Dropdown.Item = createComponent({
     text-decoration: none;
     color: inherit;
     cursor: pointer;
-    margin: 0 -12px;
-    padding: 4px 12px;
+    margin: 0 -1rem;
+    padding: 0.25rem 1rem;
     transition: 125ms background;
 
     & + ${Dropdown.SectionTitle} {
@@ -239,7 +247,7 @@ Dropdown.Footer = createComponent({
   },
   style: ({ theme }) => css`
     background: ${theme.colors.grayLightest};
-    padding: 8px 12px;
-    border-radius: 0 0 4px 4px;
+    padding: 0.75rem 1rem;
+    border-radius: 0 0 ${themeGet('radius')}px ${themeGet('radius')}px;
   `,
 });