WB-1611: Add support to custom paths/SVGs with PhosphorIcon

.changeset/dirty-eyes-rhyme.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-banner": patch
+---
+
+Modified Banner props to accept any icon weight in its type

.changeset/fifty-cherries-draw.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon": major
+---
+
+Remove size/weight restriction from PhosphorIcon and remove some exported types from the package.

__docs__/wonder-blocks-icon/phosphor-icon.argtypes.ts

@@ -104,7 +104,11 @@ export const IconMappings = {
 export default {
     icon: {
         description:
-            "The icon to display. This is a reference to the icon asset (imported as a static SVG file). `small` size should use a `bold` icon, and `medium` size should use a `regular` icon.",
+            `The icon to display. This is a reference to the icon asset ` +
+            `(imported as a static SVG file).\n\n` +
+            `It supports the following types:\n` +
+            `- \`PhosphorIconAsset\`: a reference to a Phosphor SVG asset.\n` +
+            `- \`string\`: an import referencing an arbitrary SVG file.`,
         options: Object.keys(IconMappings),
         mapping: IconMappings,
         type: {
@@ -114,7 +118,7 @@ export default {
         },
         table: {
             type: {
-                summary: "string",
+                summary: "PhosphorIconAsset | string",
             },
         },
     },
@@ -190,4 +194,17 @@ export default {
             },
         },
     },
+    role: {
+        description: "The role of this icon.",
+        defaultValue: "img",
+        control: {
+            type: "text",
+        },
+        table: {
+            category: "Accessibility",
+            type: {
+                summary: "string",
+            },
+        },
+    },
 } satisfies Record<string, InputType>;

__docs__/wonder-blocks-icon/phosphor-icon.stories.tsx

@@ -2,9 +2,19 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
+import articleIcon from "./icons/article.svg";
+import courseIcon from "./icons/course.svg";
+import crownIcon from "./icons/crown.svg";
+import masteryCourseIcon from "./icons/mastery-course.svg";
+import masteryCourseIconBold from "./icons/mastery-course-bold.svg";
+
 import Banner from "@khanacademy/wonder-blocks-banner";
 import {addStyle, View} from "@khanacademy/wonder-blocks-core";
