New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@khanacademy/wonder-blocks-modal

Package Overview
Dependencies
Maintainers
1
Versions
632
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@khanacademy/wonder-blocks-modal - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

components/__snapshots__/standard-modal.test.js.snap
components/one-column-modal/__snapshots__/one-column.modal.test.js.snap
components/one-column-modal/large-one-column-modal.js
components/one-column-modal/one-column-modal.js
components/one-column-modal/one-column-modal.md
components/one-column-modal/one-column.modal.test.js
components/one-column-modal/small-one-column-modal.js
components/two-column-modal/__snapshots__/two-column-modal.test.js.snap
components/two-column-modal/large-two-column-modal.js
components/two-column-modal/small-two-column-modal.js
components/two-column-modal/two-column-modal.js
components/two-column-modal/two-column-modal.md
components/two-column-modal/two-column-modal.test.js

25

components/close-button.js

@@ -5,2 +5,3 @@ // @flow

import IconButton from "@khanacademy/wonder-blocks-icon-button";
import type {StyleType} from "@khanacademy/wonder-blocks-core";

@@ -16,20 +17,15 @@ import ModalContext from "./modal-context.js";

*/
light: boolean,
light?: boolean,
/**
* Called when the close button is clicked.
*/
/** Optional click handler */
onClick?: () => mixed,
/** Optional custom styles. */
style?: StyleType,
|};
/**
* Context aware close button.
*
* If this button is rendered within a modal that was launched using ModalLauncher
* then it will call the `closeModal` function provided by ModalContext.Consumer.
* Otherwise, it calls the `onClick` method provided.
*/
export default class CloseButton extends React.Component<Props> {
render() {
const {light, onClick} = this.props;
const {light, onClick, style} = this.props;
return (

@@ -43,2 +39,3 @@ <ModalContext.Consumer>

}
return (

@@ -48,6 +45,8 @@ <IconButton

// TODO(mdr): Translate this string for i18n.
// TODO(kevinb): provide a way to set this label
aria-label="Close modal"
onClick={closeModal || onClick}
onClick={onClick || closeModal}
kind={light ? "primary" : "tertiary"}
light={light}
style={style}
/>

@@ -54,0 +53,0 @@ );

85

components/modal-content.js

@@ -5,2 +5,3 @@ // @flow

import {View} from "@khanacademy/wonder-blocks-core";
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";

@@ -30,25 +31,21 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";

return (
<View
style={[
styles.wrapper,
scrollOverflow && styles.scrollOverflow,
]}
>
{!header ||
(typeof header === "object" && header.type === ModalHeader) ? (
header
) : (
<ModalHeader>{header}</ModalHeader>
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<View
style={[
styles.wrapper,
scrollOverflow && styles.scrollOverflow,
]}
>
{!header ||
(typeof header === "object" &&
header.type === ModalHeader) ? (
header
) : (
<ModalHeader>{header}</ModalHeader>
)}
<View style={[styles.content, style]}>{children}</View>
</View>
)}
<View
style={[
styles.content,
// TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style,
]}
>
{children}
</View>
</View>
</MediaLayout>
);

@@ -58,25 +55,29 @@ }

const styles = StyleSheet.create({
wrapper: {
flex: 1,
const styleSheets = {
all: StyleSheet.create({
wrapper: {
flex: 1,
// This helps to ensure that the paddingBottom is preserved when
// the contents start to overflow, this goes away on display: flex
display: "block",
},
// This helps to ensure that the paddingBottom is preserved when
// the contents start to overflow, this goes away on display: flex
display: "block",
},
scrollOverflow: {
overflow: "auto",
},
scrollOverflow: {
overflow: "auto",
},
content: {
flex: 1,
minHeight: "100%",
padding: 64,
boxSizing: "border-box",
},
content: {
flex: 1,
minHeight: "100%",
padding: 64,
boxSizing: "border-box",
},
}),
small: {
padding: "32px 16px",
},
});
small: StyleSheet.create({
content: {
padding: "32px 16px",
},
}),
};

76

components/modal-dialog.js

@@ -5,8 +5,9 @@ // @flow

import {
View,
MediaLayout,
MediaLayoutContext,
MEDIA_MODAL_SPEC,
} from "@khanacademy/wonder-blocks-core";
} 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";

@@ -21,17 +22,20 @@ type Props = {|

const {style, children} = this.props;
const contextValue: MediaLayoutContextValue = {
ssrSize: "large",
mediaSpec: MEDIA_MODAL_SPEC,
};
return (
<MediaLayout spec={MEDIA_MODAL_SPEC}>
<View
style={[
styles.wrapper,
// TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style,
]}
role="dialog"
aria-labelledby="wb-modal-title"
>
{children}
</View>
</MediaLayout>
<MediaLayoutContext.Provider value={contextValue}>
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<View
style={[styles.wrapper, style]}
role="dialog"
aria-labelledby="wb-modal-title"
>
{children}
</View>
)}
</MediaLayout>
</MediaLayoutContext.Provider>
);

@@ -41,20 +45,24 @@ }

const styles = StyleSheet.create({
wrapper: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
position: "relative",
const styleSheets = {
all: StyleSheet.create({
wrapper: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
position: "relative",
borderRadius: 4,
overflow: "hidden",
},
borderRadius: 4,
overflow: "hidden",
},
}),
// On small viewports, we consume the full screen size.
small: {
width: "100%",
height: "100%",
borderRadius: 0,
flexDirection: "column",
},
});
small: StyleSheet.create({
// On small viewports, we consume the full screen size.
wrapper: {
width: "100%",
height: "100%",
borderRadius: 0,
flexDirection: "column",
},
}),
};

