@khanacademy/wonder-blocks-modal 4.1.0 → 4.2.0

package/dist/index.js

@@ -8,12 +8,12 @@ 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');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var IconButton = require('@khanacademy/wonder-blocks-icon-button');
+var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -57,26 +57,57 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-const theme = {
+const theme$1 = {
+  color: {
+    bg: {
+      inverse: wonderBlocksTheming.tokens.color.darkBlue
+    },
+    text: {
+      inverse: wonderBlocksTheming.tokens.color.white,
+      secondary: wonderBlocksTheming.tokens.color.offBlack64
+    },
+    shadow: {
+      default: wonderBlocksTheming.tokens.color.offBlack16
+    }
+  },
   border: {
     radius: wonderBlocksTheming.tokens.border.radius.medium_4
   },
   spacing: {
     dialog: {
       small: wonderBlocksTheming.tokens.spacing.medium_16
+    },
+    panel: {
+      closeButton: wonderBlocksTheming.tokens.spacing.medium_16,
+      footer: wonderBlocksTheming.tokens.spacing.xLarge_32
+    },
+    header: {
+      xsmall: wonderBlocksTheming.tokens.spacing.xSmall_8,
+      small: wonderBlocksTheming.tokens.spacing.medium_16,
+      medium: wonderBlocksTheming.tokens.spacing.large_24,
+      large: wonderBlocksTheming.tokens.spacing.xLarge_32
     }
   }
 };
 
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      inverse: wonderBlocksTheming.tokens.color.eggplant
+    }
+  }
+});
+
 const themes = {
-  default: theme
+  default: theme$1,
+  khanmigo: theme
 };
-const ModalDialogThemeContext = wonderBlocksTheming.createThemeContext(theme);
+const ModalDialogThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
 function ThemeModalDialog(props) {
   const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
-  const theme$1 = themes[currentTheme] || theme;
+  const theme = themes[currentTheme] || theme$1;
   return React__namespace.createElement(ModalDialogThemeContext.Provider, {
-    value: theme$1
+    value: theme
   }, props.children);
 }
 
@@ -94,7 +125,7 @@ const ModalDialogCore = React__namespace.forwardRef(function ModalDialogCore(pro
   const {
     theme
   } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
-  const styles = wonderBlocksTheming.useStyles(themedStylesFn, theme);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$3, theme);
   return React__namespace.createElement(wonderBlocksCore.View, {
     style: [styles.wrapper, style]
   }, below && React__namespace.createElement(wonderBlocksCore.View, {
@@ -116,8 +147,8 @@ const ModalDialog = React__namespace.forwardRef(function ModalDialog(props, ref)
     ref: ref
   })));
 });
