@khanacademy/wonder-blocks-button 3.0.10 → 3.0.12

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-button
 
+## 3.0.12
+
+### Patch Changes
+
+-   Updated dependencies [496119f2]
+    -   @khanacademy/wonder-blocks-clickable@2.4.4
+    -   @khanacademy/wonder-blocks-core@4.6.2
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.39
+    -   @khanacademy/wonder-blocks-icon@1.2.35
+    -   @khanacademy/wonder-blocks-typography@1.1.37
+
+## 3.0.11
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.4.3
+-   @khanacademy/wonder-blocks-core@4.6.1
+-   @khanacademy/wonder-blocks-icon@1.2.34
+-   @khanacademy/wonder-blocks-progress-spinner@1.1.38
+-   @khanacademy/wonder-blocks-typography@1.1.36
+
 ## 3.0.10
 
 ### Patch Changes

package/dist/index.js

@@ -0,0 +1,411 @@
+'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');
+var aphrodite = require('aphrodite');
+var reactRouterDom = require('react-router-dom');
+var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
+var Color = require('@khanacademy/wonder-blocks-color');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksProgressSpinner = require('@khanacademy/wonder-blocks-progress-spinner');
+var Icon = require('@khanacademy/wonder-blocks-icon');
+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]; }
+                });
+            }
+        });
+    }
+    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);
+
+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) {
+    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);
+
+    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"]({
+      "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, {
+      style: [sharedStyles.text, size === "large" && sharedStyles.largeText, icon && sharedStyles.textWithIcon, spinner && sharedStyles.hiddenText, kind === "tertiary" && sharedStyles.textWithFocus, kind === "tertiary" && !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)]
+    }, icon && React__namespace.createElement(Icon__default["default"], {
+      size: iconSize,
+      color: "currentColor",
+      icon: icon,
+      style: sharedStyles.icon
+    }), children);
+    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],
+      light: kind === "primary",
+      testId: `${testId || "button"}-spinner`
+    }));
+
+    if (href && !disabled) {
+      return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends__default["default"]({}, commonProps, {
+        to: href
+      }), contents) : React__namespace.createElement(StyledAnchor, _extends__default["default"]({}, commonProps, {
+        href: href
+      }), contents);
+    } else {
+      return React__namespace.createElement(StyledButton, _extends__default["default"]({
+        type: type || "button"
+      }, commonProps, {
+        "aria-disabled": disabled
+      }), contents);
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderInner(router));
+  }
+
+}
+const sharedStyles = 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",
+    touchAction: "manipulation",
+    userSelect: "none",
+    ":focus": {
+      WebkitTapHighlightColor: "rgba(0,0,0,0)"
+    }
+  },
+  withIcon: {
+    paddingLeft: 12
+  },
+  disabled: {
+    cursor: "auto"
+  },
+  small: {
+    height: 32
+  },
+  large: {
+    borderRadius: Spacing__default["default"].xxSmall_6,
+    height: 56
+  },
+  text: {
+    alignItems: "center",
+    fontWeight: "bold",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "inline-block",
+    pointerEvents: "none"
+  },
+  largeText: {
+    fontSize: 18,
+    lineHeight: "20px"
+  },
+  textWithIcon: {
+    display: "flex"
+  },
+  textWithFocus: {
+    position: "relative"
+  },
+  hiddenText: {
+    visibility: "hidden"
+  },
+  spinner: {
+    position: "absolute"
+  },
+  icon: {
+    paddingRight: Spacing__default["default"].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
+  } = Color__default["default"];
+  const fadedColor = Color.mix(Color.fade(color, 0.32), white);
+  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: {
+        background: light ? white : color,
+        color: light ? color : white,
+        paddingLeft: padding,
+        paddingRight: padding
+      },
+      focus: {
+        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",
+        ":focus": {
+          boxShadow: `0 0 0 1px ${light ? offBlack32 : white}, 0 0 0 3px ${light ? fadedColor : offBlack32}`
+        }
+      }
+    };
+  } 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,
+        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingRight: padding - 1
+      },
+      active: {
+        background: light ? activeColor : fadedColor,
+        color: light ? fadedColor : activeColor,
+        borderColor: light ? fadedColor : activeColor,
+        borderWidth: 2,
+        paddingLeft: iconWidth ? padding - 5 : padding - 1,
+        paddingRight: padding - 1
+      },
+      disabled: {
+        color: light ? white50 : offBlack32,
+        borderColor: light ? fadedColor : offBlack32,
+        cursor: "default",
+        ":focus": {
+          borderColor: light ? white50 : offBlack32,
+          borderWidth: 2,
+          paddingLeft: iconWidth ? padding - 5 : padding - 1,
+          paddingRight: padding - 1
+        }
+      }
+    };
+  } 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: -1,
+          background: light ? fadedColor : activeColor,
+          borderRadius: 2
+        }
+      },
+      disabled: {
+        color: light ? fadedColor : offBlack32,
+        cursor: "default",
+        ":focus": {
+          ":after": {
+            content: "''",
+            position: "absolute",
+            height: 2,
+            width: `calc(100% - ${iconWidth}px)`,
+            right: 0,
+            bottom: `calc(50% - 11px)`,
+            background: light ? white : offBlack32,
+            borderRadius: 2
+          }
+        }
+      }
+    };
+  } 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) {
+    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);
+
+    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, {
+        disabled: disabled,
+        spinner: spinner || state.waiting,
+        skipClientNav: skipClientNav,
+        href: href,
+        target: target,
+        type: type,
+        tabIndex: tabIndex
+      }), children);
+    };
+
+    if (beforeNav) {
+      return React__namespace.createElement(ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        rel: rel
+      }, renderProp);
+    } else {
+      return React__namespace.createElement(ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        rel: rel
+      }, renderProp);
+    }
+  }
+
+  render() {
+    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
+  }
+
+}
+Button.defaultProps = {
+  color: "default",
+  kind: "primary",
+  light: false,
+  size: "medium",
+  disabled: false,
+  spinner: false
+};
+
+module.exports = Button;

package/dist/index.js.flow

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-button",
-  "version": "3.0.10",
+  "version": "3.0.12",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,13 +16,13 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.4.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.4.4",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.6.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.33",
-    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.37",
+    "@khanacademy/wonder-blocks-core": "^4.6.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.35",
+    "@khanacademy/wonder-blocks-progress-spinner": "^1.1.39",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.35"
+    "@khanacademy/wonder-blocks-typography": "^1.1.37"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
@@ -31,6 +31,6 @@
     "react-router-dom": "5.3.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.5.0"
+    "wb-dev-build-settings": "^0.7.0"
   }
 }