71

components/modal-header.js

@@ -6,2 +6,3 @@ // @flow

import {View} from "@khanacademy/wonder-blocks-core";
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";

@@ -24,13 +25,15 @@ import type {StyleType} from "@khanacademy/wonder-blocks-core";

return (
<View
style={[
styles.header,
color === "dark" && styles.dark,
// TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style,
]}
>
{children}
</View>
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<View
style={[
styles.header,
color === "dark" && styles.dark,
style,
]}
>
{children}
</View>
)}
</MediaLayout>
);

@@ -40,25 +43,29 @@ }

const styles = StyleSheet.create({
header: {
flex: "0 0 auto",
boxSizing: "border-box",
maxHeight: 108,
paddingLeft: 64,
paddingRight: 64,
paddingTop: 8,
paddingBottom: 8,
const styleSheets = {
all: StyleSheet.create({
header: {
flex: "0 0 auto",
boxSizing: "border-box",
maxHeight: 108,
paddingLeft: 64,
paddingRight: 64,
paddingTop: 8,
paddingBottom: 8,
display: "flex",
flexDirection: "row",
},
display: "flex",
flexDirection: "row",
},
dark: {
background: Color.darkBlue,
color: Color.white,
},
dark: {
background: Color.darkBlue,
color: Color.white,
},
}),
small: {
paddingLeft: 16,
paddingRight: 16,
},
});
small: StyleSheet.create({
header: {
paddingLeft: 16,
paddingRight: 16,
},
}),
};

2

components/modal-launcher.test.js

@@ -8,3 +8,3 @@ // @flow

import ModalLauncher from "./modal-launcher.js";
import OneColumnModal from "./one-column-modal.js";
import OneColumnModal from "./one-column-modal/one-column-modal.js";

@@ -11,0 +11,0 @@ const exampleModal = <OneColumnModal content={<div data-modal-child />} />;

193

components/modal-panel.js

@@ -6,5 +6,7 @@ // @flow

import {View} from "@khanacademy/wonder-blocks-core";
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
import Toolbar from "@khanacademy/wonder-blocks-toolbar";
import type {StyleType} from "@khanacademy/wonder-blocks-core";
import type {MockStyleSheet} from "@khanacademy/wonder-blocks-layout";
import type {StyleType} from "@khanacademy/wonder-blocks-core";
import ModalContent from "./modal-content.js";

@@ -69,19 +71,15 @@ import ModalHeader from "./modal-header.js";

