docs: Use bold icon for badge and banner examples (#2753)

## Summary:

Use bold icons in badge and banner docs.

Note: Since consumers pass icons into components, it'll be up to consumers to use the correct icon. For now, we make sure the badge and banner docs show examples using bold icons

Issue: WB-2025

## Test plan:
1. Confirm icons in Badge, StatusBadge, and Banner examples are bold

Author: beaesguerra

Reviewers: marcysutton

Required Reviewers:

Approved By: marcysutton

Checks: ✅ 29 checks were successful, ⏭️  7 checks have been skipped, ⏹️  8 checks were cancelled

Pull Request URL: #2753

Author: beaesguerra

.changeset/long-keys-applaud.md

@@ -0,0 +1,2 @@
+---
+---

__docs__/wonder-blocks-badge/badge-testing-snapshots.stories.tsx

@@ -75,15 +75,15 @@ export const StateSheetStory: StoryComponentType = {
                 name: "Label with icon",
                 props: {
                     label: "Badge",
-                    icon: <PhosphorIcon icon={IconMappings.cookie} />,
+                    icon: <PhosphorIcon icon={IconMappings.cookieBold} />,
                 },
             },
             {
                 name: "Icon only",
                 props: {
                     icon: (
                         <PhosphorIcon
-                            icon={IconMappings.cookie}
+                            icon={IconMappings.cookieBold}
                             aria-label="Cookie"
                         />
                     ),
@@ -184,7 +184,7 @@ export const Scenarios: StoryComponentType = {
                 name: "Long label with icon",
                 props: {
                     label: longText,
-                    icon: <PhosphorIcon icon={IconMappings.cookie} />,
+                    icon: <PhosphorIcon icon={IconMappings.cookieBold} />,
                 },
             },
             {
@@ -197,7 +197,7 @@ export const Scenarios: StoryComponentType = {
                 name: "Long label with no word break with icon",
                 props: {
                     label: longTextWithNoWordBreak,
-                    icon: <PhosphorIcon icon={IconMappings.cookie} />,
+                    icon: <PhosphorIcon icon={IconMappings.cookieBold} />,
                 },
             },
         ];
@@ -303,7 +303,7 @@ export const AllBadgesScenarios: StoryComponentType = {
             )),
         ].map((component) =>
             React.cloneElement(component, {
-                icon: <PhosphorIcon icon={IconMappings.cookie} />,
+                icon: <PhosphorIcon icon={IconMappings.cookieBold} />,
             }),
         );
 

__docs__/wonder-blocks-badge/badge.stories.tsx

@@ -64,7 +64,7 @@ type StoryComponentType = StoryObj<
 export const Default = {
     args: {
         label: "Badge",
-        icon: "cookie",
+        icon: "cookieBold",
     },
 };
 
@@ -82,7 +82,7 @@ export const LabelOnly: StoryComponentType = {
  */
 export const IconOnly: StoryComponentType = {
     args: {
-        icon: "cookie",
+        icon: "cookieBold",
     },
 };
 
@@ -180,7 +180,7 @@ export const CustomIcons: StoryComponentType = {
 export const CustomStyles: StoryComponentType = {
     args: {
         label: "Badge",
-        icon: "cookie",
+        icon: "cookieBold",
     },
     render: (args) => {
         return (
@@ -219,7 +219,7 @@ export const CustomStyles: StoryComponentType = {
 export const Tag: StoryComponentType = {
     args: {
         label: "Badge",
-        icon: "cookie",
+        icon: "cookieBold",
         tag: "strong",
     },
 };
@@ -252,7 +252,7 @@ export const BadgeWithTooltip: StoryComponentType = {
     },
     args: {
         label: "Badge",
-        icon: "cookie",
+        icon: "cookieBold",
     },
 };
 
@@ -264,6 +264,6 @@ export const BadgeWithTooltip: StoryComponentType = {
 export const BadgeTruncation: StoryComponentType = {
     args: {
         label: "Badge with a long label that should be truncated",
-        icon: "cookie",
+        icon: "cookieBold",
     },
 };

__docs__/wonder-blocks-badge/status-badge.stories.tsx

@@ -79,7 +79,7 @@ const kinds = ["info", "success", "warning", "critical"] as const;
 export const Default = {
     args: {
         label: "Badge",
-        icon: "cookie",
+        icon: "cookieBold",
     },
     render: (
         args: Omit<PropsFor<typeof StatusBadge>, "icon"> & {icon: string},
@@ -101,7 +101,7 @@ export const Default = {
  */
 export const Kinds = {
     args: {
-        icon: "cookie",
+        icon: "cookieBold",
     },
     render(args: Omit<PropsFor<typeof StatusBadge>, "icon"> & {icon: string}) {
         return (
@@ -142,7 +142,7 @@ export const LabelOnly: StoryComponentType = {
  */
 export const IconOnly: StoryComponentType = {
     args: {
-        icon: "cookie",
+        icon: "cookieBold",
     },
 };
 

__docs__/wonder-blocks-banner/banner-testing-snapshots.stories.tsx

@@ -125,7 +125,7 @@ export const AllVariantsStory: StoryComponentType = {
                         <Banner
                             {...props}
                             text={`Custom Icon. ${longText}`}
-                            icon={IconMappings.cookie}
+                            icon={IconMappings.cookieBold}
                         />
                         <Banner
                             {...props}
@@ -260,7 +260,7 @@ const scenarios = [
     {
         name: "With custom Phosphor icon",
         props: {
-            icon: IconMappings.cookie,
+            icon: IconMappings.cookieBold,
         },
     },
     {

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

@@ -50,6 +50,7 @@ import playCircle from "@phosphor-icons/core/regular/play-circle.svg";
 import playCircleBold from "@phosphor-icons/core/bold/play-circle-bold.svg";
 import gear from "@phosphor-icons/core/regular/gear.svg";
 import cookie from "@phosphor-icons/core/regular/cookie.svg";
+import cookieBold from "@phosphor-icons/core/bold/cookie-bold.svg";
 import iceCream from "@phosphor-icons/core/regular/ice-cream.svg";
 
 import {color} from "@khanacademy/wonder-blocks-tokens";
@@ -108,6 +109,7 @@ export const IconMappings = {
     playCircleBold,
     gear,
     cookie,
+    cookieBold,
     iceCream,
 } as const;