@khanacademy/perseus 0.4.0 → 0.4.2

package/src/components/new-tooltip/__stories__/flexible-position.stories.jsx

@@ -1,437 +0,0 @@
-// @flow
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import FlexiblePosition from "../flexible-position.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Components/Flexible Position",
-}: Story);
-
-const styles = StyleSheet.create({
-    wrapper: {
-        background: "#fcfcfc",
-        borderColor: "gray",
-        borderStyle: "solid",
-        borderWidth: "2px 0",
-        boxSizing: "content-box",
-        margin: "0 auto",
-        width: 800,
-    },
-
-    wrapperVertical: {
-        borderWidth: "0 2px",
-        height: 800,
-        width: 200,
-    },
-
-    wrapperSmall: {
-        width: 100,
-    },
-
-    wrapperSmallVertical: {
-        height: 100,
-    },
-
-    // `content` and `contentInner` together have a natural width of 200px.
-    // However, if the available space is smaller, `content` will overflow with
-    // scrollbars in order to fit the content in the available space. This
-    // effect is visible in the "very small container" fixture.
-    content: {
-        background: "#fcc",
-        borderColor: "red",
-        borderStyle: "solid",
-        borderWidth: "0 2px",
-        boxSizing: "border-box",
-        textAlign: "center",
-        overflow: "auto",
-    },
-
-    contentVertical: {
-        borderWidth: "2px 0",
-    },
-
-    contentInner: {
-        width: 196,
-    },
-
-    contentInnerVertical: {
-        height: 196,
-    },
-});
-
-const Wrapper = (props: React.ElementConfig<typeof FlexiblePosition>) => (
-    <div className={css(styles.wrapper)}>
-        <FlexiblePosition {...props} />
-    </div>
-);
-
-const SmallWrapper = (props: React.ElementConfig<typeof FlexiblePosition>) => (
-    <div className={css(styles.wrapper, styles.wrapperSmall)}>
-        <FlexiblePosition {...props} />
-    </div>
-);
-
-const VerticalWrapper = (
-    props: React.ElementConfig<typeof FlexiblePosition>,
-) => (
-    <div className={css(styles.wrapper, styles.wrapperVertical)}>
-        <FlexiblePosition {...props} />
-    </div>
-);
-
-const SmallVerticalWrapper = (
-    props: React.ElementConfig<typeof FlexiblePosition>,
-) => (
-    <div
-        className={css(
-            styles.wrapper,
-            styles.wrapperVertical,
-            styles.wrapperSmallVertical,
-        )}
-    >
-        <FlexiblePosition {...props} />
-    </div>
-);
-
-export const CenteredAtHalfHorizontal = (args: StoryArgs): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 400,
-        pxFromEnd: 400,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtQuarterFromLeftHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 200,
-        pxFromEnd: 600,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtQuarterFromRightHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 600,
-        pxFromEnd: 200,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtEigthFromLeftExactlyAtEdgeHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 100,
-        pxFromEnd: 700,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtEigthFromRightExactlyAtEdgeHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 700,
-        pxFromEnd: 100,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtSixteengthFromLeftWouldOverflowHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 50,
-        pxFromEnd: 750,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAtSixteengthFromRightWouldOverflowHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 750,
-        pxFromEnd: 50,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAt0FromLeftWouldOverflowHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 0,
-        pxFromEnd: 800,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredAt0FromRightWouldOverflowHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 800,
-        pxFromEnd: 0,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <Wrapper {...params} />;
-};
-
-export const CenteredInVerySmallContainerWouldOverflowHorizontal = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "horizontal",
-        pxFromStart: 50,
-        pxFromEnd: 50,
-        children: (
-            <div className={css(styles.content)}>
-                <div className={css(styles.contentInner)}>Hello, world!</div>
-            </div>
-        ),
-    };
-    return <SmallWrapper {...params} />;
-};
-
-export const CenteredAtHalfVertical = (args: StoryArgs): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 400,
-        pxFromEnd: 400,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtQuarterFromTopVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 200,
-        pxFromEnd: 600,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtQuarterFromBottomVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 600,
-        pxFromEnd: 200,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtEigthFromTopExactlyAtEdgeVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 100,
-        pxFromEnd: 700,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtEigthFromBottomExactlyAtEdgeVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 700,
-        pxFromEnd: 100,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtSixteengthFromTopWouldOverflowVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 50,
-        pxFromEnd: 750,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAtSixteengthFromBottomWouldOverflowVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 750,
-        pxFromEnd: 50,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAt0FromTopWouldOverflowVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 0,
-        pxFromEnd: 800,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredAt0FromBottomWouldOverflowVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 800,
-        pxFromEnd: 0,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <VerticalWrapper {...params} />;
-};
-
-export const CenteredInVerySmallContainerWouldOverflowVertical = (
-    args: StoryArgs,
-): React.Node => {
-    const params = {
-        direction: "vertical",
-        pxFromStart: 50,
-        pxFromEnd: 50,
-        children: (
-            <div className={css(styles.content, styles.contentVertical)}>
-                <div className={css(styles.contentInnerVertical)}>
-                    Hello, world!
-                </div>
-            </div>
-        ),
-    };
-    return <SmallVerticalWrapper {...params} />;
-};

package/src/components/new-tooltip/__stories__/tooltip-arrow.stories.jsx

