feat(Dropdown): Make Dropdown keyboard friendly (#27)

.eslintrc

@@ -1,3 +1,3 @@
 {
-  "extends": ["sappira/react"]
+  "extends": "sappira/react"
 }

.gitignore

@@ -6,3 +6,4 @@ dist
 lib
 .docz
 .vscode/
+coverage

jest.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  setupFilesAfterEnv: ['<rootDir>/test/setup.js'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
+  setupFilesAfterEnv: ['react-testing-library/cleanup-after-each', '<rootDir>/test/setup.js'],
   testMatch: ['<rootDir>/src/**/*.spec.js'],
 };

package.json

@@ -31,10 +31,11 @@
     "lodash": "^4.17.11",
     "mitt": "^1.1.3",
     "polished": "^2.0.0",
-    "popper.js": "^1.14.7",
     "prop-types": "^15.7.2",
     "react-animations": "^1.0.0",
+    "react-focus-lock": "1.18.3",
     "react-markdown": "^4.0.6",
+    "react-popper": "^1.3.3",
     "react-portal": "^4.2.0",
     "react-transition-group": "^2.5.3",
     "styled-system": "^3.2.1"
@@ -49,24 +50,22 @@
     "@babel/plugin-proposal-class-properties": "^7.3.3",
     "@babel/plugin-proposal-export-default-from": "^7.2.0",
     "@babel/plugin-proposal-export-namespace-from": "^7.2.0",
+    "@babel/polyfill": "^7.2.5",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.1.0",
     "docz": "^0.13.7",
     "docz-theme-default": "^0.13.7",
-    "enzyme": "^3.9.0",
-    "enzyme-adapter-react-16": "^1.9.1",
-    "enzyme-to-json": "^3.3.5",
     "eslint-config-sappira": "^2.0.2",
     "gh-pages": "^2.0.1",
     "jest": "^24.1.0",
+    "jest-dom": "^3.1.3",
     "jest-styled-components": "^6.3.1",
     "npm-run-all": "^4.1.5",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-router-dom": "^4.2.2",
-    "react-test-renderer": "^16.8.2",
+    "react-testing-library": "^6.0.0",
     "rimraf": "^2.6.3",
     "rollup": "^1.2.2",
     "rollup-plugin-babel": "^4.3.2",
@@ -75,8 +74,5 @@
     "standard-version": "^4.4.0",
     "styled-components": "^4.1.3",
     "yup": "^0.26.10"
-  },
-  "resolutions": {
-    "babel-core": "^7.0.0-bridge.0"
   }
 }

src/Badge/Badge.spec.js

@@ -3,7 +3,7 @@ import { renderWithTheme } from '../../test/utils';
 import Badge from './Badge';
 
 test('Badge', () => {
-  const component = renderWithTheme(<Badge>I&apos;m a badge!</Badge>);
+  const { asFragment } = renderWithTheme(<Badge>I&apos;m a badge!</Badge>);
 
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

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

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Badge 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   padding: 4px 8px;
   font-size: 12px;
   font-family: inherit;
@@ -12,9 +13,9 @@ exports[`Badge 1`] = `
 }
 
 <span
-  className="re-badge re-badge-info c0"
-  size="md"
->
-  I'm a badge!
-</span>
+    class="re-badge re-badge-info c0"
+  >
+    I'm a badge!
+  </span>
+</DocumentFragment>
 `;

src/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { css, keyframes } from 'styled-components';
-import { space, flex } from 'styled-system';
+import { space } from 'styled-system';
 import { lighten } from 'polished';
 import { getComponentVariant, createComponent } from '../utils';
 import Flex from '../Flex';
@@ -98,7 +98,7 @@ const StyledButton = createComponent({
   },
 });
 
-const Button = props => <StyledButton {...props} />;
+const Button = React.forwardRef((props, ref) => <StyledButton {...props} ref={ref} />);
 
 Button.propTypes = {
   variant: PropTypes.string,

src/Card/Card.spec.js

@@ -3,13 +3,13 @@ import { renderWithTheme } from '../../test/utils';
 import Card from './Card';
 
 test('Card', () => {
-  const component = renderWithTheme(
+  const { asFragment } = renderWithTheme(
     <Card>
       <Card.Header>Header</Card.Header>
       <Card.Body>Body</Card.Body>
       <Card.Footer>Footer</Card.Footer>
     </Card>
   );
 
-  expect(component.toJSON()).toMatchSnapshot();
+  expect(asFragment()).toMatchSnapshot();
 });

src/Card/__snapshots__/Card.spec.js.snap

@@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Card 1`] = `
-.c0 {
+<DocumentFragment>
+  .c0 {
   background: white;
   box-shadow: 0 3px 6px hsla(0,0%,60%,.1),0 3px 6px hsla(0,0%,60%,.15),0 -1px 2px hsla(0,0%,60%,.02);
   border-radius: 4px;
@@ -23,22 +24,23 @@ exports[`Card 1`] = `
 }
 
 <div
-  className="re-box re-card c0"
->
-  <div
-    className="re-box re-card-header c1"
+    class="re-box re-card c0"
   >
-    Header
+    <div
+      class="re-box re-card-header c1"
+    >
+      Header
+    </div>
+    <div
+      class="re-box re-card-body c2"
+    >
+      Body
+    </div>
+    <div
+      class="re-box re-card-footer c3"
+    >
+      Footer
+    </div>
   </div>
-  <div
-    className="re-box re-card-body c2"
-  >
-    Body
-  </div>
-  <div
-    className="re-box re-card-footer c3"
-  >
-    Footer
-  </div>
-</div>
+</DocumentFragment>
 `;