npm - @khanacademy/wonder-blocks-tooltip - Versions diffs - 1.4.6 → 1.4.8 - Mend

@khanacademy/wonder-blocks-tooltip 1.4.6 → 1.4.8

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 (53) hide show

package/CHANGELOG.md +39 -0
package/dist/components/tooltip-anchor.d.ts +85 -0
package/dist/components/tooltip-anchor.js.flow +98 -0
package/dist/components/tooltip-bubble.d.ts +36 -0
package/dist/components/tooltip-bubble.js.flow +72 -0
package/dist/components/tooltip-content.d.ts +33 -0
package/dist/components/tooltip-content.js.flow +44 -0
package/dist/components/tooltip-popper.d.ts +32 -0
package/dist/components/tooltip-popper.js.flow +39 -0
package/dist/components/tooltip-tail.d.ts +57 -0
package/dist/components/tooltip-tail.js.flow +77 -0
package/dist/components/tooltip.d.ts +150 -0
package/dist/components/tooltip.js.flow +159 -0
package/dist/es/index.js +220 -273
package/dist/index.d.ts +8 -0
package/dist/index.js +234 -288
package/dist/index.js.flow +20 -2
package/dist/util/active-tracker.d.ts +61 -0
package/dist/util/active-tracker.js.flow +71 -0
package/dist/util/constants.d.ts +6 -0
package/dist/util/constants.js.flow +13 -0
package/dist/util/ref-tracker.d.ts +16 -0
package/dist/util/ref-tracker.js.flow +16 -0
package/dist/util/types.d.ts +11 -0
package/dist/util/types.js.flow +36 -0
package/package.json +9 -9
package/src/components/__tests__/{tooltip-anchor.test.js → tooltip-anchor.test.tsx} +30 -40
package/src/components/__tests__/{tooltip-bubble.test.js → tooltip-bubble.test.tsx} +4 -4
package/src/components/__tests__/{tooltip-popper.test.js → tooltip-popper.test.tsx} +15 -12
package/src/components/__tests__/{tooltip-tail.test.js → tooltip-tail.test.tsx} +5 -4
package/src/components/__tests__/{tooltip.integration.test.js → tooltip.integration.test.tsx} +0 -1
package/src/components/__tests__/{tooltip.test.js → tooltip.test.tsx} +10 -8
package/src/components/{tooltip-anchor.js → tooltip-anchor.tsx} +26 -27
package/src/components/{tooltip-bubble.js → tooltip-bubble.tsx} +18 -30
package/src/components/{tooltip-content.js → tooltip-content.tsx} +8 -10
package/src/components/{tooltip-popper.js → tooltip-popper.tsx} +14 -14
package/src/components/{tooltip-tail.js → tooltip-tail.tsx} +28 -32
package/src/components/{tooltip.js → tooltip.tsx} +35 -39
package/src/{index.js → index.ts} +0 -1
package/src/util/__tests__/{active-tracker.test.js → active-tracker.test.ts} +0 -1
package/src/util/__tests__/{ref-tracker.test.js → ref-tracker.test.tsx} +13 -7
package/src/util/{active-tracker.js → active-tracker.ts} +1 -2
package/src/util/{constants.js → constants.ts} +0 -1
package/src/util/{ref-tracker.js → ref-tracker.ts} +14 -7
package/src/util/types.ts +32 -0
package/tsconfig.json +16 -0
package/tsconfig.tsbuildinfo +1 -0
package/src/components/__docs__/tooltip-content.stories.js +0 -89
package/src/components/__docs__/tooltip.argtypes.js +0 -15
package/src/components/__docs__/tooltip.stories.js +0 -335
package/src/util/types.js +0 -29
/package/src/util/__tests__/__snapshots__/{active-tracker.test.js.snap → active-tracker.test.ts.snap} +0 -0
/package/src/util/__tests__/__snapshots__/{ref-tracker.test.js.snap → ref-tracker.test.tsx.snap} +0 -0

package/src/components/__docs__/tooltip-content.stories.js DELETED Viewed

