Update Storybook docs to use PhosphorIcon instead of Icon

Khan · Nov 15, 2023 · 8ca011a · 8ca011a
1 parent 7b24db9
commit 8ca011a
Show file tree

Hide file tree

Showing 19 changed files with 261 additions and 164 deletions.
diff --git a/.changeset/flat-pianos-relate.md b/.changeset/flat-pianos-relate.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/__docs__/components/gallery/sections/cell-section.tsx b/__docs__/components/gallery/sections/cell-section.tsx
@@ -3,14 +3,15 @@ import {StyleSheet} from "aphrodite";
 
 import {CompactCell, DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
+import {IconMappings} from "../../../wonder-blocks-icon/phosphor-icon.argtypes";
 
 import ComponentTile from "../component-tile";
 import {styles} from "../styles";
 
-export default function BannerSection() {
+export default function CellSection() {
     return (
         <>
             <HeadingLarge id="cell" tag="h3" style={styles.sectionLabel}>
@@ -28,7 +29,10 @@ export default function BannerSection() {
                         <CompactCell
                             title="Intro to rational & irrational numbers"
                             rightAccessory={
-                                <Icon icon={icons.caretRight} size="small" />
+                                <PhosphorIcon
+                                    icon={IconMappings.caretRightBold}
+                                    size="small"
+                                />
                             }
                         />
                     </View>
@@ -48,10 +52,16 @@ export default function BannerSection() {
                             subtitle1={"Subtitle 1 for article item"}
                             subtitle2={"Subtitle 2 for article item"}
                             leftAccessory={
-                                <Icon icon={icons.contentVideo} size="medium" />
+                                <PhosphorIcon
+                                    icon={IconMappings.playCircle}
+                                    size="medium"
+                                />
                             }
                             rightAccessory={
-                                <Icon icon={icons.caretRight} size="small" />
+                                <PhosphorIcon
+                                    icon={IconMappings.caretRightBold}
+                                    size="small"
+                                />
                             }
                         />
                     </View>

diff --git a/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx b/__docs__/wonder-blocks-accordion/accordion-section.stories.tsx
@@ -6,7 +6,7 @@ import {AccordionSection} from "@khanacademy/wonder-blocks-accordion";
 import Button from "@khanacademy/wonder-blocks-button";
 import {DetailCell} from "@khanacademy/wonder-blocks-cell";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
@@ -15,6 +15,7 @@ import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-accordion/package.json";
 
 import AccordionSectionArgtypes from "./accordion-section.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 /**
  * An AccordionSection displays a section of content that can be shown or
@@ -206,7 +207,10 @@ export const ReactElementInHeader: StoryComponentType = {
                     <DetailCell
                         title="Header for article item"
                         leftAccessory={
-                            <Icon icon={icons.contentVideo} size="medium" />
+                            <PhosphorIcon
+                                icon={IconMappings.playCircle}
+                                size="medium"
+                            />
                         }
                         horizontalRule="none"
                     />
@@ -244,7 +248,10 @@ export const ReactElementInChildren: StoryComponentType = {
                 <DetailCell
                     title="Header for article item"
                     leftAccessory={
-                        <Icon icon={icons.contentVideo} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.playCircle}
+                            size="medium"
+                        />
                     }
                     horizontalRule="none"
                     style={{

diff --git a/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx b/__docs__/wonder-blocks-cell/compact-cell.argtypes.tsx
@@ -1,28 +1,30 @@
 import * as React from "react";
 import type {InputType} from "@storybook/csf";
 import {View} from "@khanacademy/wonder-blocks-core";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {LabelSmall, LabelXSmall} from "@khanacademy/wonder-blocks-typography";
 
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
+
 /**
  * Some pre-defined accessory examples to use in our stories.
  */
 export const AccessoryMappings = {
     withContentArticle: (
-        <Icon icon={icons.contentArticle} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.article} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withContentVideo: (
-        <Icon icon={icons.contentVideo} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.playCircle} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withCaret: (
-        <Icon icon={icons.caretRight} size="medium" />
-    ) as React.ReactElement<React.ComponentProps<typeof Icon>>,
+        <PhosphorIcon icon={IconMappings.caretRight} size="medium" />
+    ) as React.ReactElement<React.ComponentProps<typeof PhosphorIcon>>,
     withText: (<LabelSmall>26.3 GB</LabelSmall>) as React.ReactElement<
         React.ComponentProps<typeof LabelSmall>
     >,
     withIconText: (
         <View style={{alignItems: "center"}}>
-            <Icon icon={icons.info} size="small" />
+            <PhosphorIcon icon={IconMappings.infoBold} size="small" />
             <LabelXSmall>Info</LabelXSmall>
         </View>
     ) as React.ReactElement<React.ComponentProps<typeof View>>,
@@ -51,7 +53,7 @@ export default {
         },
     },
     leftAccessory: {
-        description: `If provided, this adds a left accessory to the cell. Left Accessories can be defined using WB components such as Icon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the "LeftAccessory” area of the Cell.`,
+        description: `If provided, this adds a left accessory to the cell. Left Accessories can be defined using WB components such as PhosphorIcon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the "LeftAccessory” area of the Cell.`,
         control: {type: "select"},
         options: Object.keys(AccessoryMappings) as Array<React.ReactNode>,
         mapping: AccessoryMappings,
@@ -74,7 +76,7 @@ export default {
         },
     },
     rightAccessory: {
-        description: `If provided, this adds a right accessory to the cell. Right Accessories can be defined using WB components such as Icon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the “RightAccessory” area of the Cell.`,
+        description: `If provided, this adds a right accessory to the cell. Right Accessories can be defined using WB components such as PhosphorIcon, IconButton, or it can even be used for a custom node/component if needed. What ever is passed in will occupy the “RightAccessory” area of the Cell.`,
         control: {type: "select"},
         options: Object.keys(AccessoryMappings) as Array<React.ReactNode>,
         mapping: AccessoryMappings,

diff --git a/__docs__/wonder-blocks-cell/compact-cell.stories.tsx b/__docs__/wonder-blocks-cell/compact-cell.stories.tsx
@@ -6,14 +6,14 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
-import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 
 import packageConfig from "../../packages/wonder-blocks-cell/package.json";
 import {CompactCell} from "@khanacademy/wonder-blocks-cell";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import CompactCellArgTypes, {AccessoryMappings} from "./compact-cell.argtypes";
+import {IconMappings} from "../wonder-blocks-icon/phosphor-icon.argtypes";
 
 type StoryComponentType = StoryObj<typeof CompactCell>;
 
@@ -56,7 +56,7 @@ export default {
 export const DefaultCompactCell: StoryComponentType = {
     args: {
         title: "Basic Cell",
-        rightAccessory: <Icon icon={icons.caretRight} />,
+        rightAccessory: <PhosphorIcon icon={IconMappings.caretRight} />,
     },
     parameters: {
         chromatic: {
@@ -72,14 +72,16 @@ export const DefaultCompactCell: StoryComponentType = {
 export const CompactCellLeft: StoryComponentType = () => (
     <CompactCell
         title="Intro to rational & irrational numbers"
-        leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.article} size="medium" />
+        }
     />
 );
 
 CompactCellLeft.parameters = {
     docs: {
         description: {
-            story: "You can create a minimal cell that only uses a title and an Icon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `Icon`, `IconButton`, `Tooltip`, etc.",
+            story: "You can create a minimal cell that only uses a title and an PhosphorIcon that can be placed on the left or right (or both). In this case, we will place the icon on the left to show you how cell is flexible. Note that you can pass any of the existing WB components such as `PhosphorIcon`, `IconButton`, `Tooltip`, etc.",
         },
     },
 };
@@ -91,15 +93,17 @@ export const CompactCellRight: StoryComponentType = {
     render: () => (
         <CompactCell
             title="Intro to rational & irrational numbers"
-            rightAccessory={<Icon icon={icons.caretRight} size="medium" />}
+            rightAccessory={
+                <PhosphorIcon icon={IconMappings.caretRight} size="medium" />
+            }
         />
     ),
 };
 
 CompactCellRight.parameters = {
     docs: {
         description: {
-            story: "You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `Icon`.",
+            story: "You can also create a cell with an accessory placed on the right. Note that you can pass any of the existing WB components such as `PhosphorIcon`.",
         },
     },
 };
@@ -137,18 +141,20 @@ CompactCellWithDifferentHeights.parameters = {
 /**
  * A CompactCell example adding both accessories (left and right)
  */
-const calendarIcon: IconAsset = {
-    small: `M14.22 1.6H13.33V0H11.56V1.6H4.44V0H2.67V1.6H1.78C0.79 1.6 0.01 2.32 0.01 3.2L0 14.4C0 15.28 0.79 16 1.78 16H14.22C15.2 16 16 15.28 16 14.4V3.2C16 2.32 15.2 1.6 14.22 1.6ZM14.22 14.4H1.78V5.6H14.22V14.4ZM3.56 7.2H8V11.2H3.56V7.2Z`,
-};
-
 export const CompactCellBoth: StoryComponentType = {
     name: "CompactCell with both accessories",
     render: () => (
         <CompactCell
             title="Intro to rational & irrational numbers"
-            leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+            leftAccessory={
+                <PhosphorIcon icon={IconMappings.article} size="medium" />
+            }
             rightAccessory={
-                <Icon icon={calendarIcon} size="medium" color={Color.blue} />
+                <PhosphorIcon
+                    icon={IconMappings.calendar}
+                    size="medium"
+                    color={Color.blue}
+                />
             }
         />
     ),
@@ -157,7 +163,7 @@ export const CompactCellBoth: StoryComponentType = {
 CompactCellBoth.parameters = {
     docs: {
         description: {
-            story: "You can also create a more complex cell with accessories placed on both sides. Note that you can extend the Icon component with custom paths such as the following example.",
+            story: "You can also create a more complex cell with accessories placed on both sides. Note that you can extend the PhosphorIcon component with custom paths such as the following example.",
         },
     },
 };
@@ -167,13 +173,17 @@ export const CompactCellAccessoryStyles: StoryComponentType = {
     render: () => (
         <CompactCell
             title="CompactCell with custom accessory styles"
-            leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
+            leftAccessory={
+                <PhosphorIcon icon={IconMappings.article} size="medium" />
+            }
             leftAccessoryStyle={{
                 minWidth: Spacing.xxLarge_48,
                 alignSelf: "flex-start",
                 alignItems: "flex-start",
             }}
-            rightAccessory={<Icon icon={icons.caretRight} size="small" />}
+            rightAccessory={
+                <PhosphorIcon icon={IconMappings.caretRightBold} size="small" />
+            }
             rightAccessoryStyle={{
                 minWidth: Spacing.large_24,
                 alignSelf: "flex-end",
@@ -201,21 +211,21 @@ export const CompactCellHorizontalRules: StoryComponentType = {
             <CompactCell
                 title="This is a basic cell with an 'inset' horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="inset"
             />
             <CompactCell
                 title="This is a basic cell with a 'full-width' horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="full-width"
             />
             <CompactCell
                 title="This is a basic cell without a horizontal rule"
                 leftAccessory={
-                    <Icon icon={icons.contentArticle} size="medium" />
+                    <PhosphorIcon icon={IconMappings.article} size="medium" />
                 }
                 horizontalRule="none"
             />
@@ -234,8 +244,12 @@ CompactCellHorizontalRules.parameters = {
 export const CompactCellWithCustomStyles: StoryComponentType = () => (
     <CompactCell
         title="CompactCell with a darkBlue background"
-        leftAccessory={<Icon icon={icons.contentArticle} size="medium" />}
-        rightAccessory={<Icon icon={calendarIcon} color={Color.white} />}
+        leftAccessory={
+            <PhosphorIcon icon={IconMappings.article} size="medium" />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendar} color={Color.white} />
+        }
         style={{
             background: Color.darkBlue,
             color: Color.white,
@@ -260,7 +274,7 @@ CompactCellWithCustomStyles.parameters = {
 export const ClickableCompactCell: StoryComponentType = () => (
     <CompactCell
         title="Intro to rational & irrational numbers"
-        rightAccessory={<Icon icon={icons.caretRight} />}
+        rightAccessory={<PhosphorIcon icon={IconMappings.caretRight} />}
         onClick={() => {}}
         aria-label="Press to navigate to the article"
     />
@@ -283,9 +297,15 @@ export const CompactCellActive: StoryComponentType = () => (
     <CompactCell
         title="Title for article item"
         leftAccessory={
-            <Icon icon={icons.contentVideo} size="medium" color="black" />
+            <PhosphorIcon
+                icon={IconMappings.playCircle}
+                size="medium"
+                color="black"
+            />
+        }
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendarBold} size="small" />
         }
-        rightAccessory={<Icon icon={calendarIcon} size="small" />}
         active={true}
         onClick={() => {}}
     />
@@ -303,7 +323,9 @@ export const CompactCellDisabled: StoryComponentType = () => (
     <CompactCell
         title="Title for article item"
         leftAccessory={AccessoryMappings.withImage}
-        rightAccessory={<Icon icon={calendarIcon} size="small" />}
+        rightAccessory={
+            <PhosphorIcon icon={IconMappings.calendarBold} size="small" />
+        }
         disabled={true}
         onClick={() => {}}
     />
@@ -339,7 +361,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Active Cell"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     active={true}
                     href="https://khanacademy.org"
@@ -350,7 +375,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with default bg color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -360,7 +388,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with a faded background color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     href="https://khanacademy.org"
                     horizontalRule="full-width"
@@ -371,7 +402,10 @@ export const CompactCellsAsListItems: StoryComponentType = {
                 <CompactCell
                     title="Cell with a solid background color"
                     leftAccessory={
-                        <Icon icon={icons.contentArticle} size="medium" />
+                        <PhosphorIcon
+                            icon={IconMappings.article}
+                            size="medium"
+                        />
                     }
                     onClick={() => {}}
                     style={{background: Color.pink}}