@khanacademy/wonder-blocks-modal 4.1.0 → 4.2.0

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-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",

package/src/components/modal-header.tsx

@@ -1,11 +1,16 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
 import {Breadcrumbs} from "@khanacademy/wonder-blocks-breadcrumbs";
-import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
-import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {HeadingMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Common = {
     /**
@@ -51,10 +56,6 @@ type WithBreadcrumbs = Common & {
 
 type Props = Common | WithSubtitle | WithBreadcrumbs;
 
-type DefaultProps = {
-    light: Props["light"];
-};
-
 /**
  * This is a helper component that is never rendered by itself. It is always
  * pinned to the top of the dialog, is responsive using the same behavior as its
@@ -98,104 +99,96 @@ type DefaultProps = {
  *  />
  * ```
  */
-export default class ModalHeader extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        light: true,
-    };
-
-    render(): React.ReactNode {
-        const {
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'breadcrumbs' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-            breadcrumbs = undefined,
-            light,
-            // @ts-expect-error [FEI-5019] - TS2339 - Property 'subtitle' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
-            subtitle = undefined,
-            testId,
-            title,
-            titleId,
-        } = this.props;
-
-        if (subtitle && breadcrumbs) {
-            throw new Error(
-                "'subtitle' and 'breadcrumbs' can't be used together",
-            );
-        }
-
-        return (
-            <MediaLayout styleSheets={styleSheets}>
-                {({styles}) => (
-                    <View
-                        style={[styles.header, !light && styles.dark]}
-                        testId={testId}
-                    >
-                        {breadcrumbs && (
-                            <View style={styles.breadcrumbs}>
-                                {breadcrumbs}
-                            </View>
-                        )}
-                        <HeadingMedium
-                            style={styles.title}
-                            id={titleId}
-                            testId={testId && `${testId}-title`}
-                        >
-                            {title}
-                        </HeadingMedium>
-                        {subtitle && (
-                            <LabelSmall
-                                style={light && styles.subtitle}
-                                testId={testId && `${testId}-subtitle`}
-                            >
-                                {subtitle}
-                            </LabelSmall>
-                        )}
-                    </View>
-                )}
-            </MediaLayout>
-        );
+export default function ModalHeader(props: Props) {
+    const {
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'breadcrumbs' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
+        breadcrumbs = undefined,
+        light,
+        // @ts-expect-error [FEI-5019] - TS2339 - Property 'subtitle' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.
+        subtitle = undefined,
+        testId,
+        title,
+        titleId,
+    } = props;
+
+    if (subtitle && breadcrumbs) {
+        throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
     }
-}
-
-const styleSheets = {
-    all: StyleSheet.create({
-        header: {
-            boxShadow: `0px 1px 0px ${Color.offBlack16}`,
-            display: "flex",
-            flexDirection: "column",
-            minHeight: 66,
-            padding: `${Spacing.large_24}px ${Spacing.xLarge_32}px`,
-            position: "relative",
-            width: "100%",
-        },
-
-        dark: {
-            background: Color.darkBlue,
-            color: Color.white,
-        },
 
-        breadcrumbs: {
-            color: Color.offBlack64,
-            marginBottom: Spacing.xSmall_8,
-        },
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
+
+    return (
+        <View style={[styles.header, !light && styles.dark]} testId={testId}>
+            {breadcrumbs && (
+                <View style={styles.breadcrumbs}>{breadcrumbs}</View>
+            )}
+            <HeadingMedium
+                style={styles.title}
+                id={titleId}
+                testId={testId && `${testId}-title`}
+            >
+                {title}
+            </HeadingMedium>
+            {subtitle && (
+                <LabelSmall
+                    style={light && styles.subtitle}
+                    testId={testId && `${testId}-subtitle`}
+                >
+                    {subtitle}
+                </LabelSmall>
+            )}
+        </View>
+    );
+}
 
-        title: {
-            // Prevent title from overlapping the close button
-            paddingRight: Spacing.medium_16,
+/**
+ * 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)";
+
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
+    header: {
+        boxShadow: `0px 1px 0px ${theme.color.shadow.default}`,
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 66,
+        padding: `${theme.spacing.header.medium}px ${theme.spacing.header.large}px`,
+        position: "relative",
+        width: "100%",
+
+        [small]: {
+            paddingLeft: theme.spacing.header.small,
+            paddingRight: theme.spacing.header.small,
         },
-
-        subtitle: {
-            color: Color.offBlack64,
-            marginTop: Spacing.xSmall_8,
+    },
+
+    dark: {
+        background: theme.color.bg.inverse,
+        color: theme.color.text.inverse,
+    },
+
+    breadcrumbs: {
+        color: theme.color.text.secondary,
+        marginBottom: theme.spacing.header.xsmall,
+    },
+
+    title: {
+        // Prevent title from overlapping the close button
+        paddingRight: theme.spacing.header.small,
+        [small]: {
+            paddingRight: theme.spacing.header.large,
         },
-    }),
+    },
 
-    small: StyleSheet.create({
-        header: {
-            paddingLeft: Spacing.medium_16,
-            paddingRight: Spacing.medium_16,
-        },
+    subtitle: {
+        color: theme.color.text.secondary,
+        marginTop: theme.spacing.header.xsmall,
+    },
+});
 
-        title: {
-            paddingRight: Spacing.xLarge_32,
-        },
-    }),
-} as const;
+ModalHeader.defaultProps = {
+    light: true,
+};

package/src/components/modal-panel.tsx

@@ -1,14 +1,20 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
 import ModalContent from "./modal-content";
 import ModalHeader from "./modal-header";
 import ModalFooter from "./modal-footer";
 import CloseButton from "./close-button";
+import {
+    ModalDialogThemeContext,
+    ModalDialogThemeContract,
+} from "../themes/themed-modal-dialog";
 
 type Props = {
     /**
@@ -16,20 +22,16 @@ type Props = {
      * are positioned around it.
      */
     content:
-        | React.ReactElement<React.ComponentProps<typeof ModalContent>>
+        | React.ReactElement<PropsFor<typeof ModalContent>>
         | React.ReactNode;
     /**
      * The modal header to show at the top of the panel.
      */
-    header?:
-        | React.ReactElement<React.ComponentProps<typeof ModalHeader>>
-        | React.ReactNode;
+    header?: React.ReactElement<PropsFor<typeof ModalHeader>> | React.ReactNode;
     /**
      * A footer to show beneath the contents.
      */
-    footer?:
-        | React.ReactElement<React.ComponentProps<typeof ModalFooter>>
-        | React.ReactNode;
+    footer?: React.ReactElement<PropsFor<typeof ModalFooter>> | React.ReactNode;
     /**
      * When true, the close button is shown; otherwise, the close button is not shown.
      */
@@ -65,14 +67,8 @@ type Props = {
     testId?: string;
 };
 
-type DefaultProps = {
-    closeButtonVisible: Props["closeButtonVisible"];
-    scrollOverflow: Props["scrollOverflow"];
-    light: Props["light"];
-};
-
 /**
- * ModalPanel is  the content container.
+ * ModalPanel is the content container.
  *
  * **Implementation notes:**
  *
@@ -91,20 +87,23 @@ type DefaultProps = {
  * </ModalDialog>
  * ```
  */
-export default class ModalPanel extends React.Component<Props> {
-    static defaultProps: DefaultProps = {
-        closeButtonVisible: true,
-        scrollOverflow: true,
-        light: true,
-    };
-
-    renderMainContent(): React.ReactNode {
-        const {content, footer, scrollOverflow} = this.props;
+export default function ModalPanel({
+    closeButtonVisible = true,
+    scrollOverflow = true,
+    light = true,
+    content,
+    footer,
+    header,
+    onClose,
+    style,
+    testId,
+}: Props) {
+    const {theme} = useScopedTheme(ModalDialogThemeContext);
+    const styles = useStyles(themedStylesFn, theme);
 
-        const mainContent = ModalContent.isClassOf(content) ? (
-            (content as React.ReactElement<
-                React.ComponentProps<typeof ModalContent>
-            >)
+    const renderMainContent = React.useCallback((): React.ReactNode => {
+        const mainContent = ModalContent.isComponentOf(content) ? (
+            (content as React.ReactElement<PropsFor<typeof ModalContent>>)
         ) : (
             <ModalContent>{content}</ModalContent>
         );
@@ -122,47 +121,41 @@ export default class ModalPanel extends React.Component<Props> {
             // know about things being positioned around it.
             style: [!!footer && styles.hasFooter, mainContent.props.style],
         });
-    }
+    }, [content, footer, scrollOverflow, styles.hasFooter]);
 
-    render(): React.ReactNode {
-        const {
-            closeButtonVisible,
-            footer,
-            header,
-            light,
-            onClose,
-            style,
-            testId,
-        } = this.props;
+    const mainContent = renderMainContent();
 
-        const mainContent = this.renderMainContent();
-
-        return (
-            <View
-                style={[styles.wrapper, !light && styles.dark, style]}
-                testId={testId && `${testId}-panel`}
-            >
-                {closeButtonVisible && (
-                    <CloseButton
-                        light={!light}
-                        onClick={onClose}
-                        style={styles.closeButton}
-                        testId={testId && `${testId}-close`}
-                    />
-                )}
-                {header}
-                {mainContent}
-                {!footer || ModalFooter.isClassOf(footer) ? (
-                    footer
-                ) : (
-                    <ModalFooter>{footer}</ModalFooter>
-                )}
-            </View>
-        );
-    }
+    return (
+        <View
+            style={[styles.wrapper, !light && styles.dark, style]}
+            testId={testId && `${testId}-panel`}
+        >
+            {closeButtonVisible && (
+                <CloseButton
+                    light={!light}
+                    onClick={onClose}
+                    style={styles.closeButton}
+                    testId={testId && `${testId}-close`}
+                />
+            )}
+            {header}
+            {mainContent}
+            {!footer || ModalFooter.isComponentOf(footer) ? (
+                footer
+            ) : (
+                <ModalFooter>{footer}</ModalFooter>
+            )}
+        </View>
+    );
 }
 
-const styles = StyleSheet.create({
+ModalPanel.defaultProps = {
+    closeButtonVisible: true,
+    scrollOverflow: true,
+    light: true,
+};
+
+const themedStylesFn: ThemedStylesFn<ModalDialogThemeContract> = (theme) => ({
     wrapper: {
         flex: "1 1 auto",
         position: "relative",
@@ -177,19 +170,19 @@ const styles = StyleSheet.create({
 
     closeButton: {
         position: "absolute",
-        right: Spacing.medium_16,
-        top: Spacing.medium_16,
+        right: theme.spacing.panel.closeButton,
+        top: theme.spacing.panel.closeButton,
         // This is to allow the button to be tab-ordered before the modal
         // content but still be above the header and content.
         zIndex: 1,
     },
 
     dark: {
-        background: Color.darkBlue,
-        color: Color.white,
+        background: theme.color.bg.inverse,
+        color: theme.color.text.inverse,
     },
 
     hasFooter: {
-        paddingBottom: Spacing.xLarge_32,
+        paddingBottom: theme.spacing.panel.footer,
     },
 });

package/src/themes/default.ts

@@ -1,6 +1,18 @@
 import {tokens} from "@khanacademy/wonder-blocks-theming";
 
 const theme = {
+    color: {
+        bg: {
+            inverse: tokens.color.darkBlue,
+        },
+        text: {
+            inverse: tokens.color.white,
+            secondary: tokens.color.offBlack64,
+        },
+        shadow: {
+            default: tokens.color.offBlack16,
+        },
+    },
     border: {
         radius: tokens.border.radius.medium_4,
     },
@@ -8,6 +20,16 @@ const theme = {
         dialog: {
             small: tokens.spacing.medium_16,
         },
+        panel: {
+            closeButton: tokens.spacing.medium_16,
+            footer: tokens.spacing.xLarge_32,
+        },
+        header: {
+            xsmall: tokens.spacing.xSmall_8,
+            small: tokens.spacing.medium_16,
+            medium: tokens.spacing.large_24,
+            large: tokens.spacing.xLarge_32,
+        },
     },
 };
 

package/src/themes/khanmigo.ts

@@ -0,0 +1,15 @@
+import {mergeTheme, tokens} from "@khanacademy/wonder-blocks-theming";
+import defaultTheme from "./default";
+
+/**
+ * The overrides for the Khanmigo theme.
+ */
+const theme = mergeTheme(defaultTheme, {
+    color: {
+        bg: {
+            inverse: tokens.color.eggplant,
+        },
+    },
+});
+
+export default theme;

package/src/themes/themed-modal-dialog.tsx

@@ -6,6 +6,7 @@ import {
 } from "@khanacademy/wonder-blocks-theming";
 
 import defaultTheme from "./default";
+import khanmigoTheme from "./khanmigo";
 
 type Props = {
     children: React.ReactNode;
@@ -18,7 +19,7 @@ export type ModalDialogThemeContract = typeof defaultTheme;
  */
 const themes: Themes<ModalDialogThemeContract> = {
     default: defaultTheme,
-    // khanmigo: khanmigoTheme,
+    khanmigo: khanmigoTheme,
 };
 
 /**