return (
<View
style={[
styles.closeButton,
// TODO(jeresig): Replace with <Layout/>
//(mediaSize) =>
// mediaSize === "small" && styles.smallCloseButton,
]}
>
<CloseButton
onClick={onClose}
light={topBackgroundColor === "dark"}
/>
</View>
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<CloseButton
light={topBackgroundColor === "dark"}
onClick={onClose}
style={styles.closeButton}
/>
)}
</MediaLayout>
);
}
render() {
renderMainContent(styles: MockStyleSheet) {
const {

@@ -93,7 +91,6 @@ content,

scrollOverflow,
color,
style,
showCloseButton,
} = this.props;
let mainContent =
const mainContent =
content &&

@@ -107,39 +104,53 @@ typeof content === "object" &&

if (mainContent) {
mainContent = React.cloneElement(mainContent, {
// Pass the scrollOverflow and header in to the main content
scrollOverflow,
header: header || mainContent.props.header,
// We override the styling of the main content to help position
// it if there is a title bar, footer, or close button being
// shown. We have to do this here as the ModalContent doesn't
// know about things being positioned around it.
style: [
!!titleBar && styles.hasTitleBar,
!!footer && styles.hasFooter,
// TODO(jeresig): Replace with <Layout/>
//showCloseButton &&
// !titleBar &&
// ((mediaSize) =>
// mediaSize === "small" &&
// styles.smallWithCloseButton),
mainContent.props.style,
],
});
if (!mainContent) {
return mainContent;
}
return React.cloneElement(mainContent, {
// Pass the scrollOverflow and header in to the main content
scrollOverflow,
header: header || mainContent.props.header,
// We override the styling of the main content to help position
// it if there is a title bar, footer, or close button being
// shown. We have to do this here as the ModalContent doesn't
// know about things being positioned around it.
style: [
!!titleBar && styles.hasTitleBar,
!!footer && styles.hasFooter,
showCloseButton && !titleBar && styles.withCloseButton,
mainContent.props.style,
],
});
}
render() {
const {titleBar, footer, color, style} = this.props;
return (
<View
style={[styles.wrapper, color === "dark" && styles.dark, style]}
>
{this.maybeRenderCloseButton()}
{titleBar}
{mainContent}
{!footer ||
(typeof footer === "object" && footer.type === ModalFooter) ? (
footer
) : (
<ModalFooter>{footer}</ModalFooter>
)}
</View>
<MediaLayout styleSheets={styleSheets}>
{({styles}) => {
const mainContent = this.renderMainContent(styles);
return (
<View
style={[
styles.wrapper,
color === "dark" && styles.dark,
style,
]}
>
{this.maybeRenderCloseButton()}
{titleBar}
{mainContent}
{!footer ||
(typeof footer === "object" &&
footer.type === ModalFooter) ? (
footer
) : (
<ModalFooter>{footer}</ModalFooter>
)}
</View>
);
}}
</MediaLayout>
);

@@ -149,44 +160,48 @@ }

const styles = StyleSheet.create({
wrapper: {
flex: "1 1 auto",
position: "relative",
display: "flex",
flexDirection: "column",
background: "white",
boxSizing: "border-box",
height: "100%",
width: "100%",
},
const styleSheets = {
all: StyleSheet.create({
wrapper: {
flex: "1 1 auto",
position: "relative",
display: "flex",
flexDirection: "column",
background: "white",
boxSizing: "border-box",
height: "100%",
width: "100%",
},
closeButton: {
position: "absolute",
left: 16,
top: 16,
// This is to allow the button to be tab-ordered before the modal
// content but still be above the header and content.
zIndex: 1,
},
closeButton: {
position: "absolute",
left: 16,
top: 16,
// This is to allow the button to be tab-ordered before the modal
// content but still be above the header and content.
zIndex: 1,
},
smallCloseButton: {
left: 16,
top: 16,
},
dark: {
background: Color.darkBlue,
color: Color.white,
},
dark: {
background: Color.darkBlue,
color: Color.white,
},
hasTitleBar: {
paddingTop: 32,
},
hasTitleBar: {
paddingTop: 32,
},
hasFooter: {
paddingBottom: 32,
},
}),
hasFooter: {
paddingBottom: 32,
},
small: StyleSheet.create({
closeButton: {
left: 16,
top: 16,
},
smallWithCloseButton: {
paddingTop: 64,
},
});
withCloseButton: {
paddingTop: 64,
},
}),
};

123

components/standard-modal.js

@@ -5,2 +5,3 @@ // @flow

import Toolbar from "@khanacademy/wonder-blocks-toolbar";
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
import type {AriaProps} from "@khanacademy/wonder-blocks-core";

@@ -71,2 +72,18 @@

export default class StandardModal extends React.Component<Props> {
renderCloseButton() {
const {onClose, header} = this.props;
return (
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<CloseButton
light={!!header}
onClick={onClose}
style={styles.closeButton}
/>
)}
</MediaLayout>
);
}
render() {

@@ -84,43 +101,33 @@ const {

return (
<ModalDialog
// TODO(jeresig): Replace with <Layout/>
//style={(mediaSize) => mediaSize !== "small" && styles.wrapper}
style={styles.wrapper}
>
<ModalPanel
onClose={onClose}
titleBar={
<Toolbar
leftContent={
<CloseButton
light={!!header}
onClick={onClose}
<MediaLayout styleSheets={styleSheets}>
{({styles}) => (
<ModalDialog style={styles.wrapper}>
<ModalPanel
onClose={onClose}
titleBar={
<Toolbar
title={title}
subtitle={subtitle}
color={header ? "dark" : "light"}
leftContent={this.renderCloseButton()}
/>
}
title={title}
subtitle={subtitle}
color={header ? "dark" : "light"}
header={header}
content={content}
footer={footer}
/>
}
header={header}
content={content}
footer={footer}
/>
{preview && (
<ModalPanel
color="dark"
style={[
styles.preview,
// TODO(jeresig): Replace with <Layout/>
//(mediaSize) =>
// mediaSize === "small" && styles.smallPreview
]}
content={
<ModalContent style={styles.previewContent}>
{preview}
</ModalContent>
}
/>
{!!preview && (
<ModalPanel
color="dark"
style={styles.preview}
content={
<ModalContent style={styles.previewContent}>
{preview}
</ModalContent>
}
/>
)}
</ModalDialog>
)}
</ModalDialog>
</MediaLayout>
);

@@ -130,22 +137,28 @@ }

const styles = StyleSheet.create({
wrapper: {
width: "93.75%",
maxWidth: 960,
height: "81.25%",
maxHeight: 624,
},
const styleSheets = {
all: StyleSheet.create({
preview: {
maxWidth: 392,
flex: "1 0 auto",
},
preview: {
maxWidth: 392,
flex: "1 0 auto",
},
previewContent: {
padding: "0 64px 0 0",
},
}),
previewContent: {
padding: "0 64px 0 0",
},
small: StyleSheet.create({
preview: {
display: "none",
},
}),
smallPreview: {
display: "none",
},
});
mdOrLarger: StyleSheet.create({
wrapper: {
width: "93.75%",
maxWidth: 960,
height: "81.25%",
maxHeight: 624,
},
}),
};

68

components/standard-modal.test.js

@@ -5,5 +5,14 @@ // @flow

import {
MediaLayoutContext,
MEDIA_DEFAULT_SPEC,
} from "@khanacademy/wonder-blocks-layout";
import StandardModal from "./standard-modal.js";
import {mount, unmountAll} from "../../../utils/testing/mount.js";
describe("StandardModal", () => {
beforeEach(() => {
unmountAll();
});
test("Ensure the ModalCloseButton isn't inside.", () => {

@@ -16,2 +25,61 @@ const wrapper = shallow(

});
// We already capture desktop snapshots from auto generated tests
describe("mobile", () => {
it("should match snapshot", () => {
// Arrange
// Act
const wrapper = mount(
<div>
<MediaLayoutContext.Provider
value={{
overrideSize: undefined,
ssrSize: "small",
mediaSpec: MEDIA_DEFAULT_SPEC,
}}
>
<StandardModal
title="Title"
content="Content"
footer="Footer"
/>
</MediaLayoutContext.Provider>
</div>,
);
const modal = wrapper.find(StandardModal);
// Assert
expect(modal).toMatchSnapshot();
});
});
describe("desktop", () => {
it("should match snapshot", () => {
// Arrange
// Act
const wrapper = mount(
<div>
<MediaLayoutContext.Provider
value={{
overrideSize: undefined,
ssrSize: "large",
mediaSpec: MEDIA_DEFAULT_SPEC,
}}
>
<StandardModal
title="Title"
content="Content"
footer="Footer"
/>
</MediaLayoutContext.Provider>
</div>,
);
const modal = wrapper.find(StandardModal);
// Assert
expect(modal).toMatchSnapshot();
});
});
});

803

dist/es/index.js
import { createElement, Component, Fragment, createContext, cloneElement } from 'react';
import { createPortal, findDOMNode } from 'react-dom';
import { View, MediaLayout, MEDIA_MODAL_SPEC, MediaLayoutWrapper } from '@khanacademy/wonder-blocks-core';
import { View } from '@khanacademy/wonder-blocks-core';
import { StyleSheet } from 'aphrodite';
import Color from '@khanacademy/wonder-blocks-color';
import { MediaLayout, MediaLayoutContext, MEDIA_MODAL_SPEC } from '@khanacademy/wonder-blocks-layout';
import { icons } from '@khanacademy/wonder-blocks-icon';

@@ -742,11 +743,18 @@ import IconButton from '@khanacademy/wonder-blocks-icon-button';

children = _this$props.children;
return createElement(MediaLayout, {
spec: MEDIA_MODAL_SPEC
}, createElement(View, {
style: [styles$2.wrapper, // TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style],
role: "dialog",
"aria-labelledby": "wb-modal-title"
}, children));
var contextValue = {
ssrSize: "large",
mediaSpec: MEDIA_MODAL_SPEC
};
return createElement(MediaLayoutContext.Provider, {
value: contextValue
}, createElement(MediaLayout, {
styleSheets: styleSheets
}, function (_ref) {
var styles = _ref.styles;
return createElement(View, {
style: [styles.wrapper, style],
role: "dialog",
"aria-labelledby": "wb-modal-title"
}, children);
}));
}

@@ -757,19 +765,23 @@ }]);

}(Component);
var styles$2 = StyleSheet.create({
wrapper: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
position: "relative",
borderRadius: 4,
overflow: "hidden"
},
// On small viewports, we consume the full screen size.
small: {
width: "100%",
height: "100%",
borderRadius: 0,
flexDirection: "column"
}
});
var styleSheets = {
all: StyleSheet.create({
wrapper: {
display: "flex",
flexDirection: "row",
alignItems: "stretch",
position: "relative",
borderRadius: 4,
overflow: "hidden"
}
}),
small: StyleSheet.create({
// On small viewports, we consume the full screen size.
wrapper: {
width: "100%",
height: "100%",
borderRadius: 0,
flexDirection: "column"
}
})
};

@@ -794,7 +806,10 @@ var ModalHeader =

children = _this$props.children;
return createElement(View, {
style: [styles$3.header, color === "dark" && styles$3.dark, // TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style]
}, children);
return createElement(MediaLayout, {
styleSheets: styleSheets$1
}, function (_ref) {
var styles = _ref.styles;
return createElement(View, {
style: [styles.header, color === "dark" && styles.dark, style]
}, children);
});
}

@@ -809,23 +824,27 @@ }]);

});
var styles$3 = StyleSheet.create({
header: {
flex: "0 0 auto",
boxSizing: "border-box",
maxHeight: 108,
paddingLeft: 64,
paddingRight: 64,
paddingTop: 8,
paddingBottom: 8,
display: "flex",
flexDirection: "row"
},
dark: {
background: Color.darkBlue,
color: Color.white
},
small: {
paddingLeft: 16,
paddingRight: 16
}
});
var styleSheets$1 = {
all: StyleSheet.create({
header: {
flex: "0 0 auto",
boxSizing: "border-box",
maxHeight: 108,
paddingLeft: 64,
paddingRight: 64,
paddingTop: 8,
paddingBottom: 8,
display: "flex",
flexDirection: "row"
},
dark: {
background: Color.darkBlue,
color: Color.white
}
}),
small: StyleSheet.create({
header: {
paddingLeft: 16,
paddingRight: 16
}
})
};

