@khanacademy/wonder-blocks-button 2.9.13

package/dist/index.js

@@ -0,0 +1,668 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = require("react");
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports) {
+
+function _extends() {
+  module.exports = _extends = Object.assign || 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;
+  };
+
+  module.exports["default"] = module.exports, module.exports.__esModule = true;
+  return _extends.apply(this, arguments);
+}
+
+module.exports = _extends;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports) {
+
+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;
+}
+
+module.exports = _objectWithoutPropertiesLoose;
+module.exports["default"] = module.exports, module.exports.__esModule = true;
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-clickable");
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-core");
+
+/***/ }),
+/* 7 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-spacing");
+
+/***/ }),
+/* 8 */
+/***/ (function(module, exports) {
+
+module.exports = require("aphrodite");
+
+/***/ }),
+/* 9 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-typography");
+
+/***/ }),
+/* 10 */
+/***/ (function(module, exports) {
+
+module.exports = require("react-router-dom");
+
+/***/ }),
+/* 11 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-progress-spinner");
+
+/***/ }),
+/* 12 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-icon");
+
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, "default", function() { return /* reexport */ button_Button; });
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/extends.js
+var helpers_extends = __webpack_require__(1);
+var extends_default = /*#__PURE__*/__webpack_require__.n(helpers_extends);
+
+// EXTERNAL MODULE: ./node_modules/@babel/runtime/helpers/objectWithoutPropertiesLoose.js
+var objectWithoutPropertiesLoose = __webpack_require__(3);
+var objectWithoutPropertiesLoose_default = /*#__PURE__*/__webpack_require__.n(objectWithoutPropertiesLoose);
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(0);
+
+// EXTERNAL MODULE: external "prop-types"
+var external_prop_types_ = __webpack_require__(4);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-clickable"
+var wonder_blocks_clickable_ = __webpack_require__(5);
+
+// EXTERNAL MODULE: external "aphrodite"
+var external_aphrodite_ = __webpack_require__(8);
+
+// EXTERNAL MODULE: external "react-router-dom"
+var external_react_router_dom_ = __webpack_require__(10);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-typography"
+var wonder_blocks_typography_ = __webpack_require__(9);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-color"
+var wonder_blocks_color_ = __webpack_require__(2);
+var wonder_blocks_color_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_color_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-core"
+var wonder_blocks_core_ = __webpack_require__(6);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-progress-spinner"
+var wonder_blocks_progress_spinner_ = __webpack_require__(11);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-icon"
+var wonder_blocks_icon_ = __webpack_require__(12);
+var wonder_blocks_icon_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_icon_);
+
+// EXTERNAL MODULE: external "@khanacademy/wonder-blocks-spacing"
+var wonder_blocks_spacing_ = __webpack_require__(7);
+var wonder_blocks_spacing_default = /*#__PURE__*/__webpack_require__.n(wonder_blocks_spacing_);
+
+// CONCATENATED MODULE: ./packages/wonder-blocks-button/src/components/button-core.js
+
+
+const _excluded = ["children", "skipClientNav", "color", "disabled", "focused", "hovered", "href", "kind", "light", "pressed", "size", "style", "testId", "type", "spinner", "icon", "id", "waiting"];
+
+
+
+
+
+
+
+
+
+
+
+const StyledAnchor = Object(wonder_blocks_core_["addStyle"])("a");
+const StyledButton = Object(wonder_blocks_core_["addStyle"])("button");
+const StyledLink = Object(wonder_blocks_core_["addStyle"])(external_react_router_dom_["Link"]);
+class button_core_ButtonCore extends external_react_["Component"] {
+  render() {
+    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()(_this$props, _excluded);
+
+    const {
+      router
+    } = this.context;
+    const buttonColor = color === "destructive" ? wonder_blocks_color_["SemanticColor"].controlDestructive : wonder_blocks_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, // apply focus effect only to default and secondary buttons
+    kind !== "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus), size === "small" && sharedStyles.small, size === "xlarge" && sharedStyles.xlarge];
+
+    const commonProps = extends_default()({
+      "data-test-id": testId,
+      id: id,
+      role: "button",
+      style: [defaultStyle, style]
+    }, restProps);
+
+    const Label = size === "small" ? wonder_blocks_typography_["LabelSmall"] : wonder_blocks_typography_["LabelLarge"];
+    const label = /*#__PURE__*/external_react_["createElement"](Label, {
+      style: [sharedStyles.text, size === "xlarge" && sharedStyles.xlargeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, // apply focus effect on the label instead
+      kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
+    }, icon && /*#__PURE__*/external_react_["createElement"](wonder_blocks_icon_default.a, {
+      size: size,
+      color: "currentColor",
+      icon: icon,
+      style: sharedStyles.icon
+    }), children);
+    const contents = /*#__PURE__*/external_react_["createElement"](external_react_["Fragment"], null, label, spinner && /*#__PURE__*/external_react_["createElement"](wonder_blocks_progress_spinner_["CircularSpinner"], {
+      style: sharedStyles.spinner,
+      size: {
+        medium: "small",
+        small: "xsmall",
+        xlarge: "medium"
+      }[size],
+      light: kind === "primary"
+    }));
+
+    if (href && !disabled) {
+      return router && !skipClientNav && Object(wonder_blocks_clickable_["isClientSideUrl"])(href) ? /*#__PURE__*/external_react_["createElement"](StyledLink, extends_default()({}, commonProps, {
+        to: href
+      }), contents) : /*#__PURE__*/external_react_["createElement"](StyledAnchor, extends_default()({}, commonProps, {
+        href: href
+      }), contents);
+    } else {
+      return /*#__PURE__*/external_react_["createElement"](StyledButton, extends_default()({
+        type: type || "button"
+      }, commonProps, {
+        disabled: disabled
+      }), contents);
+    }
+  }
+
+}
+button_core_ButtonCore.contextTypes = {
+  router: external_prop_types_["any"]
+};
+const sharedStyles = external_aphrodite_["StyleSheet"].create({
+  shared: {
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: 40,
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: 16,
+    paddingRight: 16,
+    border: "none",
+    borderRadius: 4,
+    cursor: "pointer",
+    outline: "none",
+    textDecoration: "none",
+    boxSizing: "border-box",
+    // This removes the 300ms click delay on mobile browsers by indicating that
+    // "double-tap to zoom" shouldn't be used on this element.
+    touchAction: "manipulation",
+    userSelect: "none",
+    ":focus": {
+      // Mobile: Removes a blue highlight style shown when the user clicks a button
+      WebkitTapHighlightColor: "rgba(0,0,0,0)"
+    }
+  },
+  withIcon: {
+    // The left padding for the button with icon should have 4px less padding
+    paddingLeft: 12
+  },
+  disabled: {
+    cursor: "auto"
+  },
+  small: {
+    height: 32
+  },
+  xlarge: {
+    height: 60
+  },
+  text: {
+    alignItems: "center",
+    fontWeight: "bold",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "inline-block",
+    // allows the button text to truncate
+    pointerEvents: "none" // fix Safari bug where the browser was eating mouse events
+
+  },
+  xlargeText: {
+    fontSize: 18,
+    lineHeight: "20px"
+  },
+  textWithIcon: {
+    display: "flex" // allows the text and icon to sit nicely together
+
+  },
+  textWithFocus: {
+    position: "relative" // allows the tertiary button border to use the label width
+
+  },
+  hiddenText: {
+    visibility: "hidden"
+  },
+  spinner: {
+    position: "absolute"
+  },
+  icon: {
+    paddingRight: wonder_blocks_spacing_default.a.xSmall_8
+  }
+});
+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,
+    white64,
+    offBlack32,
+    offBlack50,
+    darkBlue
+  } = wonder_blocks_color_default.a;
+  const fadedColor = Object(wonder_blocks_color_["mix"])(Object(wonder_blocks_color_["fade"])(color, 0.32), white);
+  const activeColor = Object(wonder_blocks_color_["mix"])(offBlack32, color);
+  const padding = size === "xlarge" ? wonder_blocks_spacing_default.a.xLarge_32 : wonder_blocks_spacing_default.a.medium_16;
+  let newStyles = {};
+
+  if (kind === "primary") {
+    newStyles = {
+      default: {
+        background: light ? white : color,
+        color: light ? color : white,
+        paddingLeft: padding,
+        paddingRight: padding
+      },
+      focus: {
+        // This assumes a background of white for the regular button and
+        // a background of darkBlue for the light version. The inner
+        // box shadow/ring is also small enough for a slight variation
+        // in the background color not to matter too much.
+        boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? white : color}`
+      },
+      active: {
+        boxShadow: `0 0 0 1px ${light ? darkBlue : white}, 0 0 0 3px ${light ? fadedColor : activeColor}`,
+        background: light ? fadedColor : activeColor,
+        color: light ? activeColor : fadedColor
+      },
+      disabled: {
+        background: light ? fadedColor : offBlack32,
+        color: light ? color : white64,
+        cursor: "default"
+      }
+    };
+  } else if (kind === "secondary") {
+    newStyles = {
+      default: {
+        background: "none",
+        color: light ? white : color,
+        borderColor: light ? white50 : offBlack50,
+        borderStyle: "solid",
+        borderWidth: 1,
+        paddingLeft: iconWidth ? padding - 4 : padding,
+        paddingRight: padding
+      },
+      focus: {
+        background: light ? "transparent" : white,
+        borderColor: light ? white : color,
+        borderWidth: 2,
+        // The left padding for the button with icon should have 4px
+        // less padding
+        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingRight: padding - 1
+      },
+      active: {
+        background: light ? activeColor : fadedColor,
+        color: light ? fadedColor : activeColor,
+        borderColor: light ? fadedColor : activeColor,
+        borderWidth: 2,
+        // The left padding for the button with icon should have 4px
+        // less padding
+        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingRight: padding - 1
+      },
+      disabled: {
+        color: light ? white50 : offBlack32,
+        borderColor: light ? fadedColor : offBlack32,
+        cursor: "default"
+      }
+    };
+  } else if (kind === "tertiary") {
+    newStyles = {
+      default: {
+        background: "none",
+        color: light ? white : color,
+        paddingLeft: 0,
+        paddingRight: 0
+      },
+      focus: {
+        ":after": {
+          content: "''",
+          position: "absolute",
+          height: 2,
+          width: `calc(100% - ${iconWidth}px)`,
+          right: 0,
+          bottom: 0,
+          background: light ? white : color,
+          borderRadius: 2
+        }
+      },
+      active: {
+        color: light ? fadedColor : activeColor,
+        ":after": {
+          content: "''",
+          position: "absolute",
+          height: 2,
+          width: `calc(100% - ${iconWidth}px)`,
+          right: 0,
+          bottom: "calc(50% - 11px)",
+          background: light ? fadedColor : activeColor,
+          borderRadius: 2
+        }
+      },
+      disabled: {
+        color: light ? fadedColor : offBlack32,
+        cursor: "default"
+      }
+    };
+  } else {
+    throw new Error("Button kind not recognized");
+  }
+
+  styles[buttonType] = external_aphrodite_["StyleSheet"].create(newStyles);
+  return styles[buttonType];
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-button/src/components/button.js
+
+
+const button_excluded = ["href", "type", "children", "skipClientNav", "spinner", "disabled", "onClick", "beforeNav", "safeWithNav", "tabIndex", "target", "rel"],
+      _excluded2 = ["tabIndex"];
+
+
+
+
+
+/**
+ * Reusable button component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
+ * `ButtonCore` is a stateless component which displays the different states
+ * the `Button` can take.
+ *
+ * Example usage:
+ * ```jsx
+ * <Button
+ *     onClick={(e) => console.log("Hello, world!")}
+ * >
+ *     Label
+ * </Button>
+ * ```
+ */
+class button_Button extends external_react_["Component"] {
+  render() {
+    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()(_this$props, button_excluded);
+
+    const ClickableBehavior = Object(wonder_blocks_clickable_["getClickableBehavior"])(href, skipClientNav, this.context.router);
+
+    const renderProp = (state, _ref) => {
+      let {
+        tabIndex: clickableTabIndex
+      } = _ref,
+          restChildProps = objectWithoutPropertiesLoose_default()(_ref, _excluded2);
+
+      return /*#__PURE__*/external_react_["createElement"](button_core_ButtonCore, extends_default()({}, sharedButtonCoreProps, state, restChildProps, {
+        disabled: disabled,
+        spinner: spinner || state.waiting,
+        skipClientNav: skipClientNav,
+        href: href,
+        target: target,
+        type: type // If tabIndex is provide to the component we allow
+        // it to override the tabIndex provide to use by
+        // ClickableBehavior.
+        ,
+        tabIndex: tabIndex || clickableTabIndex
+      }), children);
+    };
+
+    if (beforeNav) {
+      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        rel: rel
+      }, renderProp);
+    } else {
+      return /*#__PURE__*/external_react_["createElement"](ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        rel: rel
+      }, renderProp);
+    }
+  }
+
+}
+button_Button.contextTypes = {
+  router: external_prop_types_["any"]
+};
+button_Button.defaultProps = {
+  color: "default",
+  kind: "primary",
+  light: false,
+  size: "medium",
+  disabled: false,
+  spinner: false
+};
+// CONCATENATED MODULE: ./packages/wonder-blocks-button/src/index.js
+
+
+
+/***/ })
+/******/ ]);

package/dist/index.js.flow

@@ -0,0 +1,2 @@
+// @flow
+export * from "../src/index.js";