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

Comparing version 1.3.4 to 1.4.0

components/one-column-modal/large-one-column-modal.js

@@ -15,6 +15,6 @@ // @flow
     render() {
-        const {onClose, content, footer} = this.props;
+        const {onClose, content, footer, style} = this.props;
 
         return (
-            <ModalDialog style={styles.dialog}>
+            <ModalDialog style={[styles.dialog, style]}>
                 <View style={styles.contentWrapper}>
@@ -21,0 +21,0 @@ <ModalPanel

components/one-column-modal/one-column-modal.js

 // @flow
 import * as React from "react";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -26,2 +26,7 @@ import LargeOneColumnModal from "./large-one-column-modal.js";
     onClose?: () => void,
+
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType,
 |};
@@ -28,0 +33,0 @@

components/one-column-modal/one-column.modal.test.js

@@ -61,2 +61,30 @@ // @flow
 
+    it("should render OneColumnModal with custom style", () => {
+        // Arrange
+
+        // Act
+        const wrapper = mount(
+            <MediaLayoutContext.Provider
+                value={{
+                    overrideSize: undefined,
+                    ssrSize: "large",
+                    mediaSpec: MEDIA_DEFAULT_SPEC,
+                }}
+            >
+                <OneColumnModal
+                    content="Content"
+                    footer="Footer"
+                    style={{
+                        maxWidth: 300,
+                        maxHeight: 200,
+                    }}
+                />
+            </MediaLayoutContext.Provider>,
+        );
+        const modal = wrapper.find(LargeOneColumnModal);
+
+        // Assert
+        expect(modal).toMatchSnapshot();
+    });
+
     // We already capture desktop snapshots from auto generated tests
@@ -63,0 +91,0 @@ describe("mobile", () => {

components/one-column-modal/small-one-column-modal.js

@@ -16,6 +16,6 @@ // @flow
     render() {
-        const {onClose, content, footer} = this.props;
+        const {onClose, content, footer, style} = this.props;
 
         return (
-            <ModalDialog style={styles.dialog}>
+            <ModalDialog style={[styles.dialog, style]}>
                 <View style={styles.contentFooterWrapper}>
@@ -22,0 +22,0 @@ <View style={styles.smallContentWrapper}>

components/standard-modal.js

@@ -6,3 +6,3 @@ // @flow
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -66,2 +66,7 @@ import ModalDialog from "./modal-dialog.js";
     testId?: string,
+
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType,
 |};
@@ -98,2 +103,3 @@
             preview,
+            style,
         } = this.props;
@@ -104,3 +110,3 @@
                 {({styles}) => (
-                    <ModalDialog style={styles.wrapper}>
+                    <ModalDialog style={[styles.wrapper, style]}>
                         <ModalPanel
@@ -107,0 +113,0 @@ onClose={onClose}

components/standard-modal.test.js

@@ -82,3 +82,34 @@ // @flow
         });
+
+        it("should match snapshot with custom style", () => {
+            // Arrange
+
+            // Act
+            const wrapper = mount(
+                <div>
+                    <MediaLayoutContext.Provider
+                        value={{
+                            overrideSize: undefined,
+                            ssrSize: "large",
+                            mediaSpec: MEDIA_DEFAULT_SPEC,
+                        }}
+                    >
+                        <StandardModal
+                            title="Title"
+                            content="Content"
+                            footer="Footer"
+                            style={{
+                                maxWidth: 300,
+                                maxHeight: 200,
+                            }}
+                        />
+                    </MediaLayoutContext.Provider>
+                </div>,
+            );
+            const modal = wrapper.find(StandardModal);
+
+            // Assert
+            expect(modal).toMatchSnapshot();
+        });
     });
 });

components/two-column-modal/large-two-column-modal.js

@@ -22,6 +22,7 @@ // @flow
             fullBleedSidebar,
