@khanacademy/wonder-blocks-banner 0.1.1 → 1.0.0

package/src/components/__tests__/banner.test.js

@@ -0,0 +1,343 @@
+// @flow
+import * as React from "react";
+import {render, screen} from "@testing-library/react";
+
+import Banner from "../banner.js";
+
+describe("Banner", () => {
+    test("having no `onDismiss` prop causes the 'X' button NOT to appear", () => {
+        // Arrange
+
+        // Act
+        render(<Banner text="" layout="floating" />);
+
+        // Assert
+        const button = screen.queryByRole("button");
+        expect(button).not.toBeInTheDocument();
+    });
+
+    test("passing in `onDismiss` prop causes 'X' button to appear", () => {
+        // Arrange
+
+        // Act
+        render(<Banner text="" onDismiss={() => {}} layout="floating" />);
+
+        // Assert
+        const button = screen.queryByRole("button");
+        expect(button).toBeInTheDocument();
+    });
+
+    test("clicking the dismiss button triggers `onDismiss`", () => {
+        // Arrange
+        const onDismissSpy = jest.fn();
+        render(<Banner text="" onDismiss={onDismissSpy} layout="floating" />);
+
+        // Act
+        const button = screen.getByRole("button");
+        button.click();
+
+        // Assert
+        expect(onDismissSpy).toHaveBeenCalled();
+    });
+
+    test("passing an href into an `actions` element causes a Link to appear", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "some link", href: "/", onClick: () => {}}]}
+            />,
+        );
+
+        // Assert
+        const link = screen.getByRole("link");
+        expect(link).toBeInTheDocument();
+    });
+
+    test("passing an onClick without href into an `actions` element causes a Button to appear", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "some button", onClick: () => {}}]}
+            />,
+        );
+
+        // Assert
+        const link = screen.getByRole("button");
+        expect(link).toBeInTheDocument();
+    });
+
+    test("passing multiple actions causes multiple actions to appear", async () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[
+                    {title: "button 1", onClick: () => {}},
+                    {title: "button 2", onClick: () => {}},
+                    {title: "button 3", onClick: () => {}},
+                ]}
+            />,
+        );
+
+        // Assert
+        const buttons = await screen.findAllByRole("button");
+        expect(buttons).toHaveLength(3);
+    });
+
+    test("clicking a button triggers the onClick from the action prop", () => {
+        // Arrange
+        const actionSpy = jest.fn();
+
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "a button", onClick: actionSpy}]}
+            />,
+        );
+
+        // Act
+        const button = screen.getByRole("button");
+        button.click();
+
+        // Assert
+        expect(actionSpy).toHaveBeenCalled();
+    });
+
+    test("clicking a link triggers the onClick from the action prop", () => {
+        // Arrange
+        const actionSpy = jest.fn();
+
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "a link", onClick: actionSpy, href: "/"}]}
+            />,
+        );
+
+        // Act
+        const link = screen.getByRole("link");
+        link.click();
+
+        // Assert
+        expect(actionSpy).toHaveBeenCalled();
+    });
+
+    test("action href becomes link href", () => {
+        // Arrange
+
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "a button", onClick: () => {}, href: "/foo"}]}
+            />,
+        );
+
+        // Act
+        const link = screen.getByRole("link");
+
+        // Assert
+        expect(link).toHaveAttribute("href", "/foo");
+    });
+
+    // Test kind
+
+    test("default kind displays info icon", () => {
+        // Arrange
+
+        // Act
+        render(<Banner text="" layout="floating" />);
+
+        // Assert
+        const icon = screen.getByTestId("banner-kind-icon");
+        expect(icon).toHaveAttribute("aria-label", "info");
+    });
+
+    it.each(["info", "success", "warning", "critical"])(
+        "%s kind displays %s icon",
+        (kind) => {
+            // Arrange
+
+            // Act
+            render(<Banner text="" kind={kind} layout="floating" />);
+
+            // Assert
+            const icon = screen.getByTestId("banner-kind-icon");
+            expect(icon).toHaveAttribute("aria-label", kind);
+        },
+    );
+
+    // Test accessibility
+
+    test("dismiss button has aria label by default", () => {
+        // Arrange
+
+        // Act
+        render(<Banner text="" layout="floating" onDismiss={() => {}} />);
+
+        // Assert
+        const dismissButton = screen.getByRole("button");
+        expect(dismissButton).toHaveAttribute("aria-label", "Dismiss banner.");
+    });
+
+    test("dismiss button has the aria label that was passed in", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                onDismiss={() => {}}
+                dismissAriaLabel="Test dismiss aria label"
+            />,
+        );
+
+        // Assert
+        const dismissButton = screen.getByRole("button");
+        expect(dismissButton).toHaveAttribute(
+            "aria-label",
+            "Test dismiss aria label",
+        );
+    });
+
+    test("buttons have their title as the aria label by default", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "Test button title", onClick: () => {}}]}
+            />,
+        );
+
+        // Assert
+        const actionButton = screen.getByRole("button");
+        expect(actionButton).toHaveAttribute("aria-label", "Test button title");
+    });
+
+    test("links have their title as the aria label by default", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[{title: "Test link title", href: "/"}]}
+            />,
+        );
+
+        // Assert
+        const actionLink = screen.getByRole("link");
+        expect(actionLink).toHaveAttribute("aria-label", "Test link title");
+    });
+
+    test("buttons use the passed in aria label", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[
+                    {
+                        title: "Test button title",
+                        onClick: () => {},
+                        ariaLabel: "Button aria label passed in",
+                    },
+                ]}
+            />,
+        );
+
+        // Assert
+        const actionButton = screen.getByRole("button");
+        expect(actionButton).toHaveAttribute(
+            "aria-label",
+            "Button aria label passed in",
+        );
+    });
+
+    test("links use the passed in aria label", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                layout="floating"
+                actions={[
+                    {
+                        title: "Test link title",
+                        href: "/",
+                        ariaLabel: "Link aria label passed in",
+                    },
+                ]}
+            />,
+        );
+
+        // Assert
+        const actionLink = screen.getByRole("link");
+        expect(actionLink).toHaveAttribute(
+            "aria-label",
+            "Link aria label passed in",
+        );
+    });
+
+    it.each([
+        ["info", "status"],
+        ["success", "status"],
+        ["warning", "alert"],
+        ["critical", "alert"],
+    ])("%s banners have role: %s", (kind, role) => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                kind={kind}
+                layout="floating"
+                testId="wonder-blocks-banner-test-id"
+            />,
+        );
+
+        // Assert
+        const banner = screen.getByTestId("wonder-blocks-banner-test-id");
+        expect(banner).toHaveAttribute("role", role);
+    });
+
+    test("warning banners have aria-live polite", () => {
+        // Arrange
+
+        // Act
+        render(
+            <Banner
+                text=""
+                kind={"warning"}
+                layout="floating"
+                testId="wonder-blocks-banner-test-id"
+            />,
+        );
+
+        // Assert
+        const banner = screen.getByTestId("wonder-blocks-banner-test-id");
+        expect(banner).toHaveAttribute("aria-live", "polite");
+    });
+});

