diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx new file mode 100644 index 0000000000..c76721c435 --- /dev/null +++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct-story.tsx @@ -0,0 +1,148 @@ +import React from "react"; + +import type { Placement } from "../../common/placements"; +import { PLACEMENTS } from "../../common/placements"; +import Stack from "../../Stack"; +import Text from "../../Text"; +import TextLink from "../../TextLink"; +import List, { ListItem } from "../../List"; +import { Icons } from "../.."; + +import TooltipPrimitive from "."; + +export function DefaultTooltipPrimitive({ + placement = PLACEMENTS.BOTTOM, +}: { + placement?: Placement; +}) { + return ( +
+
+ + + + Incididunt consectetur ullamco labore exercitation tempor. Qui incididunt commodo est + veniam anim Lorem et dolor dolor. Minim fugiat reprehenderit reprehenderit voluptate + aliquip dolor dolor anim eiusmod consectetur labore amet. Nostrud cillum esse proident + nisi cillum amet culpa sunt commodo. Aliquip in excepteur eu reprehenderit magna irure + ad laborum aute duis. Officia duis tempor nisi velit laboris nisi qui. + + + +
+
+ ); +} + +export function ErrorTooltipPrimitive() { + return ( +
+ + + + + +
+ ); +} + +export function HelpTooltipPrimitive() { + return ( +
+ + + + + +
+ ); +} + +export function WithImageTooltipPrimitive() { + return ( +
+ + + Preview + of card help in TooltipPrimitive component + + We take security very seriously. Especially when it comes to your personal and + sensitive details. + + + + A common variant, especially in older software, is displaying a description. + + + A common variant, especially in older software, is displaying a description.{" "} + More info. + + + + } + > + + + +
+ ); +} + +export function SmallWithImageTooltipPrimitive() { + return ( +
+ + + Preview + of card help in TooltipPrimitive component + + We take security very seriously. Especially when it comes to your personal and + sensitive details. + + + + A common variant, especially in older software, is displaying a description. + + + A common variant, especially in older software, is displaying a description.{" "} + More info. + + + + } + > + + + +
+ ); +} + +export function BlockTooltipPrimitive() { + return ( +
+ + + + Incididunt consectetur ullamco labore exercitation tempor. Qui incididunt commodo est + veniam anim Lorem et dolor dolor. Minim fugiat reprehenderit reprehenderit voluptate + aliquip dolor dolor anim eiusmod consectetur labore amet. Nostrud cillum esse proident + nisi cillum amet culpa sunt commodo. Aliquip in excepteur eu reprehenderit magna irure + ad laborum aute duis. Officia duis tempor nisi velit laboris nisi qui. + + + +
+ ); +} diff --git a/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx new file mode 100644 index 0000000000..c426b78f85 --- /dev/null +++ b/packages/orbit-components/src/primitives/TooltipPrimitive/TooltipPrimitive.ct.tsx @@ -0,0 +1,77 @@ +import * as React from "react"; +import { test, expect } from "@playwright/experimental-ct-react"; + +import { + DefaultTooltipPrimitive, + WithImageTooltipPrimitive, + ErrorTooltipPrimitive, + HelpTooltipPrimitive, + SmallWithImageTooltipPrimitive, + BlockTooltipPrimitive, +} from "./TooltipPrimitive.ct-story"; +import { PLACEMENTS } from "../../common/placements"; + +test.describe("Default - desktop", () => { + test(`screenshot for default - bottom position`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot for default - top position`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot for default - left position`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot for default - right position`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot with image inside - small`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot with image inside - medium`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot - error tooltip primitive`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot - help tooltip primitive`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); + + test(`screenshot - block tooltip primitive`, async ({ mount }) => { + const component = await mount(); + + await component.getByRole("button").hover(); + await expect(component).toHaveScreenshot(); + }); +});