@khanacademy/wonder-blocks-modal 5.1.11 → 5.1.13

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-modal
 
+## 5.1.13
+
+### Patch Changes
+
+-   Updated dependencies [3463bde3]
+    -   @khanacademy/wonder-blocks-icon-button@5.5.0
+
+## 5.1.12
+
+### Patch Changes
+
+-   02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
+-   Updated dependencies [02a1b298]
+    -   @khanacademy/wonder-blocks-breadcrumbs@2.2.7
+    -   @khanacademy/wonder-blocks-core@7.0.1
+    -   @khanacademy/wonder-blocks-icon-button@5.4.1
+    -   @khanacademy/wonder-blocks-layout@2.2.1
+    -   @khanacademy/wonder-blocks-theming@2.0.4
+    -   @khanacademy/wonder-blocks-timing@5.0.2
+    -   @khanacademy/wonder-blocks-tokens@2.0.1
+    -   @khanacademy/wonder-blocks-typography@2.1.16
+
 ## 5.1.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-modal",
-  "version": "5.1.11",
+  "version": "5.1.13",
   "design": "v2",
   "publishConfig": {
     "access": "public"
@@ -16,14 +16,14 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.6",
-    "@khanacademy/wonder-blocks-core": "^7.0.0",
-    "@khanacademy/wonder-blocks-icon-button": "^5.4.0",
-    "@khanacademy/wonder-blocks-layout": "^2.2.0",
-    "@khanacademy/wonder-blocks-theming": "^2.0.3",
-    "@khanacademy/wonder-blocks-timing": "^5.0.1",
-    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
-    "@khanacademy/wonder-blocks-typography": "^2.1.15"
+    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.7",
+    "@khanacademy/wonder-blocks-core": "^7.0.1",
+    "@khanacademy/wonder-blocks-icon-button": "^5.5.0",
+    "@khanacademy/wonder-blocks-layout": "^2.2.1",
+    "@khanacademy/wonder-blocks-theming": "^2.0.4",
+    "@khanacademy/wonder-blocks-timing": "^5.0.2",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.1",
+    "@khanacademy/wonder-blocks-typography": "^2.1.16"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -32,7 +32,7 @@
     "react-dom": "16.14.0"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.6",
+    "@khanacademy/wonder-blocks-breadcrumbs": "^2.2.7",
     "@khanacademy/wb-dev-build-settings": "^1.0.1"
   }
 }

package/src/components/__tests__/close-button.test.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import expectRenderError from "../../../../../utils/testing/expect-render-error";
-import CloseButton from "../close-button";
-import ModalContext from "../modal-context";
-
-describe("CloseButton", () => {
-    test("ModalContext.Provider and onClose should warn", () => {
-        expectRenderError(
-            <ModalContext.Provider value={{closeModal: () => {}}}>
-                <CloseButton light={false} onClick={() => {}} />,
-            </ModalContext.Provider>,
-            "You've specified 'onClose' on a modal when using ModalLauncher.  Please specify 'onClose' on the ModalLauncher instead",
-        );
-    });
-
-    test("testId should be set in the Icon element", () => {
-        // Arrange
-        render(
-            <div>
-                <ModalContext.Provider value={{closeModal: () => {}}}>
-                    <CloseButton testId="modal-example-close" />,
-                </ModalContext.Provider>
-            </div>,
-        );
-
-        // Act
-        const closeButton = screen.getByRole("button");
-
-        // Assert
-        expect(closeButton).toHaveAttribute(
-            "data-testid",
-            "modal-example-close",
-        );
-    });
-});

package/src/components/__tests__/focus-trap.test.tsx

