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

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 5.1.0
+
+### Minor Changes
+
+-   ae97aeb6: Add theming support to the IconButton component
+-   22ccc5a9: Switch to pseudo-classes (`:hover, :focus-visible, :active`)
+-   0d875501: Add khanmigo theme to `IconButton`
+
+### Patch Changes
+
+-   Updated dependencies [3f854fe8]
+    -   @khanacademy/wonder-blocks-theming@1.2.0
+
+## 5.0.1
+
+### Patch Changes
+
+-   Updated dependencies [7055ca94]
+    -   @khanacademy/wonder-blocks-core@6.3.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.9
+    -   @khanacademy/wonder-blocks-icon@2.2.1
+
 ## 5.0.0
 
 ### Major Changes

package/dist/components/icon-button-core.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { Link } from "react-router-dom";
-import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
 import type { SharedProps } from "./icon-button";
-type Props = SharedProps & ChildrenProps & ClickableState & {
+type Props = SharedProps & {
     /**
      * URL to navigate to.
      *

package/dist/es/index.js

@@ -1,15 +1,11 @@
 import * as React from 'react';
-import { __RouterContext } from 'react-router';
-import { isClientSideUrl, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
-import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
+import { __RouterContext } from 'react-router';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { isClientSideUrl } from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
-
-function _objectDestructuringEmpty(obj) {
-  if (obj == null) throw new TypeError("Cannot destructure " + obj);
-}
+import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme } from '@khanacademy/wonder-blocks-theming';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -55,7 +51,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: tokens.color.offBlack32,
+        inverse: tokens.color.white50
+      },
+      inverse: tokens.color.white,
+      action: {
+        default: tokens.color.blue,
+        active: tokens.color.activeBlue,
+        inverse: tokens.color.fadedBlue
+      },
+      critical: {
+        default: tokens.color.red,
+        active: tokens.color.activeRed,
+        inverse: tokens.color.fadedRed
+      },
+      primary: {
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        },
+        inverse: {
+          default: tokens.color.white,
+          hovered: tokens.color.white
+        }
+      },
+      secondary: {
+        default: tokens.color.offBlack
+      },
+      tertiary: {
+        default: tokens.color.offBlack64
+      },
+      filled: {
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      default: tokens.border.width.thin,
+      active: tokens.border.width.none,
+      hovered: tokens.border.width.thin,
+      hoveredInverse: tokens.border.width.thin
+    },
+    radius: {
+      default: tokens.border.radius.medium_4
+    }
+  }
+};
+
+const theme = mergeTheme(theme$1, {
+  color: {
+    bg: {
+      hovered: tokens.color.white,
+      active: tokens.color.white64,
+      filled: {
+        action: {
+          hovered: tokens.color.blue,
+          active: tokens.color.activeBlue
+        },
+        critical: {
+          hovered: tokens.color.red,
+          active: tokens.color.activeRed
+        }
+      }
+    },
+    stroke: {
+      action: {
+        inverse: tokens.color.eggplant
+      },
+      critical: {
+        inverse: tokens.color.eggplant
+      },
+      primary: {
+        action: {
+          hovered: tokens.color.eggplant,
+          active: tokens.color.eggplant
+        },
+        critical: {
+          hovered: tokens.color.eggplant,
+          active: tokens.color.eggplant
+        },
+        inverse: {
+          hovered: tokens.color.eggplant
+        }
+      },
+      filled: {
+        action: {
+          hovered: tokens.color.white,
+          active: tokens.color.white
+        },
+        critical: {
+          hovered: tokens.color.white,
+          active: tokens.color.white
+        }
+      }
+    }
+  },
+  border: {
+    width: {
+      hovered: tokens.border.width.none,
+      hoveredInverse: tokens.border.width.none
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const IconButtonThemeContext = createThemeContext(theme$1);
+function ThemedIconButton(props) {
+  var _themes$currentTheme;
+  const currentTheme = React.useContext(ThemeSwitcherContext);
+  const theme = (_themes$currentTheme = themes[currentTheme]) != null ? _themes$currentTheme : theme$1;
+  return React.createElement(IconButtonThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
+const _excluded$1 = ["color", "disabled", "href", "icon", "kind", "light", "size", "skipClientNav", "style", "testId"];
 function IconChooser({
   icon,
   size
@@ -84,23 +228,23 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
   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
+  } = useScopedTheme(IconButtonThemeContext);
   const renderInner = router => {
-    const buttonColor = color === "destructive" ? SemanticColor.controlDestructive : 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.createElement(IconChooser, {
       size: size,
       icon: icon
@@ -121,7 +265,8 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
       return React.createElement(StyledButton, _extends({
         type: "button"
       }, commonProps, {
-        disabled: disabled,
+        onClick: disabled ? undefined : restProps.onClick,
+        "aria-disabled": disabled,
         ref: ref
       }), child);
     }
@@ -142,70 +287,141 @@ const sharedStyles = 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;
   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 ? mix(fade(color, 0.32), white) : mix(offBlack32, color),
-      borderWidth: 2,
-      borderColor: light ? mix(fade(color, 0.32), white) : 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 ? mix(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] = 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.forwardRef(function IconButton(props, ref) {
   const {
       color = "default",
@@ -213,38 +429,24 @@ const IconButton = React.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 = getClickableBehavior(href, skipClientNav, router);
-    return React.createElement(ClickableBehavior, {
-      disabled: disabled,
-      href: href,
-      onClick: onClick,
-      role: "button",
-      target: target
-    }, (state, _ref) => {
-      let childrenProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-      return React.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.createElement(__RouterContext.Consumer, null, router => renderClickableBehavior(router));
+  return React.createElement(ThemedIconButton, null, React.createElement(IconButtonCore, _extends({}, sharedProps, {
+    color: color,
+    disabled: disabled,
+    href: href,
+    kind: kind,
+    light: light,
+    ref: ref,
+    skipClientNav: skipClientNav,
+    size: size,
+    target: target,
+    tabIndex: tabIndex
+  })));
 });
 
 export { IconButton as default };