-const small = "@media (max-width: 767px)";
-const themedStylesFn = theme => ({
+const small$2 = "@media (max-width: 767px)";
+const themedStylesFn$3 = theme => ({
   wrapper: {
     display: "flex",
     flexDirection: "row",
@@ -125,7 +156,7 @@ const themedStylesFn = theme => ({
     width: "100%",
     height: "100%",
     position: "relative",
-    [small]: {
+    [small$2]: {
       padding: theme.spacing.dialog.small,
       flexDirection: "column"
     }
@@ -157,21 +188,18 @@ const themedStylesFn = theme => ({
 });
 ModalDialog.displayName = "ModalDialog";
 
-class ModalFooter extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
-  }
-  render() {
-    const {
-      children
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles$3.footer
-    }, children);
-  }
+function ModalFooter({
+  children
+}) {
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles$2.footer
+  }, children);
 }
 ModalFooter.__IS_MODAL_FOOTER__ = true;
-const styles$3 = aphrodite.StyleSheet.create({
+ModalFooter.isComponentOf = instance => {
+  return instance && instance.type && instance.type.__IS_MODAL_FOOTER__;
+};
+const styles$2 = aphrodite.StyleSheet.create({
   footer: {
     flex: "0 0 auto",
     boxSizing: "border-box",
@@ -188,77 +216,72 @@ const styles$3 = aphrodite.StyleSheet.create({
   }
 });
 
-class ModalHeader extends React__namespace.Component {
-  render() {
-    const {
-      breadcrumbs = undefined,
-      light,
-      subtitle = undefined,
-      testId,
-      title,
-      titleId
-    } = this.props;
-    if (subtitle && breadcrumbs) {
-      throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
-    }
-    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
-      styleSheets: styleSheets$2
-    }, ({
-      styles
-    }) => React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles.header, !light && styles.dark],
-      testId: testId
-    }, breadcrumbs && React__namespace.createElement(wonderBlocksCore.View, {
-      style: styles.breadcrumbs
-    }, breadcrumbs), React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
-      style: styles.title,
-      id: titleId,
-      testId: testId && `${testId}-title`
-    }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light && styles.subtitle,
-      testId: testId && `${testId}-subtitle`
-    }, subtitle)));
+function ModalHeader(props) {
+  const {
+    breadcrumbs = undefined,
+    light,
+    subtitle = undefined,
+    testId,
+    title,
+    titleId
+  } = props;
+  if (subtitle && breadcrumbs) {
+    throw new Error("'subtitle' and 'breadcrumbs' can't be used together");
   }
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$2, theme);
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles.header, !light && styles.dark],
+    testId: testId
+  }, breadcrumbs && React__namespace.createElement(wonderBlocksCore.View, {
+    style: styles.breadcrumbs
+  }, breadcrumbs), React__namespace.createElement(wonderBlocksTypography.HeadingMedium, {
+    style: styles.title,
+    id: titleId,
+    testId: testId && `${testId}-title`
+  }, title), subtitle && React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
+    style: light && styles.subtitle,
+    testId: testId && `${testId}-subtitle`
+  }, subtitle));
 }
-ModalHeader.defaultProps = {
-  light: true
-};
-const styleSheets$2 = {
-  all: aphrodite.StyleSheet.create({
-    header: {
-      boxShadow: `0px 1px 0px ${Color__default["default"].offBlack16}`,
-      display: "flex",
-      flexDirection: "column",
-      minHeight: 66,
-      padding: `${Spacing__default["default"].large_24}px ${Spacing__default["default"].xLarge_32}px`,
-      position: "relative",
-      width: "100%"
-    },
-    dark: {
-      background: Color__default["default"].darkBlue,
-      color: Color__default["default"].white
-    },
-    breadcrumbs: {
-      color: Color__default["default"].offBlack64,
-      marginBottom: Spacing__default["default"].xSmall_8
-    },
-    title: {
-      paddingRight: Spacing__default["default"].medium_16
-    },
-    subtitle: {
-      color: Color__default["default"].offBlack64,
-      marginTop: Spacing__default["default"].xSmall_8
+const small$1 = "@media (max-width: 767px)";
+const themedStylesFn$2 = 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$1]: {
+      paddingLeft: theme.spacing.header.small,
+      paddingRight: theme.spacing.header.small
     }
-  }),
-  small: aphrodite.StyleSheet.create({
-    header: {
-      paddingLeft: Spacing__default["default"].medium_16,
-      paddingRight: Spacing__default["default"].medium_16
-    },
-    title: {
-      paddingRight: Spacing__default["default"].xLarge_32
+  },
+  dark: {
+    background: theme.color.bg.inverse,
+    color: theme.color.text.inverse
+  },
+  breadcrumbs: {
+    color: theme.color.text.secondary,
+    marginBottom: theme.spacing.header.xsmall
+  },
+  title: {
+    paddingRight: theme.spacing.header.small,
+    [small$1]: {
+      paddingRight: theme.spacing.header.large
     }
-  })
+  },
+  subtitle: {
+    color: theme.color.text.secondary,
+    marginTop: theme.spacing.header.xsmall
+  }
+});
+ModalHeader.defaultProps = {
+  light: true
 };
 
 const FOCUSABLE_ELEMENTS$1 = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