@@ -1,100 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import Button from "@khanacademy/wonder-blocks-button";
-import {Choice, RadioGroup} from "@khanacademy/wonder-blocks-form";
-
-import FocusTrap from "../focus-trap";
-
-describe("FocusTrap", () => {
-    it("Focus should move to the first focusable element", async () => {
-        // Arrange
-        render(
-            <>
-                <FocusTrap>
-                    <RadioGroup
-                        label="some-label"
-                        description="some-description"
-                        groupName="some-group-name"
-                        onChange={() => {}}
-                        selectedValue={""}
-                    >
-                        <Choice
-                            label="first option"
-                            value="some-choice-value"
-                        />
-                        <Choice
-                            label="second option"
-                            value="some-choice-value-2"
-                            description="Some choice description."
-                        />
-                    </RadioGroup>
-                    <Button>A button</Button>
-                </FocusTrap>
-                <Button>An external button</Button>
-            </>,
-        );
-
-        // Initial focused element
-        const firstRadioButton = await screen.findByRole("radio", {
-            name: /first option/i,
-        });
-        firstRadioButton.focus();
-
-        // Act
-        // focus on the button
-        await userEvent.tab();
-        // focus on the last sentinel
-        await userEvent.tab();
-
-        // Assert
-        // Redirect focus to the first radiobutton.
-        expect(firstRadioButton).toHaveFocus();
-    });
-
-    it("Focus should move to the last focusable element", async () => {
-        // Arrange
-        render(
-            <>
-                <FocusTrap>
-                    <RadioGroup
-                        label="some-label"
-                        description="some-description"
-                        groupName="some-group-name"
-                        onChange={() => {}}
-                        selectedValue={""}
-                    >
-                        <Choice
-                            label="first option"
-                            value="some-choice-value"
-                        />
-                        <Choice
-                            label="second option"
-                            value="some-choice-value-2"
-                            description="Some choice description."
-                        />
-                    </RadioGroup>
-                    <Button>A focusable button</Button>
-                </FocusTrap>
-                <Button>An external button</Button>
-            </>,
-        );
-
-        // Initial focused element
-        const firstRadioButton = await screen.findByRole("radio", {
-            name: /first option/i,
-        });
-        firstRadioButton.focus();
-
-        // Act
-        // focus on the first sentinel
-        await userEvent.tab({shift: true});
-
-        // Assert
-        // Redirect focus to the button.
-        expect(
-            await screen.findByRole("button", {name: "A focusable button"}),
-        ).toHaveFocus();
-    });
-});

package/src/components/__tests__/modal-backdrop.test.tsx

