@khanacademy/wonder-blocks-icon 3.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-icon
 
+## 4.0.1
+
+### Patch Changes
+
+-   23ab9f8c: Added `role="img"` docs to PhosphorIcon. Fixed a11y issue to banners by adding the img role to the icons in each banner"
+-   Updated dependencies [6df21f71]
+    -   @khanacademy/wonder-blocks-core@6.3.1
+
+## 4.0.0
+
+### Major Changes
+
+-   171e3b01: Delete Icon component in favor of PhosphorIcon
+
 ## 3.0.0
 
 ### Major Changes

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
-import { PhosphorIconAsset } from "../types";
+import { IconSize, PhosphorIconAsset } from "../types";
 /**
  * A `PhosphorIcon` displays a small informational or decorative image as an
  * HTML element that renders a Phosphor Icon SVG available from the
@@ -40,11 +40,20 @@ export declare const PhosphorIcon: React.ForwardRefExoticComponent<Pick<AriaProp
      * Adds CSS classes to the Icon.
      */
     className?: string | undefined;
+    /**
+     * The role of the icon.
+     * @see https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24
+     */
+    role?: "img" | undefined;
+    /**
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
+     */
+    size?: IconSize | undefined;
     /**
      * Test ID used for e2e testing.
      */
     testId?: string | undefined;
