@khanacademy/wonder-blocks-layout 2.2.0 → 2.2.1

package/src/util/test-util.test.ts

@@ -1,274 +0,0 @@
-import {resizeWindow, checkQuery, matchMedia} from "./test-util";
-
-describe("Test utils", () => {
-    describe("resizeWindow", () => {
-        it("should set the width to 1200px for large", () => {
-            // Arrange
-            const expectedWidth = 1200;
-
-            // Act
-            resizeWindow("large");
-
-            // Assert
-            expect(window.innerWidth).toBe(expectedWidth);
-        });
-
-        it("should set the width to 800px for medium", () => {
-            // Arrange
-            const expectedWidth = 800;
-
-            // Act
-            resizeWindow("medium");
-
-            // Assert
-            expect(window.innerWidth).toBe(expectedWidth);
-        });
-
-        it("should set the width to 640px for small", () => {
-            // Arrange
-            const expectedWidth = 640;
-
-            // Act
-            resizeWindow("small");
-
-            // Assert
-            expect(window.innerWidth).toBe(expectedWidth);
-        });
-
-        it("should dispatch a 'resize' event", async () => {
-            // Arrange
-            let handler: any;
-            const promise = new Promise((resolve: any, reject: any) => {
-                handler = window.addEventListener("resize", resolve);
-            });
-
-            // Act
-            resizeWindow("small");
-            await promise;
-
-            // Assert
-            await expect(promise).resolves.toHaveProperty("type", "resize");
-            window.removeEventListener("resize", handler);
-        });
-    });
-
-    describe("checkQuery", () => {
-        describe("(max-width: 767px)", () => {
-            it("should match 700px", () => {
-                // Arrange
-                const width = 700;
-
-                // Act
-                const result = checkQuery("(max-width: 767px)", width);
-
-                // Assert
-                expect(result).toBe(true);
-            });
-
-            it("should not match 800px", () => {
-                // Arrange
-                const width = 800;
-
-                // Act
-                const result = checkQuery("(max-width: 767px)", width);
-
-                // Assert
-                expect(result).toBe(false);
-            });
-        });
-
-        describe("(min-width: 768px) and (max-width: 1023px)", () => {
-            it("should not match 700px", () => {
-                // Arrange
-                const width = 700;
-
-                // Act
-                const result = checkQuery(
-                    "(min-width: 768px) and (max-width: 1023px)",
-                    width,
-                );
-
-                // Assert
-                expect(result).toBe(false);
-            });
-
-            it("should match 800px", () => {
-                // Arrange
-                const width = 800;
-
-                // Act
-                const result = checkQuery(
-                    "(min-width: 768px) and (max-width: 1023px)",
-                    width,
-                );
-
-                // Assert
-                expect(result).toBe(true);
-            });
-
-            it("should not match 1024px", () => {
-                // Arrange
-                const width = 1024;
-
-                // Act
-                const result = checkQuery(
-                    "(min-width: 768px) and (max-width: 1023px)",
-                    width,
-                );
-
-                // Assert
-                expect(result).toBe(false);
-            });
-        });
-
-        describe("(min-width: 1024px)", () => {
-            it("should not match 800px", () => {
-                // Arrange
-                const width = 800;
-
-                // Act
-                const result = checkQuery("(min-width: 1024px)", width);
-
-                // Assert
-                expect(result).toBe(false);
-            });
-
-            it("should match 1024px", () => {
-                // Arrange
-                const width = 1024;
-
-                // Act
-                const result = checkQuery("(min-width: 1024px)", width);
-
-                // Assert
-                expect(result).toBe(true);
-            });
-        });
-    });
-
-    describe("matchMedia", () => {
-        describe("matches", () => {
-            it("should be true when the window matches the initial value", () => {
-                // Arrange
-                resizeWindow("small");
-
-                // Act
-                const watcher = matchMedia("(max-width: 767px)");
-
-                // Assert
-                expect(watcher.matches).toBe(true);
-            });
-
-            it("should be false when the window doesn't match the initial value", () => {
-                // Arrange
-                resizeWindow("large");
-
-                // Act
-                const watcher = matchMedia("(max-width: 767px)");
-
-                // Assert
-                expect(watcher.matches).toBe(false);
-            });
-
-            it("should be true when the window matches the current value", () => {
-                // Arrange
-                resizeWindow("large");
-
-                // Act
-                const watcher = matchMedia("(max-width: 767px)");
-                resizeWindow("small");
-
-                // Assert
-                expect(watcher.matches).toBe(true);
-            });
-
-            it("should be true when the window doesn't match the current value", () => {
-                // Arrange
-                resizeWindow("small");
-
-                // Act
-                const watcher = matchMedia("(max-width: 767px)");
-                resizeWindow("large");
-
-                // Assert
-                expect(watcher.matches).toBe(false);
-            });
-        });
-
-        describe("listeners", () => {
-            test("should be called when window resizes", () => {
-                // Arrange
-                const listener = jest.fn();
-                resizeWindow("small");
-                const watcher = matchMedia("(max-width: 767px)");
-                watcher.addListener(listener);
-
-                // Act
-                resizeWindow("large");
-
-                // Assert
-                expect(listener).toHaveBeenCalled();
-            });
-
-            test("should be called all listeners", () => {
-                // Arrange
-                const listener1 = jest.fn();
-                const listener2 = jest.fn();
-                resizeWindow("small");
-                const watcher = matchMedia("(max-width: 767px)");
-                watcher.addListener(listener1);
-                watcher.addListener(listener2);
-
-                // Act
-                resizeWindow("large");
-
-                // Assert
-                expect(listener1).toHaveBeenCalled();
-                expect(listener2).toHaveBeenCalled();
-            });
-
-            test("should not call a listener that's been removed", () => {
-                // Arrange
-                const listener = jest.fn();
-                resizeWindow("small");
-                const watcher = matchMedia("(max-width: 767px)");
-                watcher.addListener(listener);
-
-                // Act
-                watcher.removeListener(listener);
-                resizeWindow("large");
-
-                // Assert
-                expect(listener).not.toHaveBeenCalled();
-            });
-
-            test("should be passed {matches: true} when the window size matches", () => {
-                // Arrange
-                const listener = jest.fn();
-                resizeWindow("large");
-                const watcher = matchMedia("(max-width: 767px)");
-                watcher.addListener(listener);
-
-                // Act
-                resizeWindow("small");
-
-                // Assert
-                expect(listener.mock.calls[0][0].matches).toBe(true);
-            });
-
-            test("should be passed {matches: false} when the window size doesn't match", () => {
-                // Arrange
-                const listener = jest.fn();
-                resizeWindow("small");
-                const watcher = matchMedia("(max-width: 767px)");
-                watcher.addListener(listener);
-
-                // Act
-                resizeWindow("large");
-
-                // Assert
-                expect(listener.mock.calls[0][0].matches).toBe(false);
-            });
-        });
-    });
-});