@@ -384,14 +407,14 @@ class ModalBackdrop extends React__namespace.Component {
       [ModalLauncherPortalAttributeName]: true
     };
     return React__namespace.createElement(wonderBlocksCore.View, _extends({
-      style: styles$2.modalPositioner,
+      style: styles$1.modalPositioner,
       onMouseDown: this.handleMouseDown,
       onMouseUp: this.handleMouseUp,
       testId: testId
     }, backdropProps), children);
   }
 }
-const styles$2 = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   modalPositioner: {
     position: "fixed",
     left: 0,
@@ -562,7 +585,7 @@ class ModalLauncher extends React__namespace.Component {
         closeModal: this.handleCloseModal
       }
     }, renderedChildren, this.state.opened && ReactDOM__namespace.createPortal(React__namespace.createElement(FocusTrap, {
-      style: styles$1.container
+      style: styles.container
     }, React__namespace.createElement(ModalBackdrop, {
       initialFocusId: this.props.initialFocusId,
       testId: this.props.testId,
@@ -596,59 +619,54 @@ class ModalLauncherKeypressListener extends React__namespace.Component {
     return null;
   }
 }
-const styles$1 = aphrodite.StyleSheet.create({
+const styles = aphrodite.StyleSheet.create({
   container: {
     zIndex: 1080
   }
 });
 var modalLauncher = wonderBlocksTiming.withActionScheduler(ModalLauncher);
 
-class ModalContent extends React__namespace.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
-  }
-  render() {
-    const {
-      scrollOverflow,
-      style,
-      children
-    } = this.props;
-    return React__namespace.createElement(wonderBlocksLayout.MediaLayout, {
-      styleSheets: styleSheets$1
-    }, ({
-      styles
-    }) => React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
-    }, React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles.content, style]
-    }, children)));
-  }
+function ModalContent(props) {
+  const {
+    scrollOverflow,
+    style,
+    children
+  } = props;
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn$1, theme);
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
+  }, React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles.content, style]
+  }, children));
 }
-ModalContent.defaultProps = {
-  scrollOverflow: true
-};
 ModalContent.__IS_MODAL_CONTENT__ = true;
