@khanacademy/wonder-blocks-modal 4.0.39 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-modal
 
+## 4.1.0
+
+### Minor Changes
+
+-   1b21747a: Added theming support to ModalDialog, removed MediaLayout in favor of media queries
+
 ## 4.0.39
 
 ### Patch Changes

package/dist/components/modal-dialog.d.ts

@@ -32,7 +32,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;
     /**
@@ -40,21 +40,5 @@ 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"/>`)
- * - The custom contents below and/or above the Dialog itself (e.g. decorative graphics).
- *
- * **Accessibility notes:**
- * - By default (e.g. using `OnePaneDialog`), `aria-labelledby` is populated automatically using the dialog title `id`.
- * - 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;
-    render(): React.ReactNode;
-}
-export {};
+declare const ModalDialog: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default ModalDialog;

package/dist/es/index.js

@@ -1,98 +1,130 @@
 import * as React from 'react';
-import { StyleSheet } from 'aphrodite';
-import { MediaLayoutContext, MediaLayout, MEDIA_MODAL_SPEC } from '@khanacademy/wonder-blocks-layout';
 import { View, IDProvider } from '@khanacademy/wonder-blocks-core';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { tokens, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
+import { StyleSheet } from 'aphrodite';
 import Color from '@khanacademy/wonder-blocks-color';
+import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { MediaLayout } from '@khanacademy/wonder-blocks-layout';
 import { HeadingMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
 import * as ReactDOM from 'react-dom';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 
-class ModalDialog extends React.Component {
-  render() {
-    const {
-      above,
-      below,
-      role,
-      style,
-      children,
-      testId,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy
-    } = this.props;
-    const contextValue = {
-      ssrSize: "large",
-      mediaSpec: MEDIA_MODAL_SPEC
-    };
-    return React.createElement(MediaLayoutContext.Provider, {
-      value: contextValue
-    }, React.createElement(MediaLayout, {
-      styleSheets: styleSheets$3
-    }, ({
-      styles
-    }) => React.createElement(View, {
-      style: [styles.wrapper, style]
-    }, below && React.createElement(View, {
-      style: styles.below
-    }, below), React.createElement(View, {
-      role: role,
-      "aria-modal": "true",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      style: styles.dialog,
-      testId: testId
-    }, children), above && React.createElement(View, {
-      style: styles.above
-    }, above))));
-  }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
-ModalDialog.defaultProps = {
-  role: "dialog"
-};
-const styleSheets$3 = {
-  all: StyleSheet.create({
-    wrapper: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "stretch",
-      width: "100%",
-      height: "100%",
-      position: "relative"
-    },
+
+const theme = {
+  border: {
+    radius: tokens.border.radius.medium_4
+  },
+  spacing: {
     dialog: {
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      overflow: "hidden"
-    },
-    above: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1
-    },
-    below: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: -1
+      small: tokens.spacing.medium_16
     }
-  }),
-  small: StyleSheet.create({
-    wrapper: {
-      padding: Spacing.medium_16,
+  }
+};
+
+const themes = {
+  default: theme
+};
+const ModalDialogThemeContext = createThemeContext(theme);
+function ThemeModalDialog(props) {
+  const currentTheme = React.useContext(ThemeSwitcherContext);
+  const theme$1 = themes[currentTheme] || theme;
+  return React.createElement(ModalDialogThemeContext.Provider, {
+    value: theme$1
+  }, props.children);
+}
+
+const ModalDialogCore = React.forwardRef(function ModalDialogCore(props, ref) {
+  const {
+    above,
+    below,
+    role = "dialog",
+    style,
+    children,
+    testId,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const {
+    theme
+  } = useScopedTheme(ModalDialogThemeContext);
+  const styles = useStyles(themedStylesFn, theme);
+  return React.createElement(View, {
+    style: [styles.wrapper, style]
+  }, below && React.createElement(View, {
+    style: styles.below
+  }, below), React.createElement(View, {
+    role: role,
+    "aria-modal": "true",
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ref: ref,
+    style: styles.dialog,
+    testId: testId
+  }, children), above && React.createElement(View, {
+    style: styles.above
+  }, above));
+});
+const ModalDialog = React.forwardRef(function ModalDialog(props, ref) {
+  return React.createElement(ThemeModalDialog, null, React.createElement(ModalDialogCore, _extends({}, props, {
+    ref: ref
+  })));
+});
+const small = "@media (max-width: 767px)";
+const themedStylesFn = theme => ({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    [small]: {
+      padding: theme.spacing.dialog.small,
       flexDirection: "column"
     }
-  })
-};
+  },
+  dialog: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.border.radius,
+    overflow: "hidden"
+  },
+  above: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 1
+  },
+  below: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: -1
+  }
+});
+ModalDialog.displayName = "ModalDialog";
 
 class ModalFooter extends React.Component {
   static isClassOf(instance) {
@@ -260,21 +292,6 @@ class FocusTrap extends React.Component {
   }
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
 const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';

package/dist/index.js

@@ -3,11 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var aphrodite = require('aphrodite');
-var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
+var aphrodite = require('aphrodite');
 var Color = require('@khanacademy/wonder-blocks-color');
+var Spacing = require('@khanacademy/wonder-blocks-spacing');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
 var ReactDOM = require('react-dom');
 var wonderBlocksTiming = require('@khanacademy/wonder-blocks-timing');
@@ -17,113 +18,144 @@ var IconButton = require('@khanacademy/wonder-blocks-icon-button');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return Object.freeze(n);
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
+var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 
-class ModalDialog extends React__namespace.Component {
-  render() {
-    const {
-      above,
-      below,
-      role,
-      style,
-      children,
-      testId,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy
-    } = this.props;
-    const contextValue = {
-      ssrSize: "large",
-      mediaSpec: wonderBlocksLayout.MEDIA_MODAL_SPEC
-    };
-    return React__namespace.createElement(wonderBlocksLayout.MediaLayoutContext.Provider, {
-      value: contextValue
-    }, React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
-      styleSheets: styleSheets$3
-    }, ({
-      styles
-    }) => React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles.wrapper, style]
-    }, below && React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles.below
-    }, below), React__namespace.createElement(wonderBlocksCore.View, {
-      role: role,
-      "aria-modal": "true",
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      style: styles.dialog,
-      testId: testId
-    }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles.above
-    }, above))));
-  }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
 }
-ModalDialog.defaultProps = {
-  role: "dialog"
-};
-const styleSheets$3 = {
-  all: aphrodite.StyleSheet.create({
-    wrapper: {
-      display: "flex",
-      flexDirection: "row",
-      alignItems: "stretch",
-      width: "100%",
-      height: "100%",
-      position: "relative"
-    },
+
+const theme = {
+  border: {
+    radius: wonderBlocksTheming.tokens.border.radius.medium_4
+  },
+  spacing: {
     dialog: {
-      width: "100%",
-      height: "100%",
-      borderRadius: 4,
-      overflow: "hidden"
-    },
-    above: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: 1
-    },
-    below: {
-      pointerEvents: "none",
-      position: "absolute",
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      zIndex: -1
+      small: wonderBlocksTheming.tokens.spacing.medium_16
     }
-  }),
-  small: aphrodite.StyleSheet.create({
-    wrapper: {
-      padding: Spacing__default["default"].medium_16,
+  }
+};
+
+const themes = {
+  default: theme
+};
+const ModalDialogThemeContext = wonderBlocksTheming.createThemeContext(theme);
+function ThemeModalDialog(props) {
+  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
+  const theme$1 = themes[currentTheme] || theme;
+  return React__namespace.createElement(ModalDialogThemeContext.Provider, {
+    value: theme$1
+  }, props.children);
+}
+
+const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(props, ref) {
+  const {
+    above,
+    below,
+    role = "dialog",
+    style,
+    children,
+    testId,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } = props;
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn, theme);
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles.wrapper, style]
+  }, below && React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles.below
+  }, below), React__namespace.createElement(wonderBlocksCore.View, {
+    role: role,
+    "aria-modal": "true",
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ref: ref,
+    style: styles.dialog,
+    testId: testId
+  }, children), above && React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles.above
+  }, above));
+});
+const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref) {
+  return React__namespace.createElement(ThemeModalDialog, null, React__namespace.createElement(ModalDialogCore, _extends({}, props, {
+    ref: ref
+  })));
+});
+const small = "@media (max-width: 767px)";
+const themedStylesFn = theme => ({
+  wrapper: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "stretch",
+    width: "100%",
+    height: "100%",
+    position: "relative",
+    [small]: {
+      padding: theme.spacing.dialog.small,
       flexDirection: "column"
     }
-  })
-};
+  },
+  dialog: {
+    width: "100%",
+    height: "100%",
+    borderRadius: theme.border.radius,
+    overflow: "hidden"
+  },
+  above: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 1
+  },
+  below: {
+    pointerEvents: "none",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: -1
+  }
+});
+ModalDialog.displayName = "ModalDialog";
 
 class ModalFooter extends React__namespace.Component {
   static isClassOf(instance) {
@@ -291,21 +323,6 @@ class FocusTrap extends React__namespace.Component {
   }
 }
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-
 const ModalLauncherPortalAttributeName = "data-modal-launcher-portal";
 
 const FOCUSABLE_ELEMENTS = 'a[href], details, input, textarea, select, button:not([aria-label^="Close"])';

package/dist/themes/default.d.ts

@@ -0,0 +1,11 @@
+declare const theme: {
+    border: {
+        radius: number;
+    };
+    spacing: {
+        dialog: {
+            small: 16;
+        };
+    };
+};
+export default theme;

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

@@ -0,0 +1,26 @@
+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<{
+    border: {
+        radius: number;
+    };
+    spacing: {
+        dialog: {
+            small: 16;
+        };
+    };
+}>;
+/**
+ * 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.1.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);
+    });
+});