@khanacademy/wonder-blocks-modal 4.0.39 → 4.2.0

package/dist/themes/default.d.ts

@@ -0,0 +1,33 @@
+declare const theme: {
+    color: {
+        bg: {
+            inverse: string;
+        };
+        text: {
+            inverse: string;
+            secondary: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    border: {
+        radius: number;
+    };
+    spacing: {
+        dialog: {
+            small: 16;
+        };
+        panel: {
+            closeButton: 16;
+            footer: 32;
+        };
+        header: {
+            xsmall: 8;
+            small: 16;
+            medium: 24;
+            large: 32;
+        };
+    };
+};
+export default theme;

package/dist/themes/khanmigo.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The overrides for the Khanmigo theme.
+ */
+declare const theme: {
+    color: {
+        bg: {
+            inverse: string;
+        };
+        text: {
+            inverse: string;
+            secondary: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    border: {
+        radius: number;
+    };
+    spacing: {
+        dialog: {
+            small: 16;
+        };
+        panel: {
+            closeButton: 16;
+            footer: 32;
+        };
+        header: {
+            xsmall: 8;
+            small: 16;
+            medium: 24;
+            large: 32;
+        };
+    };
+};
+export default theme;

package/dist/themes/themed-modal-dialog.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import defaultTheme from "./default";
+type Props = {
+    children: React.ReactNode;
+};
+export type ModalDialogThemeContract = typeof defaultTheme;
+/**
+ * The context that provides the theme to the ModalDialog component.
+ * This is generally consumed via the `useScopedTheme` hook.
+ */
+export declare const ModalDialogThemeContext: React.Context<{
+    color: {
+        bg: {
+            inverse: string;
+        };
+        text: {
+            inverse: string;
+            secondary: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
+    border: {
+        radius: number;
+    };
+    spacing: {
+        dialog: {
+            small: 16;
+        };
+        panel: {
+            closeButton: 16;
+            footer: 32;
+        };
+        header: {
+            xsmall: 8;
+            small: 16;
+            medium: 24;
+            large: 32;
+        };
+    };
+}>;
+/**
+ * ThemeModalDialog is a component that provides a theme to the <ModalDialog/>
+ * component.
+ */
+export default function ThemeModalDialog(props: Props): JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "4.0.39",
+  "version": "4.2.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -22,6 +22,7 @@
     "@khanacademy/wonder-blocks-icon-button": "^5.1.7",
     "@khanacademy/wonder-blocks-layout": "^2.0.25",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+    "@khanacademy/wonder-blocks-theming": "^1.2.1",
     "@khanacademy/wonder-blocks-timing": "^4.0.2",
     "@khanacademy/wonder-blocks-typography": "^2.1.10"
   },

package/src/components/__tests__/modal-dialog.test.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import ModalDialog from "../modal-dialog";
+
+describe("ModalDialog", () => {
+    it("should render its contents", () => {
+        // Arrange
+
+        // Act
+        render(
+            <ModalDialog>
+                <h1>A modal</h1>
+                <p>The contents</p>
+            </ModalDialog>,
+        );
+
+        // Assert
+        expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+
+    it("should announce the dialog if aria-labelledby is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <ModalDialog aria-labelledby="dialog-title">
+                <h1 id="dialog-title">A modal</h1>
+                <p>The contents</p>
+            </ModalDialog>,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("dialog", {name: "A modal"}),
+        ).toBeInTheDocument();
+    });
+
+    it("should announce the dialog's contents if aria-describedby is set", () => {
+        // Arrange
+
+        // Act
+        render(
+            <ModalDialog aria-describedby="dialog-body">
+                <>
+                    <h1>A modal</h1>
+                    <p id="dialog-body">The contents</p>
+                </>
+            </ModalDialog>,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("dialog", {description: "The contents"}),
+        ).toBeInTheDocument();
+    });
+
+    it("adds testId to the dialog element", () => {
+        // Arrange
+
+        // Act
+        render(<ModalDialog testId="test-id">A modal</ModalDialog>);
+
+        // Assert
+        expect(screen.getByTestId("test-id")).toBeInTheDocument();
+    });
+
+    it("forwards the ref to the dialog element", () => {
+        // Arrange
+        const ref: React.RefObject<HTMLDivElement> = React.createRef();
+
+        // Act
+        render(<ModalDialog ref={ref}>A modal</ModalDialog>);
+
+        // Assert
+        expect(ref.current).toBeInstanceOf(HTMLDivElement);
+    });
+});

package/src/components/modal-content.tsx

@@ -1,10 +1,17 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
 
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Props = {
     /** Should the content scroll on overflow, or just expand. */
@@ -15,68 +22,60 @@ type Props = {
     style?: StyleType;
 };
 
-type DefaultProps = {
-    scrollOverflow: Props["scrollOverflow"];
-};
-
 /**
  * The Modal content included after the header
  */
-export default class ModalContent extends React.Component<Props> {
-    static isClassOf(instance: any): boolean {
-        return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-    }
-    static defaultProps: DefaultProps = {
-        scrollOverflow: true,
-    };
+function ModalContent(props: Props) {
+    const {scrollOverflow, style, children} = props;
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
 
-    static __IS_MODAL_CONTENT__ = true;
+    return (
+        <View style={[styles.wrapper, scrollOverflow && styles.scrollOverflow]}>
+            <View style={[styles.content, style]}>{children}</View>
+        </View>
+    );
+}
 
-    render(): React.ReactNode {
-        const {scrollOverflow, style, children} = this.props;
+ModalContent.__IS_MODAL_CONTENT__ = true;
 
-        return (
-            <MediaLayout styleSheets={styleSheets}>
-                {({styles}) => (
-                    <View
-                        style={[
-                            styles.wrapper,
-                            scrollOverflow && styles.scrollOverflow,
-                        ]}
-                    >
-                        <View style={[styles.content, style]}>{children}</View>
-                    </View>
-                )}
-            </MediaLayout>
-        );
-    }
-}
+ModalContent.isComponentOf = (instance: any): boolean => {
+    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+};
 
-const styleSheets = {
-    all: StyleSheet.create({
-        wrapper: {
-            flex: 1,
+/**
+ * Media query for small screens.
+ * TODO(WB-1655): Change this to use the theme instead (inside themedStylesFn).
+ * e.g. `[theme.breakpoints.small]: {...}`
+ */
+const small = "@media (max-width: 767px)";
 
-            // This helps to ensure that the paddingBottom is preserved when
-            // the contents start to overflow, this goes away on display: flex
-            display: "block",
-        },
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
+    wrapper: {
+        flex: 1,
 
-        scrollOverflow: {
-            overflow: "auto",
-        },
+        // This helps to ensure that the paddingBottom is preserved when
+        // the contents start to overflow, this goes away on display: flex
+        display: "block",
+    },
 
-        content: {
-            flex: 1,
-            minHeight: "100%",
-            padding: Spacing.xLarge_32,
-            boxSizing: "border-box",
-        },
-    }),
+    scrollOverflow: {
+        overflow: "auto",
+    },
 
-    small: StyleSheet.create({
-        content: {
+    content: {
+        flex: 1,
+        minHeight: "100%",
+        padding: Spacing.xLarge_32,
+        boxSizing: "border-box",
+        [small]: {
             padding: `${Spacing.xLarge_32}px ${Spacing.medium_16}px`,
         },
-    }),
-} as const;
+    },
+});
+
+ModalContent.defaultProps = {
+    scrollOverflow: true,
+};
+
+export default ModalContent;

package/src/components/modal-dialog.tsx

@@ -1,14 +1,16 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {
-    MediaLayout,
-    MediaLayoutContext,
-    MEDIA_MODAL_SPEC,
-} from "@khanacademy/wonder-blocks-layout";
 import {View} from "@khanacademy/wonder-blocks-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import ThemeModalDialog, {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Props = {
     /**
@@ -42,7 +44,7 @@ type Props = {
      */
     testId?: string;
     /**
-     * The ID of the content labelling this dialog, if applicable.
+     * The ID of the title labelling this dialog, if applicable.
      */
     "aria-labelledby"?: string;
     /**
@@ -51,10 +53,6 @@ type Props = {
     "aria-describedby"?: string;
 };
 
-type DefaultProps = {
-    role: Props["role"];
-};
-
 /**
  * `ModalDialog` is a component that contains these elements:
  * - The visual dialog element itself (`<div role="dialog"/>`)
@@ -65,102 +63,104 @@ type DefaultProps = {
  * - If there is a custom Dialog implementation (e.g. `TwoPaneDialog`), the dialog element doesn’t have to have
  * the `aria-labelledby` attribute however this is recommended. It should match the `id` of the dialog title.
  */
-export default class ModalDialog extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        role: "dialog",
-    };
+const ModalDialogCore = React.forwardRef(function ModalDialogCore(
+    props: Props,
+    ref: React.ForwardedRef<HTMLDivElement>,
+) {
+    const {
+        above,
+        below,
+        role = "dialog",
+        style,
+        children,
+        testId,
+        /* eslint-disable react/prop-types */
+        // the react/prop-types plugin does not like these
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        /* eslint-enable react/prop-types */
+    } = props;
 
-    render(): React.ReactNode {
-        const {
-            above,
-            below,
-            role,
-            style,
-            children,
-            testId,
-            /* eslint-disable react/prop-types */
-            // the react/prop-types plugin does not like these
-            "aria-labelledby": ariaLabelledBy,
-            "aria-describedby": ariaDescribedBy,
-            /* eslint-enable react/prop-types */
-        } = this.props;
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
 
-        const contextValue: MediaLayoutContextValue = {
-            ssrSize: "large",
-            mediaSpec: MEDIA_MODAL_SPEC,
-        };
+    return (
+        <View style={[styles.wrapper, style]}>
+            {below && <View style={styles.below}>{below}</View>}
+            <View
+                role={role}
+                aria-modal="true"
+                aria-labelledby={ariaLabelledBy}
+                aria-describedby={ariaDescribedBy}
+                ref={ref}
+                style={styles.dialog}
+                testId={testId}
+            >
+                {children}
+            </View>
+            {above && <View style={styles.above}>{above}</View>}
+        </View>
+    );
+});
 
-        return (
-            <MediaLayoutContext.Provider value={contextValue}>
-                <MediaLayout styleSheets={styleSheets}>
-                    {({styles}) => (
-                        <View style={[styles.wrapper, style]}>
-                            {below && <View style={styles.below}>{below}</View>}
-                            <View
-                                role={role}
-                                aria-modal="true"
-                                aria-labelledby={ariaLabelledBy}
-                                aria-describedby={ariaDescribedBy}
-                                style={styles.dialog}
-                                testId={testId}
-                            >
-                                {children}
-                            </View>
-                            {above && <View style={styles.above}>{above}</View>}
-                        </View>
-                    )}
-                </MediaLayout>
-            </MediaLayoutContext.Provider>
-        );
-    }
-}
+const ModalDialog = React.forwardRef(function ModalDialog(
+    props: Props,
+    ref: React.ForwardedRef<HTMLDivElement>,
+) {
+    return (
+        <ThemeModalDialog>
+            <ModalDialogCore {...props} ref={ref} />
+        </ThemeModalDialog>
+    );
+});
 
-const styleSheets = {
-    all: StyleSheet.create({
-        wrapper: {
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "stretch",
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        },
+const small = "@media (max-width: 767px)";
 
-        /**
-         * Ensures the dialog container uses the container size
-         */
-        dialog: {
-            width: "100%",
-            height: "100%",
-            borderRadius: 4,
-            overflow: "hidden",
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
+    wrapper: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "stretch",
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        [small]: {
+            padding: theme.spacing.dialog.small,
+            flexDirection: "column",
         },
+    },
 
-        above: {
-            pointerEvents: "none",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            zIndex: 1,
-        },
+    /**
+     * Ensures the dialog container uses the container size
+     */
+    dialog: {
+        width: "100%",
+        height: "100%",
+        borderRadius: theme.border.radius,
+        overflow: "hidden",
+    },
 
-        below: {
-            pointerEvents: "none",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            zIndex: -1,
-        },
-    }),
+    above: {
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: 1,
+    },
 
-    small: StyleSheet.create({
-        wrapper: {
-            padding: Spacing.medium_16,
-            flexDirection: "column",
-        },
-    }),
-} as const;
+    below: {
+        pointerEvents: "none",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        zIndex: -1,
+    },
+});
+
+ModalDialog.displayName = "ModalDialog";
+
+export default ModalDialog;

package/src/components/modal-footer.tsx

@@ -25,18 +25,16 @@ type Props = {
  * </ModalFooter>
  * ```
  */
-export default class ModalFooter extends React.Component<Props> {
-    static isClassOf(instance: any): boolean {
-        return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-    }
-    static __IS_MODAL_FOOTER__ = true;
-
-    render(): React.ReactNode {
-        const {children} = this.props;
-        return <View style={styles.footer}>{children}</View>;
-    }
+export default function ModalFooter({children}: Props) {
+    return <View style={styles.footer}>{children}</View>;
 }
 
+ModalFooter.__IS_MODAL_FOOTER__ = true;
+
+ModalFooter.isComponentOf = (instance: any): boolean => {
+    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+};
+
 const styles = StyleSheet.create({
     footer: {
         flex: "0 0 auto",