@khanacademy/wonder-blocks-icon-button 3.3.14 → 3.4.3

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# @khanacademy/wonder-blocks-icon-button
+
+## 3.4.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.3
+-   @khanacademy/wonder-blocks-core@4.2.1
+-   @khanacademy/wonder-blocks-icon@1.2.25
+
+## 3.4.2
+
+### Patch Changes
+
+-   Updated dependencies [901bfe82]
+    -   @khanacademy/wonder-blocks-clickable@2.2.2

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { Component, createElement } from 'react';
-import { any } from 'prop-types';
+import * as React from 'react';
+import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
@@ -9,12 +9,12 @@ import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-colo
 import { addStyle } from '@khanacademy/wonder-blocks-core';
 import Icon from '@khanacademy/wonder-blocks-icon';
 
-const _excluded = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
+const _excluded$1 = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class IconButtonCore extends Component {
-  render() {
+class IconButtonCore extends React.Component {
+  renderInner(router) {
     const _this$props = this.props,
           {
       skipClientNav,
@@ -30,17 +30,14 @@ class IconButtonCore extends Component {
       style,
       testId
     } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
+          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
-    const {
-      router
-    } = this.context;
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
 
     const buttonStyles = _generateStyles(buttonColor, kind, light);
 
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
-    const child = /*#__PURE__*/createElement(Icon, {
+    const child = /*#__PURE__*/React.createElement(Icon, {
       size: "medium",
       color: "currentColor",
       icon: icon
@@ -52,13 +49,13 @@ class IconButtonCore extends Component {
     }, restProps);
 
     if (href && !disabled) {
-      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/React.createElement(StyledLink, _extends({}, commonProps, {
         to: href
-      }), child) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+      }), child) : /*#__PURE__*/React.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), child);
     } else {
-      return /*#__PURE__*/createElement(StyledButton, _extends({
+      return /*#__PURE__*/React.createElement(StyledButton, _extends({
         type: "button"
       }, commonProps, {
         disabled: disabled
@@ -66,10 +63,11 @@ class IconButtonCore extends Component {
     }
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
 }
-IconButtonCore.contextTypes = {
-  router: any
-};
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -159,7 +157,7 @@ const _generateStyles = (color, kind, light) => {
   return styles[buttonType];
 };
 
-const _excluded$1 = ["onClick", "href", "skipClientNav", "tabIndex", "target"],
+const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target"],
       _excluded2 = ["tabIndex"];
 
 /**
@@ -198,8 +196,8 @@ const _excluded$1 = ["onClick", "href", "skipClientNav", "tabIndex", "target"],
  * />
  * ```
  */
-class IconButton extends Component {
-  render() {
+class IconButton extends React.Component {
+  renderClickableBehavior(router) {
     const _this$props = this.props,
           {
       onClick,
@@ -208,10 +206,10 @@ class IconButton extends Component {
       tabIndex,
       target
     } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
+          sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
-    return /*#__PURE__*/createElement(ClickableBehavior, {
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
+    return /*#__PURE__*/React.createElement(ClickableBehavior, {
       disabled: sharedProps.disabled,
       href: href,
       onClick: onClick,
@@ -223,7 +221,7 @@ class IconButton extends Component {
       } = _ref,
           childrenProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
 
-      return /*#__PURE__*/createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
+      return /*#__PURE__*/React.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
         skipClientNav: skipClientNav,
         href: href,
         target: target // If tabIndex is provide to the component we allow
@@ -235,10 +233,11 @@ class IconButton extends Component {
     });
   }
 
+  render() {
+    return /*#__PURE__*/React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-IconButton.contextTypes = {
-  router: any
-};
 IconButton.defaultProps = {
   color: "default",
   kind: "primary",
@@ -246,4 +245,4 @@ IconButton.defaultProps = {
   disabled: false
 };
 
-export default IconButton;
+export { IconButton as default };

package/dist/index.js

@@ -89,19 +89,19 @@ module.exports =
 /* 0 */
 /***/ (function(module, exports) {
 
-module.exports = require("@khanacademy/wonder-blocks-color");
+module.exports = require("react");
 
 /***/ }),
 /* 1 */
 /***/ (function(module, exports) {
 
-module.exports = require("react");
+module.exports = require("@khanacademy/wonder-blocks-color");
 
 /***/ }),
 /* 2 */
 /***/ (function(module, exports) {
 
-module.exports = require("prop-types");
+module.exports = require("react-router");
 
 /***/ }),
 /* 3 */
@@ -127,10 +127,10 @@ module.exports = require("aphrodite");
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButton; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _icon_button_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(7);
@@ -178,7 +178,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * ```
  */
 class IconButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
+  renderClickableBehavior(router) {
     const {
       onClick,
       href,
@@ -187,7 +187,7 @@ class IconButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       target,
       ...sharedProps
     } = this.props;
-    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, this.context.router);
+    const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_2__["getClickableBehavior"])(href, skipClientNav, router);
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ClickableBehavior, {
       disabled: sharedProps.disabled,
       href: href,
@@ -210,10 +210,11 @@ class IconButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     });
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_1__["__RouterContext"].Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
 }
-IconButton.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_1__["any"]
-};
 IconButton.defaultProps = {
   color: "default",
   kind: "primary",
@@ -227,15 +228,15 @@ IconButton.defaultProps = {
 
 "use strict";
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return IconButtonCore; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(5);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
-/* harmony import */ var prop_types__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(0);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
+/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
@@ -257,7 +258,7 @@ const StyledAnchor = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MO
 const StyledButton = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])("button");
 const StyledLink = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__["addStyle"])(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"]);
 class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  render() {
+  renderInner(router) {
     const {
       skipClientNav,
       color,
@@ -274,9 +275,6 @@ class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       waiting: _,
       ...restProps
     } = this.props;
-    const {
-      router
-    } = this.context;
     const buttonColor = color === "destructive" ? _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["SemanticColor"].controlDestructive : _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__["SemanticColor"].controlDefault;
 
     const buttonStyles = _generateStyles(buttonColor, kind, light);
@@ -308,10 +306,11 @@ class IconButtonCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }
   }
 
+  render() {
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router__WEBPACK_IMPORTED_MODULE_3__["__RouterContext"].Consumer, null, router => this.renderInner(router));
+  }
+
 }
-IconButtonCore.contextTypes = {
-  router: prop_types__WEBPACK_IMPORTED_MODULE_3__["any"]
-};
 const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   shared: {
     position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.3.14",
+  "version": "3.4.3",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,20 +15,19 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.1.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.3",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.2.1",
+    "@khanacademy/wonder-blocks-icon": "^1.2.25"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
-    "prop-types": "^15.6.2",
-    "react": "^16.4.1",
-    "react-router-dom": "^4.2.2"
+    "react": "16.14.0",
+    "react-router": "5.2.1",
+    "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "9a9cc04bf2bbfb425f991a347b4f8b0d0d56e120"
+    "wb-dev-build-settings": "^0.3.0"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -335,7 +335,7 @@ exports[`wonder-blocks-icon-button example 1 1`] = `
         "width": 40,
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <svg
@@ -427,7 +427,7 @@ exports[`wonder-blocks-icon-button example 1 1`] = `
         "width": 40,
       }
     }
-    tabIndex={-1}
+    tabIndex={0}
     type="button"
   >
     <svg

package/src/components/__tests__/icon-button.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
-import {mount, shallow} from "enzyme";
+import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {MemoryRouter, Route, Switch} from "react-router-dom";
 import {icons} from "@khanacademy/wonder-blocks-icon";
@@ -9,8 +10,19 @@ import expectRenderError from "../../../../../utils/testing/expect-render-error.
 import IconButton from "../icon-button.js";
 
 describe("IconButton", () => {
+    const {location} = window;
+
+    beforeAll(() => {
+        delete window.location;
+        window.location = {assign: jest.fn()};
+    });
+
+    afterAll(() => {
+        window.location = location;
+    });
+
     test("render an icon", (done) => {
-        const wrapper = shallow(
+        const wrapper = mount(
             <IconButton
                 icon={icons.search}
                 aria-label="search"

package/src/components/icon-button-core.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import Color, {
     SemanticColor,
@@ -33,18 +33,12 @@ type Props = {|
     href?: string,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
 export default class IconButtonCore extends React.Component<Props> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
-
-    render(): React.Node {
+    renderInner(router: any): React.Node {
         const {
             skipClientNav,
             color,
@@ -61,7 +55,6 @@ export default class IconButtonCore extends React.Component<Props> {
             waiting: _,
             ...restProps
         } = this.props;
-        const {router} = this.context;
 
         const buttonColor =
             color === "destructive"
@@ -111,6 +104,14 @@ export default class IconButtonCore extends React.Component<Props> {
             );
         }
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderInner(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }
 
 const sharedStyles = StyleSheet.create({

package/src/components/icon-button.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from "react";
-import * as PropTypes from "prop-types";
+import {__RouterContext} from "react-router";
 
 import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
 import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
@@ -126,10 +126,6 @@ export type SharedProps = {|
     onClick?: (e: SyntheticEvent<>) => mixed,
 |};
 
-type ContextTypes = {|
-    router: $FlowFixMe,
-|};
-
 type DefaultProps = {|
     color: $PropertyType<SharedProps, "color">,
     kind: $PropertyType<SharedProps, "kind">,
@@ -174,7 +170,6 @@ type DefaultProps = {|
  * ```
  */
 export default class IconButton extends React.Component<SharedProps> {
-    static contextTypes: ContextTypes = {router: PropTypes.any};
     static defaultProps: DefaultProps = {
         color: "default",
         kind: "primary",
@@ -182,20 +177,14 @@ export default class IconButton extends React.Component<SharedProps> {
         disabled: false,
     };
 
-    render(): React.Node {
-        const {
-            onClick,
-            href,
-            skipClientNav,
-            tabIndex,
-            target,
-            ...sharedProps
-        } = this.props;
+    renderClickableBehavior(router: any): React.Node {
+        const {onClick, href, skipClientNav, tabIndex, target, ...sharedProps} =
+            this.props;
 
         const ClickableBehavior = getClickableBehavior(
             href,
             skipClientNav,
-            this.context.router,
+            router,
         );
 
         return (
@@ -225,4 +214,12 @@ export default class IconButton extends React.Component<SharedProps> {
             </ClickableBehavior>
         );
     }
+
+    render(): React.Node {
+        return (
+            <__RouterContext.Consumer>
+                {(router) => this.renderClickableBehavior(router)}
+            </__RouterContext.Consumer>
+        );
+    }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.