@@ -1,70 +0,0 @@
-// @flow
-import * as React from "react";
-
-import TooltipArrow from "../tooltip-arrow.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Components/Tooltip Arrow",
-}: Story);
-
-export const DownPointingArrow = (args: StoryArgs): React.Node => {
-    const props = {
-        tooltipProps: {
-            inverted: false,
-            color: "red", // this should have no effect because we're not inverted
-            side: "top",
-        },
-    };
-
-    return <TooltipArrow {...props} />;
-};
-
-export const BlueDownPointingArrow = (args: StoryArgs): React.Node => {
-    const props = {
-        tooltipProps: {
-            inverted: true,
-            color: "blue",
-            side: "top",
-        },
-    };
-    return <TooltipArrow {...props} />;
-};
-
-export const UpPointingArrow = (args: StoryArgs): React.Node => {
-    const props = {
-        tooltipProps: {
-            inverted: false,
-            color: "red", // this should have no effect because we're not inverted
-            side: "bottom",
-        },
-    };
-    return <TooltipArrow {...props} />;
-};
-
-export const RightPointingArrow = (args: StoryArgs): React.Node => {
-    const props = {
-        tooltipProps: {
-            inverted: false,
-            color: "red", // this should have no effect because we're not inverted
-            side: "left",
-        },
-    };
-    return <TooltipArrow {...props} />;
-};
-
-export const LeftPointingArrow = (args: StoryArgs): React.Node => {
-    const props = {
-        tooltipProps: {
-            inverted: false,
-            color: "red", // this should have no effect because we're not inverted
-            side: "right",
-        },
-    };
-    return <TooltipArrow {...props} />;
-};

package/src/components/new-tooltip/__stories__/tooltip-bubble.stories.jsx

@@ -1,98 +0,0 @@
-// @flow
-import Color from "@khanacademy/wonder-blocks-color";
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import TooltipBubble from "../tooltip-bubble.jsx";
-
-type StoryArgs = {||};
-
-type Story = {|
-    title: string,
-|};
-
-export default ({
-    title: "Perseus/Components/Tooltip Bubble",
-}: Story);
-
-const defaultProps = {
-    side: "top",
-    offset: 0,
-    offsetFrom: "bubble",
-    tooltipMargin: 0,
-    noPadding: false,
-    color: Color.offBlack16,
-    inverted: false,
-    dismissOnClickClose: false,
-    toggleOnHover: true,
-    showOnMount: false,
-};
-
-const logDismissAction = (...args) => action("dismiss")(...args);
-
-export const DefaultBubble = (args: StoryArgs): React.Node => {
-    const params = {
-        tooltipProps: {
-            ...defaultProps,
-            content: "Hello, world!",
-            a11y: {title: "Default bubble"},
-        },
-        dismiss: logDismissAction,
-    };
-    return <TooltipBubble {...params} />;
-};
-
-export const DefaultBubbleWithCloseButton = (args: StoryArgs): React.Node => {
-    const params = {
-        tooltipProps: {
-            ...defaultProps,
-            content: "Hello, world!",
-            dismissOnClickClose: true,
-            a11y: {title: "Default bubble with close button"},
-        },
-        dismiss: logDismissAction,
-    };
-    return <TooltipBubble {...params} />;
-};
-
-export const BlueTextOnWhiteBubble = (args: StoryArgs): React.Node => {
-    const params = {
-        tooltipProps: {
-            ...defaultProps,
-            content: "Hello, world!",
-            color: "blue",
-            dismissOnClickClose: true,
-            a11y: {title: "Blue text on white bubble"},
-        },
-        dismiss: logDismissAction,
-    };
-    return <TooltipBubble {...params} />;
-};
-
-export const WhiteTextOnBlueBubble = (args: StoryArgs): React.Node => {
-    const params = {
-        tooltipProps: {
-            ...defaultProps,
-            content: "Hello, world!",
-            color: "blue",
-            inverted: true,
-            dismissOnClickClose: true,
-            a11y: {title: "White text on blue bubble"},
-        },
-        dismiss: logDismissAction,
-    };
-    return <TooltipBubble {...params} />;
-};
-
-export const NoPaddingAroundContentInBubble = (args: StoryArgs): React.Node => {
-    const params = {
-        tooltipProps: {
-            ...defaultProps,
-            content: "Hello, world!",
-            noPadding: true,
-            a11y: {title: "No padding around content in bubble"},
-        },
-        dismiss: logDismissAction,
-    };
-    return <TooltipBubble {...params} />;
-};

package/src/components/new-tooltip/__tests__/util_test.js

@@ -1,47 +0,0 @@
-// @flow
-import Color from "@khanacademy/wonder-blocks-color";
-import * as React from "react";
-
-import {getTooltipColors} from "../util.js";
-
-const defaultProps = {
-    side: "top",
-    offset: 0,
-    offsetFrom: "bubble",
-    tooltipMargin: 0,
-    noPadding: false,
-    color: Color.offBlack16,
-    inverted: false,
-    dismissOnClickClose: false,
-    toggleOnHover: true,
-    showOnMount: false,
-};
-
-describe("getTooltipColors", () => {
-    it("returns <color>-on-white when not inverted", () => {
-        const {backgroundColor, textColor} = getTooltipColors({
-            ...defaultProps,
-            children: <div>(unused)</div>,
-            content: "Hello, world!",
-            color: "#123",
-            a11y: {title: "returns <color>-on-white when not inverted"}, // Does nothing
-        });
-
-        expect(backgroundColor).toEqual(Color.white);
-        expect(textColor).toEqual("#123");
-    });
-
-    it("returns white-on-<color> when inverted", () => {
-        const {backgroundColor, textColor} = getTooltipColors({
-            ...defaultProps,
-            children: <div>(unused)</div>,
-            content: "Hello, world!",
-            color: "#123",
-            inverted: true,
-            a11y: {title: "returns white-on-<color> when inverted"}, // Does nothing
-        });
-
-        expect(backgroundColor).toEqual("#123");
-        expect(textColor).toEqual(Color.white);
-    });
-});