package/src/components/banner-icons.js

@@ -0,0 +1,20 @@
+// @flow
+// TODO(WB-1409): Use Phosphor icons instead of custom svgs. Also, use
+// Wonder Blocks Icon instead of img in the render function.
+import {type IconAsset} from "@khanacademy/wonder-blocks-icon";
+
+export const info: IconAsset = {
+    medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM10.25 11.25C10.25 10.6977 10.6977 10.25 11.25 10.25H12C12.5523 10.25 13 10.6977 13 11.25V15.5315C13.4313 15.6425 13.75 16.034 13.75 16.5C13.75 17.0523 13.3023 17.5 12.75 17.5H12C11.4477 17.5 11 17.0523 11 16.5V12.2185C10.5687 12.1075 10.25 11.716 10.25 11.25ZM12.9375 7.875C12.9375 8.49632 12.4338 9 11.8125 9C11.1912 9 10.6875 8.49632 10.6875 7.875C10.6875 7.25368 11.1912 6.75 11.8125 6.75C12.4338 6.75 12.9375 7.25368 12.9375 7.875Z",
+};
+
+export const success: IconAsset = {
+    medium: "M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM9.75 10.125C9.75 10.7463 9.24632 11.25 8.625 11.25C8.00368 11.25 7.5 10.7463 7.5 10.125C7.5 9.50368 8.00368 9 8.625 9C9.24632 9 9.75 9.50368 9.75 10.125ZM15.375 11.25C15.9963 11.25 16.5 10.7463 16.5 10.125C16.5 9.50368 15.9963 9 15.375 9C14.7537 9 14.25 9.50368 14.25 10.125C14.25 10.7463 14.7537 11.25 15.375 11.25ZM8.96488 13.7479C8.68763 13.2703 8.07567 13.1078 7.59801 13.3851C7.12036 13.6623 6.9579 14.2743 7.23515 14.7519C7.71955 15.5865 8.41464 16.2791 9.25086 16.7606C10.0871 17.2421 11.0351 17.4956 12 17.4956C12.965 17.4956 13.913 17.2421 14.7492 16.7606C15.5854 16.2791 16.2805 15.5865 16.7649 14.7519C17.0421 14.2743 16.8797 13.6623 16.402 13.3851C15.9244 13.1078 15.3124 13.2703 15.0352 13.7479C14.7266 14.2795 14.2838 14.7207 13.7512 15.0274C13.2185 15.3341 12.6147 15.4956 12 15.4956C11.3854 15.4956 10.7815 15.3341 10.2489 15.0274C9.7162 14.7207 9.27344 14.2795 8.96488 13.7479Z",
+};
+
+export const warning: IconAsset = {
+    medium: "M10.7505 2.33557C11.1301 2.11544 11.5612 1.99951 12 1.99951C12.4388 1.99951 12.8698 2.11544 13.2494 2.33557C13.6282 2.55524 13.9424 2.87089 14.1603 3.25068L14.1616 3.25305L22.4097 17.4997C22.6288 17.8791 22.7443 18.3094 22.7447 18.7475C22.7451 19.1856 22.6303 19.6161 22.412 19.9959C22.1936 20.3757 21.8792 20.6915 21.5004 20.9115C21.1216 21.1316 20.6916 21.2482 20.2535 21.2497L20.25 21.2497H3.74997L3.74645 21.2497C3.30835 21.2482 2.87835 21.1316 2.49953 20.9115C2.12071 20.6915 1.80636 20.3757 1.58798 19.9959C1.36961 19.6161 1.25486 19.1856 1.25525 18.7475C1.25564 18.3094 1.37114 17.8791 1.5902 17.4997L9.83829 3.25305L9.83965 3.25068C10.0576 2.87089 10.3717 2.55524 10.7505 2.33557ZM10.7062 3.74975L11.5716 4.25079L3.32224 18.4998C3.27857 18.5755 3.25533 18.6618 3.25525 18.7493C3.25517 18.8369 3.27812 18.923 3.3218 18.999C3.36547 19.075 3.42834 19.1381 3.50411 19.1821C3.57952 19.2259 3.66508 19.2492 3.75228 19.2497H20.2477C20.3349 19.2492 20.4204 19.2259 20.4958 19.1821C20.5716 19.1381 20.6345 19.075 20.6781 18.999C20.7218 18.923 20.7448 18.8369 20.7447 18.7493C20.7446 18.6619 20.7216 18.576 20.678 18.5003L12.4258 4.24645C12.3828 4.17143 12.3209 4.10907 12.2461 4.06571C12.1713 4.02235 12.0864 3.99951 12 3.99951C11.9135 3.99951 11.8286 4.02235 11.7538 4.06571C11.6791 4.10907 11.6171 4.17142 11.5741 4.24645L10.7062 3.74975ZM12 8.75C12.5523 8.75 13 9.19772 13 9.75V13.5C13 14.0523 12.5523 14.5 12 14.5C11.4477 14.5 11 14.0523 11 13.5V9.75C11 9.19772 11.4477 8.75 12 8.75ZM13.125 16.875C13.125 17.4963 12.6213 18 12 18C11.3787 18 10.875 17.4963 10.875 16.875C10.875 16.2537 11.3787 15.75 12 15.75C12.6213 15.75 13.125 16.2537 13.125 16.875Z",
+};
+
+export const critical: IconAsset = {
+    medium: "M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM12 6.5C12.5523 6.5 13 6.94772 13 7.5V12.75C13 13.3023 12.5523 13.75 12 13.75C11.4477 13.75 11 13.3023 11 12.75V7.5C11 6.94772 11.4477 6.5 12 6.5ZM13.125 16.125C13.125 16.7463 12.6213 17.25 12 17.25C11.3787 17.25 10.875 16.7463 10.875 16.125C10.875 15.5037 11.3787 15 12 15C12.6213 15 13.125 15.5037 13.125 16.125Z",
+};

