fix merge conflicts

Khan · Oct 27, 2023 · f36f5dd · f36f5dd
2 parents 9f10cd1 + 22ccc5a
commit f36f5dd
Show file tree

Hide file tree

Showing 67 changed files with 1,020 additions and 690 deletions.
diff --git a/.changeset/lazy-files-cheer.md b/.changeset/lazy-files-cheer.md
diff --git a/.changeset/neat-trees-occur.md b/.changeset/neat-trees-occur.md
diff --git a/.changeset/tricky-phones-applaud.md b/.changeset/tricky-phones-applaud.md
diff --git a/.github/workflows/node-ci-pr.yml b/.github/workflows/node-ci-pr.yml
@@ -2,7 +2,9 @@ name: Node CI (PR)
 
 on:
   pull_request:
-    types: [edited, opened, synchronize, reopened]
+    # ready_for_review is useful for when a PR is converted from "draft" to "not
+    # draft".
+    types: [edited, opened, synchronize, ready_for_review, reopened]
 
 # Our jobs run like this to minimize wasting resource cycles:
 #   1. Prime caches for primary configuration (ubuntu on node 16).

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/package.json b/package.json
@@ -50,15 +50,15 @@
     "@khanacademy/eslint-plugin": "^2.0.0",
     "@khanacademy/wonder-stuff-testing": "^3.0.1",
     "@rollup/plugin-node-resolve": "^15.0.2",
-    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-a11y": "^7.5.1",
     "@storybook/addon-designs": "^7.0.5",
-    "@storybook/addon-docs": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-mdx-gfm": "^7.4.6",
+    "@storybook/addon-docs": "^7.5.1",
+    "@storybook/addon-essentials": "^7.5.1",
+    "@storybook/addon-interactions": "^7.5.1",
+    "@storybook/addon-mdx-gfm": "^7.5.1",
     "@storybook/jest": "^0.2.3",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
+    "@storybook/react": "^7.5.1",
+    "@storybook/react-vite": "^7.5.1",
     "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "^1.6.5",
     "@swc/core": "^1.3.36",
@@ -109,7 +109,7 @@
     "rollup": "^2.79.1",
     "rollup-plugin-auto-external": "^2.0.0",
     "rollup-plugin-babel": "^4.0.0-beta.2",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.1",
     "storybook-addon-pseudo-states": "^2.1.2",
     "typescript": "^4.9.5",
     "typescript-coverage-report": "^0.7.0",
@@ -141,4 +141,4 @@
     "strip-ansi": "6.0.1",
     "strip-ansi-explanation": "There's an issue with strip-ansi v7 which causes conflicts with the Khan/changeset-per-package action"
   }
-}
+}
diff --git a/packages/wonder-blocks-accordion/CHANGELOG.md b/packages/wonder-blocks-accordion/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 1.0.0
+
+### Major Changes
+
+-   ff34408e: Create Accordion and AccordionSection components
+
+### Patch Changes
+
+-   Updated dependencies [7055ca94]
+    -   @khanacademy/wonder-blocks-core@6.3.0
+    -   @khanacademy/wonder-blocks-clickable@4.0.9
+    -   @khanacademy/wonder-blocks-icon@2.2.1
+    -   @khanacademy/wonder-blocks-typography@2.1.9
+
 ## 0.0.5
 
 ### Patch Changes

diff --git a/packages/wonder-blocks-accordion/package.json b/packages/wonder-blocks-accordion/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-accordion",
-  "version": "0.0.5",
+  "version": "1.0.0",
   "design": "v1",
   "description": "Accordion components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -17,11 +17,11 @@
     "access": "restricted"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "^4.0.8",
-    "@khanacademy/wonder-blocks-core": "^6.2.0",
-    "@khanacademy/wonder-blocks-icon": "^2.2.0",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.9",
+    "@khanacademy/wonder-blocks-core": "^6.3.0",
+    "@khanacademy/wonder-blocks-icon": "^2.2.1",
     "@khanacademy/wonder-blocks-theming": "^1.1.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.8"
+    "@khanacademy/wonder-blocks-typography": "^2.1.9"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",

diff --git a/packages/wonder-blocks-banner/CHANGELOG.md b/packages/wonder-blocks-banner/CHANGELOG.md
@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-banner
 
+## 3.0.24
+
+### Patch Changes
+
+-   9489dde8: Add PhosphorIcon support to Banners
+-   Updated dependencies [7055ca94]
+-   Updated dependencies [f620da39]
+    -   @khanacademy/wonder-blocks-core@6.3.0
+    -   @khanacademy/wonder-blocks-button@6.0.0
+    -   @khanacademy/wonder-blocks-icon@2.2.1
+    -   @khanacademy/wonder-blocks-icon-button@5.0.1
+    -   @khanacademy/wonder-blocks-link@5.0.10
+    -   @khanacademy/wonder-blocks-typography@2.1.9
+
 ## 3.0.23
 
 ### Patch Changes