@@ -851,9 +870,12 @@ var ModalContent =

children = _this$props.children;
return createElement(View, {
style: [styles$4.wrapper, scrollOverflow && styles$4.scrollOverflow]
}, !header || _typeof(header) === "object" && header.type === ModalHeader ? header : createElement(ModalHeader, null, header), createElement(View, {
style: [styles$4.content, // TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize === "small" && styles.small,
style]
}, children));
return createElement(MediaLayout, {
styleSheets: styleSheets$2
}, function (_ref) {
var styles = _ref.styles;
return createElement(View, {
style: [styles.wrapper, scrollOverflow && styles.scrollOverflow]
}, !header || _typeof(header) === "object" && header.type === ModalHeader ? header : createElement(ModalHeader, null, header), createElement(View, {
style: [styles.content, style]
}, children));
});
}

@@ -868,22 +890,26 @@ }]);

});
var styles$4 = StyleSheet.create({
wrapper: {
flex: 1,
// This helps to ensure that the paddingBottom is preserved when
// the contents start to overflow, this goes away on display: flex
display: "block"
},
scrollOverflow: {
overflow: "auto"
},
content: {
flex: 1,
minHeight: "100%",
padding: 64,
boxSizing: "border-box"
},
small: {
padding: "32px 16px"
}
});
var styleSheets$2 = {
all: StyleSheet.create({
wrapper: {
flex: 1,
// This helps to ensure that the paddingBottom is preserved when
// the contents start to overflow, this goes away on display: flex
display: "block"
},
scrollOverflow: {
overflow: "auto"
},
content: {
flex: 1,
minHeight: "100%",
padding: 64,
boxSizing: "border-box"
}
}),
small: StyleSheet.create({
content: {
padding: "32px 16px"
}
})
};

@@ -908,3 +934,3 @@ var ModalFooter =

