@khanacademy/wonder-blocks-icon 2.2.1 → 4.0.0

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

@@ -3,10 +3,6 @@ import PlusCircleRegular from "@phosphor-icons/core/regular/plus-circle.svg";
 import PlusCircleBold from "@phosphor-icons/core/bold/plus-circle-bold.svg";
 import PlusCircleFill from "@phosphor-icons/core/fill/plus-circle-fill.svg";
 
-// @ts-expect-error - invalid icon weight (duotone)
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import VideoDuoTone from "@phosphor-icons/core/duotone/video-duotone.svg";
-
 import {PhosphorIcon} from "../phosphor-icon";
 
 // Valid: small + bold
@@ -18,10 +14,8 @@ import {PhosphorIcon} from "../phosphor-icon";
 // Valid: large + fill
 <PhosphorIcon icon={PlusCircleFill} size="large" color="green" />;
 
-// Invalid: small + regular
-// @ts-expect-error - small icons only support `bold` and `fill` weights.
+// Valid: small + regular
 <PhosphorIcon icon={PlusCircleRegular} size="small" color="green" />;
 
-// Invalid: medium + bold
-// @ts-expect-error - medium icons only support `regular` and `fill` weights.
+// Valid: medium + bold
 <PhosphorIcon icon={PlusCircleBold} size="medium" color="green" />;

package/src/components/phosphor-icon.tsx