diff --git a/packages/wonder-blocks-banner/package.json b/packages/wonder-blocks-banner/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-banner",
-  "version": "3.0.23",
+  "version": "3.0.24",
   "design": "v1",
   "description": "Banner components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,14 +16,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^5.0.0",
+    "@khanacademy/wonder-blocks-button": "^6.0.0",
     "@khanacademy/wonder-blocks-color": "^3.0.0",
-    "@khanacademy/wonder-blocks-core": "^6.2.0",
-    "@khanacademy/wonder-blocks-icon": "^2.2.0",
-    "@khanacademy/wonder-blocks-icon-button": "^5.0.0",
-    "@khanacademy/wonder-blocks-link": "^5.0.9",
+    "@khanacademy/wonder-blocks-core": "^6.3.0",
+    "@khanacademy/wonder-blocks-icon": "^2.2.1",
+    "@khanacademy/wonder-blocks-icon-button": "^5.0.1",
+    "@khanacademy/wonder-blocks-link": "^5.0.10",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.8"
+    "@khanacademy/wonder-blocks-typography": "^2.1.9"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",

diff --git a/packages/wonder-blocks-banner/src/components/banner-icons.ts b/packages/wonder-blocks-banner/src/components/banner-icons.ts
diff --git a/packages/wonder-blocks-banner/src/components/banner.tsx b/packages/wonder-blocks-banner/src/components/banner.tsx
@@ -6,13 +6,19 @@ 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 Icon from "@khanacademy/wonder-blocks-icon";
+import {
+    PhosphorIcon,
+    PhosphorIconMedium,
+} 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";
 import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
-import * as bannerIcons from "./banner-icons";
+import infoIcon from "@phosphor-icons/core/regular/info.svg";
+import successIcon from "@phosphor-icons/core/regular/smiley.svg";
+import warningIcon from "@phosphor-icons/core/regular/warning.svg";
+import criticalIcon from "@phosphor-icons/core/regular/warning-circle.svg";
 
 type ActionTriggerBase = {
     title: string;
@@ -71,6 +77,7 @@ type BannerLayout =
 
 type BannerValues = {
     color: string;
+    icon: PhosphorIconMedium;
     role: "status" | "alert";
     ariaLive?: "assertive" | "polite";
 };
@@ -114,27 +121,31 @@ type Props = {
     testId?: string;
 };
 
-const valuesForKind = (kind: BannerKind): BannerValues => {
+const getValuesForKind = (kind: BannerKind): BannerValues => {
     switch (kind) {
         case "success":
             return {
                 color: Color.green,
+                icon: successIcon,
                 role: "status",
             };
         case "warning":
             return {
                 color: Color.gold,
+                icon: warningIcon,
                 role: "alert",
                 ariaLive: "polite",
             };
         case "critical":
             return {
                 color: Color.red,
+                icon: criticalIcon,
                 role: "alert",
             };
         default:
             return {
                 color: Color.blue,
+                icon: infoIcon,
                 role: "status",
             };
     }
@@ -224,27 +235,29 @@ const Banner = (props: Props): React.ReactElement => {
         });
     };
 
+    const valuesForKind = getValuesForKind(kind);
+
     return (
         <View
             style={[
                 styles.containerOuter,
                 layout === "floating" && styles.floatingBorder,
-                {borderInlineStartColor: valuesForKind(kind).color},
+                {borderInlineStartColor: valuesForKind.color},
             ]}
-            role={valuesForKind(kind).role}
+            role={valuesForKind.role}
             aria-label={ariaLabel}
-            aria-live={valuesForKind(kind).ariaLive}
+            aria-live={valuesForKind.ariaLive}
             testId={testId}
         >
             <View
                 style={[
                     styles.backgroundColor,
-                    {backgroundColor: valuesForKind(kind).color},
+                    {backgroundColor: valuesForKind.color},
                 ]}
             />
             <View style={styles.containerInner}>
-                <Icon
-                    icon={bannerIcons[kind]}
+                <PhosphorIcon
+                    icon={valuesForKind.icon}
                     size="medium"
                     style={styles.icon}
                     aria-label={kind}

diff --git a/packages/wonder-blocks-birthday-picker/CHANGELOG.md b/packages/wonder-blocks-birthday-picker/CHANGELOG.md
@@ -1,5 +1,16 @@
 # @khanacademy/wonder-blocks-birthday-picker
 
+## 2.0.36
+
+### Patch Changes
+
+-   Updated dependencies [7055ca94]
+    -   @khanacademy/wonder-blocks-core@6.3.0
+    -   @khanacademy/wonder-blocks-dropdown@3.1.4
+    -   @khanacademy/wonder-blocks-icon@2.2.1
+    -   @khanacademy/wonder-blocks-layout@2.0.24
+    -   @khanacademy/wonder-blocks-typography@2.1.9
+
 ## 2.0.35
 
 ### Patch Changes