@uswds/uswds/packages/usa-tooltip/src/usa-tooltip.stories.js

Open source UI components and visual style guide for U.S. government websites

import Component from "./usa-tooltip.twig";
import TestComponent from "./test/test-patterns/test-usa-tooltip-utilities.twig";
import TestNoWrapperComponent from "./test/test-patterns/test-usa-tooltip-no-wrapper.twig";
import TestNonButtonComponent from "./test/test-patterns/test-usa-tooltip-non-button.twig";
import UtilityComponent from "./usa-tooltip--utilities.twig";
import tooltip from "./index";

export default {
  title: "Components/Tooltip",
  decorators: [
    (Story) => {
      tooltip.off?.();

      const story = Story();

      window.requestAnimationFrame(() => {
        tooltip.on();
      });

      return story;
    },
  ],
};

const Template = (args) => Component(args);
const TestTemplate = (args) => TestComponent(args);
const TestNoWrapperTemplate = (args) => TestNoWrapperComponent(args);
const TestNonButtonTemplate = (args) => TestNonButtonComponent(args);
const UtilityTemplate = (args) => UtilityComponent(args);

export const Tooltip = Template.bind({});
export const TooltipUtility = UtilityTemplate.bind({});
export const Test = TestTemplate.bind({});
export const TestNoWrapper = TestNoWrapperTemplate.bind({});
export const TestNonButton = TestNonButtonTemplate.bind({});