-    size?: "medium" | "large" | "small" | "xlarge" | undefined;
     /**
      * The icon to display. This is a reference to the icon asset (imported as a
      * static SVG file).

package/dist/es/index.js

@@ -36,164 +36,6 @@ const viewportPixelsForSize = size => ({
   large: 48,
   xlarge: 96
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    return {
-      assetSize: size,
-      path: icon[size]
-    };
-  } else {
-    const desiredPixelSize = viewportPixelsForSize(size);
-    const availableSizes = Object.keys(icon);
-    const sortFn = availableSize => {
-      const availablePixelSize = viewportPixelsForSize(availableSize);
-      const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-      return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
-    };
-    const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-    const bestAssetSize = assetSizes[0];
-    if (bestAssetSize && icon[bestAssetSize]) {
-      return {
-        assetSize: bestAssetSize,
-        path: icon[bestAssetSize]
-      };
-    } else {
-      throw new Error("Icon does not contain any valid asset sizes!");
-    }
-  }
-};
-
-const _excluded$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = addStyle("svg");
-const Icon = React.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0
-  }
-});
-
-const add = {
-  medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const caretDown = {
-  small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z",
-  medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z"
-};
-const caretLeft = {
-  small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z",
-  medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z"
-};
-const caretRight = {
-  small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z",
-  medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z"
-};
-const caretUp = {
-  small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z",
-  medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z"
-};
-const check = {
-  small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z"
-};
-const contentArticle = {
-  small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z"
-};
-const contentExercise = {
-  small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z",
-  medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z"
-};
-const contentVideo = {
-  small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z"
-};
-const correct = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z"
-};
-const _delete = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z"
-};
-const dismiss = {
-  small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z",
-  medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
-};
-const hint = {
-  medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z"
-};
-const incorrect = {
-  medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const info = {
-  small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-};
-const search = {
-  small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-  medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
-};
-const sortableArrowDown = {
-  small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z"
-};
-const sortableArrowUp = {
-  small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z"
-};
-const zoomIn = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
-};
-const zoomOut = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z"
-};
-
-var iconAssets = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  add: add,
-  caretDown: caretDown,
-  caretLeft: caretLeft,
-  caretRight: caretRight,
-  caretUp: caretUp,
-  check: check,
-  contentArticle: contentArticle,
-  contentExercise: contentExercise,
-  contentVideo: contentVideo,
-  correct: correct,
-  'delete': _delete,
-  dismiss: dismiss,
-  hint: hint,
-  incorrect: incorrect,
-  info: info,
-  search: search,
-  sortableArrowDown: sortableArrowDown,
-  sortableArrowUp: sortableArrowUp,
-  zoomIn: zoomIn,
-  zoomOut: zoomOut
-});
 
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
 const StyledIcon = addStyle("span");
@@ -248,4 +90,4 @@ const styles = StyleSheet.create({
 });
 PhosphorIcon.displayName = "PhosphorIcon";
 
-export { PhosphorIcon, Icon as default, iconAssets as icons };
+export { PhosphorIcon };

package/dist/index.d.ts

@@ -1,7 +1,2 @@
-import Icon from "./components/icon";
-import type { IconAsset, IconSize } from "./util/icon-assets";
-export * as icons from "./util/icon-assets";
 export { PhosphorIcon } from "./components/phosphor-icon";
-export type { PhosphorIconAsset } from "./types";
-export type { IconAsset, IconSize };
-export default Icon;
+export type { IconSize, PhosphorIconAsset } from "./types";

package/dist/index.js

@@ -60,164 +60,6 @@ const viewportPixelsForSize = size => ({
   large: 48,
   xlarge: 96
 })[size];
-const getPathForIcon = (icon, size) => {
-  if (typeof icon[size] === "number") {
-    return {
-      assetSize: size,
-      path: icon[size]
-    };
-  } else {
-    const desiredPixelSize = viewportPixelsForSize(size);
-    const availableSizes = Object.keys(icon);
-    const sortFn = availableSize => {
-      const availablePixelSize = viewportPixelsForSize(availableSize);
-      const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-      return tooLargeByPixels > 0 ? Number.POSITIVE_INFINITY : Math.abs(tooLargeByPixels);
-    };
-    const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-    const bestAssetSize = assetSizes[0];
-    if (bestAssetSize && icon[bestAssetSize]) {
-      return {
-        assetSize: bestAssetSize,
-        path: icon[bestAssetSize]
-      };
-    } else {
-      throw new Error("Icon does not contain any valid asset sizes!");
-    }
-  }
-};
-
-const _excluded$1 = ["color", "icon", "size", "style", "testId"];
-const StyledSVG = wonderBlocksCore.addStyle("svg");
-const Icon = React__namespace.forwardRef(function Icon(props, ref) {
-  const {
-      color = "currentColor",
-      icon,
-      size = "small",
-      style,
-      testId
-    } = props,
-    sharedProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  const {
-    assetSize,
-    path
-  } = getPathForIcon(icon, size);
-  const pixelSize = viewportPixelsForSize(size);
-  const viewboxPixelSize = viewportPixelsForSize(assetSize);
-  return React__namespace.createElement(StyledSVG, _extends({}, sharedProps, {
-    style: [styles$1.svg, style],
-    width: pixelSize,
-    height: pixelSize,
-    viewBox: `0 0 ${viewboxPixelSize} ${viewboxPixelSize}`,
-    "data-test-id": testId,
-    ref: ref
-  }), React__namespace.createElement("path", {
-    fill: color,
-    d: path
-  }));
-});
-const styles$1 = aphrodite.StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0
-  }
-});
-
-const add = {
-  medium: "M11 11V7a1 1 0 0 1 2 0v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H7a1 1 0 0 1 0-2h4zm1 13C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const caretDown = {
-  small: "M8 8.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L8 8.586z",
-  medium: "M17.293 8.293a1 1 0 0 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 1.414-1.414L12 13.586l5.293-5.293z"
-};
-const caretLeft = {
-  small: "M7.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414l-4-4a1 1 0 0 1 0-1.414l4-4a1 1 0 0 1 1.414 1.414L7.414 8z",
-  medium: "M15.707 17.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L10.414 12l5.293 5.293z"
-};
-const caretRight = {
-  small: "M8.586 8L5.293 4.707a1 1 0 0 1 1.414-1.414l4 4a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414L8.586 8z",
-  medium: "M8.293 17.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6a1 1 0 0 0-1.414 1.414L13.586 12l-5.293 5.293z"
-};
-const caretUp = {
-  small: "M8 7.414l-3.293 3.293a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L8 7.414z",
-  medium: "M17.293 15.707a1 1 0 0 0 1.414-1.414l-6-6a1 1 0 0 0-1.414 0l-6 6a1 1 0 0 0 1.414 1.414L12 10.414l5.293 5.293z"
-};
-const check = {
-  small: "M6.072 10.4l6.175-7.058a1 1 0 1 1 1.506 1.317L6.769 12.64a1 1 0 0 1-1.55-.054L2.203 8.604a1 1 0 1 1 1.594-1.208L6.072 10.4z"
-};
-const contentArticle = {
-  small: "M11 12V8h2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h3v2H5v8h6zM9.5 6a.5.5 0 0 1-.5-.5V2l4 4H9.5z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm3-6v-4h2v5a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h3v2H9v8h6zm-1.5-6a.5.5 0 0 1-.5-.5V6l4 4h-3.5z"
-};
-const contentExercise = {
-  small: "M7.5 6.914L5 9.414V11h1.586l2.5-2.5L7.5 6.914zM8.914 5.5L10.5 7.086 11.586 6 10 4.414 8.914 5.5zM3 9a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-6 6A1 1 0 0 1 7 13H4a1 1 0 0 1-1-1V9z",
-  medium: "M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-.5-11.086l1.586 1.586-2.5 2.5H9v-1.586l2.5-2.5zM12.914 9.5L14 8.414 15.586 10 14.5 11.086 12.914 9.5zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zM7 13v3a1 1 0 0 0 1 1h3a1 1 0 0 0 .707-.293l6-6a1 1 0 0 0 0-1.414l-3-3a1 1 0 0 0-1.414 0l-6 6A1 1 0 0 0 7 13z"
-};
-const contentVideo = {
-  small: "M6 5.87v4.263l3.197-2.131L6 5.87zm-.445-2.7l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 4 12.002v-8a1 1 0 0 1 1.555-.832z",
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zM10.555 7.17l6 4a1 1 0 0 1 0 1.664l-6 4A1 1 0 0 1 9 16.002v-8a1 1 0 0 1 1.555-.832zM11 14.133l3.197-2.131L11 9.87v4.263z"
-};
-const correct = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-1.928-7.6l6.175-7.058a1 1 0 1 1 1.506 1.317l-6.984 7.981a1 1 0 0 1-1.55-.054l-3.016-3.982a1 1 0 0 1 1.594-1.208l2.275 3.003z"
-};
-const _delete = {
-  medium: "M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm-5-9a1 1 0 0 1 0-2h10a1 1 0 0 1 0 2H7z"
-};
-const dismiss = {
-  small: "M8 6.586l3.293-3.293a1 1 0 0 1 1.414 1.414L9.414 8l3.293 3.293a1 1 0 0 1-1.414 1.414L8 9.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L6.586 8 3.293 4.707a1 1 0 0 1 1.414-1.414L8 6.586z",
-  medium: "M12 10.586L7.706 6.293a1 1 0 1 0-1.413 1.413L10.586 12l-4.293 4.294a1 1 0 0 0 1.413 1.413L12 13.414l4.294 4.293a1 1 0 0 0 1.413-1.413L13.414 12l4.293-4.294a1 1 0 1 0-1.413-1.413L12 10.586z"
-};
-const hint = {
-  medium: "M10.835 15.993a1 1 0 0 1 1.008-.247 5.5 5.5 0 1 0-3.59-3.59 1 1 0 0 1-.246 1.009L6.172 15 9 17.828l1.835-1.835zm-.78 3.61a1.496 1.496 0 0 1-2.11 0l-3.548-3.549a1.496 1.496 0 0 1 0-2.108l1.787-1.787a7.5 7.5 0 1 1 5.657 5.657l-1.787 1.787zm-6.762.104a1 1 0 0 1 1.414-1.414l1 1a1 1 0 0 1-1.414 1.414l-1-1z"
-};
-const incorrect = {
-  medium: "M12 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414L13.414 12l3.293 3.293a1 1 0 0 1-1.414 1.414L12 13.414l-3.293 3.293a1 1 0 1 1-1.414-1.414L10.586 12 7.293 8.707a1 1 0 0 1 1.414-1.414L12 10.586zM12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-2c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"
-};
-const info = {
-  small: "M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm0-2A6 6 0 1 0 8 2a6 6 0 0 0 0 12zM7 8a1 1 0 1 1 2 0v3a1 1 0 0 1-2 0V8zm1-2a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"
-};
-const search = {
-  small: "M11.172 9.757l2.535 2.536a1 1 0 0 1-1.414 1.414l-2.536-2.535a5 5 0 1 1 1.414-1.414zM7 10a3 3 0 1 0 0-6 3 3 0 0 0 0 6z",
-  medium: "M11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.32-1.094l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414z"
-};
-const sortableArrowDown = {
-  small: "M7 9.586V4a1 1 0 1 1 2 0v5.586l2.293-2.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 1.414-1.414L7 9.586z"
-};
-const sortableArrowUp = {
-  small: "M9 6.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414L7 6.414V12a1 1 0 1 0 2 0V6.414z"
-};
-const zoomIn = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM12 10h2a1 1 0 0 1 0 2h-2v2a1 1 0 0 1-2 0v-2H8a1 1 0 0 1 0-2h2V8a1 1 0 0 1 2 0v2zm-1 7a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
-};
-const zoomOut = {
-  medium: "M17.32 15.906l3.387 3.387a1 1 0 0 1-1.414 1.414l-3.387-3.387a8 8 0 1 1 1.414-1.414zM11 17a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm-3-5a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2H8z"
-};
-
-var iconAssets = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  add: add,
-  caretDown: caretDown,
-  caretLeft: caretLeft,
-  caretRight: caretRight,
-  caretUp: caretUp,
-  check: check,
-  contentArticle: contentArticle,
-  contentExercise: contentExercise,
-  contentVideo: contentVideo,
-  correct: correct,
-  'delete': _delete,
-  dismiss: dismiss,
-  hint: hint,
-  incorrect: incorrect,
-  info: info,
-  search: search,
-  sortableArrowDown: sortableArrowDown,
-  sortableArrowUp: sortableArrowUp,
-  zoomIn: zoomIn,
-  zoomOut: zoomOut
-});
 
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
 const StyledIcon = wonderBlocksCore.addStyle("span");
@@ -273,5 +115,3 @@ const styles = aphrodite.StyleSheet.create({
 PhosphorIcon.displayName = "PhosphorIcon";
 
 exports.PhosphorIcon = PhosphorIcon;
-exports["default"] = Icon;
-exports.icons = iconAssets;

package/dist/types.d.ts

@@ -2,3 +2,7 @@
  * All the possible icon weights.
  */
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
+/**
+ * All the possible icon weights.
+ */
+export type IconSize = "small" | "medium" | "large" | "xlarge";

