@khanacademy/wonder-blocks-button 3.0.13 → 3.0.15

package/dist/es/index.js

@@ -1,5 +1,3 @@
-import _extends from '@babel/runtime/helpers/extends';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
 import { __RouterContext } from 'react-router';
 import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
@@ -12,49 +10,91 @@ import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
 import Icon from '@khanacademy/wonder-blocks-icon';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 
+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 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
-class ButtonCore extends React.Component {
-  renderInner(router) {
+let ButtonCore = function (_React$Component) {
+  _inheritsLoose(ButtonCore, _React$Component);
+  function ButtonCore() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ButtonCore.prototype;
+  _proto.renderInner = function renderInner(router) {
     const _this$props = this.props,
-          {
-      children,
-      skipClientNav,
-      color,
-      disabled: disabledProp,
-      focused,
-      hovered,
-      href = undefined,
-      kind,
-      light,
-      pressed,
-      size,
-      style,
-      testId,
-      type = undefined,
-      spinner,
-      icon,
-      id
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-
+      {
+        children,
+        skipClientNav,
+        color,
+        disabled: disabledProp,
+        focused,
+        hovered,
+        href = undefined,
+        kind,
+        light,
+        pressed,
+        size,
+        style,
+        testId,
+        type = undefined,
+        spinner,
+        icon,
+        id
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
-
     const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
-
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
-
     const commonProps = _extends({
       "data-test-id": testId,
       id: id,
       role: "button",
       style: [defaultStyle, style]
     }, restProps);
-
     const Label = size === "small" ? LabelSmall : LabelLarge;
     const iconSize = size === "small" ? "small" : "medium";
     const label = React.createElement(Label, {
@@ -65,17 +105,17 @@ class ButtonCore extends React.Component {
       icon: icon,
       style: sharedStyles.icon
     }), children);
+    const sizeMapping = {
+      medium: "small",
+      small: "xsmall",
+      large: "medium"
+    };
     const contents = React.createElement(React.Fragment, null, label, spinner && React.createElement(CircularSpinner, {
       style: sharedStyles.spinner,
-      size: {
-        medium: "small",
-        small: "xsmall",
-        large: "medium"
-      }[size],
+      size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
     }));
-
     if (href && !disabled) {
       return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, commonProps, {
         to: href
@@ -89,13 +129,12 @@ class ButtonCore extends React.Component {
         "aria-disabled": disabled
       }), contents);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-
-}
+  };
+  return ButtonCore;
+}(React.Component);
 const sharedStyles = StyleSheet.create({
   shared: {
     position: "relative",
@@ -162,14 +201,11 @@ const sharedStyles = StyleSheet.create({
   }
 });
 const styles = {};
-
 const _generateStyles = (color, kind, light, iconWidth, size) => {
   const buttonType = color + kind + light.toString() + iconWidth.toString() + size;
-
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-
   const {
     white,
     white50,
@@ -182,7 +218,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   const activeColor = mix(offBlack32, color);
   const padding = size === "large" ? Spacing.xLarge_32 : Spacing.medium_16;
   let newStyles = {};
-
   if (kind === "primary") {
     newStyles = {
       default: {
@@ -299,36 +334,36 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   } else {
     throw new Error("Button kind not recognized");
   }
-
   styles[buttonType] = StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
 const _excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"];
-class Button extends React.Component {
-  renderClickableBehavior(router) {
+let Button = function (_React$Component) {
+  _inheritsLoose(Button, _React$Component);
+  function Button() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Button.prototype;
+  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
     const _this$props = this.props,
-          {
-      href = undefined,
-      type = undefined,
-      children,
-      skipClientNav,
-      spinner,
-      disabled,
-      onClick,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      tabIndex,
-      target,
-      rel
-    } = _this$props,
-          sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
-
+      {
+        href = undefined,
+        type = undefined,
+        children,
+        skipClientNav,
+        spinner,
+        disabled,
+        onClick,
+        beforeNav = undefined,
+        safeWithNav = undefined,
+        tabIndex,
+        target,
+        rel
+      } = _this$props,
+      sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-
-    const renderProp = (state, _ref) => {
-      let restChildProps = _extends({}, _ref);
-
+    const renderProp = (state, restChildProps) => {
       return React.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
         disabled: disabled,
         spinner: spinner || state.waiting,
@@ -339,7 +374,6 @@ class Button extends React.Component {
         tabIndex: tabIndex
       }), children);
     };
-
     if (beforeNav) {
       return React.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
@@ -363,13 +397,12 @@ class Button extends React.Component {
         rel: rel
       }, renderProp);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return Button;
+}(React.Component);
 Button.defaultProps = {
   color: "default",
   kind: "primary",

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import Button from "./components/button";
+import type { SharedProps } from "./components/button";
+export type { SharedProps as ButtonProps };
+export { Button as default };

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');
@@ -17,73 +15,113 @@ var Spacing = require('@khanacademy/wonder-blocks-spacing');
 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);
 var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
+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 = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
-class ButtonCore extends React__namespace.Component {
-  renderInner(router) {
+let ButtonCore = function (_React$Component) {
+  _inheritsLoose(ButtonCore, _React$Component);
+  function ButtonCore() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = ButtonCore.prototype;
+  _proto.renderInner = function renderInner(router) {
     const _this$props = this.props,
-          {
-      children,
-      skipClientNav,
-      color,
-      disabled: disabledProp,
-      focused,
-      hovered,
-      href = undefined,
-      kind,
-      light,
-      pressed,
-      size,
-      style,
-      testId,
-      type = undefined,
-      spinner,
-      icon,
-      id
-    } = _this$props,
-          restProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
-
+      {
+        children,
+        skipClientNav,
+        color,
+        disabled: disabledProp,
+        focused,
+        hovered,
+        href = undefined,
+        kind,
+        light,
+        pressed,
+        size,
+        style,
+        testId,
+        type = undefined,
+        spinner,
+        icon,
+        id
+      } = _this$props,
+      restProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
     const iconWidth = icon ? (size === "small" ? 16 : 24) + 8 : 0;
-
     const buttonStyles = _generateStyles(buttonColor, kind, light, iconWidth, size);
-
     const disabled = spinner || disabledProp;
     const defaultStyle = [sharedStyles.shared, disabled && sharedStyles.disabled, icon && sharedStyles.withIcon, buttonStyles.default, disabled && buttonStyles.disabled, kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "large" && sharedStyles.large];
-
-    const commonProps = _extends__default["default"]({
+    const commonProps = _extends({
       "data-test-id": testId,
       id: id,
       role: "button",
       style: [defaultStyle, style]
     }, restProps);
-
     const Label = size === "small" ? wonderBlocksTypography.LabelSmall : wonderBlocksTypography.LabelLarge;
     const iconSize = size === "small" ? "small" : "medium";
     const label = React__namespace.createElement(Label, {
@@ -94,37 +132,36 @@ class ButtonCore extends React__namespace.Component {
       icon: icon,
       style: sharedStyles.icon
     }), children);
+    const sizeMapping = {
+      medium: "small",
+      small: "xsmall",
+      large: "medium"
+    };
     const contents = React__namespace.createElement(React__namespace.Fragment, null, label, spinner && React__namespace.createElement(wonderBlocksProgressSpinner.CircularSpinner, {
       style: sharedStyles.spinner,
-      size: {
-        medium: "small",
-        small: "xsmall",
-        large: "medium"
-      }[size],
+      size: sizeMapping[size],
       light: kind === "primary",
       testId: `${testId || "button"}-spinner`
     }));
-
     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
-      }), contents) : React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
+      }), contents) : React__namespace.createElement(StyledAnchor, _extends({}, commonProps, {
         href: href
       }), contents);
     } else {
-      return React__namespace.createElement(StyledButton, _extends__default["default"]({
+      return React__namespace.createElement(StyledButton, _extends({
         type: type || "button"
       }, commonProps, {
         "aria-disabled": disabled
       }), contents);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
-  }
-
-}
+  };
+  return ButtonCore;
+}(React__namespace.Component);
 const sharedStyles = aphrodite.StyleSheet.create({
   shared: {
     position: "relative",
@@ -191,14 +228,11 @@ const sharedStyles = aphrodite.StyleSheet.create({
   }
 });
 const styles = {};
-
 const _generateStyles = (color, kind, light, iconWidth, size) => {
   const buttonType = color + kind + light.toString() + iconWidth.toString() + size;
-
   if (styles[buttonType]) {
     return styles[buttonType];
   }
-
   const {
     white,
     white50,
@@ -211,7 +245,6 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   const activeColor = Color.mix(offBlack32, color);
   const padding = size === "large" ? Spacing__default["default"].xLarge_32 : Spacing__default["default"].medium_16;
   let newStyles = {};
-
   if (kind === "primary") {
     newStyles = {
       default: {
@@ -328,37 +361,37 @@ const _generateStyles = (color, kind, light, iconWidth, size) => {
   } else {
     throw new Error("Button kind not recognized");
   }
-
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
 const _excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"];
-class Button extends React__namespace.Component {
-  renderClickableBehavior(router) {
+let Button = function (_React$Component) {
+  _inheritsLoose(Button, _React$Component);
+  function Button() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Button.prototype;
+  _proto.renderClickableBehavior = function renderClickableBehavior(router) {
     const _this$props = this.props,
-          {
-      href = undefined,
-      type = undefined,
-      children,
-      skipClientNav,
-      spinner,
-      disabled,
-      onClick,
-      beforeNav = undefined,
-      safeWithNav = undefined,
-      tabIndex,
-      target,
-      rel
-    } = _this$props,
-          sharedButtonCoreProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
-
+      {
+        href = undefined,
+        type = undefined,
+        children,
+        skipClientNav,
+        spinner,
+        disabled,
+        onClick,
+        beforeNav = undefined,
+        safeWithNav = undefined,
+        tabIndex,
+        target,
+        rel
+      } = _this$props,
+      sharedButtonCoreProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
     const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-
-    const renderProp = (state, _ref) => {
-      let restChildProps = _extends__default["default"]({}, _ref);
-
-      return React__namespace.createElement(ButtonCore, _extends__default["default"]({}, sharedButtonCoreProps, state, restChildProps, {
+    const renderProp = (state, restChildProps) => {
+      return React__namespace.createElement(ButtonCore, _extends({}, sharedButtonCoreProps, state, restChildProps, {
         disabled: disabled,
         spinner: spinner || state.waiting,
         skipClientNav: skipClientNav,
@@ -368,7 +401,6 @@ class Button extends React__namespace.Component {
         tabIndex: tabIndex
       }), children);
     };
-
     if (beforeNav) {
       return React__namespace.createElement(ClickableBehavior, {
         disabled: spinner || disabled,
@@ -392,13 +424,12 @@ class Button extends React__namespace.Component {
         rel: rel
       }, renderProp);
     }
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
-
-}
+  };
+  return Button;
+}(React__namespace.Component);
 Button.defaultProps = {
   color: "default",
   kind: "primary",

package/dist/index.js.flow

@@ -1,2 +1,11 @@
-// @flow
-export * from "../src/index.js";
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import Button from "./components/button";
+import type { SharedProps } from "./components/button";
+export type { SharedProps as ButtonProps };
+declare export { Button as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "3.0.13",
+  "version": "3.0.15",
   "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,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
-    "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.36",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.39",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.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",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.41",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.39"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,6 +31,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.7.0"
+    "wb-dev-build-settings": "^0.7.2"
   }
 }