@khanacademy/wonder-blocks-icon-button 3.4.21 → 3.4.22

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _extends = require('@babel/runtime/helpers/extends');
-var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
 var React = require('react');
 var reactRouter = require('react-router');
 var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
@@ -14,88 +12,131 @@ var Icon = require('@khanacademy/wonder-blocks-icon');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
-var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure " + obj);
+}
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 const _excluded$1 = ["skipClientNav", "color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "style", "testId", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class IconButtonCore extends React__namespace.Component {
-  renderInner(router) {
+let IconButtonCore = function (_React$Component) {
+  _inheritsLoose(IconButtonCore, _React$Component);
+  function IconButtonCore() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = IconButtonCore.prototype;
+  _proto.renderInner = function renderInner(router) {
     const _this$props = this.props,
-          {
-      skipClientNav,
-      color,
-      disabled,
-      focused,
-      hovered,
-      href,
-      icon,
-      kind,
-      light,
-      pressed,
-      style,
-      testId
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
-
+      {
+        skipClientNav,
+        color,
+        disabled,
+        focused,
+        hovered,
+        href,
+        icon,
+        kind,
+        light,
+        pressed,
+        style,
+        testId
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.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 = React__namespace.createElement(Icon__default["default"], {
       size: "medium",
       color: "currentColor",
       icon: icon
     });
-
-    const commonProps = _extends__default["default"]({
+    const commonProps = _extends({
       "data-test-id": testId,
       style: [defaultStyle, style]
     }, restProps);
-
     if (href && !disabled) {
-      return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+      return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, commonProps, {
         to: href
-      }), child) : React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
+      }), child) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), child);
     } else {
-      return React__namespace.createElement(StyledButton, _extends__default["default"]({
+      return React__namespace.createElement(StyledButton, _extends({
         type: "button"
       }, commonProps, {
         disabled: disabled
       }), child);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-
-}
+  };
+  return IconButtonCore;
+}(React__namespace.Component);
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     position: "relative",
@@ -122,18 +163,14 @@ const sharedStyles = aphrodite.StyleSheet.create({
   }
 });
 const styles = {};
-
 const _generateStyles = (color, kind, light) => {
   const buttonType = color + kind + light.toString();
-
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-
   if (light && kind !== "primary") {
     throw new Error("Light is only supported for primary IconButtons");
   }
-
   const {
     white,
     offBlack32,
@@ -161,7 +198,6 @@ const _generateStyles = (color, kind, light) => {
       cursor: "default"
     }
   };
-
   if (kind === "primary") {
     newStyles["default"] = {
       color: light ? white : color
@@ -177,24 +213,27 @@ const _generateStyles = (color, kind, light) => {
   } else {
     throw new Error("IconButton kind not recognized");
   }
-
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
 const _excluded = ["onClick", "href", "skipClientNav", "tabIndex", "target"];
-class IconButton extends React__namespace.Component {
-  renderClickableBehavior(router) {
+let IconButton = function (_React$Component) {
+  _inheritsLoose(IconButton, _React$Component);
+  function IconButton() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = IconButton.prototype;
+  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
     const _this$props = this.props,
-          {
-      onClick,
-      href,
-      skipClientNav,
-      tabIndex,
-      target
-    } = _this$props,
-          sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
-
+      {
+        onClick,
+        href,
+        skipClientNav,
+        tabIndex,
+        target
+      } = _this$props,
+      sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
     return React__namespace.createElement(ClickableBehavior, {
       disabled: sharedProps.disabled,
@@ -203,22 +242,20 @@ class IconButton extends React__namespace.Component {
       role: "button",
       target: target
     }, (state, _ref) => {
-      let childrenProps = _extends__default["default"]({}, _ref);
-
-      return React__namespace.createElement(IconButtonCore, _extends__default["default"]({}, sharedProps, state, childrenProps, {
+      let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+      return React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
         skipClientNav: skipClientNav,
         href: href,
         target: target,
         tabIndex: tabIndex
       }));
     });
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return IconButton;
+}(React__namespace.Component);
 IconButton.defaultProps = {
   color: "default",
   kind: "primary",

package/dist/index.js.flow

@@ -1,2 +1,9 @@
-// @flow
-export * from "../src/index";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import IconButton from "./components/icon-button";
+declare export { IconButton as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "3.4.21",
+  "version": "3.4.22",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,7 @@
   "description": "",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
-  "source": "src/index.js",
+  "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,10 +16,10 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.5",
-    "@khanacademy/wonder-blocks-color": "^1.2.1",
-    "@khanacademy/wonder-blocks-core": "^4.7.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.37"
+    "@khanacademy/wonder-blocks-clickable": "^2.4.6",
+    "@khanacademy/wonder-blocks-color": "^1.2.2",
+    "@khanacademy/wonder-blocks-core": "^4.8.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.38"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -28,6 +28,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.1"
+    "wb-dev-build-settings": "^0.7.2"
   }
 }

package/src/__tests__/{custom-snapshot.test.js → custom-snapshot.test.tsx}

@@ -1,6 +1,5 @@
-// @flow
-import React from "react";
-import renderer from "react-test-renderer";
+import * as React from "react";
+import * as renderer from "react-test-renderer";
 
 import {icons} from "@khanacademy/wonder-blocks-icon";
 
@@ -19,12 +18,12 @@ const defaultHandlers = {
     onKeyUp: () => void 0,
     onFocus: () => void 0,
     onBlur: () => void 0,
-};
+} as const;
 
 describe("IconButtonCore", () => {
-    for (const kind of ["primary", "secondary", "tertiary"]) {
-        for (const color of ["default", "destructive"]) {
-            for (const size of ["default", "small"]) {
+    for (const kind of ["primary", "secondary", "tertiary"] as const) {
+        for (const color of ["default", "destructive"] as const) {
+            for (const size of ["default", "small"] as const) {
                 for (const light of kind === "primary"
                     ? [true, false]
                     : [false]) {
@@ -33,7 +32,7 @@ describe("IconButtonCore", () => {
                         "focused",
                         "hovered",
                         "pressed",
-                    ]) {
+                    ] as const) {
                         const disabled = state === "disabled";
                         const stateProps = {
                             disabled,
@@ -41,7 +40,7 @@ describe("IconButtonCore", () => {
                             hovered: state === "hovered",
                             pressed: state === "pressed",
                             waiting: false,
-                        };
+                        } as const;
                         test(`kind:${kind} color:${color} size:${size} light:${String(
                             light,
                         )} ${state}`, () => {

package/src/components/__tests__/{icon-button.test.js → icon-button.test.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
@@ -13,7 +12,9 @@ describe("IconButton", () => {
     const {location} = window;
 
     beforeAll(() => {
+        // @ts-expect-error [FEI-5019] - TS2790 - The operand of a 'delete' operator must be optional.
         delete window.location;
+        // @ts-expect-error [FEI-5019] - TS2740 - Type '{ assign: Mock<any, any, any>; }' is missing the following properties from type 'Location': ancestorOrigins, hash, host, hostname, and 8 more.
         window.location = {assign: jest.fn()};
     });
 

package/src/components/{icon-button-core.js → icon-button-core.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {Link} from "react-router-dom";
@@ -19,26 +18,24 @@ import type {
 } from "@khanacademy/wonder-blocks-clickable";
 import type {SharedProps} from "./icon-button";
 
-type Props = {|
-    ...SharedProps,
-    ...ChildrenProps,
-    ...ClickableState,
-
-    /**
-     * URL to navigate to.
-     *
-     * Used to determine whether to render an `<a>` or `<button>` tag. Also
-     * passed in as the `<a>` tag's `href` if present.
-     */
-    href?: string,
-|};
+type Props = SharedProps &
+    ChildrenProps &
+    ClickableState & {
+        /**
+         * URL to navigate to.
+         *
+         * Used to determine whether to render an `<a>` or `<button>` tag. Also
+         * passed in as the `<a>` tag's `href` if present.
+         */
+        href?: string;
+    };
 
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
 
 export default class IconButtonCore extends React.Component<Props> {
-    renderInner(router: any): React.Node {
+    renderInner(router: any): React.ReactNode {
         const {
             skipClientNav,
             color,
@@ -80,7 +77,7 @@ export default class IconButtonCore extends React.Component<Props> {
             "data-test-id": testId,
             style: [defaultStyle, style],
             ...restProps,
-        };
+        } as const;
 
         if (href && !disabled) {
             return router && !skipClientNav && isClientSideUrl(href) ? (
@@ -105,7 +102,7 @@ export default class IconButtonCore extends React.Component<Props> {
         }
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         return (
             <__RouterContext.Consumer>
                 {(router) => this.renderInner(router)}
@@ -143,9 +140,13 @@ const sharedStyles = StyleSheet.create({
     },
 });
 
-const styles = {};
+const styles: Record<string, any> = {};
 
-const _generateStyles = (color, kind, light) => {
+const _generateStyles = (
+    color: string,
+    kind: "primary" | "secondary" | "tertiary",
+    light: boolean,
+) => {
     const buttonType = color + kind + light.toString();
     if (styles[buttonType]) {
         return styles[buttonType];
@@ -181,16 +182,19 @@ const _generateStyles = (color, kind, light) => {
             color: light ? mix(fade(white, 0.32), color) : offBlack32,
             cursor: "default",
         },
-    };
+    } as const;
     if (kind === "primary") {
+        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
         newStyles["default"] = {
             color: light ? white : color,
         };
     } else if (kind === "secondary") {
+        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
         newStyles["default"] = {
             color: offBlack,
         };
     } else if (kind === "tertiary") {
+        // @ts-expect-error [FEI-5019] - TS2540 - Cannot assign to 'default' because it is a read-only property.
         newStyles["default"] = {
             color: offBlack64,
         };

package/src/components/{icon-button.js → icon-button.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import * as React from "react";
 import {__RouterContext} from "react-router";
 
@@ -7,20 +6,16 @@ import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import IconButtonCore from "./icon-button-core";
 
-export type SharedProps = {|
-    ...$Rest<AriaProps, {|"aria-disabled": "true" | "false" | void|}>,
-
+export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * A Wonder Blocks icon asset, an object specifing paths for one or more of
      * the following sizes: small, medium, large, xlarge.
      */
-    icon: IconAsset,
-
+    icon: IconAsset;
     /**
      * The color of the icon button, either blue or red.
      */
-    color: "default" | "destructive",
-
+    color: "default" | "destructive";
     /**
      * The kind of the icon button, either primary, secondary, or tertiary.
      *
@@ -31,27 +26,23 @@ export type SharedProps = {|
      *
      * In the hover/focus/press states, all variants have a border.
      */
-    kind: "primary" | "secondary" | "tertiary",
-
+    kind: "primary" | "secondary" | "tertiary";
     /**
      * Whether the icon button is on a dark/colored background.
      */
-    light: boolean,
-
+    light: boolean;
     /**
      * Whether the icon button is disabled.
      */
-    disabled: boolean,
-
+    disabled: boolean;
     /**
      * Test ID used for e2e testing.
      */
-    testId?: string,
-
+    testId?: string;
     /**
      * Optional custom styles.
      */
-    style?: StyleType,
+    style?: StyleType;
     // TODO(yejia): use this if ADR #47 has been implemented
     /*
     style?: Style<Exact<{
@@ -65,8 +56,7 @@ export type SharedProps = {|
     /**
      * Adds CSS classes to the IconButton.
      */
-    className?: string,
-
+    className?: string;
     // NOTE(jeresig): Currently React Docgen (used by Styleguidist) doesn't
     // support ... inside of an exact object type. Thus we had to move the
     // following propers into this SharedProps, even though they should be
@@ -77,27 +67,23 @@ export type SharedProps = {|
      *
      * Note: Either href or onClick must be defined
      */
-    href?: string,
-
+    href?: string;
     // TODO(WB-1262): only allow this prop when `href` is also set.
     /**
      * A target destination window for a link to open in.
      */
-    target?: "_blank",
-
+    target?: "_blank";
     /**
      * Specifies the type of relationship between the current document and the
      * linked document. Should only be used when `href` is specified. This
      * defaults to "noopener noreferrer" when `target="_blank"`, but can be
      * overridden by setting this prop to something else.
      */
-    rel?: string,
-
+    rel?: string;
     /**
      * Set the tabindex attribute on the rendered element.
      */
-    tabIndex?: number,
-
+    tabIndex?: number;
     /**
      * Whether to avoid using client-side navigation.
      *
@@ -110,8 +96,7 @@ export type SharedProps = {|
      * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
      * page reload.
      */
-    skipClientNav?: boolean,
-
+    skipClientNav?: boolean;
     /**
      * Function to call when button is clicked.
      *
@@ -124,15 +109,15 @@ export type SharedProps = {|
      * Note: onClick is optional if href is present, but must be defined if
      * href is not
      */
-    onClick?: (e: SyntheticEvent<>) => mixed,
-|};
+    onClick?: (e: React.SyntheticEvent) => unknown;
+};
 
-type DefaultProps = {|
-    color: $PropertyType<SharedProps, "color">,
-    kind: $PropertyType<SharedProps, "kind">,
-    light: $PropertyType<SharedProps, "light">,
-    disabled: $PropertyType<SharedProps, "disabled">,
-|};
+type DefaultProps = {
+    color: SharedProps["color"];
+    kind: SharedProps["kind"];
+    light: SharedProps["light"];
+    disabled: SharedProps["disabled"];
+};
 
 /**
  * An IconButton is a button whose contents are an SVG image.
@@ -179,7 +164,7 @@ export default class IconButton extends React.Component<SharedProps> {
         disabled: false,
     };
 
-    renderClickableBehavior(router: any): React.Node {
+    renderClickableBehavior(router: any): React.ReactNode {
         const {onClick, href, skipClientNav, tabIndex, target, ...sharedProps} =
             this.props;
 
@@ -214,7 +199,7 @@ export default class IconButton extends React.Component<SharedProps> {
         );
     }
 
-    render(): React.Node {
+    render(): React.ReactElement {
         return (
             <__RouterContext.Consumer>
                 {(router) => this.renderClickableBehavior(router)}

package/src/{index.js → index.ts}

@@ -1,4 +1,3 @@
-// @flow
 import IconButton from "./components/icon-button";
 
 export {IconButton as default};

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "exclude": ["dist"],
+    "extends": "../tsconfig-shared.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "src",
+    },
+    "references": [
+        {"path": "../wonder-blocks-clickable"},
+        {"path": "../wonder-blocks-color"},
+        {"path": "../wonder-blocks-core"},
+        {"path": "../wonder-blocks-icon"},
+        {"path": "../../utils"},
+    ]
+}