package/dist/util/icon-util.d.ts

@@ -1,21 +1,6 @@
-import type { IconAsset, IconSize } from "./icon-assets";
+import { IconSize } from "../types";
 /**
  * A simple function that tells us how many viewport pixels each icon size
  * corresponds to.
  */
 export declare const viewportPixelsForSize: (size: IconSize) => number;
-/**
- * A utility to find the right asset from an IconAsset to display in an icon
- * at a given IconSize. We're looking for, in the following order:
- *   1. The path for the IconSize (e.g. small, medium) requested
- *   2. A path that's _smaller_ than the size we requested
- *   3. Any path (what remains is one for a larger IconSize)
- *
- * The goal here is to provide a path that looks good at the given size...
- * obviously, if the size that we want is provided, we'll use it. Otherwise we'd
- * rather blow up a smaller, simpler icon than scrunch down a more complex one.
- */
-export declare const getPathForIcon: (icon: IconAsset, size: IconSize) => {
-    assetSize: IconSize;
-    path: string;
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "3.0.0",
+  "version": "4.0.1",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^6.3.0"
+    "@khanacademy/wonder-blocks-core": "^6.3.1"
   },
   "devDependencies": {
     "@khanacademy/wonder-stuff-core": "^1.4.2",

package/src/components/__tests__/phosphor-icon.test.tsx

@@ -25,20 +25,24 @@ describe("PhosphorIcon", () => {
         expect(ref.current).toBeInstanceOf(HTMLSpanElement);
     });
 
+    it("applies role to icon", async () => {
+        // Arrange
+
+        // Act
+        render(<PhosphorIcon icon={Plus} role="img" />);
+
+        // Assert
+        expect(screen.getByRole("img")).toBeInTheDocument();
+    });
+
     it("applies aria-label to icon", async () => {
         // Arrange
 
         // Act
-        render(
-            <PhosphorIcon
-                icon={Plus}
-                aria-label="something"
-                testId="phosphor-icon"
-            />,
-        );
+        render(<PhosphorIcon icon={Plus} aria-label="something" role="img" />);
 
         // Assert
-        expect(screen.getByTestId("phosphor-icon")).toHaveAttribute(
+        expect(screen.getByRole("img")).toHaveAttribute(
             "aria-label",
             "something",
         );

package/src/components/phosphor-icon.tsx

@@ -4,7 +4,7 @@ import {StyleSheet} from "aphrodite";
 import {addStyle, AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import {viewportPixelsForSize} from "../util/icon-util";
-import {PhosphorIconAsset} from "../types";
+import {IconSize, PhosphorIconAsset} from "../types";
 
 // We use a span instead of an img because we want to use the mask-image CSS
 // property.
@@ -24,13 +24,24 @@ type Props = Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
      * Adds CSS classes to the Icon.
      */
     className?: string;
+
+    /**
+     * The role of the icon.
+     * @see https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA24
+     */
+    role?: "img";
+
+    /**
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
+     */
+    size?: IconSize;
+
     /**
      * Test ID used for e2e testing.
      */
     testId?: string;
 
-    size?: "small" | "medium" | "large" | "xlarge";
-
     /**
      * The icon to display. This is a reference to the icon asset (imported as a
      * static SVG file).

package/src/index.ts

@@ -1,8 +1,2 @@
-import Icon from "./components/icon";
-import type {IconAsset, IconSize} from "./util/icon-assets";
-
-export * as icons from "./util/icon-assets";
 export {PhosphorIcon} from "./components/phosphor-icon";
-export type {PhosphorIconAsset} from "./types";
-export type {IconAsset, IconSize};
-export default Icon;
+export type {IconSize, PhosphorIconAsset} from "./types";

package/src/types.ts

@@ -2,3 +2,8 @@
  * All the possible icon weights.
  */
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
+
+/**
+ * All the possible icon weights.
+ */
+export type IconSize = "small" | "medium" | "large" | "xlarge";

package/src/util/icon-util.test.ts

@@ -1,83 +1,4 @@
-import {getPathForIcon, viewportPixelsForSize} from "./icon-util";
-
-import type {IconSize, IconAsset} from "./icon-assets";
-
-const SIZES = ["small", "medium", "large", "xlarge"];
-
-const DUMMY_ICON_MEDIUM_ONLY = {
-    medium: "[MEDIUM SVG PATH]",
-} as const;
-
-const DUMMY_ICON_WITH_EVERYTHING_ON_IT: IconAsset = {
-    small: "[SMALL SVG PATH]",
-    medium: "[MEDIUM SVG PATH]",
-    large: "[LARGE SVG PATH]",
-    xlarge: "[XLARGE SVG PATH]",
-};
-
-describe("getPathForIcon", () => {
-    test("return the path for the correct size, if available", () => {
-        SIZES.forEach((size: any) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-                size,
-            );
-            expect(
-                // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'any' can't be used to index type 'IconAsset'.
-                path === DUMMY_ICON_WITH_EVERYTHING_ON_IT[size] &&
-                    assetSize === size,
-            ).toBeTruthy();
-        });
-    });
-
-    test("scale up a small asset rather than scaling down a large one", () => {
-        const expectValueForSize = (
-            requestedSize: IconSize,
-            returnedSize: IconSize,
-        ) => {
-            const iconMissingRequestedSize = {
-                ...DUMMY_ICON_WITH_EVERYTHING_ON_IT,
-            } as const;
-            delete iconMissingRequestedSize[requestedSize];
-            expect(
-                getPathForIcon(iconMissingRequestedSize, requestedSize),
-            ).toMatchObject({
-                assetSize: returnedSize,
-                path: DUMMY_ICON_WITH_EVERYTHING_ON_IT[returnedSize],
-            });
-        };
-        expectValueForSize("small", "medium");
-        expectValueForSize("medium", "small");
-        expectValueForSize("large", "medium");
-        expectValueForSize("xlarge", "large");
-    });
-
-    test("return a path as long as at least one size is available", () => {
-        SIZES.forEach((size: any) => {
-            const {path, assetSize} = getPathForIcon(
-                DUMMY_ICON_MEDIUM_ONLY,
-                size,
-            );
-            expect(
-                path === DUMMY_ICON_MEDIUM_ONLY["medium"] &&
-                    assetSize === "medium",
-            ).toBeTruthy();
-        });
-    });
-
-    test("no valid asset sizes, throws", () => {
-        // Arrange
-        const iconAsset: IconAsset = {} as any;
-
-        // Act
-        const underTest = () => getPathForIcon(iconAsset, "medium");
-
-        // Assert
-        expect(underTest).toThrowErrorMatchingInlineSnapshot(
-            `"Icon does not contain any valid asset sizes!"`,
-        );
-    });
-});
+import {viewportPixelsForSize} from "./icon-util";
 
 describe("viewportPixelsForSize", () => {
     test("return the correct values", () => {