-import {Body, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {
+    Body,
+    HeadingSmall,
+    LabelMedium,
+} from "@khanacademy/wonder-blocks-typography";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 
@@ -92,9 +102,12 @@ export const Default: StoryComponentType = {
  * available sizes are `"small"`, `"medium"`, `"large"`, and `"xlarge"`.
  *
  * __IMPORTANT NOTES:__
- * - `small` size icons only support `bold` and `fill` weights.
- * - `medium` size icons only support `regular` and `fill` weights.
- * - `large` and `xlarge` size icons support all weights.
+ * It's up to the consumer to make sure that the icon is legible at the
+ * specified size. For example, the `magnifyingGlassRegular` icon is not legible
+ * at the `"small"` size.
+ * - `small` size icons are recommended for use with `bold` or `fill` weights.
+ * - `medium` size icons are recommended for use with `regular` or `fill` weights.
+ * - `large` and `xlarge` size icons work well with all weights.
  */
 export const Sizes: StoryComponentType = {
     render: () => {
@@ -261,7 +274,7 @@ export const Inline: StoryComponentType = {
                 <PhosphorIcon
                     size="small"
                     icon={IconMappings.infoBold}
-                    style={{margin: tokens.spacing.xxxxSmall_2}}
+                    style={styles.inline}
                     className="foo"
                 />
                 when it is inline.
@@ -270,28 +283,52 @@ export const Inline: StoryComponentType = {
     },
 };
 
-// TODO(WB-1611): Need to figure out how to use custom icons.
 /**
  * Icons can be customized by passing in a custom icon.
  *
- * The icon should be an object with a size-related property (`small | medium |
- * large | xlarge`) that is a string containing the path data for the icon.
+ * The icon should be an SVG file imported as a static asset. You can take a
+ * look at the source file of any of the following icons to see how they are
+ * generated.
+ *
+ * ```tsx
+ * // This SVG should have the following attributes:
+ * // - viewBox="0 0 256 256"
+ * // - fill="currentColor"
+ * // - A path (or paths) scaled up to fit in the 256x256 viewport.
+ *
+ * import crownIcon from "./icons/crown.svg";
+ * <PhosphorIcon icon={crownIcon} size="small" />
+ * ```
+ *
+ * __NOTE:__ If you want to know how to create a custom icon, check out the
+ * [Exporting icon assets -
+ * Web](https://khanacademy.atlassian.net/wiki/x/SwD6gg#Web) section.
  */
-// export const CustomIcon: StoryComponentType = () => {
-//     const share: IconAsset = {
-//         medium: "M12.5 4.25C12.5 3.14543 13.3954 2.25 14.5 2.25C15.6046 2.25 16.5 3.14543 16.5 4.25C16.5 5.35457 15.6046 6.25 14.5 6.25C13.8117 6.25 13.2046 5.90228 12.8447 5.37291C12.8367 5.3589 12.8282 5.34502 12.8194 5.33126C12.8102 5.31696 12.8007 5.30297 12.7909 5.28929C12.6063 4.98641 12.5 4.63062 12.5 4.25ZM14.5 8.25C13.4511 8.25 12.4966 7.8463 11.7832 7.18581L7.79943 9.7458C7.92958 10.1403 8 10.5619 8 11C8 11.4381 7.92958 11.8597 7.79943 12.2542L11.7832 14.8142C12.4966 14.1537 13.4511 13.75 14.5 13.75C16.7091 13.75 18.5 15.5409 18.5 17.75C18.5 19.9591 16.7091 21.75 14.5 21.75C12.2909 21.75 10.5 19.9591 10.5 17.75C10.5 17.3119 10.5704 16.8903 10.7006 16.4958L6.71681 13.9358C6.00342 14.5963 5.04885 15 4 15C1.79086 15 0 13.2091 0 11C0 8.79086 1.79086 7 4 7C5.04885 7 6.00342 7.40369 6.71681 8.06417L10.7006 5.50416C10.5704 5.10969 10.5 4.68807 10.5 4.25C10.5 2.04086 12.2909 0.25 14.5 0.25C16.7091 0.25 18.5 2.04086 18.5 4.25C18.5 6.45914 16.7091 8.25 14.5 8.25ZM5.70939 12.0388C5.69949 12.0526 5.68988 12.0668 5.68058 12.0813C5.67164 12.0952 5.6631 12.1092 5.65493 12.1234C5.29508 12.6525 4.68812 13 4 13C2.89543 13 2 12.1046 2 11C2 9.8954 2.89543 9 4 9C4.68812 9 5.29507 9.3475 5.65493 9.8766C5.66309 9.8908 5.67164 9.9048 5.68058 9.9187C5.68988 9.9332 5.69949 9.9474 5.7094 9.9612C5.89379 10.264 6 10.6196 6 11C6 11.3804 5.89379 11.736 5.70939 12.0388ZM12.7909 16.7107C12.6063 17.0136 12.5 17.3694 12.5 17.75C12.5 18.8546 13.3954 19.75 14.5 19.75C15.6046 19.75 16.5 18.8546 16.5 17.75C16.5 16.6454 15.6046 15.75 14.5 15.75C13.8117 15.75 13.2046 16.0977 12.8447 16.6271C12.8367 16.6411 12.8282 16.655 12.8194 16.6687C12.8102 16.683 12.8007 16.697 12.7909 16.7107Z",
-//     };
+export const CustomIcons: StoryComponentType = {
+    render: () => {
+        const customIcoms = {
+            article: articleIcon,
+            course: courseIcon,
+            crown: crownIcon,
+            masteryCourse: masteryCourseIcon,
+            masteryCourseBold: masteryCourseIconBold,
+        };
 
-//     return (
-//         <PhosphorIcon
-//             icon={share}
-//             style={{
-//                 fillRule: "evenodd",
-//                 clipRule: "evenodd",
-//             }}
-//         />
-//     );
-// };
+        return (
+            <View style={styles.row}>
+                {Object.entries(customIcoms).map(([name, icon], index) => (
+                    <View style={styles.container} key={index}>
+                        <HeadingSmall>{name}</HeadingSmall>
+                        <PhosphorIcon icon={icon} size="small" />
+                        <PhosphorIcon icon={icon} size="medium" />
+                        <PhosphorIcon icon={icon} size="large" />
+                        <PhosphorIcon icon={icon} size="xlarge" />
+                    </View>
+                ))}
+            </View>
+        );
+    },
+};
 
 const styles = StyleSheet.create({
     container: {
@@ -316,4 +353,7 @@ const styles = StyleSheet.create({
         border: `${tokens.border.width.hairline}px solid ${tokens.color.offBlack}`,
         padding: tokens.spacing.medium_16,
     },
+    inline: {
+        margin: tokens.spacing.xxxxSmall_2,
+    },
 });

packages/wonder-blocks-banner/src/components/banner.tsx

@@ -6,10 +6,7 @@ import xIcon from "@phosphor-icons/core/regular/x.svg";
 import Button from "@khanacademy/wonder-blocks-button";
 import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {
-    PhosphorIcon,
-    PhosphorIconMedium,
-} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon, PhosphorIconAsset} from "@khanacademy/wonder-blocks-icon";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import Link from "@khanacademy/wonder-blocks-link";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -77,7 +74,7 @@ type BannerLayout =
 
 type BannerValues = {
     color: string;
-    icon: PhosphorIconMedium;
+    icon: PhosphorIconAsset;
     role: "status" | "alert";
     ariaLive?: "assertive" | "polite";
 };