@@ -1,241 +0,0 @@
-import * as React from "react";
-import {render, screen, fireEvent, waitFor} from "@testing-library/react";
-import {userEvent} from "@testing-library/user-event";
-
-import ModalBackdrop from "../modal-backdrop";
-import OnePaneDialog from "../one-pane-dialog";
-
-const exampleModal = (
-    <OnePaneDialog
-        content={<div data-testid="example-modal-content" />}
-        title="Title"
-        footer={<div data-testid="example-modal-footer" />}
-        testId="example-modal-test-id"
-    />
-);
-
-const exampleModalWithButtons = (
-    <OnePaneDialog
-        content={
-            <div>
-                <button>first focusable button</button>
-                <button />
-                <button />
-            </div>
-        }
-        title="Title"
-        footer={<div data-modal-footer />}
-    />
-);
-
-describe("ModalBackdrop", () => {
-    test("Clicking the backdrop triggers `onCloseModal`", async () => {
-        // Arrange
-        const onCloseModal = jest.fn();
-
-        render(
-            <ModalBackdrop
-                onCloseModal={onCloseModal}
-                testId="modal-backdrop-test-id"
-            >
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        const backdrop = await screen.findByTestId("modal-backdrop-test-id");
-
-        //Act
-        await userEvent.click(backdrop);
-
-        // Assert
-        expect(onCloseModal).toHaveBeenCalled();
-    });
-
-    test("Clicking the modal content does not trigger `onCloseModal`", async () => {
-        // Arrange
-        const onCloseModal = jest.fn();
-
-        render(
-            <ModalBackdrop onCloseModal={onCloseModal}>
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        // Act
-        await userEvent.click(
-            await screen.findByTestId("example-modal-content"),
-        );
-
-        // Assert
-        expect(onCloseModal).not.toHaveBeenCalled();
-    });
-
-    test("Clicking and dragging into the backdrop does not close modal", async () => {
-        // Arrange
-        const onCloseModal = jest.fn();
-
-        render(
-            <ModalBackdrop
-                onCloseModal={onCloseModal}
-                testId="modal-backdrop-test-id"
-            >
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        const panel = await screen.findByTestId("example-modal-test-id");
-        const backdrop = await screen.findByTestId("modal-backdrop-test-id");
-
-        // Act
-
-        // Dragging the mouse
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseDown(panel);
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseUp(backdrop);
-
-        // Assert
-        expect(onCloseModal).not.toHaveBeenCalled();
-    });
-
-    test("Clicking and dragging in from the backdrop does not close modal", async () => {
-        // Arrange
-        const onCloseModal = jest.fn();
-
-        render(
-            <ModalBackdrop
-                onCloseModal={onCloseModal}
-                testId="modal-backdrop-test-id"
-            >
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        const panel = await screen.findByTestId("example-modal-test-id");
-        const backdrop = await screen.findByTestId("modal-backdrop-test-id");
-
-        // Act
-
-        // Dragging the mouse
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseDown(backdrop);
-        // eslint-disable-next-line testing-library/prefer-user-event
-        fireEvent.mouseUp(panel);
-
-        // Assert
-        expect(onCloseModal).not.toHaveBeenCalled();
-    });
-
-    test("Clicking the modal footer does not trigger `onCloseModal`", async () => {
-        // Arrange
-        const onCloseModal = jest.fn();
-
-        render(
-            <ModalBackdrop onCloseModal={onCloseModal}>
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        // Act
-        await userEvent.click(
-            await screen.findByTestId("example-modal-footer"),
-        );
-
-        // Assert
-        expect(onCloseModal).not.toHaveBeenCalled();
-    });
-
-    test("If initialFocusId is set and element is found, we focus that element inside the modal", async () => {
-        // Arrange
-        const initialFocusId = "initial-focus";
-
-        render(
-            <ModalBackdrop
-                initialFocusId={initialFocusId}
-                onCloseModal={() => {}}
-            >
-                <OnePaneDialog
-                    content={
-                        <div data-modal-content>
-                            <input type="text" />
-                            <button id="initial-focus">Initial focus</button>
-                        </div>
-                    }
-                    title="Title"
-                    footer={<div data-modal-footer />}
-                />
-            </ModalBackdrop>,
-        );
-
-        // Act
-        const initialFocusElement = await screen.findByRole("button", {
-            name: "Initial focus",
-        });
-
-        // Assert
-        await waitFor(() => expect(initialFocusElement).toHaveFocus());
-    });
-
-    test("If initialFocusId is set but element is NOT found, we focus on the first focusable element instead", async () => {
-        // Arrange
-        // This element does not exist in the DOM
-        const initialFocusId = "unknown-node";
-
-        const {container} = render(
-            <ModalBackdrop
-                initialFocusId={initialFocusId}
-                onCloseModal={() => {}}
-            >
-                {exampleModalWithButtons}
-            </ModalBackdrop>,
-        );
-
-        // Act
-        // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
-        const initialFocusElement = container.querySelector(
-            `#${initialFocusId}`,
-        );
-
-        const firstFocusableElement = await screen.findByRole("button", {
-            name: "first focusable button",
-        });
-
-        // Assert
-        // first we verify the element doesn't exist in the DOM
-        expect(initialFocusElement).not.toBeInTheDocument();
-        // verify the focus is set on the first focusable element instead
-        await waitFor(() => expect(firstFocusableElement).toHaveFocus());
-    });
-
-    test("If no initialFocusId is set, we focus the first button in the modal", async () => {
-        // Arrange
-        render(
-            <ModalBackdrop onCloseModal={() => {}}>
-                {exampleModalWithButtons}
-            </ModalBackdrop>,
-        );
-
-        // Act
-        const firstFocusableElement = await screen.findByRole("button", {
-            name: "first focusable button",
-        });
-
-        // Assert
-        await waitFor(() => expect(firstFocusableElement).toHaveFocus());
-    });
-
-    test("If there are no focusable elements, we focus the Dialog instead", async () => {
-        // Arrange
-        render(
-            <ModalBackdrop onCloseModal={() => {}}>
-                {exampleModal}
-            </ModalBackdrop>,
-        );
-
-        // Act
-        const firstFocusableElement = await screen.findByRole("dialog");
-
-        // Assert
-        await waitFor(() => expect(firstFocusableElement).toHaveFocus());
-    });
-});

package/src/components/__tests__/modal-dialog.test.tsx

@@ -1,87 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import ModalDialog from "../modal-dialog";
-
-describe("ModalDialog", () => {
-    it("should render its contents", () => {
-        // Arrange
-
-        // Act
-        render(
-            <ModalDialog aria-labelledby="123">
-                <h1 id="123">A modal</h1>
-                <p>The contents</p>
-            </ModalDialog>,
-        );
-
-        // Assert
-        expect(screen.getByRole("dialog")).toBeInTheDocument();
-    });
-
-    it("should announce the dialog if aria-labelledby is set", () => {
-        // Arrange
-
-        // Act
-        render(
-            <ModalDialog aria-labelledby="dialog-title">
-                <h1 id="dialog-title">A modal</h1>
-                <p>The contents</p>
-            </ModalDialog>,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("dialog", {name: "A modal"}),
-        ).toBeInTheDocument();
-    });
-
-    it("should announce the dialog's contents if aria-describedby is set", () => {
-        // Arrange
-
-        // Act
-        render(
-            <ModalDialog
-                aria-labelledby="dialog-title"
-                aria-describedby="dialog-body"
-            >
-                <h1 id="dialog-title">A modal</h1>
-                <p id="dialog-body">The contents</p>
-            </ModalDialog>,
-        );
-
-        // Assert
-        expect(
-            screen.getByRole("dialog", {description: "The contents"}),
-        ).toBeInTheDocument();
-    });
-
-    it("adds testId to the dialog element", () => {
-        // Arrange
-
-        // Act
-        render(
-            <ModalDialog aria-labelledby="dialog-title" testId="test-id">
-                <h1 id="dialog-title">A modal</h1>
-            </ModalDialog>,
-        );
-
-        // Assert
-        expect(screen.getByTestId("test-id")).toBeInTheDocument();
-    });
-
-    it("forwards the ref to the dialog element", () => {
-        // Arrange
-        const ref: React.RefObject<HTMLDivElement> = React.createRef();
-
-        // Act
-        render(
-            <ModalDialog ref={ref} aria-labelledby="dialog-title">
-                <h1 id="dialog-title">A modal</h1>
-            </ModalDialog>,
-        );
-
-        // Assert
-        expect(ref.current).toBeInstanceOf(HTMLDivElement);
-    });
-});

package/src/components/__tests__/modal-header.test.tsx

@@ -1,97 +0,0 @@
-import * as React from "react";
-import {render, screen} from "@testing-library/react";
-
-import {
-    Breadcrumbs,
-    BreadcrumbsItem,
-} from "@khanacademy/wonder-blocks-breadcrumbs";
-
-import ModalHeader from "../modal-header";
-
-const exampleBreadcrumbs: React.ReactElement<
-    React.ComponentProps<typeof Breadcrumbs>
-> = (
-    <Breadcrumbs>
-        <BreadcrumbsItem>breadcrumb item</BreadcrumbsItem>
-    </Breadcrumbs>
-);
-
-describe("ModalHeader", () => {
-    test("renders the title by default", () => {
-        // Arrange, Act
-        render(<ModalHeader title="Title" titleId="modal-title" />);
-
-        // Assert
-        expect(screen.getByText("Title")).toBeInTheDocument();
-    });
-
-    test("using only `breadcrumbs` should render the header", () => {
-        // Arrange, Act
-        render(
-            <ModalHeader
-                title="Title"
-                breadcrumbs={exampleBreadcrumbs}
-                titleId="modal-title"
-            />,
-        );
-
-        // Assert
-        expect(screen.getByText("breadcrumb item")).toBeInTheDocument();
-    });
-
-    test("using only `subtitle` should render the header", () => {
-        // Arrange, Act
-        render(
-            <ModalHeader
-                title="Title"
-                subtitle="Subtitle"
-                titleId="modal-title"
-            />,
-        );
-
-        // Assert
-        expect(screen.getByText("Subtitle")).toBeInTheDocument();
-    });
-
-    test("testId should be added to the title", () => {
-        // Arrange
-        render(
-            <ModalHeader
-                title="Title"
-                subtitle="Subtitle"
-                testId="test-example-header"
-                titleId="modal-title"
-            />,
-        );
-
-        // Act
-        const title = screen.getByText("Title");
-
-        // Assert
-        expect(title).toHaveAttribute(
-            "data-testid",
-            "test-example-header-title",
-        );
-    });
-
-    test("testId should be added to the subtitle", () => {
-        // Arrange
-        render(
-            <ModalHeader
-                title="Title"
-                subtitle="Subtitle"
-                testId="test-example-header"
-                titleId="modal-title"
-            />,
-        );
-
-        // Act
-        const subtitle = screen.getByText("Subtitle");
-
-        // Assert
-        expect(subtitle).toHaveAttribute(
-            "data-testid",
-            "test-example-header-subtitle",
-        );
-    });
-});