+            style,
         } = this.props;
 
         return (
-            <ModalDialog style={styles.dialog}>
+            <ModalDialog style={[styles.dialog, style]}>
                 <View style={styles.contentWrapper}>
@@ -28,0 +29,0 @@ <ModalPanel

components/two-column-modal/small-two-column-modal.js

@@ -23,6 +23,7 @@ // @flow
             fullBleedSidebar,
+            style,
         } = this.props;
 
         return (
-            <ModalDialog style={styles.smallDialog}>
+            <ModalDialog style={[styles.smallDialog, style]}>
                 <View style={styles.contentFooterWrapper}>
@@ -29,0 +30,0 @@ <View

components/two-column-modal/two-column-modal.js

 // @flow
 import * as React from "react";
 import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
-import type {AriaProps} from "@khanacademy/wonder-blocks-core";
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -32,2 +32,7 @@ import LargeTwoColumnModal from "./large-two-column-modal.js";
     onClose?: () => void,
+
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType,
 |};
@@ -34,0 +39,0 @@

components/two-column-modal/two-column-modal.test.js

@@ -77,2 +77,31 @@ // @flow
 
+    it("should render TwoColumnModal with custom style", () => {
+        // Arrange
+        const wrapper = mount(
+            <MediaLayoutContext.Provider
+                value={{
+                    overrideSize: undefined,
+                    ssrSize: "large",
+                    mediaSpec: MEDIA_DEFAULT_SPEC,
+                }}
+            >
+                <TwoColumnModal
+                    content="Content"
+                    sidebar="Sidebar"
+                    footer="Footer"
+                    style={{
+                        maxWidth: 300,
+                        maxHeight: 200,
+                    }}
+                />
+            </MediaLayoutContext.Provider>,
+        );
+
+        // Act
+        const modal = wrapper.find(LargeTwoColumnModal);
+
+        // Assert
+        expect(modal).toMatchSnapshot();
+    });
+
     // We already capture desktop snapshots from auto generated tests