return createElement(View, {
style: [styles$5.footer, style]
style: [styles$2.footer, style]
}, children);

@@ -916,3 +942,3 @@ }

}(Component);
var styles$5 = StyleSheet.create({
var styles$2 = StyleSheet.create({
footer: {

@@ -936,9 +962,2 @@ flex: "0 0 auto",

/**
* Context aware close button.
*
* If this button is rendered within a modal that was launched using ModalLauncher
* then it will call the `closeModal` function provided by ModalContext.Consumer.
* Otherwise, it calls the `onClick` method provided.
*/
var CloseButton =

@@ -960,3 +979,4 @@ /*#__PURE__*/

light = _this$props.light,
onClick = _this$props.onClick;
onClick = _this$props.onClick,
style = _this$props.style;
return createElement(ModalContext.Consumer, null, function (_ref) {

@@ -971,7 +991,9 @@ var closeModal = _ref.closeModal;

icon: icons.dismiss // TODO(mdr): Translate this string for i18n.
// TODO(kevinb): provide a way to set this label
,
"aria-label": "Close modal",
onClick: closeModal || onClick,
onClick: onClick || closeModal,
kind: light ? "primary" : "tertiary",
light: light
light: light,
style: style
});

@@ -1013,12 +1035,16 @@ });

var topBackgroundColor = titleBar && titleBar.props.color || color;
return createElement(View, {
style: [styles$6.closeButton]
}, createElement(CloseButton, {
onClick: onClose,
light: topBackgroundColor === "dark"
}));
return createElement(MediaLayout, {
styleSheets: styleSheets$3
}, function (_ref) {
var styles = _ref.styles;
return createElement(CloseButton, {
light: topBackgroundColor === "dark",
onClick: onClose,
style: styles.closeButton
});
});
}
}, {
key: "render",
value: function render() {
key: "renderMainContent",
value: function renderMainContent(styles) {
var _this$props2 = this.props,

@@ -1030,29 +1056,42 @@ content = _this$props2.content,

scrollOverflow = _this$props2.scrollOverflow,
color = _this$props2.color,
style = _this$props2.style;
showCloseButton = _this$props2.showCloseButton;
var mainContent = content && _typeof(content) === "object" && content.type === ModalContent ? content : createElement(ModalContent, null, content);
if (mainContent) {
mainContent = cloneElement(mainContent, {
// Pass the scrollOverflow and header in to the main content
scrollOverflow: scrollOverflow,
header: header || mainContent.props.header,
// We override the styling of the main content to help position
// it if there is a title bar, footer, or close button being
// shown. We have to do this here as the ModalContent doesn't
// know about things being positioned around it.
style: [!!titleBar && styles$6.hasTitleBar, !!footer && styles$6.hasFooter, // TODO(jeresig): Replace with <Layout/>
//showCloseButton &&
// !titleBar &&
// ((mediaSize) =>
// mediaSize === "small" &&
// styles.smallWithCloseButton),
mainContent.props.style]
});
if (!mainContent) {
return mainContent;
}
return createElement(View, {
style: [styles$6.wrapper, color === "dark" && styles$6.dark, style]
}, this.maybeRenderCloseButton(), titleBar, mainContent, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer));
return cloneElement(mainContent, {
// Pass the scrollOverflow and header in to the main content
scrollOverflow: scrollOverflow,
header: header || mainContent.props.header,
// We override the styling of the main content to help position
// it if there is a title bar, footer, or close button being
// shown. We have to do this here as the ModalContent doesn't
// know about things being positioned around it.
style: [!!titleBar && styles.hasTitleBar, !!footer && styles.hasFooter, showCloseButton && !titleBar && styles.withCloseButton, mainContent.props.style]
});
}
}, {
key: "render",
value: function render() {
var _this = this;
var _this$props3 = this.props,
titleBar = _this$props3.titleBar,
footer = _this$props3.footer,
color = _this$props3.color,
style = _this$props3.style;
return createElement(MediaLayout, {
styleSheets: styleSheets$3
}, function (_ref2) {
var styles = _ref2.styles;
var mainContent = _this.renderMainContent(styles);
return createElement(View, {
style: [styles.wrapper, color === "dark" && styles.dark, style]
}, _this.maybeRenderCloseButton(), titleBar, mainContent, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer));
});
}
}]);

@@ -1068,39 +1107,43 @@

});
var styles$6 = StyleSheet.create({
wrapper: {
flex: "1 1 auto",
position: "relative",
display: "flex",
flexDirection: "column",
background: "white",
boxSizing: "border-box",
height: "100%",
width: "100%"
},
closeButton: {
position: "absolute",
left: 16,
top: 16,
// This is to allow the button to be tab-ordered before the modal
// content but still be above the header and content.
zIndex: 1
},
smallCloseButton: {
left: 16,
top: 16
},
dark: {
background: Color.darkBlue,
color: Color.white
},
hasTitleBar: {
paddingTop: 32
},
hasFooter: {
paddingBottom: 32
},
smallWithCloseButton: {
paddingTop: 64
}
});
var styleSheets$3 = {
all: StyleSheet.create({
wrapper: {
flex: "1 1 auto",
position: "relative",
display: "flex",
flexDirection: "column",
background: "white",
boxSizing: "border-box",
height: "100%",
width: "100%"
},
closeButton: {
position: "absolute",
left: 16,
top: 16,
// 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
},
hasTitleBar: {
paddingTop: 32
},
hasFooter: {
paddingBottom: 32
}
}),
small: StyleSheet.create({
closeButton: {
left: 16,
top: 16
},
withCloseButton: {
paddingTop: 64
}
})
};

