Remove cursor: pointer from default (#13)

Removing this because the button element doesn't include it by default.

It is also easy to add globally with:

```css
[role="button"] {
  cursor: pointer;
}
```

README.md

@@ -53,8 +53,6 @@ Here's how to use `ClickableBox` to make a clickable SVG:
   onKeyDown={...}
   // Tell screen readers that the element is a button
   role="button"
-  // Indicate on hover that the element is clickable
-  style={{ cursor: 'pointer' }}
   // All other props are passed through to the element
   aria-label="Close modal"
   className="icon-button"
@@ -90,3 +88,16 @@ You can pass any custom prop as well. This component will forward those props to
 - You're using this as a submit button in a form. (It's possible, but [there's a quirk](https://github.com/danoc/clickable-box/issues/4).)
 - You're building a button that [looks like a button](https://getbootstrap.com/docs/4.0/components/buttons/#examples): This is fairly easy to build as a `button` element with CSS.
 - You think it'd be easier to simply style a `button`: This is a good sign that you should use a `button` element instead.
+
+## FAQs
+
+**How can I style this with `cursor: pointer`?**
+
+`ClickableBox` accepts all props including `className` and `style` prop. If you prefer, you can add the cursor style globally with this CSS:
+
+```css
+/* Targets all instances of `ClickableBox` */
+[role="button"] {
+  cursor: pointer;
+}
+```

package.json

@@ -15,9 +15,6 @@
     "format": "prettier \"**/*.{js,jsx,css,scss,json,md,mdx,html}\" --write",
     "release": "git checkout master && git pull && yarn test && yarn publish && git push --follow-tags"
   },
-  "dependencies": {
-    "object-assign": "^4.1.1"
-  },
   "devDependencies": {
     "@babel/core": "^7.1.6",
     "@babel/preset-env": "^7.2.0",

src/index.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import PropTypes from "prop-types";
-import objectAssign from "object-assign";
 
 class ClickableBox extends React.Component {
   constructor(props) {
@@ -55,11 +54,6 @@ class ClickableBox extends React.Component {
       <Component
         tabIndex={isActiveButton ? 0 : undefined}
         role={isActiveButton ? "button" : undefined}
-        style={
-          isActiveButton
-            ? objectAssign({}, { cursor: "pointer" }, style)
-            : style
-        }
         onKeyPress={isActiveButton ? this.onKeyPress : undefined}
         onClick={isActiveButton ? onClick : undefined}
         ref={innerRef}

src/index.test.jsx

@@ -58,36 +58,6 @@ test("allows `ref` prop", () => {
 });
 
 describe("merges props", () => {
-  test("merges style prop when adding new `style`", () => {
-    const children = "duckduck";
-
-    const { getByText } = render(
-      <ClickableBox style={{ color: "red" }} onClick={() => {}}>
-        {children}
-      </ClickableBox>
-    );
-
-    expect(getByText(children).style).toMatchObject({
-      // The cursor is built into `ClickableBox`.
-      cursor: "pointer",
-      color: "red"
-    });
-  });
-
-  test("allows overwriting of existing `style` value", () => {
-    const children = "duckduck";
-
-    const { getByText } = render(
-      <ClickableBox style={{ cursor: "help" }} onClick={() => {}}>
-        {children}
-      </ClickableBox>
-    );
-
-    expect(getByText(children).style).toMatchObject({
-      cursor: "help"
-    });
-  });
-
   test("allows overwriting of `tabIndex`", () => {
     const children = "duckduck";
 
@@ -255,20 +225,6 @@ describe("disabled", () => {
     expect(handleClick).toHaveBeenCalledTimes(0);
   });
 
-  test("does not add `cursor: pointer`", () => {
-    const children = "duckduck";
-
-    const { getByText } = render(
-      <ClickableBox style={{ color: "red" }} disabled>
-        {children}
-      </ClickableBox>
-    );
-
-    expect(getByText(children).style).toMatchObject({
-      color: "red"
-    });
-  });
-
   test("does not forward the disabled attribute", () => {
     const children = "duckduck";
 
@@ -318,18 +274,6 @@ describe("`onClick` prop is not provided", () => {
     fireEvent.click(getByText("Submit"));
   });
 
-  test("does not add `cursor: pointer`", () => {
-    const children = "duckduck";
-
-    const { getByText } = render(
-      <ClickableBox style={{ color: "red" }}>{children}</ClickableBox>
-    );
-
-    expect(getByText(children).style).toMatchObject({
-      color: "red"
-    });
-  });
-
   test("does not run passed in `onKeyPress`", () => {
     const onKeyPress = jest.fn();