package/src/util/test-util.ts

@@ -1,71 +0,0 @@
-import type {MediaSize} from "./types";
-
-/**
- * Helper function for setting the window size, for use in tests.
- * @param {MediaSize} size
- */
-export function resizeWindow(size: MediaSize) {
-    if (size === "large") {
-        window.innerWidth = 1200;
-    } else if (size === "medium") {
-        window.innerWidth = 800;
-    } else if (size === "small") {
-        window.innerWidth = 640;
-    }
-
-    window.dispatchEvent(new Event("resize"));
-}
-
-const queries = {
-    small: "(max-width: 767px)",
-    medium: "(min-width: 768px) and (max-width: 1023px)",
-    large: "(min-width: 1024px)",
-} as const;
-
-export function checkQuery(
-    queryString: typeof queries[keyof typeof queries],
-    width: number,
-): boolean {
-    return (
-        (width < 768 && queryString === queries.small) ||
-        (width >= 768 && width < 1024 && queryString === queries.medium) ||
-        (width >= 1024 && queryString === queries.large)
-    );
-}
-
-type Listener = (arg1: {matches: boolean}) => void;
-type MatchMedia = {
-    matches: boolean;
-    addListener: (listener: Listener) => void;
-    removeListener: (listener: Listener) => void;
-};
-
-/**
- *
- * @param {MediaQuery} query
- */
-export function matchMedia(
-    query: typeof queries[keyof typeof queries],
-): MatchMedia {
-    const listeners = new Set<Listener>();
-
-    window.addEventListener("resize", () => {
-        for (const listener of listeners) {
-            listener({
-                matches: checkQuery(query, window.innerWidth),
-            });
-        }
-    });
-
-    return {
-        get matches() {
-            return checkQuery(query, window.innerWidth);
-        },
-        addListener: (listener: Listener) => {
-            listeners.add(listener);
-        },
-        removeListener: (listener: Listener) => {
-            listeners.delete(listener);
-        },
-    };
-}

