npm - @khanacademy/wonder-blocks-modal - Versions diffs - 2.3.7 → 2.3.9 - Mend

@khanacademy/wonder-blocks-modal 2.3.7 → 2.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md +14 -0
package/docs.md +4 -491
package/package.json +3 -3
package/src/components/__tests__/modal-launcher.test.js +1 -1
package/src/components/__tests__/modal-panel.test.js +6 -15
package/src/components/__tests__/one-pane-dialog.test.js +36 -8
package/building-blocks.md +0 -136
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -3473
package/src/__tests__/generated-snapshot.test.js +0 -846
package/src/components/modal-launcher.md +0 -0
package/src/components/one-pane-dialog.md +0 -250

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,19 @@
 # @khanacademy/wonder-blocks-modal
+## 2.3.9
+### Patch Changes
+-   @khanacademy/wonder-blocks-icon-button@3.4.13
+## 2.3.8
+### Patch Changes
+-   Updated dependencies [3bae2aba]
+    -   @khanacademy/wonder-blocks-icon@1.2.31
+    -   @khanacademy/wonder-blocks-icon-button@3.4.12
 ## 2.3.7
 ### Patch Changes

package/docs.md CHANGED Viewed

@@ -1,492 +1,5 @@
-Looking for docs for StandardModal, OneColumnModal, or TwoColumnModal click
-[here](https://deploy-preview-389--wonder-blocks.netlify.com/#modal)
+Documentation for `@khanacademy/wonder-blocks-modal` is now in Storybook.
-## Examples
-### Example: Default modal
-Once the modal is launched, tab focus wraps inside the modal content. Pressing Tab at the end of the modal will focus the modal's first element, and pressing Shift-Tab at the start of the modal will focus the modal's last element.
-```js
-import {StyleSheet} from "aphrodite";
-import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-import Button from "@khanacademy/wonder-blocks-button";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-const styles = StyleSheet.create({
-    example: {
-        padding: Spacing.xLarge_32,
-        alignItems: "center",
-    },
-    title: {
-        marginBottom: Spacing.medium_16,
-    },
-    modalContent: {
-        margin: "0 auto",
-        maxWidth: 544,
-    },
-    above: {
-        background: "url(/modal-above.png)",
-        width: 874,
-        height: 551,
-        position: "absolute",
-        top: 40,
-        left: -140
-    },
-    below: {
-        background: "url(/modal-below.png)",
-        width: 868,
-        height: 521,
-        position: "absolute",
-        top: -100,
-        left: -300
-    },
-});
-const onePaneDialog = ({closeModal}) => (
-    <OnePaneDialog
-        title="Title"
-        subtitle="You're reading the subtitle!"
-        above={<View style={styles.above} />}
-        below={<View style={styles.below} />}
-        testId="dialog-default-example"
-        content={
-            <View style={styles.modalContent}>
-                <Body tag="p">
-                    {
-                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
-                    }
-                </Body>
-            </View>
-        }
-        footer={
-            <Button onClick={closeModal}>
-                Close modal
-            </Button>
-        }
-    />
-);
-<View style={styles.example}>
-    <ModalLauncher
-        modal={onePaneDialog}
-        testId="modal-launcher-default-example"
-    >
-        {({openModal}) => <Button onClick={openModal}>OnePaneDialog</Button>}
-    </ModalLauncher>
-</View>;
-```
-### Example: Disabling backdrop dismission
-By default, `ModalLauncher` allows you to close the modal by clicking on the overlay/backdrop window. Somethimes you might need to disable it, and to to this, you can set `backdropDismissEnabled` to `false`.
-```js
-import {StyleSheet} from "aphrodite";
-import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-import Button from "@khanacademy/wonder-blocks-button";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-const styles = StyleSheet.create({
-    example: {
-        padding: Spacing.xLarge_32,
-        alignItems: "center",
-    },
-    modalContent: {
-        margin: "0 auto",
-        maxWidth: 544,
-    },
-});
-const exampleModal = ({closeModal}) => (
-    <OnePaneDialog
-        title="Backdrop dismission disabled"
-        content={
-            <View style={styles.modalContent}>
-                <Body tag="p">
-                    {
-                        "This window won't be closed if you click/tap outside of the ModalPanel. To do that, you can still press `esc` or use the close button located on the top right."
-                    }
-                </Body>
-            </View>
-        }
-    />
-);
-<View style={styles.example}>
-    <ModalLauncher modal={exampleModal} backdropDismissEnabled={false}>
-        {({openModal}) => <Button onClick={openModal}>Open modal</Button>}
-    </ModalLauncher>
-</View>
-```
-### Example: Triggering programmatically
-Sometimes you'll want to trigger a modal programmatically. This can be done by
-rendering `ModalLauncher` without any children and instead setting its `opened`
-prop to `true`.  In this situation `ModalLauncher` is a controlled component
-which means you'll also have to update `opened` to `false` in response to the
-`onClose` callback being triggered.
-```js
-import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import {Title} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Button from "@khanacademy/wonder-blocks-button";
-import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
-class Example extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            opened: false,
-        };
-    }
-    handleOpen() {
-        console.log('opening modal');
-        this.setState({opened: true});
-    }
-    handleClose() {
-        console.log('closing modal');
-        this.setState({opened: false});
-    }
-    render() {
-        return <View>
-            <ActionMenu menuText="actions">
-                <ActionItem
-                    label="Open modal"
-                    onClick={() => this.handleOpen()}
-                />
-            </ActionMenu>
-            <ModalLauncher
-                onClose={() => this.handleClose()}
-                opened={this.state.opened}
-                modal={({closeModal}) => (
-                    <OnePaneDialog
-                        title="Triggered from action menu"
-                        content={
-                            <View>
-                                <Title>Hello, world</Title>
-                            </View>
-                        }
-                        footer={
-                            <Button onClick={closeModal}>
-                                Close Modal
-                            </Button>
-                        }
-                    />
-                )}
-            />
-        </View>;
-    }
-}
-<Example />
-```
-**Warning:** Do not wrap items in a dropdown in a `ModalLauncher`.  Instead, trigger
-the modal programmatically by using the `ModalLauncher` as an uncontrolled component
-as shown in the above example.
-This is necessary because wrapping an item in `ModalLauncher` will result in the
-modal disappearing as soon as the focus changes.  The reason is that the change in
-focus results in the item that in the dropdown that was clicked to be blur which
-closes the dropdown.  This results in all of its children to unmount including the
-ModalLauncher which was wrapping the menu item.
-## Accessibility
-It should follow guidelines from [W3C](https://www.w3.org/TR/wai-aria-practices/#dialog_modal).
-### Keyboard Interaction
-When a dialog opens, focus moves to an element inside the dialog. See notes below regarding initial focus placement.
-- Tab:
-    - Moves focus to the next tabbable element inside the dialog.
-    - If focus is on the last tabbable element inside the dialog, moves focus to the first tabbable element inside the dialog.
-- Shift + Tab:
-    - Moves focus to the previous tabbable element inside the dialog.
-    - If focus is on the first tabbable element inside the dialog, moves focus to the last tabbable element inside the dialog.
-- Escape: Closes the dialog.
-#### Initial focus placement:
-The initial focus placement depends on the following scenarios:
-1. `initialFocusId` (default): `ModalLauncher` exposes this prop as a string. The dialog will try to find this element into the DOM. If it's found, focus is initially set on this element.
-2. focusable elements: This is the second scenario, where the dialog tries to find the first ocurrence of possible focusable elements.
-3. Dialog: If the first two conditions are not met, then focus is initially set to the Dialog element itself.
-### Example: Set initial focus on a given element inside the modal
-```js
-import {StyleSheet} from "aphrodite";
-import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import {Title} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Button from "@khanacademy/wonder-blocks-button";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-const styles = StyleSheet.create({
-    example: {
-        padding: Spacing.xLarge_32,
-        alignItems: "center",
-    }
-});
-const modalInitialFocus = ({closeModal}) => (
-    <OnePaneDialog
-        title="Single-line title"
-        content={
-            <View>
-                <View>
-                    <label>Label</label>
-                    <input type="text" />
-                    <Strut size={Spacing.medium_16} />
-                    <Button id="initial-focus">
-                        Button to receive initial focus
-                    </Button>
-                </View>
-            </View>
-        }
-        footer={
-            <React.Fragment>
-                <Button kind="tertiary" onClick={closeModal}>
-                    Cancel
-                </Button>
-                <Strut size={Spacing.medium_16} />
-                <Button>
-                    Submit
-                </Button>
-            </React.Fragment>
-        }
-    />
-);
-<View style={styles.example}>
-    <ModalLauncher
-        onClose={() => window.alert("you closed the modal")}
-        initialFocusId="initial-focus"
-        modal={modalInitialFocus}
-    >
-        {({openModal}) => <Button onClick={openModal}>Open modal with initial focus</Button>}
-    </ModalLauncher>
-</View>
-```
-### WAI-ARIA Roles
-- The element that serves as the **dialog container** has `aria-role` defined as `dialog`.
-- The dialog has a value set for the `aria-labelledby` property that refers to a **visible dialog title**.
-## Customization
-### Example: Flexible dialogs
-This example illustrates how we can update the Modal's contents by wrapping it into a new component/container. **Modal** is built in a way that provides great flexibility and makes it work with different variations and/or layouts (see Custom Two-Pane Dialog example).
-```js
-import {StyleSheet} from "aphrodite";
-import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import Button from "@khanacademy/wonder-blocks-button";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
-const styles = StyleSheet.create({
-    example: {
-        padding: Spacing.xLarge_32,
-        alignItems: "center",
-    },
-    row: {
-        flexDirection: "row",
-        justifyContent: "flex-end"
-    },
-    footer: {
-        alignItems: "center",
-        flexDirection: "row",
-        justifyContent: "space-between",
-        width: "100%"
-    }
-});
-class ExerciseModal extends React.Component {
-    render() {
-        const {current, handleNextButton, handlePrevButton, question, total} = this.props;
-        return (
-            <OnePaneDialog
-                title="Exercises"
-                content={
-                    <View>
-                        <Body>This is the current question: {question}</Body>
-                    </View>
-                }
-                footer={
-                    <View style={styles.footer}>
-                        <LabelLarge>Step {current+1} of {total}</LabelLarge>
-                        <View style={styles.row}>
-                            <Button kind="tertiary" onClick={handlePrevButton}>Previous</Button>
-                            <Strut size={16} />
-                            <Button kind="primary" onClick={handleNextButton}>Next</Button>
-                        </View>
-                    </View>
-                }
-            />
-        );
-    }
-}
-class ExerciseContainer extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            currentQuestion: 0
-        };
-    }
-    handleNextButton() {
-        this.setState({
-            currentQuestion: Math.min(this.state.currentQuestion + 1, this.props.questions.length - 1),
-        });
-   };
-    handlePrevButton() {
-        this.setState({
-            currentQuestion: Math.max(0, this.state.currentQuestion - 1),
-        });
-    }
-    render() {
-        return (
-            <ModalLauncher
-                onClose={() => console.log("you closed the modal")}
-                modal={
-                    <ExerciseModal
-                        question={this.props.questions[this.state.currentQuestion]}
-                        current={this.state.currentQuestion}
-                        total={this.props.questions.length}
-                        handlePrevButton={() => this.handlePrevButton()}
-                        handleNextButton={() => this.handleNextButton()}
-                    />
-                }
-            >
-                {({openModal}) => <Button onClick={openModal}>Open flexible modal</Button>}
-            </ModalLauncher>
-        );
-    }
-}
-<View style={styles.example}>
-    <ExerciseContainer questions={["First question", "Second question", "Last question"]} />
-</View>
-```
-### Example: Dialogs with custom styles
-Sometimes you'll want to customize the styling of the **Dialog** .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
-import {StyleSheet} from "aphrodite";
-import {OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Title, Body} from "@khanacademy/wonder-blocks-typography";
-import {MediaLayout} from "@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,
-        },
-        below: {
-            background: "url(/blue-blob.png)",
-            backgroundSize: "cover",
-            width: 294,
-            height: 306,
-            position: "absolute",
-            top: 0,
-            left: -60
-        },
-        above: {
-            background: "url(/asteroid.png)",
-            backgroundSize: "cover",
-            width: 418,
-            height: 260,
-            position: "absolute",
-            top: -10,
-            left: -5
-        },
-    }),
-};
-<View style={styles.previewSizer}>
-    <View style={styles.modalPositioner}>
-        <MediaLayout styleSheets={styleSheets}>
-            {({styles}) => (
-                <OnePaneDialog
-                    style={styles.customModal}
-                    title="Single-line title"
-                    content={
-                        <View>
-                            <Body>
-                                Hello World!
-                            </Body>
-                        </View>
-                    }
-                    onClose={() => alert("This would close the modal.")}
-                    below={<View style={styles.below} />}
-                    above={<View style={styles.above} />}
-                />
-            )}
-        </MediaLayout>
-    </View>
-</View>;
-```
+Visit the [Storybook
+Modal](https://khan.github.io/wonder-blocks/?path=/docs/modal) docs on GitHub
+Pages.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "2.3.7",
+  "version": "2.3.9",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -19,8 +19,8 @@
     "@khanacademy/wonder-blocks-breadcrumbs": "^1.0.33",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.4.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.30",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.11",
+    "@khanacademy/wonder-blocks-icon": "^1.2.31",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.13",
     "@khanacademy/wonder-blocks-layout": "^1.4.11",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-toolbar": "^2.1.34",

package/src/components/__tests__/modal-launcher.test.js CHANGED Viewed

@@ -156,7 +156,7 @@ describe("ModalLauncher", () => {
     });
     test("Disable scrolling when the modal is open", () => {
-        let savedCloseModal = () => {
+        let savedCloseModal: () => void = () => {
             throw new Error(`closeModal wasn't saved`);
         };

