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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-icon-button
 
+## 5.0.0
+
+### Major Changes
+
+-   cc6b1950: Change `icon` type to use `PhosphorIcon` (instead of `Icon`).
+
 ## 4.2.2
 
 ### Patch Changes

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

@@ -1,14 +1,13 @@
 import * as React from "react";
-import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
+import type { PhosphorIconAsset } from "@khanacademy/wonder-blocks-icon";
 import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import { Link } from "react-router-dom";
 export type IconButtonSize = "xsmall" | "small" | "medium";
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
-     * A Wonder Blocks icon asset, an object specifing paths for one or more of
-     * the following sizes: small, medium, large, xlarge.
+     * A Phosphor icon asset (imported as a static SVG file).
      */
-    icon: IconAsset;
+    icon: PhosphorIconAsset;
     /**
      * The color of the icon button, either blue or red.
      */
@@ -99,41 +98,42 @@ export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     onClick?: (e: React.SyntheticEvent) => unknown;
 };
 /**
- * An IconButton is a button whose contents are an SVG image.
+ * An `IconButton` is a button whose contents are an SVG image.
  *
- * To use, supply an onClick function, a wonder-blocks icon asset (see
- * the Icon section) and an aria-label to describe the button functionality.
- * Optionally specify href (URL), clientSideNav, color
- * (Wonder Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"),
- * light (whether the IconButton will be rendered on a dark background),
- * disabled , test ID, and custom styling.
+ * To use, supply an `onClick` function, a Phosphor icon asset (see the
+ * `Icon>PhosphorIcon` section) and an `aria-label` to describe the button
+ * functionality. Optionally specify href (URL), clientSideNav, color (Wonder
+ * Blocks Blue or Red), kind ("primary", "secondary", or "tertiary"), light
+ * (whether the IconButton will be rendered on a dark background), disabled ,
+ * test ID, and custom styling.
  *
- * The size of an IconButton matches the size of icon it wraps which is 24x24
- * pixels.  The focus ring which is displayed on hover and focus is much
- * larger but does not affect its size.  This matches the behavior of Button.
+ * The size of an `IconButton` is based on how the `size` prop is defined (see
+ * `Sizes` below for more details). The focus ring which is displayed on hover
+ * and focus is much larger but does not affect its size. This matches the
+ * behavior of Button.
  *
  * IconButtons require a certain amount of space between them to ensure the
- * focus rings don't overlap.  The minimum amount of spacing is 16px, but
- * you should refer to the mocks provided by design.  Using a Strut in between
+ * focus rings don't overlap. The minimum amount of spacing is 16px, but you
+ * should refer to the mocks provided by design.  Using a Strut in between
  * IconButtons is the preferred way to for adding this spacing.
  *
  * Many layouts require alignment of visual left (or right) side of an
- * IconButton.  This requires a little bit of pixel nudging since each icon
- * as a different amount of internal padding.
+ * `IconButton`. This requires a little bit of pixel nudging since each icon as
+ * a different amount of internal padding.
  *
- * See the Toolbar documentation for examples of IconButton use that follow
+ * See the Toolbar documentation for examples of `IconButton` use that follow
  * the best practices described above.
  *
  * ```js
- * import {icons} from "@khanacademy/wonder-blocks-icon";
+ * import magnifyingGlassIcon from "@phosphor-icons/core/regular/magnifying-glass.svg";
  * import IconButton from "@khanacademy/wonder-blocks-icon-button";
  *
  * <IconButton
- *     icon={icons.anIcon}
+ *     icon={magnifyingGlassIcon}
  *     aria-label="An Icon"
  *     onClick={(e) => console.log("Hello, world!")}
+ *     size="medium"
  * />
  * ```
  */
-declare const IconButton: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;
-export default IconButton;
+export declare const IconButton: React.ForwardRefExoticComponent<SharedProps & React.RefAttributes<typeof Link | HTMLButtonElement | HTMLAnchorElement>>;

package/dist/es/index.js

@@ -5,7 +5,7 @@ import { StyleSheet } from 'aphrodite';
 import { Link } from 'react-router-dom';
 import Color, { SemanticColor, mix, fade } from '@khanacademy/wonder-blocks-color';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
-import Icon from '@khanacademy/wonder-blocks-icon';
+import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -56,6 +56,27 @@ const targetPixelsForSize = size => ({
 })[size];
 
 const _excluded$1 = ["color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "size", "skipClientNav", "style", "testId", "waiting"];
+function IconChooser({
+  icon,
+  size
+}) {
+  const iconSize = iconSizeForButtonSize(size);
+  switch (iconSize) {
+    case "small":
+      return React.createElement(PhosphorIcon, {
+        size: "small",
+        color: "currentColor",
+        icon: icon
+      });
+    case "medium":
+    default:
+      return React.createElement(PhosphorIcon, {
+        size: "medium",
+        color: "currentColor",
+        icon: icon
+      });
+  }
+}
 const StyledAnchor = addStyle("a");
 const StyledButton = addStyle("button");
 const StyledLink = addStyle(Link);
@@ -80,9 +101,8 @@ const IconButtonCore = React.forwardRef(function IconButtonCore(props, ref) {
     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 child = React.createElement(Icon, {
-      size: iconSizeForButtonSize(size),
-      color: "currentColor",
+    const child = React.createElement(IconChooser, {
+      size: size,
       icon: icon
     });
     const commonProps = _extends({

package/dist/index.d.ts

@@ -1,2 +1 @@
-import IconButton from "./components/icon-button";
-export { IconButton as default };
+export { IconButton as default } from "./components/icon-button";

package/dist/index.js

@@ -7,7 +7,7 @@ var aphrodite = require('aphrodite');
 var reactRouterDom = require('react-router-dom');
 var Color = require('@khanacademy/wonder-blocks-color');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var Icon = require('@khanacademy/wonder-blocks-icon');
+var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -31,7 +31,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Icon__default = /*#__PURE__*/_interopDefaultLegacy(Icon);
 
 function _objectDestructuringEmpty(obj) {
   if (obj == null) throw new TypeError("Cannot destructure " + obj);
@@ -82,6 +81,27 @@ const targetPixelsForSize = size => ({
 })[size];
 
 const _excluded$1 = ["color", "disabled", "focused", "hovered", "href", "icon", "kind", "light", "pressed", "size", "skipClientNav", "style", "testId", "waiting"];
+function IconChooser({
+  icon,
+  size
+}) {
+  const iconSize = iconSizeForButtonSize(size);
+  switch (iconSize) {
+    case "small":
+      return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+        size: "small",
+        color: "currentColor",
+        icon: icon
+      });
+    case "medium":
+    default:
+      return React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
+        size: "medium",
+        color: "currentColor",
+        icon: icon
+      });
+  }
+}
 const StyledAnchor = wonderBlocksCore.addStyle("a");
 const StyledButton = wonderBlocksCore.addStyle("button");
 const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
@@ -106,9 +126,8 @@ const IconButtonCore = React__namespace.forwardRef(function IconButtonCore(props
     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 child = React__namespace.createElement(Icon__default["default"], {
-      size: iconSizeForButtonSize(size),
-      color: "currentColor",
+    const child = React__namespace.createElement(IconChooser, {
+      size: size,
       icon: icon
     });
     const commonProps = _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon-button",
-  "version": "4.2.2",
+  "version": "5.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"