package/src/util/types.ts

@@ -1,22 +0,0 @@
-export type MediaSize = "small" | "medium" | "large";
-
-export type MediaQuery = "all" | "mdOrSmaller" | "mdOrLarger" | MediaSize;
-
-type Spec = {
-    /** The query to use to match the viewport against. */
-    query: string;
-    /** The total number of columns to use for the layout. */
-    totalColumns: number;
-    /** The width of the gutter between columns, in pixels. */
-    gutterWidth: number;
-    /** The width of the margin, wrapping the row, in pixels. */
-    marginWidth: number;
-    /** A possible maximum width to have on the layout. */
-    maxWidth?: number;
-};
-
-export type MediaSpec = {
-    small?: Spec;
-    medium?: Spec;
-    large?: Spec;
-};

package/src/util/util.test.ts

@@ -1,234 +0,0 @@
-import {queryMatchesSize} from "./util";
-
-describe("queryMatchesSize", () => {
-    describe("all", () => {
-        // Arrange
-        const query = "all";
-
-        it("should match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-    });
-
-    describe("mdOrLarger", () => {
-        // Arrange
-        const query = "mdOrLarger";
-
-        it("should not match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-
-        it("should match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-    });
-
-    describe("mdOrSmaller", () => {
-        // Arrange
-        const query = "mdOrSmaller";
-
-        it("should match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should not match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-    });
-
-    describe("small", () => {
-        // Arrange
-        const query = "small";
-
-        it("should match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should not match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-
-        it("should not match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-    });
-
-    describe("medium", () => {
-        // Arrange
-        const query = "medium";
-
-        it("should not match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-
-        it("should match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should not match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-    });
-
-    describe("large", () => {
-        // Arrange
-        const query = "small";
-
-        it("should not match small", () => {
-            // Arrange
-            const size = "small";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(true);
-        });
-
-        it("should not match medium", () => {
-            // Arrange
-            const size = "medium";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-
-        it("should not match large", () => {
-            // Arrange
-            const size = "large";
-
-            // Act
-            const actualResult = queryMatchesSize(query, size);
-
-            // Assert
-            expect(actualResult).toBe(false);
-        });
-    });
-    // it("should throw on invalid query", () => {
-    //     expect(() => queryMatchesSize("foobar", "small")).toThrow();
-    // });
-});

package/src/util/util.ts

@@ -1,39 +0,0 @@
-import type {MediaQuery, MediaSize} from "./types";
-
-/**
- * Return where a media size matches a media query.
- *
- * examples:
- * - `queryMatchesSize("all", "small")` returns `true`
- * - `queryMatchesSize("mdOrLarger", "small")` returns `false`
- *
- * @param {MediaQuery} mediaQuery
- * @param {MediaSize} mediaSize
- */
-export const queryMatchesSize = (
-    mediaQuery: MediaQuery,
-    mediaSize: MediaSize,
-): boolean => {
-    switch (mediaQuery) {
-        case "all":
-            return true;
-
-        case "small":
-            return mediaSize === "small";
-
-        case "mdOrSmaller":
-            return mediaSize === "medium" || mediaSize === "small";
-
-        case "medium":
-            return mediaSize === "medium";
-
-        case "mdOrLarger":
-            return mediaSize === "medium" || mediaSize === "large";
-
-        case "large":
-            return mediaSize === "large";
-
-        default:
-            throw new Error(`Unsupported mediaSize: ${mediaSize}`);
-    }
-};

package/tsconfig-build.json

@@ -1,12 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-    ]
-}