@khanacademy/wonder-blocks-icon-button 5.0.0 → 5.1.0

package/dist/index.js

@@ -1,15 +1,13 @@
 'use strict';
 
 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 Color = require('@khanacademy/wonder-blocks-color');
+var reactRouter = require('react-router');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,11 +28,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure " + obj);
-}
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -80,7 +73,155 @@ const targetPixelsForSize = size => ({
   medium: 40
 })[size];
 
-const _excluded$1 = ["color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "size", "skipClientNav", "style", "testId", "waiting"];
+const theme$1 = {
+  color: {
+    bg: {
+      hovered: "transparent",
+      active: "transparent",
+      disabled: "transparent",
+      filled: {
+        action: {
+          hovered: "transparent",
+          active: "transparent"
+        },
+        critical: {
+          hovered: "transparent",
+          active: "transparent"
+        }
+      }
+    },
+    stroke: {
+      disabled: {
+        default: wonderBlocksTheming.tokens.color.offBlack32,
+        inverse: wonderBlocksTheming.tokens.color.white50
+      },
+      inverse: wonderBlocksTheming.tokens.color.white,
+      action: {
+        default: wonderBlocksTheming.tokens.color.blue,
+        active: wonderBlocksTheming.tokens.color.activeBlue,
+        inverse: wonderBlocksTheming.tokens.color.fadedBlue
+      },
+      critical: {
+        default: wonderBlocksTheming.tokens.color.red,
+        active: wonderBlocksTheming.tokens.color.activeRed,
+        inverse: wonderBlocksTheming.tokens.color.fadedRed
+      },
+      primary: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        },
+        inverse: {
+          default: wonderBlocksTheming.tokens.color.white,
+          hovered: wonderBlocksTheming.tokens.color.white
+        }
+      },
+      secondary: {
+        default: wonderBlocksTheming.tokens.color.offBlack
+      },
+      tertiary: {
+        default: wonderBlocksTheming.tokens.color.offBlack64
+      },
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      default: wonderBlocksTheming.tokens.border.width.thin,
+      active: wonderBlocksTheming.tokens.border.width.none,
+      hovered: wonderBlocksTheming.tokens.border.width.thin,
+      hoveredInverse: wonderBlocksTheming.tokens.border.width.thin
+    },
+    radius: {
+      default: wonderBlocksTheming.tokens.border.radius.medium_4
+    }
+  }
+};
+
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      hovered: wonderBlocksTheming.tokens.color.white,
+      active: wonderBlocksTheming.tokens.color.white64,
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.blue,
+          active: wonderBlocksTheming.tokens.color.activeBlue
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.red,
+          active: wonderBlocksTheming.tokens.color.activeRed
+        }
+      }
+    },
+    stroke: {
+      action: {
+        inverse: wonderBlocksTheming.tokens.color.eggplant
+      },
+      critical: {
+        inverse: wonderBlocksTheming.tokens.color.eggplant
+      },
+      primary: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant,
+          active: wonderBlocksTheming.tokens.color.eggplant
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant,
+          active: wonderBlocksTheming.tokens.color.eggplant
+        },
+        inverse: {
+          hovered: wonderBlocksTheming.tokens.color.eggplant
+        }
+      },
+      filled: {
+        action: {
+          hovered: wonderBlocksTheming.tokens.color.white,
+          active: wonderBlocksTheming.tokens.color.white
+        },
+        critical: {
+          hovered: wonderBlocksTheming.tokens.color.white,
+          active: wonderBlocksTheming.tokens.color.white
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      hovered: wonderBlocksTheming.tokens.border.width.none,
+      hoveredInverse: wonderBlocksTheming.tokens.border.width.none
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const IconButtonThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
+function ThemedIconButton(props) {
+  var _themes$currentTheme;
+  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
+  const theme = (_themes$currentTheme = themes[currentTheme]) != null ? _themes$currentTheme : theme$1;
+  return React__namespace.createElement(IconButtonThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
+const _excluded$1 = ["color", "disabled", "href", "icon", "kind", "light", "size", "skipClientNav", "style", "testId"];
 function IconChooser({
   icon,
   size
@@ -109,23 +250,23 @@ const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props
   const {
       color,
       disabled,
-      focused,
-      hovered,
       href,
       icon,
       kind = "primary",
       light = false,
-      pressed,
       size = "medium",
       skipClientNav,
       style,
       testId
     } = props,
     restProps = _objectWithoutPropertiesLoose(props, _excluded$1);
+  const {
+    theme,
+    themeName
+  } = wonderBlocksTheming.useScopedTheme(IconButtonThemeContext);
   const renderInner = router => {
-    const buttonColor = color === "destructive" ? Color.SemanticColor.controlDestructive : Color.SemanticColor.controlDefault;
-    const buttonStyles = _generateStyles(buttonColor, kind, light, size);
-    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled, !disabled && (pressed ? buttonStyles.active : (hovered || focused) && buttonStyles.focus)];
+    const buttonStyles = _generateStyles(color, kind, light, size, theme, themeName);
+    const defaultStyle = [sharedStyles.shared, buttonStyles.default, disabled && buttonStyles.disabled];
     const child = React__namespace.createElement(IconChooser, {
       size: size,
       icon: icon
@@ -146,7 +287,8 @@ const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props
       return React__namespace.createElement(StyledButton, _extends({
         type: "button"
       }, commonProps, {
-        disabled: disabled,
+        onClick: disabled ? undefined : restProps.onClick,
+        "aria-disabled": disabled,
         ref: ref
       }), child);
     }
@@ -167,70 +309,141 @@ const sharedStyles = aphrodite.StyleSheet.create({
     textDecoration: "none",
     background: "none",
     margin: -8,
-    touchAction: "manipulation",
-    ":focus": {
-      WebkitTapHighlightColor: "rgba(0,0,0,0)"
-    }
+    touchAction: "manipulation"
   }
 });
 const styles = {};
-const _generateStyles = (color, kind, light, size) => {
-  const buttonType = `${color}-${kind}-${light}-${size}`;
+function getStylesByKind(kind, theme, color, light, buttonColor) {
+  switch (kind) {
+    case "primary":
+      const primaryHoveredColor = buttonColor === "destructive" ? theme.color.stroke.primary.critical.hovered : theme.color.stroke.primary.action.hovered;
+      return {
+        ":hover": {
+          backgroundColor: theme.color.bg.hovered,
+          color: light ? theme.color.stroke.primary.inverse.hovered : primaryHoveredColor,
+          outlineColor: light ? theme.color.stroke.inverse : color,
+          outlineOffset: 1,
+          outlineStyle: "solid",
+          outlineWidth: light ? theme.border.width.hoveredInverse : theme.border.width.hovered
+        },
+        ":active": {
+          backgroundColor: theme.color.bg.active
+        }
+      };
+    case "secondary":
+    case "tertiary":
+      return {
+        ":hover": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.hovered : theme.color.bg.filled.action.hovered,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.hovered : theme.color.stroke.filled.action.hovered,
+          outlineWidth: theme.border.width.active
+        },
+        ":active": {
+          backgroundColor: buttonColor === "destructive" ? theme.color.bg.filled.critical.active : theme.color.bg.filled.action.active,
+          color: buttonColor === "destructive" ? theme.color.stroke.filled.critical.active : theme.color.stroke.filled.action.active,
+          outlineWidth: theme.border.width.active
+        }
+      };
+    default:
+      return {
+        ":focus-visible": {},
+        ":hover": {},
+        ":active": {}
+      };
+  }
+}
+const _generateStyles = (buttonColor = "default", kind, light, size, theme, themeName) => {
+  const color = buttonColor === "destructive" ? theme.color.stroke.critical.default : theme.color.stroke.action.default;
+  const buttonType = `${color}-${kind}-${light}-${size}-${themeName}`;
   if (styles[buttonType]) {
     return styles[buttonType];
   }
   if (light && kind !== "primary") {
     throw new Error("Light is only supported for primary IconButtons");
   }
-  const {
-    white,
-    offBlack32,
-    offBlack64,
-    offBlack
-  } = Color__default["default"];
   const defaultColor = (() => {
     switch (kind) {
       case "primary":
-        return light ? white : color;
+        return light ? theme.color.stroke.primary.inverse.default : color;
       case "secondary":
-        return offBlack;
+        return theme.color.stroke.secondary.default;
       case "tertiary":
-        return offBlack64;
+        return theme.color.stroke.tertiary.default;
       default:
         throw new Error("IconButton kind not recognized");
     }
   })();
   const pixelsForSize = targetPixelsForSize(size);
+  const kindOverrides = getStylesByKind(kind, theme, color, light, buttonColor);
+  const activeInverseColor = buttonColor === "destructive" ? theme.color.stroke.critical.inverse : theme.color.stroke.action.inverse;
+  const activeColor = buttonColor === "destructive" ? theme.color.stroke.critical.active : theme.color.stroke.action.active;
+  const defaultStrokeColor = light ? theme.color.stroke.inverse : color;
+  const disabledStrokeColor = light ? theme.color.stroke.disabled.inverse : theme.color.stroke.disabled.default;
+  const disabledStatesStyles = {
+    backgroundColor: theme.color.bg.disabled,
+    color: disabledStrokeColor,
+    outlineColor: disabledStrokeColor
+  };
   const newStyles = {
     default: {
       height: pixelsForSize,
       width: pixelsForSize,
-      color: defaultColor
-    },
-    focus: {
-      color: light ? white : color,
-      borderWidth: 2,
-      borderColor: light ? white : color,
-      borderStyle: "solid",
-      borderRadius: 4
-    },
-    active: {
-      color: light ? Color.mix(Color.fade(color, 0.32), white) : Color.mix(offBlack32, color),
-      borderWidth: 2,
-      borderColor: light ? Color.mix(Color.fade(color, 0.32), white) : Color.mix(offBlack32, color),
-      borderStyle: "solid",
-      borderRadius: 4
+      color: defaultColor,
+      borderRadius: theme.border.radius.default,
+      ":hover": _extends({
+        boxShadow: "none",
+        color: defaultStrokeColor,
+        borderRadius: theme.border.radius.default,
+        outlineWidth: theme.border.width.default
+      }, kindOverrides[":hover"]),
+      ":focus": {
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${defaultStrokeColor}`,
+        borderRadius: theme.border.radius.default
+      },
+      ":focus:not(:focus-visible)": {
+        boxShadow: "none"
+      },
+      ":focus-visible": _extends({
+        boxShadow: "none",
+        outlineWidth: theme.border.width.default,
+        outlineColor: defaultStrokeColor,
+        outlineOffset: 1,
+        outlineStyle: "solid",
+        borderRadius: theme.border.radius.default
+      }, kindOverrides[":focus-visible"]),
+      ":active": _extends({
+        color: light ? activeInverseColor : activeColor,
+        outlineWidth: theme.border.width.default,
+        outlineColor: light ? activeInverseColor : activeColor,
+        outlineOffset: 1,
+        outlineStyle: "solid",
+        borderRadius: theme.border.radius.default
+      }, kindOverrides[":active"])
     },
     disabled: {
-      color: light ? Color.mix(Color.fade(white, 0.32), color) : offBlack32,
-      cursor: "default"
+      color: disabledStrokeColor,
+      cursor: "not-allowed",
+      ":hover": _extends({}, disabledStatesStyles, {
+        outline: "none"
+      }),
+      ":active": _extends({}, disabledStatesStyles, {
+        outline: "none"
+      }),
+      ":focus": {
+        boxShadow: `0 0 0 ${theme.border.width.default}px ${disabledStrokeColor}`,
+        borderRadius: theme.border.radius.default
+      },
+      ":focus:not(:focus-visible)": {
+        boxShadow: "none"
+      },
+      ":focus-visible": disabledStatesStyles
     }
   };
   styles[buttonType] = aphrodite.StyleSheet.create(newStyles);
   return styles[buttonType];
 };
 
-const _excluded = ["color", "disabled", "href", "kind", "light", "onClick", "size", "skipClientNav", "tabIndex", "target"];
+const _excluded = ["color", "disabled", "href", "kind", "light", "size", "skipClientNav", "tabIndex", "target"];
 const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
   const {
       color = "default",
@@ -238,38 +451,24 @@ const IconButton = React__namespace.forwardRef(function IconButton(props, ref) {
       href,
       kind = "primary",
       light = false,
-      onClick,
       size = "medium",
       skipClientNav,
       tabIndex,
       target
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const renderClickableBehavior = router => {
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-    return React__namespace.createElement(ClickableBehavior, {
-      disabled: disabled,
-      href: href,
-      onClick: onClick,
-      role: "button",
-      target: target
-    }, (state, _ref) => {
-      let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-      return React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, state, childrenProps, {
-        color: color,
-        disabled: disabled,
-        href: href,
-        kind: kind,
-        light: light,
-        ref: ref,
-        skipClientNav: skipClientNav,
-        size: size,
-        target: target,
-        tabIndex: tabIndex
-      }));
-    });
-  };
-  return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  return React__namespace.createElement(ThemedIconButton, null, React__namespace.createElement(IconButtonCore, _extends({}, sharedProps, {
+    color: color,
+    disabled: disabled,
+    href: href,
+    kind: kind,
+    light: light,
+    ref: ref,
+    skipClientNav: skipClientNav,
+    size: size,
+    target: target,
+    tabIndex: tabIndex
+  })));
 });
 
 module.exports = IconButton;

package/dist/themes/default.d.ts

@@ -0,0 +1,93 @@
+declare const theme: {
+    color: {
+        bg: {
+            /**
+             * Default
+             */
+            hovered: string;
+            active: string;
+            disabled: string;
+            /**
+             * Kind
+             */
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
+        stroke: {
+            /**
+             * Default
+             */
+            disabled: {
+                default: string;
+                inverse: string;
+            };
+            inverse: string;
+            /**
+             * Color
+             */
+            action: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            critical: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            /**
+             * Kind
+             */
+            primary: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+                inverse: {
+                    default: string;
+                    hovered: string;
+                };
+            };
+            secondary: {
+                default: string;
+            };
+            tertiary: {
+                default: string;
+            };
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
+    };
+    border: {
+        width: {
+            default: number;
+            active: number;
+            hovered: number;
+            hoveredInverse: number;
+        };
+        radius: {
+            default: number;
+        };
+    };
+};
+export default theme;

package/dist/themes/khanmigo.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The overrides for the Khanmigo theme.
+ */
+declare const theme: {
+    color: {
+        bg: {
+            hovered: string;
+            active: string;
+            disabled: string;
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
+        stroke: {
+            disabled: {
+                default: string;
+                inverse: string;
+            };
+            inverse: string;
+            action: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            critical: {
+                default: string;
+                active: string;
+                inverse: string;
+            };
+            primary: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+                inverse: {
+                    default: string;
+                    hovered: string;
+                };
+            };
+            secondary: {
+                default: string;
+            };
+            tertiary: {
+                default: string;
+            };
+            filled: {
+                action: {
+                    hovered: string;
+                    active: string;
+                };
+                critical: {
+                    hovered: string;
+                    active: string;
+                };
+            };
+        };
+    };
+    border: {
+        width: {
+            default: number;
+            active: number;
+            hovered: number;
+            hoveredInverse: number;
+        };
+        radius: {
+            default: number;
+        };
+    };
+};
+export default theme;