@@ -1,89 +0,0 @@
-// @flow
-import * as React from "react";
-import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
-import {Body, LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import type {StoryComponentType} from "@storybook/react";
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-export default {
-    title: "Tooltip / TooltipContent",
-    component: TooltipContent,
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-};
-const Template = (args) => <TooltipContent {...args} />;
-/**
- * Default example (interactive).
- */
-export const Default: StoryComponentType = Template.bind({});
-Default.args = {
-    title: "A Tooltip with a title",
-    children: "some text",
-};
-/**
- * Only text content
- */
-export const OnlyTextContent: StoryComponentType = Template.bind({});
-OnlyTextContent.args = {
-    children: "Only the content",
-};
-OnlyTextContent.parameters = {
-    docs: {
-        description: {
-            story: "This shows the default which is text rendered using `LabelMedium`.",
-        },
-    },
-};
-/**
- * Titled content
- */
-export const TitledContent: StoryComponentType = Template.bind({});
-TitledContent.args = {
-    title: "This tooltip has a title",
-    children: "Some content in my tooltip",
-};
-TitledContent.parameters = {
-    docs: {
-        description: {
-            story: "This shows the default with a title; the title is rendered using `HeadingSmall`.",
-        },
-    },
-};
-/**
- * Custom title and custom content
- */
-export const CustomContent: StoryComponentType = Template.bind({});
-CustomContent.args = {
-    title: <Body>Body text title!</Body>,
-    children: (
-        <>
-            <Body>Body text content!</Body>
-            <LabelSmall>And LabelSmall!</LabelSmall>
-        </>
-    ),
-};
-CustomContent.parameters = {
-    docs: {
-        description: {
-            story: "This shows how we can customize both the title and the content.",
-        },
-    },
-};

package/src/components/__docs__/tooltip.argtypes.js DELETED Viewed

@@ -1,15 +0,0 @@
-// @flow
-export default {
-    placement: {
-        control: {
-            type: "select",
-            options: ["top", "bottom", "right", "left"],
-        },
-    },
-    title: {
-        control: {
-            type: "text",
-        },
-    },
-};

package/src/components/__docs__/tooltip.stories.js DELETED Viewed

@@ -1,335 +0,0 @@
-// @flow
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-import {within, userEvent} from "@storybook/testing-library";
-import {expect} from "@storybook/jest";
-import Button from "@khanacademy/wonder-blocks-button";
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {TextField} from "@khanacademy/wonder-blocks-form";
-import IconButton from "@khanacademy/wonder-blocks-icon-button";
-import {icons} from "@khanacademy/wonder-blocks-icon";
-import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-import type {StoryComponentType} from "@storybook/react";
-import TooltipArgtypes from "./tooltip.argtypes";
-import ComponentInfo from "../../../../../.storybook/components/component-info";
-import {name, version} from "../../../package.json";
-export default {
-    title: "Tooltip / Tooltip",
-    component: Tooltip,
-    argTypes: TooltipArgtypes,
-    args: {
-        forceAnchorFocusivity: true,
-        placement: "top",
-    },
-    parameters: {
-        componentSubtitle: ((
-            <ComponentInfo name={name} version={version} />
-        ): any),
-    },
-    decorators: [
-        (Story: any): React.Node => (
-            <View style={styles.storyCanvas}>{Story()}</View>
-        ),
-    ],
-};
-const Template = (args) => <Tooltip {...args} />;
-/**
- * Default example (interactive).
- */
-export const Default: StoryComponentType = Template.bind({});
-Default.args = {
-    content: "This is a text tooltip on the top",
-    children: "some text",
-};
-Default.play = async ({canvasElement}) => {
-    // Arrange
-    // NOTE: Using `body` here to work with React Portals.
-    const canvas = within(canvasElement.ownerDocument.body);
-    // Act
-    // Triggers the hover state
-    const text = await canvas.findByText("some text");
-    await userEvent.hover(text);
-    // Assert
-    await expect(
-        await canvas.findByText("This is a text tooltip on the top"),
-    ).toBeInTheDocument();
-};
-/**
- * Complex anchor & title tooltip
- */
-export const ComplexAnchorAndTitle: StoryComponentType = Template.bind({});
-ComplexAnchorAndTitle.args = {
-    forceAnchorFocusivity: false,
-    placement: "bottom",
-    id: "my-a11y-tooltip",
-    title: "This tooltip has a title",
-    content: "I'm at the bottom!",
-    children: (
-        <View>
-            Some text
-            <TextField
-                aria-describedby="my-a11y-tooltip"
-                id=""
-                onChange={() => {}}
-                value=""
-            />
-        </View>
-    ),
-};
-ComplexAnchorAndTitle.play = async ({canvasElement}) => {
-    // Arrange
-    // NOTE: Using `body` here to work with React Portals.
-    const canvas = within(canvasElement.ownerDocument.body);
-    // Act
-    // Triggers the hover state
-    const text = await canvas.findByText("Some text");
-    await userEvent.hover(text);
-    // Assert
-    await expect(
-        await canvas.findByText("This tooltip has a title"),
-    ).toBeInTheDocument();
-};
-ComplexAnchorAndTitle.parameters = {
-    docs: {
-        description: {
-            story: "In this example, we're no longer forcing the anchor root to be focusable, since the text input can take focus. However, that needs a custom accessibility implementation too (for that, we should use `UniqueIDProvider`, but we'll cheat here and give our own identifier).",
-        },
-    },
-};
-/**
- * Anchor in scrollable parent & placement bottom
- */
-export const AnchorInScrollableParent: StoryComponentType = () => (
-    <View style={styles.scrollbox}>
-        <View style={styles.hostbox}>
-            <Body>
-                This is a big long piece of text with a
-                <Tooltip
-                    content="This tooltip will disappear when scrolled out of bounds"
-                    placement="bottom"
-                >
-                    [tooltip]
-                </Tooltip>{" "}
-                in the middle.
-            </Body>
-        </View>
-    </View>
-);
-AnchorInScrollableParent.parameters = {
-    // Disable Chromatic because it only shows the trigger element.
-    chromatic: {
-        disableSnapshot: true,
-    },
-    docs: {
-        description: {
-            story: "In this example, we have the anchor in a scrollable parent. Notice how, when the anchor is focused but scrolled out of bounds, the tooltip disappears.",
-        },
-    },
-};
-/**
- * Tooltip in a modal
- */
-export const TooltipInModal: StoryComponentType = () => {
-    const scrollyContent = (
-        <View style={styles.scrollbox}>
-            <View style={styles.hostbox}>
-                <Tooltip content="I'm on the left!" placement="left">
-                    tooltip
-                </Tooltip>
-            </View>
-        </View>
-    );
-    const modal = (
-        <OnePaneDialog
-            title="My modal"
-            footer="Still my modal"
-            content={<View style={styles.modalbox}>{scrollyContent}</View>}
-        />
-    );
-    return (
-        <ModalLauncher modal={modal}>
-            {({openModal}) => <Button onClick={openModal}>Click here!</Button>}
-        </ModalLauncher>
-    );
-};
-TooltipInModal.parameters = {
-    // Disable Chromatic because it initially renders the modal offscreen.
-    chromatic: {
-        disableSnapshot: true,
-    },
-    docs: {
-        description: {
-            story: "This checks that the tooltip works how we want inside a modal. Click the button to take a look.",
-        },
-    },
-};
-/**
- * Tooltips side-by-side
- */
-export const SideBySide: StoryComponentType = () => (
-    <View style={styles.row}>
-        <Tooltip content="Tooltip A" placement="bottom">
-            <View style={styles.block}>A</View>
-        </Tooltip>
-        <Tooltip content="Tooltip B" placement="bottom">
-            <View style={styles.block}>B</View>
-        </Tooltip>
-        <Tooltip content="Tooltip C" placement="bottom">
-            <View style={styles.block}>C</View>
-        </Tooltip>
-        <Tooltip content="Tooltip D" placement="bottom">
-            <View style={styles.block}>D</View>
-        </Tooltip>
-    </View>
-);
-SideBySide.storyName = "Side-by-side";
-SideBySide.parameters = {
-    // Disable Chromatic because it only shows the trigger element.
-    chromatic: {
-        disableSnapshot: true,
-    },
-    docs: {
-        description: {
-            story: "Here, we can see that the first tooltip shown has an initial delay before it appears, as does the last tooltip shown, yet when moving between tooltipped items, the transition from one to another is instantaneous.",
-        },
-    },
-};
-/**
- * Tooltips on buttons
- */
-export const TooltipOnButtons: StoryComponentType = () => {
-    return (
-        <View style={[styles.centered, styles.row]}>
-            <Tooltip content={"This is a tooltip on a button."}>
-                <Button disabled={false}>Example 1</Button>
-            </Tooltip>
-            <Tooltip
-                content="This is a tooltip on a disabled button."
-                placement="bottom"
-            >
-                <Button disabled={true}>Example 2</Button>
-            </Tooltip>
-            <Tooltip content="Short and stout">
-                <IconButton
-                    icon={icons.search}
-                    aria-label="search"
-                    onClick={() => {}}
-                />
-            </Tooltip>
-        </View>
-    );
-};
-TooltipOnButtons.parameters = {
-    chromatic: {
-        disableSnapshot: true,
-    },
-    docs: {
-        description: {
-            story: "This example shows tooltips on different types of buttons.",
-        },
-    },
-};
-/**
- * Opening a tooltip programatically (Controlled)
- */
-export const Controlled: StoryComponentType = () => {
-    const [opened, setOpened] = React.useState(true);
-    const buttonText = `Click to ${opened ? "close" : "open"} tooltip`;
-    return (
-        <View style={[styles.centered, styles.row]}>
-            <Tooltip
-                content="You opened the tooltip with a button"
-                opened={opened}
-            >
-                tooltip
-            </Tooltip>
-            <Button onClick={() => setOpened(!opened)}>{buttonText}</Button>
-        </View>
-    );
-};
-Controlled.parameters = {
-    docs: {
-        description: {
-            story: `Sometimes you'll want to trigger a tooltip programmatically.
-               This can be done by setting the \`opened\` prop to \`true\`. In
-               this situation the \`Tooltip\` is a controlled component. The
-               parent is responsible for managing the opening/closing of the
-               tooltip when using this prop. This means that you'll also have
-               to update \`opened\` to \`false\` in response to the
-               \`onClose\` callback being triggered.`,
-        },
-    },
-};
-const styles = StyleSheet.create({
-    storyCanvas: {
-        // NOTE: This is needed for Chromatic to include the tooltip bubble.
-        minHeight: 280,
-        padding: Spacing.xxxLarge_64,
-        justifyContent: "center",
-        textAlign: "center",
-    },
-    row: {
-        flexDirection: "row",
-    },
-    centered: {
-        alignItems: "center",
-        justifyContent: "center",
-        gap: Spacing.medium_16,
-        padding: Spacing.xxLarge_48,
-    },
-    scrollbox: {
-        height: 100,
-        overflow: "auto",
-        border: "1px solid black",
-        margin: Spacing.small_12,
-    },
-    hostbox: {
-        minHeight: "200vh",
-    },
-    modalbox: {
-        height: "200vh",
-    },
-    block: {
-        border: `solid 1px ${Color.lightBlue}`,
-        width: Spacing.xLarge_32,
-        height: Spacing.xLarge_32,
-        alignItems: "center",
-        justifyContent: "center",
-    },
-});

package/src/util/types.js DELETED Viewed

@@ -1,29 +0,0 @@
-// @flow
-import * as React from "react";
-export type getRefFn = (?(React.Component<any> | Element)) => void;
-export type Offset = {|
-    bottom: ?string,
-    top: ?string,
-    left: ?string,
-    right: ?string,
-    transform: ?string,
-|};
-export type Placement =
-    | "auto"
-    | "auto-start"
-    | "auto-end"
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end"
-    | "right"
-    | "right-start"
-    | "right-end"
-    | "left"
-    | "left-start"
-    | "left-end";

/package/src/util/__tests__/__snapshots__/{active-tracker.test.js.snap → active-tracker.test.ts.snap} RENAMED Viewed

File without changes

/package/src/util/__tests__/__snapshots__/{ref-tracker.test.js.snap → ref-tracker.test.tsx.snap} RENAMED Viewed

File without changes