-const styleSheets$1 = {
-  all: aphrodite.StyleSheet.create({
-    wrapper: {
-      flex: 1,
-      display: "block"
-    },
-    scrollOverflow: {
-      overflow: "auto"
-    },
-    content: {
-      flex: 1,
-      minHeight: "100%",
-      padding: Spacing__default["default"].xLarge_32,
-      boxSizing: "border-box"
-    }
-  }),
-  small: aphrodite.StyleSheet.create({
-    content: {
+ModalContent.isComponentOf = instance => {
+  return instance && instance.type && instance.type.__IS_MODAL_CONTENT__;
+};
+const small = "@media (max-width: 767px)";
+const themedStylesFn$1 = theme => ({
+  wrapper: {
+    flex: 1,
+    display: "block"
+  },
+  scrollOverflow: {
+    overflow: "auto"
+  },
+  content: {
+    flex: 1,
+    minHeight: "100%",
+    padding: Spacing__default["default"].xLarge_32,
+    boxSizing: "border-box",
+    [small]: {
       padding: `${Spacing__default["default"].xLarge_32}px ${Spacing__default["default"].medium_16}px`
     }
-  })
+  }
+});
+ModalContent.defaultProps = {
+  scrollOverflow: true
 };
 
 class CloseButton extends React__namespace.Component {
@@ -678,14 +696,23 @@ class CloseButton extends React__namespace.Component {
   }
 }
 
-class ModalPanel extends React__namespace.Component {
-  renderMainContent() {
-    const {
-      content,
-      footer,
-      scrollOverflow
-    } = this.props;
-    const mainContent = ModalContent.isClassOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
+function ModalPanel({
+  closeButtonVisible = true,
+  scrollOverflow = true,
+  light = true,
+  content,
+  footer,
+  header,
+  onClose,
+  style,
+  testId
+}) {
+  const {
+    theme
+  } = wonderBlocksTheming.useScopedTheme(ModalDialogThemeContext);
+  const styles = wonderBlocksTheming.useStyles(themedStylesFn, theme);
+  const renderMainContent = React__namespace.useCallback(() => {
+    const mainContent = ModalContent.isComponentOf(content) ? content : React__namespace.createElement(ModalContent, null, content);
     if (!mainContent) {
       return mainContent;
     }
@@ -693,35 +720,24 @@ class ModalPanel extends React__namespace.Component {
       scrollOverflow,
       style: [!!footer && styles.hasFooter, mainContent.props.style]
     });
-  }
-  render() {
-    const {
-      closeButtonVisible,
-      footer,
-      header,
-      light,
-      onClose,
-      style,
-      testId
-    } = this.props;
-    const mainContent = this.renderMainContent();
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles.wrapper, !light && styles.dark, style],
-      testId: testId && `${testId}-panel`
-    }, closeButtonVisible && React__namespace.createElement(CloseButton, {
-      light: !light,
-      onClick: onClose,
-      style: styles.closeButton,
-      testId: testId && `${testId}-close`
-    }), header, mainContent, !footer || ModalFooter.isClassOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
-  }
+  }, [content, footer, scrollOverflow, styles.hasFooter]);
+  const mainContent = renderMainContent();
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    style: [styles.wrapper, !light && styles.dark, style],
+    testId: testId && `${testId}-panel`
+  }, closeButtonVisible && React__namespace.createElement(CloseButton, {
+    light: !light,
+    onClick: onClose,
+    style: styles.closeButton,
+    testId: testId && `${testId}-close`
+  }), header, mainContent, !footer || ModalFooter.isComponentOf(footer) ? footer : React__namespace.createElement(ModalFooter, null, footer));
 }
 ModalPanel.defaultProps = {
   closeButtonVisible: true,
   scrollOverflow: true,
   light: true
 };
-const styles = aphrodite.StyleSheet.create({
+const themedStylesFn = theme => ({
   wrapper: {
     flex: "1 1 auto",
     position: "relative",
@@ -735,16 +751,16 @@ const styles = aphrodite.StyleSheet.create({
   },
   closeButton: {
     position: "absolute",
-    right: Spacing__default["default"].medium_16,
-    top: Spacing__default["default"].medium_16,
+    right: theme.spacing.panel.closeButton,
+    top: theme.spacing.panel.closeButton,
     zIndex: 1
   },
   dark: {
-    background: Color__default["default"].darkBlue,
-    color: Color__default["default"].white
+    background: theme.color.bg.inverse,
+    color: theme.color.text.inverse
   },
   hasFooter: {
-    paddingBottom: Spacing__default["default"].xLarge_32
+    paddingBottom: theme.spacing.panel.footer
   }
 });
 

package/dist/themes/default.d.ts

@@ -1,4 +1,16 @@
 declare const theme: {
+    color: {
+        bg: {
+            inverse: string;
+        };
+        text: {
+            inverse: string;
+            secondary: string;
+        };
+        shadow: {
+            default: string;
+        };
+    };
     border: {
         radius: number;
     };
@@ -6,6 +18,16 @@ declare const theme: {
         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

@@ -9,6 +9,18 @@ export type ModalDialogThemeContract = typeof defaultTheme;
  * 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;
     };
@@ -16,6 +28,16 @@ export declare const ModalDialogThemeContext: React.Context<{
         dialog: {
             small: 16;
         };
+        panel: {
+            closeButton: 16;
+            footer: 32;
+        };
+        header: {
+            xsmall: 8;
+            small: 16;
+            medium: 24;
+            large: 32;
+        };
     };
 }>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "design": "v2",
   "publishConfig": {
     "access": "public"