WB-1615: Add PhosphorIcon support to Switch (#2094)

## Summary: Replaces Icon with the new PhosphorIcon component in `Switch`. Now Switch only should accept `PhosphorIcon` instances in its `icon` prop. Issue: WB-1615 ## Test plan: In Storybook, verify that the `Switch` icon stories look correct. Also compare the changes in Chromatic. Author: jandrade Reviewers: jeresig, nishasy Required Reviewers: Approved By: jeresig, nishasy Checks: ❌ codecov/project, ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 16.x), ⏭ Chromatic - Skip on Release PR (changesets), ❌ Publish npm snapshot (ubuntu-latest, 16.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ⏭ dependabot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x) Pull Request URL: #2094
Khan · Oct 23, 2023 · 45a3042 · 45a3042
1 parent a9b02df
commit 45a3042
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 19 deletions.
diff --git a/.changeset/blue-cows-clap.md b/.changeset/blue-cows-clap.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-switch": patch
+---
+
+Add PhosphorIcon support to `Switch`
diff --git a/__docs__/wonder-blocks-switch/switch.argtypes.tsx b/__docs__/wonder-blocks-switch/switch.argtypes.tsx
@@ -67,7 +67,7 @@ export default {
         mapping: iconsMap,
         table: {
             type: {
-                summary: "Icon",
+                summary: "PhosphorIcon",
             },
         },
     },

diff --git a/__docs__/wonder-blocks-switch/switch.stories.tsx b/__docs__/wonder-blocks-switch/switch.stories.tsx
@@ -3,10 +3,11 @@ import type {Meta, StoryObj} from "@storybook/react";
 import {StyleSheet} from "aphrodite";
 import {expect} from "@storybook/jest";
 import {userEvent, within} from "@storybook/testing-library";
+import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 
 import Switch from "@khanacademy/wonder-blocks-switch";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {ThemeSwitcherContext, tokens} from "@khanacademy/wonder-blocks-theming";
 import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
 
@@ -94,7 +95,7 @@ export const Controlled: StoryComponentType = () => {
                 aria-label="test switch"
                 checked={checkedTwo}
                 onChange={setCheckedTwo}
-                icon={<Icon icon={icons.search} />}
+                icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
             />
         </View>
     );
@@ -136,27 +137,34 @@ export const Disabled: StoryComponentType = {
             <Switch
                 checked={false}
                 disabled={true}
-                icon={<Icon icon={icons.search} />}
+                icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
             />
             <Switch
                 checked={true}
                 disabled={true}
-                icon={<Icon icon={icons.search} />}
+                icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
             />
         </View>
     ),
 };
 
 /**
- * The switch can take an `Icon` element which will be rendered inside the slider.
+ * The switch can take a `PhosphorIcon` element which will be rendered inside
+ * the slider.
  */
 export const WithIcon: StoryComponentType = {
     render: () => {
         return (
             <View style={styles.column}>
-                <Switch checked={false} icon={<Icon icon={icons.search} />} />
-
-                <Switch checked={true} icon={<Icon icon={icons.search} />} />
+                <Switch
+                    checked={false}
+                    icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
+                />
+
+                <Switch
+                    checked={true}
+                    icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
+                />
             </View>
         );
     },
@@ -186,21 +194,21 @@ export const KhanmigoTheme = () => {
                     <Switch
                         checked={checkedTwo}
                         onChange={setCheckedTwo}
-                        icon={<Icon icon={icons.search} />}
+                        icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
                     />
                     <Switch
                         checked={true}
-                        icon={<Icon icon={icons.search} />}
+                        icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
                     />
                     <Switch
                         checked={false}
                         disabled={true}
-                        icon={<Icon icon={icons.search} />}
+                        icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
                     />
                     <Switch
                         checked={true}
                         disabled={true}
-                        icon={<Icon icon={icons.search} />}
+                        icon={<PhosphorIcon icon={magnifyingGlassIcon} />}
                     />
                 </View>
             </View>

diff --git a/packages/wonder-blocks-switch/src/components/__tests__/switch.test.tsx b/packages/wonder-blocks-switch/src/components/__tests__/switch.test.tsx
@@ -2,8 +2,9 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 
 import userEvent from "@testing-library/user-event";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
+import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 import Switch from "../switch";
 
 describe("Switch", () => {
@@ -114,7 +115,12 @@ describe("Switch", () => {
                 <RenderStateRoot>
                     <Switch
                         checked={false}
-                        icon={<Icon icon={icons.add} testId="test-icon" />}
+                        icon={
+                            <PhosphorIcon
+                                icon={magnifyingGlassIcon}
+                                testId="test-icon"
+                            />
+                        }
                     />
                 </RenderStateRoot>,
             );

diff --git a/packages/wonder-blocks-switch/src/components/switch.tsx b/packages/wonder-blocks-switch/src/components/switch.tsx
@@ -7,7 +7,7 @@ import {
     addStyle,
     useUniqueIdWithMock,
 } from "@khanacademy/wonder-blocks-core";
-import Icon from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {
     ThemedStylesFn,
     useScopedTheme,
@@ -33,7 +33,7 @@ type Props = Pick<
     /**
      * Optional icon to display on the slider.
      */
-    icon?: React.ReactElement<typeof Icon>;
+    icon?: React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>;
     /**
      * The unique identifier for the switch.
      */
@@ -90,13 +90,15 @@ const SwitchCore = React.forwardRef(function SwitchCore(
         themeName,
     );
 
-    let styledIcon: React.ReactElement<typeof Icon> | undefined;
+    let styledIcon:
+        | React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>
+        | undefined;
     if (icon) {
         styledIcon = React.cloneElement(icon, {
             size: "small",
             style: [sharedStyles.icon, stateStyles.icon],
             "aria-hidden": true,
-        } as Partial<React.ComponentProps<typeof Icon>>);
+        } as Partial<React.ComponentProps<typeof PhosphorIcon>>);
     }
 
     return (