package/src/components/__tests__/modal-panel.test.js CHANGED Viewed

@@ -1,14 +1,10 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
-import {View} from "@khanacademy/wonder-blocks-core";
+import {render, screen} from "@testing-library/react";
 import expectRenderError from "../../../../../utils/testing/expect-render-error.js";
 import ModalPanel from "../modal-panel.js";
 import ModalContext from "../modal-context.js";
-import CloseButton from "../close-button.js";
 describe("ModalPanel", () => {
     test("ModalContext.Provider and onClose should warn", () => {
@@ -26,27 +22,22 @@ describe("ModalPanel", () => {
     test("testId should be added to the panel wrapper", () => {
         // Arrange
-        const wrapper = mount(
-            <ModalPanel content="dummy content" testId="test-id" />,
-        );
+        render(<ModalPanel content="dummy content" testId="test-id" />);
         // Act
-        const mainElement = wrapper.find(View).first();
         // Assert
-        expect(mainElement.prop("testId")).toBe("test-id-panel");
+        expect(screen.getByTestId("test-id-panel")).toBeInTheDocument();
     });
     test("testId should be added to the CloseButton element", () => {
         // Arrange
-        const wrapper = mount(
-            <ModalPanel content="dummy content" testId="test-id" />,
-        );
+        render(<ModalPanel content="dummy content" testId="test-id" />);
         // Act
-        const closeButton = wrapper.find(CloseButton);
+        const closeButton = screen.getByLabelText("Close modal");
         // Assert
-        expect(closeButton.prop("testId")).toBe("test-id-close");
+        expect(closeButton).toHaveAttribute("data-test-id", "test-id-close");
     });
 });

package/src/components/__tests__/one-pane-dialog.test.js CHANGED Viewed

@@ -1,14 +1,17 @@
 // @flow
 import * as React from "react";
-import {mount} from "enzyme";
-import "jest-enzyme";
+import {render, screen} from "@testing-library/react";
+import {
+    Breadcrumbs,
+    BreadcrumbsItem,
+} from "@khanacademy/wonder-blocks-breadcrumbs";
 import OnePaneDialog from "../one-pane-dialog.js";
 describe("OnePaneDialog", () => {
     test("testId should be set in the Dialog element", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <OnePaneDialog
                 title="Dialog with multi-step footer"
                 content="dummy content"
@@ -17,17 +20,21 @@ describe("OnePaneDialog", () => {
         );
         // Act
-        const dialog = wrapper.find(`[role="dialog"]`).first();
+        const dialog = screen.getByRole("dialog");
         // Assert
-        expect(dialog.prop("testId")).toBe("one-pane-dialog-example");
+        expect(dialog).toHaveAttribute(
+            "data-test-id",
+            "one-pane-dialog-example",
+        );
     });
     test("role can be overriden to alertdialog", () => {
         // Arrange
-        const wrapper = mount(
+        render(
             <OnePaneDialog
                 title="Dialog with multi-step footer"
+                subtitle="Dialog subtitle"
                 content="dummy content"
                 testId="one-pane-dialog-example"
                 role="alertdialog"
@@ -35,9 +42,30 @@ describe("OnePaneDialog", () => {
         );
         // Act
-        const dialog = wrapper.find(`[role="alertdialog"]`).first();
+        const dialog = screen.getByRole("alertdialog");
+        // Assert
+        expect(dialog).toBeInTheDocument();
+    });
+    test("should include breadcrumbs", () => {
+        // Arrange
+        render(
+            <OnePaneDialog
+                title="Dialog with multi-step footer"
+                breadcrumbs={
+                    <Breadcrumbs>
+                        <BreadcrumbsItem>test</BreadcrumbsItem>
+                    </Breadcrumbs>
+                }
+                content="dummy content"
+                testId="one-pane-dialog-example"
+            />,
+        );
+        // Act
         // Assert
-        expect(dialog).toHaveLength(1);
+        expect(screen.getByLabelText("Breadcrumbs")).toBeInTheDocument();
     });
 });