@khanacademy/wonder-blocks-button 2.9.13

package/LICENSE

@@ -0,0 +1,21 @@
+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.

package/dist/es/index.js

@@ -0,0 +1,402 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
+import { Component, createElement, Fragment } from 'react';
+import { any } from 'prop-types';
+import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { StyleSheet } from 'aphrodite';
+import { Link } from 'react-router-dom';
+import { LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
+import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
+import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { CircularSpinner } from '@khanacademy/wonder-blocks-progress-spinner';
+import Icon from '@khanacademy/wonder-blocks-icon';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+
+const _excluded = ["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 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(_this$props, _excluded);
+
+    const {
+      router
+    } = this.context;
+    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, // 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({
+      "data-test-id": testId,
+      id: id,
+      role: "button",
+      style: [defaultStyle, style]
+    }, restProps);
+
+    const Label = size === "small" ? LabelSmall : LabelLarge;
+    const label = /*#__PURE__*/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__*/createElement(Icon, {
+      size: size,
+      color: "currentColor",
+      icon: icon,
+      style: sharedStyles.icon
+    }), children);
+    const contents = /*#__PURE__*/createElement(Fragment, null, label, spinner && /*#__PURE__*/createElement(CircularSpinner, {
+      style: sharedStyles.spinner,
+      size: {
+        medium: "small",
+        small: "xsmall",
+        xlarge: "medium"
+      }[size],
+      light: kind === "primary"
+    }));
+
+    if (href && !disabled) {
+      return router && !skipClientNav && isClientSideUrl(href) ? /*#__PURE__*/createElement(StyledLink, _extends({}, commonProps, {
+        to: href
+      }), contents) : /*#__PURE__*/createElement(StyledAnchor, _extends({}, commonProps, {
+        href: href
+      }), contents);
+    } else {
+      return /*#__PURE__*/createElement(StyledButton, _extends({
+        type: type || "button"
+      }, commonProps, {
+        disabled: disabled
+      }), contents);
+    }
+  }
+
+}
+ButtonCore.contextTypes = {
+  router: any
+};
+const sharedStyles = 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: Spacing.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;
+  const fadedColor = mix(fade(color, 0.32), white);
+  const activeColor = mix(offBlack32, color);
+  const padding = size === "xlarge" ? Spacing.xLarge_32 : Spacing.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] = StyleSheet.create(newStyles);
+  return styles[buttonType];
+};
+
+const _excluded$1 = ["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 extends 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(_this$props, _excluded$1);
+
+    const ClickableBehavior = getClickableBehavior(href, skipClientNav, this.context.router);
+
+    const renderProp = (state, _ref) => {
+      let {
+        tabIndex: clickableTabIndex
+      } = _ref,
+          restChildProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+
+      return /*#__PURE__*/createElement(ButtonCore, _extends({}, 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__*/createElement(ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        beforeNav: beforeNav,
+        safeWithNav: safeWithNav,
+        rel: rel
+      }, renderProp);
+    } else {
+      return /*#__PURE__*/createElement(ClickableBehavior, {
+        disabled: spinner || disabled,
+        href: href,
+        role: "button",
+        type: type,
+        onClick: onClick,
+        safeWithNav: safeWithNav,
+        target: target,
+        rel: rel
+      }, renderProp);
+    }
+  }
+
+}
+Button.contextTypes = {
+  router: any
+};
+Button.defaultProps = {
+  color: "default",
+  kind: "primary",
+  light: false,
+  size: "medium",
+  disabled: false,
+  spinner: false
+};
+
+export default Button;