@@ -79,0 +108,0 @@ describe("mobile", () => {

dist/es/index.js

@@ -1179,3 +1179,4 @@ import { createElement, Component, Fragment, createContext, cloneElement } from 'react';
           content = _this$props2.content,
-          preview = _this$props2.preview;
+          preview = _this$props2.preview,
+          style = _this$props2.style;
       return createElement(MediaLayout, {
@@ -1186,3 +1187,3 @@ styleSheets: styleSheets$4
         return createElement(ModalDialog, {
-          style: styles.wrapper
+          style: [styles.wrapper, style]
         }, createElement(ModalPanel, {
@@ -1256,5 +1257,6 @@ onClose: onClose,
           footer = _this$props.footer,
-          fullBleedSidebar = _this$props.fullBleedSidebar;
+          fullBleedSidebar = _this$props.fullBleedSidebar,
+          style = _this$props.style;
       return createElement(ModalDialog, {
-        style: styles$3.dialog
+        style: [styles$3.dialog, style]
       }, createElement(View, {
@@ -1337,5 +1339,6 @@ style: styles$3.contentWrapper
           footer = _this$props.footer,
-          fullBleedSidebar = _this$props.fullBleedSidebar;
+          fullBleedSidebar = _this$props.fullBleedSidebar,
+          style = _this$props.style;
       return createElement(ModalDialog, {
-        style: styles$4.smallDialog
+        style: [styles$4.smallDialog, style]
       }, createElement(View, {
@@ -1454,5 +1457,6 @@ style: styles$4.contentFooterWrapper
           content = _this$props.content,
-          footer = _this$props.footer;
+          footer = _this$props.footer,
+          style = _this$props.style;
       return createElement(ModalDialog, {
-        style: styles$5.dialog
+        style: [styles$5.dialog, style]
       }, createElement(View, {
@@ -1500,5 +1504,6 @@ style: styles$5.contentWrapper
           content = _this$props.content,
-          footer = _this$props.footer;
+          footer = _this$props.footer,
+          style = _this$props.style;
       return createElement(ModalDialog, {
-        style: styles$6.dialog
+        style: [styles$6.dialog, style]
       }, createElement(View, {
@@ -1505,0 +1510,0 @@ style: styles$6.contentFooterWrapper

docs.md

@@ -40,1 +40,68 @@ ## Wrapping Modals
 ```
+
+### Example: Modals with custom styles 
+
+Sometimes you'll want to customize the styling of the modal .e.g., custom width or height.  You can pass in `style` which will customize the styling of the modal wrapper.
+To use styling for different screen sizes, wrap your component with `MediaLayout` component.  Please see example code below for details.
+
+```js
+const {StyleSheet} = require("aphrodite");
+const {View} = require("@khanacademy/wonder-blocks-core");
+const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
+const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
+
+const styles = StyleSheet.create({
+    previewSizer: {
+        height: 512,
+    },
+
+    modalPositioner: {
+        // Checkerboard background
+        backgroundImage: "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+        backgroundSize: "20px 20px",
+        backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+
+        position: "absolute",
+        left: 0,
+        right: 0,
+        top: 0,
+        bottom: 0,
+    },
+});
+
+const styleSheets = {
+    mdOrLarger: StyleSheet.create({
+        customModal: {
+            maxWidth: 300,
+            maxHeight: 200,
+        },
+    }),
+};
+
+<View style={styles.previewSizer}>
+    <View style={styles.modalPositioner}>
+    
+        <MediaLayout styleSheets={styleSheets}>
+            {({styles}) => (
+                <OneColumnModal
+                    style={styles.customModal}
+                    content={
+                        <View>
+                            <Title style={styles.title}>Title</Title>
+                            <Body>
+                                Hello World!
+                            </Body>
+                        </View>
+                    }
+                    onClose={() => alert("This would close the modal.")}
+                />
+            )}
+        </MediaLayout>
+    </View>
+</View>;
+```

generated-snapshot.test.js

@@ -66,2 +66,69 @@ // This file is auto-generated by gen-snapshot-tests.js
     it("example 2", () => {
+        const {StyleSheet} = require("aphrodite");
+        const {View} = require("@khanacademy/wonder-blocks-core");
+        const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
+        const {MediaLayout} = require("@khanacademy/wonder-blocks-layout");
+
+        const styles = StyleSheet.create({
+            previewSizer: {
+                height: 512,
+            },
+
+            modalPositioner: {
+                // Checkerboard background
+                backgroundImage:
+                    "linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
+                backgroundSize: "20px 20px",
+                backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
+
+                display: "flex",
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+
+                position: "absolute",
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+            },
+        });
+
+        const styleSheets = {
+            mdOrLarger: StyleSheet.create({
+                customModal: {
+                    maxWidth: 300,
+                    maxHeight: 200,
+                },
+            }),
+        };
+
+        const example = (
+            <View style={styles.previewSizer}>
+                <View style={styles.modalPositioner}>
+                    <MediaLayout styleSheets={styleSheets}>
+                        {({styles}) => (
+                            <OneColumnModal
+                                style={styles.customModal}
+                                content={
+                                    <View>
+                                        <Title style={styles.title}>
+                                            Title
+                                        </Title>
+                                        <Body>Hello World!</Body>
+                                    </View>
+                                }
+                                onClose={() =>
+                                    alert("This would close the modal.")
+                                }
+                            />
+                        )}
+                    </MediaLayout>
+                </View>
+            </View>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+    it("example 3", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -231,3 +298,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 3", () => {
+    it("example 4", () => {
         const React = require("react");
@@ -297,3 +364,3 @@
     });
-    it("example 4", () => {
+    it("example 5", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -360,3 +427,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 5", () => {
+    it("example 6", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -429,3 +496,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 6", () => {
+    it("example 7", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -518,3 +585,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 7", () => {
+    it("example 8", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -597,3 +664,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 8", () => {
+    it("example 9", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -674,3 +741,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 9", () => {
+    it("example 10", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -771,3 +838,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 10", () => {
+    it("example 11", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -817,3 +884,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 11", () => {
+    it("example 12", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -892,3 +959,3 @@ const Button = require("@khanacademy/wonder-blocks-button").default;
     });
-    it("example 12", () => {
+    it("example 13", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -968,3 +1035,3 @@ const Button = require("@khanacademy/wonder-blocks-button").default;
     });
-    it("example 13", () => {
+    it("example 14", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -1033,3 +1100,3 @@ const {View} = require("@khanacademy/wonder-blocks-core");
     });
-    it("example 14", () => {
+    it("example 15", () => {
         const {StyleSheet, css} = require("aphrodite");
@@ -1036,0 +1103,0 @@ const {View} = require("@khanacademy/wonder-blocks-core");

package.json

 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "1.3.4",
+  "version": "1.4.0",
   "design": "v1",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

1046970

increased by42.56%

Lines of code

6505

increased by2.6%

No dependency changes