@@ -1122,73 +1165,178 @@ /**

_createClass(StandardModal, [{
key: "renderCloseButton",
value: function renderCloseButton() {
var _this$props = this.props,
onClose = _this$props.onClose,
header = _this$props.header;
return createElement(MediaLayout, {
styleSheets: styleSheets$4
}, function (_ref) {
var styles = _ref.styles;
return createElement(CloseButton, {
light: !!header,
onClick: onClose,
style: styles.closeButton
});
});
}
}, {
key: "render",
value: function render() {
var _this = this;
var _this$props2 = this.props,
onClose = _this$props2.onClose,
title = _this$props2.title,
subtitle = _this$props2.subtitle,
header = _this$props2.header,
footer = _this$props2.footer,
content = _this$props2.content,
preview = _this$props2.preview;
return createElement(MediaLayout, {
styleSheets: styleSheets$4
}, function (_ref2) {
var styles = _ref2.styles;
return createElement(ModalDialog, {
style: styles.wrapper
}, createElement(ModalPanel, {
onClose: onClose,
titleBar: createElement(Toolbar, {
title: title,
subtitle: subtitle,
color: header ? "dark" : "light",
leftContent: _this.renderCloseButton()
}),
header: header,
content: content,
footer: footer
}), !!preview && createElement(ModalPanel, {
color: "dark",
style: styles.preview,
content: createElement(ModalContent, {
style: styles.previewContent
}, preview)
}));
});
}
}]);
return StandardModal;
}(Component);
var styleSheets$4 = {
all: StyleSheet.create({
preview: {
maxWidth: 392,
flex: "1 0 auto"
},
previewContent: {
padding: "0 64px 0 0"
}
}),
small: StyleSheet.create({
preview: {
display: "none"
}
}),
mdOrLarger: StyleSheet.create({
wrapper: {
width: "93.75%",
maxWidth: 960,
height: "81.25%",
maxHeight: 624
}
})
};
var LargeTwoColumnModal =
/*#__PURE__*/
function (_React$Component) {
_inherits(LargeTwoColumnModal, _React$Component);
function LargeTwoColumnModal() {
_classCallCheck(this, LargeTwoColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(LargeTwoColumnModal).apply(this, arguments));
}
_createClass(LargeTwoColumnModal, [{
key: "render",
value: function render() {
var _this$props = this.props,
onClose = _this$props.onClose,
title = _this$props.title,
subtitle = _this$props.subtitle,
header = _this$props.header,
sidebar = _this$props.sidebar,
content = _this$props.content,
footer = _this$props.footer,
content = _this$props.content,
preview = _this$props.preview;
return createElement(ModalDialog // TODO(jeresig): Replace with <Layout/>
//style={(mediaSize) => mediaSize !== "small" && styles.wrapper}
, {
style: styles$7.wrapper
fullBleedSidebar = _this$props.fullBleedSidebar;
return createElement(ModalDialog, {
style: styles$3.dialog
}, createElement(View, {
style: styles$3.contentWrapper
}, createElement(ModalPanel, {
showCloseButton: true,
color: "dark",
onClose: onClose,
titleBar: createElement(Toolbar, {
leftContent: createElement(CloseButton, {
light: !!header,
onClick: onClose
}),
title: title,
subtitle: subtitle,
color: header ? "dark" : "light"
}),
header: header,
style: styles$3.column,
content: fullBleedSidebar ? createElement(ModalContent, {
style: styles$3.fullBleed
}, sidebar) : sidebar
}), createElement(ModalPanel, {
style: styles$3.column,
content: content,
footer: footer
}), preview && createElement(ModalPanel, {
color: "dark",
style: [styles$7.preview],
content: createElement(ModalContent, {
style: styles$7.previewContent
}, preview)
}));
})));
}
}]);
return StandardModal;
return LargeTwoColumnModal;
}(Component);
var styles$7 = StyleSheet.create({
wrapper: {
width: "93.75%",
maxWidth: 960,
height: "81.25%",
maxHeight: 624
var styles$3 = StyleSheet.create({
dialog: {
width: "86.72%",
maxWidth: 888,
height: "60.42%",
minHeight: 464
},
preview: {
maxWidth: 392,
flex: "1 0 auto"
smallDialog: {
background: Color.white
},
previewContent: {
padding: "0 64px 0 0"
column: {
flex: "0 0 50%"
},
smallPreview: {
display: "none"
smallColumn: {
flex: "0 0 auto",
height: "auto"
},
contentFooterWrapper: {
flexDirection: "column",
height: "100%"
},
contentWrapper: {
flexDirection: "row",
height: "100%",
width: "100%"
},
fullBleed: {
padding: 0
},
smallContentWrapper: {
flexDirection: "column",
overflow: "auto"
},
smallFooter: {
minHeight: 64
}
});
var ContentWrapper =
var SmallTwoColumnModal =
/*#__PURE__*/
function (_React$Component) {
_inherits(ContentWrapper, _React$Component);
_inherits(SmallTwoColumnModal, _React$Component);
function ContentWrapper() {
_classCallCheck(this, ContentWrapper);
function SmallTwoColumnModal() {
_classCallCheck(this, SmallTwoColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(ContentWrapper).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(SmallTwoColumnModal).apply(this, arguments));
}
_createClass(ContentWrapper, [{
_createClass(SmallTwoColumnModal, [{
key: "render",

@@ -1199,29 +1347,11 @@ value: function render() {

sidebar = _this$props.sidebar,
fullBleedSidebar = _this$props.fullBleedSidebar,
content = _this$props.content,
footer = _this$props.footer,
mediaSize = _this$props.mediaSize;
if (mediaSize !== "small") {
return createElement(View, {
style: styles$8.contentWrapper
}, createElement(ModalPanel, {
showCloseButton: true,
color: "dark",
onClose: onClose,
style: styles$8.column,
content: fullBleedSidebar ? createElement(ModalContent, {
style: styles$8.fullBleed
}, sidebar) : sidebar
}), createElement(ModalPanel, {
style: styles$8.column,
content: content,
footer: footer
}));
}
return createElement(View, {
style: styles$8.contentFooterWrapper
fullBleedSidebar = _this$props.fullBleedSidebar;
return createElement(ModalDialog, {
style: styles$4.smallDialog
}, createElement(View, {
style: [styles$8.contentWrapper, styles$8.smallContentWrapper]
style: styles$4.contentFooterWrapper
}, createElement(View, {
style: [styles$4.contentWrapper, styles$4.smallContentWrapper]
}, createElement(ModalPanel, {

@@ -1231,56 +1361,20 @@ showCloseButton: true,

onClose: onClose,
style: styles$8.smallColumn,
style: styles$4.smallColumn,
content: fullBleedSidebar ? createElement(ModalContent, {
style: styles$8.fullBleed
style: styles$4.fullBleed
}, sidebar) : sidebar,
scrollOverflow: false
}), createElement(ModalPanel, {
style: styles$8.smallColumn,
style: styles$4.smallColumn,
content: content,
scrollOverflow: false
})), footer && createElement(View, {
style: styles$8.smallFooter
}, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer)));
})), !!footer && createElement(View, {
style: styles$4.smallFooter
}, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer))));
}
}]);
return ContentWrapper;
return SmallTwoColumnModal;
}(Component);
var WrappedContentWrapper = MediaLayoutWrapper(ContentWrapper);
/**
* A two-column modal layout.
*/
var TwoColumnModal =
/*#__PURE__*/
function (_React$Component2) {
_inherits(TwoColumnModal, _React$Component2);
function TwoColumnModal() {
_classCallCheck(this, TwoColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(TwoColumnModal).apply(this, arguments));
}
_createClass(TwoColumnModal, [{
key: "render",
value: function render() {
return createElement(ModalDialog // TODO(jeresig): Replace with <Layout/>
//style={(mediaSize) =>
// mediaSize === "small" ? styles.smallDialog : styles.dialog
//}
, {
style: styles$8.dialog
}, createElement(WrappedContentWrapper, this.props));
}
}]);
return TwoColumnModal;
}(Component);
_defineProperty(TwoColumnModal, "defaultProps", {
fullBleedSidebar: true
});
var styles$8 = StyleSheet.create({
var styles$4 = StyleSheet.create({
dialog: {

@@ -1323,37 +1417,57 @@ width: "86.72%",

var ContentWrapper$1 =
/**
* A two-column modal layout.
*/
var TwoColumnModal =
/*#__PURE__*/
function (_React$Component) {
_inherits(ContentWrapper, _React$Component);
_inherits(TwoColumnModal, _React$Component);
function ContentWrapper() {
_classCallCheck(this, ContentWrapper);
function TwoColumnModal() {
_classCallCheck(this, TwoColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(ContentWrapper).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(TwoColumnModal).apply(this, arguments));
}
_createClass(ContentWrapper, [{
_createClass(TwoColumnModal, [{
key: "render",
value: function render() {
var _this = this;
return createElement(MediaLayout, null, function (_ref) {
var mediaSize = _ref.mediaSize;
return mediaSize === "small" ? createElement(SmallTwoColumnModal, _this.props) : createElement(LargeTwoColumnModal, _this.props);
});
}
}]);
return TwoColumnModal;
}(Component);
_defineProperty(TwoColumnModal, "defaultProps", {
fullBleedSidebar: true
});
var LargeOneColumnModal =
/*#__PURE__*/
function (_React$Component) {
_inherits(LargeOneColumnModal, _React$Component);
function LargeOneColumnModal() {
_classCallCheck(this, LargeOneColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(LargeOneColumnModal).apply(this, arguments));
}
_createClass(LargeOneColumnModal, [{
key: "render",
value: function render() {
var _this$props = this.props,
onClose = _this$props.onClose,
content = _this$props.content,
footer = _this$props.footer,
mediaSize = _this$props.mediaSize;
if (mediaSize !== "small") {
return createElement(View, {
style: styles$9.contentWrapper
}, createElement(ModalPanel, {
showCloseButton: true,
onClose: onClose,
content: content,
footer: footer
}));
}
return createElement(View, {
style: styles$9.contentFooterWrapper
footer = _this$props.footer;
return createElement(ModalDialog, {
style: styles$5.dialog
}, createElement(View, {
style: styles$9.smallContentWrapper
style: styles$5.contentWrapper
}, createElement(ModalPanel, {

@@ -1363,50 +1477,62 @@ showCloseButton: true,

content: content,
scrollOverflow: false
})), footer && createElement(View, {
style: styles$9.smallFooter
}, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer)));
footer: footer
})));
}
}]);
return ContentWrapper;
return LargeOneColumnModal;
}(Component);
var styles$5 = StyleSheet.create({
dialog: {
background: Color.white,
width: "64.65%",
maxWidth: 662,
maxHeight: "90%"
},
contentWrapper: {
width: "100%"
}
});
var WrappedContentWrapper$1 = MediaLayoutWrapper(ContentWrapper$1);
/**
* A one-column modal layout.
*/
var OneColumnModal =
var SmallOneColumnModal =
/*#__PURE__*/
function (_React$Component2) {
_inherits(OneColumnModal, _React$Component2);
function (_React$Component) {
_inherits(SmallOneColumnModal, _React$Component);
function OneColumnModal() {
_classCallCheck(this, OneColumnModal);
function SmallOneColumnModal() {
_classCallCheck(this, SmallOneColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(OneColumnModal).apply(this, arguments));
return _possibleConstructorReturn(this, _getPrototypeOf(SmallOneColumnModal).apply(this, arguments));
}
_createClass(OneColumnModal, [{
_createClass(SmallOneColumnModal, [{
key: "render",
value: function render() {
var _this$props = this.props,
onClose = _this$props.onClose,
content = _this$props.content,
footer = _this$props.footer;
return createElement(ModalDialog, {
style: [styles$9.dialog, // TODO(jeresig): Replace with <Layout/>
//(mediaSize) => mediaSize !== "small" && styles.largeDialog,
styles$9.largeDialog]
}, createElement(WrappedContentWrapper$1, this.props));
style: styles$6.dialog
}, createElement(View, {
style: styles$6.contentFooterWrapper
}, createElement(View, {
style: styles$6.smallContentWrapper
}, createElement(ModalPanel, {
showCloseButton: true,
onClose: onClose,
content: content,
scrollOverflow: false
})), !!footer && createElement(View, {
style: styles$6.smallFooter
}, !footer || _typeof(footer) === "object" && footer.type === ModalFooter ? footer : createElement(ModalFooter, null, footer))));
}
}]);
return OneColumnModal;
return SmallOneColumnModal;
}(Component);
var styles$9 = StyleSheet.create({
var styles$6 = StyleSheet.create({
dialog: {
background: Color.white
},
largeDialog: {
width: "64.65%",
maxWidth: 662,
maxHeight: "90%"
},
contentFooterWrapper: {

@@ -1431,2 +1557,31 @@ flexDirection: "column",

/**
* A one-column modal layout.
*/
var OneColumnModal =
/*#__PURE__*/
function (_React$Component) {
_inherits(OneColumnModal, _React$Component);
function OneColumnModal() {
_classCallCheck(this, OneColumnModal);
return _possibleConstructorReturn(this, _getPrototypeOf(OneColumnModal).apply(this, arguments));
}
_createClass(OneColumnModal, [{
key: "render",
value: function render() {
var _this = this;
return createElement(MediaLayout, null, function (_ref) {
var mediaSize = _ref.mediaSize;
return mediaSize === "small" ? createElement(SmallOneColumnModal, _this.props) : createElement(LargeOneColumnModal, _this.props);
});
}
}]);
return OneColumnModal;
}(Component);
/**
* From a given element, finds its next ancestor that is a modal launcher portal

@@ -1433,0 +1588,0 @@ * element.

4

generated-snapshot.test.js

@@ -13,4 +13,4 @@ // This file is auto-generated by gen-snapshot-tests.js

import StandardModal from "./components/standard-modal.js";
import TwoColumnModal from "./components/two-column-modal.js";
import OneColumnModal from "./components/one-column-modal.js";
import TwoColumnModal from "./components/two-column-modal/two-column-modal.js";
import OneColumnModal from "./components/one-column-modal/one-column-modal.js";
import ModalDialog from "./components/modal-dialog.js";

@@ -17,0 +17,0 @@ import ModalPanel from "./components/modal-panel.js";

4

index.js
// @flow
import ModalLauncher from "./components/modal-launcher.js";
import StandardModal from "./components/standard-modal.js";
import TwoColumnModal from "./components/two-column-modal.js";
import OneColumnModal from "./components/one-column-modal.js";
import TwoColumnModal from "./components/two-column-modal/two-column-modal.js";
import OneColumnModal from "./components/one-column-modal/one-column-modal.js";
import maybeGetPortalMountedModalHostElement from "./util/maybe-get-portal-mounted-modal-host-element.js";

@@ -7,0 +7,0 @@

16

package.json
{
"name": "@khanacademy/wonder-blocks-modal",
"version": "1.3.2",
"version": "1.3.3",
"design": "v1",

@@ -18,8 +18,8 @@ "publishConfig": {

"dependencies": {
"@khanacademy/wonder-blocks-color": "^1.1.1",
"@khanacademy/wonder-blocks-core": "^2.1.1",
"@khanacademy/wonder-blocks-icon": "^1.1.1",
"@khanacademy/wonder-blocks-icon-button": "^3.1.1",
"@khanacademy/wonder-blocks-toolbar": "^2.1.1",
"@khanacademy/wonder-blocks-typography": "^1.1.1"
"@khanacademy/wonder-blocks-color": "^1.1.2",
"@khanacademy/wonder-blocks-core": "^2.2.0",
"@khanacademy/wonder-blocks-icon": "^1.1.2",
"@khanacademy/wonder-blocks-icon-button": "^3.1.2",
"@khanacademy/wonder-blocks-toolbar": "^2.1.2",
"@khanacademy/wonder-blocks-typography": "^1.1.2"
},

@@ -32,5 +32,5 @@ "peerDependencies": {

"devDependencies": {
"@khanacademy/wonder-blocks-button": "^2.3.2",
"@khanacademy/wonder-blocks-button": "^2.3.3",
"wb-dev-build-settings": "^0.0.2"
}
}

2

util/types.js

@@ -10,4 +10,4 @@ // @flow

* modal, because we clone this element and add new props in order to capture
* `onClickCloseButton` events.
* `onClose` events.
*/
export type ModalElement = React.Element<any>;
components/one-column-modal.js
components/one-column-modal.md
components/two-column-modal.js
components/two-column-modal.md
components/two-column-modal.test.js
__snapshots__/generated-snapshot.test.js.snap

Sorry, the diff of this file is not supported yet

dist/index.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc