From 5bb5efbd73e18e45124c7da19a83aabaa150b4e0 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@khanacademy.org>
Date: Mon, 10 Jun 2024 15:06:16 -0600
Subject: [PATCH 1/3] Adds large IconButton size

---
 .changeset/four-donuts-chew.md                               | 5 +++++
 __docs__/wonder-blocks-icon-button/icon-button.argtypes.ts   | 4 ++--
 __docs__/wonder-blocks-icon-button/icon-button.stories.tsx   | 5 +++++
 .../wonder-blocks-icon-button/src/components/icon-button.tsx | 5 +++--
 .../src/util/icon-button-util.test.ts                        | 2 ++
 .../wonder-blocks-icon-button/src/util/icon-button-util.ts   | 4 +++-
 6 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/four-donuts-chew.md

diff --git a/.changeset/four-donuts-chew.md b/.changeset/four-donuts-chew.md
new file mode 100644
index 000000000..b4be6170d
--- /dev/null
+++ b/.changeset/four-donuts-chew.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-icon-button": minor
+---
+
+IconButton: Add option for `large` value for `size` prop (24x24 icon size with target area of 48x48)
diff --git a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
index 4e97b5293..5ec198778 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
+++ b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
@@ -49,10 +49,10 @@ export default {
             type: "select",
         },
         description: "The size of the icon button.",