@@ -4,17 +4,13 @@ import {StyleSheet} from "aphrodite";
 import {addStyle, AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
 import {viewportPixelsForSize} from "../util/icon-util";
-import {
-    PhosphorIconAsset,
-    PhosphorIconMedium,
-    PhosphorIconSmall,
-} 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.
 const StyledIcon = addStyle("span");
 
-type CommonProps = Pick<AriaProps, "aria-hidden" | "aria-label"> & {
+type Props = Pick<AriaProps, "aria-hidden" | "aria-label" | "role"> & {
     /**
      * The color of the icon. Will default to `currentColor`, which means that
      * it will take on the CSS `color` value from the parent element.
@@ -32,56 +28,24 @@ type CommonProps = Pick<AriaProps, "aria-hidden" | "aria-label"> & {
      * Test ID used for e2e testing.
      */
     testId?: string;
-};
 
-type PropsForSmallIcon = CommonProps & {
-    /**
-     * The icon size (16px).
-     *
-     * __NOTE:__ small icons only support `bold` and `fill` weights. **Make sure
-     * you are not using a `regular` icon.**
-     */
-    size?: "small";
     /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ small icons only support `bold` and `fill` weights.
+     * Size of the icon. One of `small` (16), `medium` (24), `large` (48), or
+     * `xlarge` (96). Defaults to `small`.
      */
-    icon: PhosphorIconSmall;
-};
+    size?: IconSize;
 
-type PropsForMediumIcon = CommonProps & {
     /**
-     * The icon size (24px). Defaults to `medium`.
+     * The icon to display. This is a reference to the icon asset (imported as a
+     * static SVG file).
      *
-     * __NOTE:__ medium icons only support `regular` and `fill` weights. **Make
-     * sure you are not using a `bold` icon.**
+     * It supports the following types:
+     * - `PhosphorIconAsset`: a reference to a Phosphor SVG asset.
+     * - `string`: an import referencing an arbitrary SVG file.
      */
-    size?: "medium";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     * __NOTE:__ medium icons only support `regular` and `fill` weights.
-     */
-    icon: PhosphorIconMedium;
+    icon: PhosphorIconAsset | string;
 };
 
-type PropsForOtherSizes = CommonProps & {
-    /**
-     * large: The icon size (48px).
-     * xlarge: The icon size (96px).
-     */
-    size?: "large" | "xlarge";
-    /**
-     * The icon to display. This is a reference to the icon asset
-     * (imported as a static SVG file).
-     */
-    icon: PhosphorIconAsset;
-};
-
-// Define icon size by icon weight
-type Props = PropsForSmallIcon | PropsForMediumIcon | PropsForOtherSizes;
-
 /**
  * A `PhosphorIcon` displays a small informational or decorative image as an
  * HTML element that renders a Phosphor Icon SVG available from the
@@ -123,6 +87,7 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon(
 
     const pixelSize = viewportPixelsForSize(size);
     const classNames = `${className ?? ""}`;
+    const iconStyles = _generateStyles(color, pixelSize);
 
     return (
         <StyledIcon
@@ -130,14 +95,12 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon(
             className={classNames}
             style={[
                 styles.svg,
+                iconStyles.icon,
                 {
+                    // We still pass inline styles to the icon itself, so we
+                    // prevent the icon from being overridden by the inline
+                    // styles.
                     maskImage: `url(${icon})`,
-                    maskSize: "100%",
-                    maskRepeat: "no-repeat",
-                    maskPosition: "center",
-                    backgroundColor: color,
-                    width: pixelSize,
-                    height: pixelSize,
                 },
                 style,
             ]}
@@ -147,12 +110,39 @@ export const PhosphorIcon = React.forwardRef(function PhosphorIcon(
     );
 });
 
+const dynamicStyles: Record<string, any> = {};
+
+/**
+ * Generates the visual styles for the icon.
+ */
+const _generateStyles = (color: string, size: number) => {
+    const iconStyle = `${color}-${size}`;
+    // The styles are cached to avoid creating a new object on every render.
+    if (styles[iconStyle]) {
+        return styles[iconStyle];
+    }
+
+    const newStyles: Record<string, any> = {
+        icon: {
+            backgroundColor: color,
+            width: size,
+            height: size,
+        },
+    };
+
+    dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
+    return dynamicStyles[iconStyle];
+};
+
 const styles = StyleSheet.create({
     svg: {
         display: "inline-block",
         verticalAlign: "text-bottom",
         flexShrink: 0,
         flexGrow: 0,
+        maskSize: "100%",
+        maskRepeat: "no-repeat",
+        maskPosition: "center",
     },
 });
 

package/src/index.ts

@@ -1,12 +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,
-    PhosphorIconMedium,
-    PhosphorIconSmall,
-} from "./types";
-export type {IconAsset, IconSize};
-export default Icon;
+export type {IconSize, PhosphorIconAsset} from "./types";

package/src/types.ts

@@ -2,11 +2,8 @@
  * All the possible icon weights.
  */
 export type PhosphorIconAsset = PhosphorRegular | PhosphorBold | PhosphorFill;
+
 /**
- * The different icon weights for small icons.
- */
-export type PhosphorIconSmall = PhosphorBold | PhosphorFill;
-/**
- * The different icon weights for medium icons.
+ * All the possible icon weights.
  */
-export type PhosphorIconMedium = PhosphorRegular | PhosphorFill;
+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", () => {

package/src/util/icon-util.ts

@@ -1,4 +1,4 @@
-import type {IconAsset, IconSize} from "./icon-assets";
+import {IconSize} from "../types";
 
 /**
  * A simple function that tells us how many viewport pixels each icon size
@@ -11,51 +11,3 @@ export const viewportPixelsForSize = (size: IconSize): number =>
         large: 48,
         xlarge: 96,
     }[size]);
-
-/**
- * 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 const getPathForIcon = (
-    icon: IconAsset,
-    size: IconSize,
-): {
-    assetSize: IconSize;
-    path: string;
-} => {
-    if (typeof icon[size] === "number") {
-        // Great, we have the IconSize we actually requested
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
-        return {assetSize: size, path: icon[size]};
-    } else {
-        // Oh, no, we don't have the right IconSize! Let's find the next best
-        // one...we prefer to find a smaller icon and blow it up instead of
-        // using a larger icon and shrinking it such that detail may be lost.
-        const desiredPixelSize = viewportPixelsForSize(size);
-        const availableSizes = Object.keys(icon);
-        const sortFn = (availableSize: IconSize) => {
-            const availablePixelSize = viewportPixelsForSize(availableSize);
-            const tooLargeByPixels = availablePixelSize - desiredPixelSize;
-            return tooLargeByPixels > 0
-                ? Number.POSITIVE_INFINITY
-                : Math.abs(tooLargeByPixels);
-        };
-        // @ts-expect-error [FEI-5019] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'. | TS2345 - Argument of type 'string' is not assignable to parameter of type 'keyof IconAsset'.
-        const assetSizes = availableSizes.sort((a, b) => sortFn(a) - sortFn(b));
-        const bestAssetSize = assetSizes[0];
-        // @ts-expect-error [FEI-5019] - TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'.
-        if (bestAssetSize && icon[bestAssetSize]) {
-            // @ts-expect-error [FEI-5019] - TS2322 - Type 'string' is not assignable to type 'keyof IconAsset'. | TS7053 - Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IconAsset'.
-            return {assetSize: bestAssetSize, path: icon[bestAssetSize]};
-        } else {
-            throw new Error("Icon does not contain any valid asset sizes!");
-        }
-    }
-};