package/src/components/banner.js

@@ -0,0 +1,341 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import Button from "@khanacademy/wonder-blocks-button";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import Link from "@khanacademy/wonder-blocks-link";
+import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+import * as bannerIcons from "./banner-icons.js";
+
+type ActionTriggerBase = {|
+    title: string,
+    ariaLabel?: string,
+|};
+
+type ActionTriggerWithButton = {|
+    ...ActionTriggerBase,
+    onClick: () => void,
+|};
+
+type ActionTriggerWithLink = {|
+    ...ActionTriggerBase,
+    href: string,
+    onClick?: () => void,
+|};
+
+type ActionTrigger = ActionTriggerWithButton | ActionTriggerWithLink;
+
+type BannerKind =
+    /**
+     * Color blue, circle 'i' icon. This is the default.
+     */
+    | "info"
+    /**
+     * Color green, smiley icon
+     */
+    | "success"
+    /**
+     * Color gold, triangle exclamation-point icon
+     */
+    | "warning"
+    /**
+     * Color red, circle exclamation-point icon
+     */
+    | "critical";
+
+type BannerLayout =
+    /**
+     * Renders a rounded rectangle, usually for when banner is used as an inset
+     * element on a screen (e.g., the SOT card) that appears to be floating
+     */
+    | "floating"
+    /**
+     * Renders a full-width banner, with no rounded corners.
+     * This is the default.
+     */
+    | "full-width";
+
+type BannerValues = {|
+    color: string,
+    role: "status" | "alert",
+    ariaLive?: "assertive" | "polite",
+|};
+
+type Props = {|
+    /**
+     * Determines the color and icon of the banner.
+     */
+    kind: BannerKind,
+
+    /**
+     * Determines the edge style of the Banner.
+     */
+    layout: BannerLayout,
+
+    /**
+     * Text on the banner (LabelSmall) or a node if you want something different.
+     */
+    text: string | React.Node,
+
+    /**
+     * Links or tertiary Buttons that appear to the right of the text.
+     *
+     * The ActionTrigger must have either an onClick or an href field, or both.
+     */
+    actions?: Array<ActionTrigger>,
+
+    /**
+     * If present, dismiss button is on right side. If not, no button appears.
+     */
+    onDismiss?: ?() => void,
+
+    /**
+     * The accessible label for the dismiss button.
+     * Please pass in a translated string.
+     */
+    dismissAriaLabel: string,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+|};
+
+const valuesForKind = (kind: BannerKind): BannerValues => {
+    switch (kind) {
+        case "success":
+            return {
+                color: Color.green,
+                role: "status",
+            };
+        case "warning":
+            return {
+                color: Color.gold,
+                role: "alert",
+                ariaLive: "polite",
+            };
+        case "critical":
+            return {
+                color: Color.red,
+                role: "alert",
+            };
+        default:
+            return {
+                color: Color.blue,
+                role: "status",
+            };
+    }
+};
+
+/**
+ * Banner. A banner displays a prominent message and related optional actions.
+ * It can be used as a way of informing the user of important changes.
+ * Typically, it is displayed toward the top of the screen.
+ *
+ * There are two possible layouts for banners - floating and full-width.
+ * The `floating` layout is intended to be used when there is whitespace
+ * around the banner. The `full-width` layout is intended to be used when
+ * the banner needs to be flush with surrounding elements.
+ *
+ * ### Usage
+ * ```jsx
+ * import Banner from "@khanacademy/wonder-blocks-banner";
+ *
+ * <Banner
+ *     text="Here is some example text."
+ *     kind="success"
+ *     layout="floating"
+ *     actions={[
+ *         {title: "Button 1", onClick: () => {}},
+ *         {title: "Button 2", onClick: () => {}},
+ *     ]}
+ *     onDismiss={() => {console.log("Has been dismissed.")}}
+ * />
+ * ```
+ */
+const Banner = (props: Props): React.Node => {
+    const {actions, dismissAriaLabel, onDismiss, kind, layout, text, testId} =
+        props;
+    const layoutStyle = {
+        borderRadius: layout && layout === "full-width" ? 0 : 4,
+    };
+
+    const renderActions = () => {
+        return actions?.filter(Boolean).map((action) => {
+            const handleClick = action.onClick;
+            if (action.href) {
+                return (
+                    <View style={styles.action} key={action.title}>
+                        <Link
+                            kind="primary"
+                            href={action.href}
+                            onClick={handleClick}
+                            aria-label={action.ariaLabel ?? action.title}
+                            style={styles.link}
+                        >
+                            {action.title}
+                        </Link>
+                    </View>
+                );
+            } else {
+                return (
+                    <View style={styles.action} key={action.title}>
+                        <Button
+                            kind="tertiary"
+                            size="small"
+                            aria-label={action.ariaLabel ?? action.title}
+                            onClick={handleClick}
+                        >
+                            {action.title}
+                        </Button>
+                    </View>
+                );
+            }
+        });
+    };
+
+    return (
+        <View
+            style={[
+                styles.containerOuter,
+                layoutStyle,
+                {borderInlineStartColor: valuesForKind(kind).color},
+            ]}
+            role={valuesForKind(kind).role}
+            aria-live={valuesForKind(kind).ariaLive}
+            testId={testId}
+        >
+            <View
+                style={[
+                    styles.backgroundColor,
+                    layoutStyle,
+                    {backgroundColor: valuesForKind(kind).color},
+                ]}
+            />
+            <View style={styles.containerInner}>
+                <Icon
+                    icon={bannerIcons[kind]}
+                    size="medium"
+                    style={styles.icon}
+                    aria-label={kind}
+                    testId="banner-kind-icon"
+                />
+                <View style={styles.labelAndButtonsContainer}>
+                    <View style={styles.labelContainer}>
+                        <LabelSmall>{text}</LabelSmall>
+                    </View>
+                    {actions && (
+                        <View style={styles.actionsContainer}>
+                            {renderActions()}
+                        </View>
+                    )}
+                </View>
+                {onDismiss ? (
+                    <View style={styles.dismissContainer}>
+                        <IconButton
+                            icon={icons.dismiss}
+                            kind={"tertiary"}
+                            onClick={onDismiss}
+                            style={styles.dismiss}
+                            aria-label={dismissAriaLabel}
+                        />
+                    </View>
+                ) : null}
+            </View>
+        </View>
+    );
+};
+
+type DefaultProps = {|
+    kind: Props["kind"],
+    dismissAriaLabel: Props["dismissAriaLabel"],
+|};
+
+const defaultProps: DefaultProps = {
+    kind: "info",
+    dismissAriaLabel: "Dismiss banner.",
+};
+Banner.defaultProps = defaultProps;
+
+const styles = StyleSheet.create({
+    backgroundColor: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        opacity: 0.08,
+    },
+    containerOuter: {
+        borderInlineStartWidth: Spacing.xxSmall_6,
+        width: "100%",
+        // Because of the background color's opacity value,
+        // the base color needs to be hard-coded as white for the
+        // intended pastel background color to show up correctly
+        // on dark backgrounds.
+        backgroundColor: Color.white,
+    },
+    containerInner: {
+        flexDirection: "row",
+        padding: Spacing.xSmall_8,
+    },
+    icon: {
+        marginTop: Spacing.xSmall_8,
+        marginBottom: Spacing.xSmall_8,
+        // The total distance from the icon to the edge is 16px. The
+        // vertical identifier is already 6px, and the padding on inner
+        // conatiner is 8px. So that leaves 2px.
+        marginInlineStart: Spacing.xxxxSmall_2,
+        marginInlineEnd: Spacing.xSmall_8,
+        alignSelf: "flex-start",
+        color: Color.offBlack64,
+    },
+    labelAndButtonsContainer: {
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        alignContent: "center",
+        flexWrap: "wrap",
+        justifyContent: "space-between",
+    },
+    labelContainer: {
+        flexShrink: 1,
+        margin: Spacing.xSmall_8,
+        textAlign: "start",
+    },
+    actionsContainer: {
+        flexDirection: "row",
+        justifyContent: "flex-start",
+        marginTop: Spacing.xSmall_8,
+        marginBottom: Spacing.xSmall_8,
+    },
+    action: {
+        marginLeft: Spacing.xSmall_8,
+        marginRight: Spacing.xSmall_8,
+        justifyContent: "center",
+        // Set the height to remove the padding from buttons
+        height: 18,
+    },
+    link: {
+        fontSize: 14,
+    },
+    dismiss: {
+        flexShrink: 1,
+    },
+    dismissContainer: {
+        height: 40,
+        width: 40,
+        justifyContent: "center",
+        alignItems: "center",
+        marginLeft: Spacing.xSmall_8,
+        marginRight: Spacing.xSmall_8,
+    },
+});
+
+export default Banner;