-        options: ["xsmall", "small", "medium"],
+        options: ["xsmall", "small", "medium", "large"],
         table: {
             type: {
-                summary: `"xsmall" | "small" | "medium"`,
+                summary: `"xsmall" | "small" | "medium" | "large"`,
             },
             defaultValue: {
                 summary: `"medium"`,
diff --git a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
index 79aed0cfc..92556aaea 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
+++ b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
@@ -115,6 +115,7 @@ export const Default: StoryComponentType = {
  * - `xsmall` (16px icon with a 24px touch target).
  * - `small` (24px icon with a 32px touch target).
  * - `medium` (24px icon with a 40px touch target).
+ * - `large` (24px icon with a 48px touch target).
  */
 export const Sizes: StoryComponentType = {
     ...Default,
@@ -139,6 +140,10 @@ export const Sizes: StoryComponentType = {
                 <LabelMedium style={styles.label}>medium</LabelMedium>
                 <IconButton {...args} size="medium" />
             </View>
+            <View style={styles.row}>
+                <LabelMedium style={styles.label}>large</LabelMedium>
+                <IconButton {...args} size="large" />
+            </View>
         </View>
     ),
 };
diff --git a/packages/wonder-blocks-icon-button/src/components/icon-button.tsx b/packages/wonder-blocks-icon-button/src/components/icon-button.tsx
index a8ce6ee8f..aaa9818bf 100644
--- a/packages/wonder-blocks-icon-button/src/components/icon-button.tsx
+++ b/packages/wonder-blocks-icon-button/src/components/icon-button.tsx
@@ -6,7 +6,7 @@ import {Link} from "react-router-dom";
 import IconButtonCore from "./icon-button-core";
 import ThemedIconButton from "../themes/themed-icon-button";
 
-export type IconButtonSize = "xsmall" | "small" | "medium";
+export type IconButtonSize = "xsmall" | "small" | "medium" | "large";
 
 export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
@@ -42,7 +42,8 @@ export type SharedProps = Partial<Omit<AriaProps, "aria-disabled">> & {
     testId?: string;
     /**
      * Size of the icon button.
-     * One of `xsmall` (16 icon, 20 target), `small` (24, 32), or `medium (24, 40).
+     * One of `xsmall` (16 icon, 20 target), `small` (24, 32), `medium` (24, 40),
+     * or `large` (24, 48).
      * Defaults to `medium`.
      */
     size?: IconButtonSize;
diff --git a/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts b/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts
index 039290f28..ea2b0f221 100644
--- a/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts
+++ b/packages/wonder-blocks-icon-button/src/util/icon-button-util.test.ts
@@ -6,6 +6,7 @@ describe("iconSizeForButtonSize", () => {
         ${"xsmall"} | ${"small"}
         ${"small"}  | ${"medium"}
         ${"medium"} | ${"medium"}
+        ${"large"}  | ${"medium"}
     `(
         "should return $expectedIconSize icon for $buttonSize icon button",
         ({buttonSize, expectedIconSize}) => {
@@ -20,6 +21,7 @@ describe("targetPixelsForSize", () => {
         ${"xsmall"} | ${24}
         ${"small"}  | ${32}
         ${"medium"} | ${40}
+        ${"large"}  | ${48}
     `(
         "should return $expectedTargetPixels for $size icon button",
         ({size, expectedTargetPixels}) => {
diff --git a/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts b/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts
index 3b4d6dacd..652e4ccd8 100644
--- a/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts
+++ b/packages/wonder-blocks-icon-button/src/util/icon-button-util.ts
@@ -12,6 +12,8 @@ export const iconSizeForButtonSize = (size: IconButtonSize): IconSize => {
             return "medium";
         case "medium":
             return "medium";
+        case "large":
+            return "medium";
     }
 };
 
@@ -19,4 +21,4 @@ export const iconSizeForButtonSize = (size: IconButtonSize): IconSize => {
  * A function that returns the size of the touch target in pixels for a given icon button size.
  */
 export const targetPixelsForSize = (size: IconButtonSize): number =>
-    ({xsmall: 24, small: 32, medium: 40}[size]);
+    ({xsmall: 24, small: 32, medium: 40, large: 48}[size]);

From 47d4182532fc3b443fa88d7f86ba9b0307638c49 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@khanacademy.org>
Date: Mon, 10 Jun 2024 15:44:49 -0600
Subject: [PATCH 2/3] Add aria-label to IconButton stories to address a11y
 warnings in addon

---
 .../icon-button-variants.stories.tsx                |  3 +++
 .../icon-button.argtypes.ts                         | 13 +++++++++++++
 .../icon-button.stories.tsx                         |  9 ++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
index 1aaa4b420..9d4a6211b 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
+++ b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
@@ -49,6 +49,7 @@ const KindVariants = ({
                             {kind}-default
                         </LabelMedium>
                         <IconButton
+                            aria-label="Send"
                             icon={paperPlaneIcon}
                             onClick={action("clicked")}
                             kind={kind}
@@ -69,6 +70,7 @@ const KindVariants = ({
                             {kind}-destructive
                         </LabelMedium>
                         <IconButton
+                            aria-label="Send"
                             icon={paperPlaneIcon}
                             onClick={action("clicked")}
                             kind={kind}
@@ -89,6 +91,7 @@ const KindVariants = ({
                             {kind}-disabled
                         </LabelMedium>
                         <IconButton
+                            aria-label="Send"
                             icon={paperPlaneIcon}
                             onClick={action("clicked")}
                             kind={kind}
diff --git a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
index 5ec198778..eb5e1ac47 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
+++ b/__docs__/wonder-blocks-icon-button/icon-button.argtypes.ts
@@ -59,4 +59,17 @@ export default {
             },
         },
     },
+    "aria-label": {
+        description:
+            "The description of this component for the screenreader to read.",
+        control: {
+            type: "text",
+        },
+        table: {
+            category: "Accessibility",
+            type: {
+                summary: "string",
+            },
+        },
+    },
 };
diff --git a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
index 92556aaea..7e1e004f2 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
+++ b/__docs__/wonder-blocks-icon-button/icon-button.stories.tsx
@@ -84,6 +84,9 @@ export default {
         },
     },
     argTypes: IconButtonArgtypes,
+    args: {
+        "aria-label": "Search",
+    },
 } as Meta<typeof IconButton>;
 
 type StoryComponentType = StoryObj<typeof IconButton>;
@@ -190,26 +193,30 @@ export const Variants: StoryComponentType = {
  */
 export const WithColor: StoryComponentType = {
     name: "Color",
-    render: () => (
+    render: (args) => (
         <View style={styles.row}>
             <IconButton
+                {...args}
                 icon={minusCircle}
                 onClick={() => {}}
                 color="destructive"
             />
             <IconButton
+                {...args}
                 icon={minusCircle}
                 onClick={() => {}}
                 kind="secondary"
                 color="destructive"
             />
             <IconButton
+                {...args}
                 icon={minusCircle}
                 onClick={() => {}}
                 kind="tertiary"
                 color="destructive"
             />
             <IconButton
+                {...args}
                 disabled={true}
                 icon={minusCircle}
                 aria-label="search"

From a15c4c45401290ab327a5f853619fdb7f4efdb93 Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@khanacademy.org>
Date: Thu, 13 Jun 2024 11:27:05 -0600
Subject: [PATCH 3/3] Add size to variants story for IconButton

---
 .../icon-button-variants.stories.tsx          | 91 +++++++++++++------
 1 file changed, 61 insertions(+), 30 deletions(-)

diff --git a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
index 9d4a6211b..c55f658a5 100644
--- a/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
+++ b/__docs__/wonder-blocks-icon-button/icon-button-variants.stories.tsx
@@ -25,6 +25,13 @@ export default {
 
 type StoryComponentType = StoryObj<typeof IconButton>;
 
+const sizes: ("xsmall" | "small" | "medium" | "large")[] = [
+    "xsmall",
+    "small",
+    "medium",
+    "large",
+];
+
 const KindVariants = ({
     kind,
     light,
@@ -38,7 +45,7 @@ const KindVariants = ({
                 <>
                     <View
                         style={[
-                            styles.gridRow,
+                            styles.gridCol,
                             light &&
                                 (theme === "khanmigo"
                                     ? styles.darkKhanmigo
@@ -48,18 +55,24 @@ const KindVariants = ({
                         <LabelMedium style={light && {color: color.white}}>
                             {kind}-default
                         </LabelMedium>
-                        <IconButton
-                            aria-label="Send"
-                            icon={paperPlaneIcon}
-                            onClick={action("clicked")}
-                            kind={kind}
-                            light={light}
-                            color="default"
-                        />
+                        <View style={[styles.iconButtons]}>
+                            {sizes.map((size) => (
+                                <IconButton
+                                    aria-label="Send"
+                                    icon={paperPlaneIcon}
+                                    onClick={action("clicked")}
+                                    kind={kind}
+                                    light={light}
+                                    color="default"
+                                    size={size}
+                                    key={size}
+                                />
+                            ))}
+                        </View>
                     </View>
                     <View
                         style={[
-                            styles.gridRow,
+                            styles.gridCol,
                             light &&
                                 (theme === "khanmigo"
                                     ? styles.darkKhanmigo
@@ -69,18 +82,24 @@ const KindVariants = ({
                         <LabelMedium style={light && {color: color.white}}>
                             {kind}-destructive
                         </LabelMedium>
-                        <IconButton
-                            aria-label="Send"
-                            icon={paperPlaneIcon}
-                            onClick={action("clicked")}
-                            kind={kind}
-                            light={light}
-                            color="destructive"
-                        />
+                        <View style={[styles.iconButtons]}>
+                            {sizes.map((size) => (
+                                <IconButton
+                                    aria-label="Send"
+                                    icon={paperPlaneIcon}
+                                    onClick={action("clicked")}
+                                    kind={kind}
+                                    light={light}
+                                    color="destructive"
+                                    size={size}
+                                    key={size}
+                                />
+                            ))}
+                        </View>
                     </View>
                     <View
                         style={[
-                            styles.gridRow,
+                            styles.gridCol,
                             light &&
                                 (theme === "khanmigo"
                                     ? styles.darkKhanmigo
@@ -90,14 +109,20 @@ const KindVariants = ({
                         <LabelMedium style={light && {color: color.white}}>
                             {kind}-disabled
                         </LabelMedium>
-                        <IconButton
-                            aria-label="Send"
-                            icon={paperPlaneIcon}
-                            onClick={action("clicked")}
-                            kind={kind}
-                            light={light}
-                            disabled={true}
-                        />
+                        <View style={[styles.iconButtons]}>
+                            {sizes.map((size) => (
+                                <IconButton
+                                    aria-label="Send"
+                                    icon={paperPlaneIcon}
+                                    onClick={action("clicked")}
+                                    kind={kind}
+                                    light={light}
+                                    disabled={true}
+                                    size={size}
+                                    key={size}
+                                />
+                            ))}
+                        </View>
                     </View>
                 </>
             )}
@@ -163,11 +188,17 @@ const styles = StyleSheet.create({
         gridTemplateColumns: "repeat(3, 250px)",
         gap: spacing.large_24,
     },
-    gridRow: {
-        flexDirection: "row",
+    gridCol: {
+        flexDirection: "column",
         alignItems: "center",
-        gap: spacing.medium_16,
+        gap: spacing.large_24,
         justifyContent: "space-between",
         padding: spacing.medium_16,
     },
+    iconButtons: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xLarge_32,
+    },
 });