diff --git a/packages/orbit-components/src/Alert/Alert.ct-story.tsx b/packages/orbit-components/src/Alert/Alert.ct-story.tsx index 6b8a90548e..c90d36b83a 100644 --- a/packages/orbit-components/src/Alert/Alert.ct-story.tsx +++ b/packages/orbit-components/src/Alert/Alert.ct-story.tsx @@ -1,9 +1,11 @@ import * as React from "react"; import * as Icons from "../icons"; +import TextLink from "../TextLink"; import type { Type } from "./types"; +import { TYPE_OPTIONS } from "./consts"; -import { AlertButton } from "."; +import Alert, { AlertButton } from "."; export function TestLeftIcon({ type }: { type: Type }) { return ( @@ -14,3 +16,98 @@ export function TestLeftIcon({ type }: { type: Type }) { ); } + +export function TestAlert() { + return ( +
+

Only title, icon and inline button

+
+ {Object.values(TYPE_OPTIONS).map(type => { + const Icon = typeof type === "string" && Icons[type]; + + return ( + : true} + inlineActions={ + + Link + + } + /> + ); + })} +
+

Title and text, closable and inline button

+
+ {Object.values(TYPE_OPTIONS).map(type => ( + + Link + + } + > +

The quick, brown fox jumps over a lazy dog.

+
+ ))} +
+

Title and text, icon, closable and inline button

+
+ {Object.values(TYPE_OPTIONS).map(type => ( + } + closable + inlineActions={ + + Link + + } + > +

The quick, brown fox jumps over a lazy dog.

+
+ ))} +
+

With custom icon

+
+ {Object.values(TYPE_OPTIONS).map(type => ( + } + > + The quick, brown fox jumps over a lazy dog. + + ))} +
+

With multiline text, closable, without icon

+
+ {Object.values(TYPE_OPTIONS).map(type => ( + +

+ This is a primary textlink. +
+ This is a secondary textlink. +

+
+ ))} +
+

Suppressed

+
+ +
+
+ ); +} diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx b/packages/orbit-components/src/Alert/Alert.ct.tsx index c07d9062c0..89adcdd755 100644 --- a/packages/orbit-components/src/Alert/Alert.ct.tsx +++ b/packages/orbit-components/src/Alert/Alert.ct.tsx @@ -2,7 +2,8 @@ import * as React from "react"; import { test, expect } from "@playwright/experimental-ct-react"; import { TYPE_OPTIONS } from "./consts"; -import { TestLeftIcon } from "./Alert.ct-story"; +import { TestLeftIcon, TestAlert } from "./Alert.ct-story"; +import RenderInRtl from "../utils/rtl/RenderInRtl"; test.describe("visual AlertButton", () => { Object.values(TYPE_OPTIONS).forEach(type => { @@ -34,3 +35,21 @@ test.describe("visual AlertButton", () => { }); }); }); + +test.describe("visual Alert", () => { + test("Alert component", async ({ mount }) => { + const component = await mount(); + + await expect(component).toHaveScreenshot(); + }); + + test("Alert component RTL", async ({ mount }) => { + const component = await mount( + + + , + ); + + await expect(component).toHaveScreenshot(); + }); +}); diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-darwin.png new file mode 100644 index 0000000000..235e665577 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-linux.png new file mode 100644 index 0000000000..a299b8be36 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..b13fcb3c47 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..0d11b782cd Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..fda04bdd93 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..795a40616a Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..467cd19a45 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..37a9086716 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..fa1ac7d4cc Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..b534e537f8 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-darwin.png new file mode 100644 index 0000000000..817faec9db Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-linux.png new file mode 100644 index 0000000000..91af129374 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-darwin.png new file mode 100644 index 0000000000..75543cb5b8 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-linux.png new file mode 100644 index 0000000000..08c5bcc2fc Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-darwin.png new file mode 100644 index 0000000000..42f913a333 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-linux.png new file mode 100644 index 0000000000..d4c19bd35e Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Desktop-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-darwin.png new file mode 100644 index 0000000000..c60ea98d88 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-linux.png new file mode 100644 index 0000000000..8f9777b80f Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Large-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-darwin.png new file mode 100644 index 0000000000..eea6584381 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-linux.png new file mode 100644 index 0000000000..2ecb1dd911 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Medium-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-darwin.png new file mode 100644 index 0000000000..ae71c556b1 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-linux.png new file mode 100644 index 0000000000..b0dfa7b4c3 Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Small-Mobile-linux.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-darwin.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-darwin.png new file mode 100644 index 0000000000..8fb28fee1e Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-darwin.png differ diff --git a/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-linux.png b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-linux.png new file mode 100644 index 0000000000..18bf24f86c Binary files /dev/null and b/packages/orbit-components/src/Alert/Alert.ct.tsx-snapshots/visual-Alert-Alert-component-RTL-1-Tablet-linux.png differ diff --git a/packages/orbit-components/src/Alert/index.tsx b/packages/orbit-components/src/Alert/index.tsx index c7708474db..1bb4f511ec 100644 --- a/packages/orbit-components/src/Alert/index.tsx +++ b/packages/orbit-components/src/Alert/index.tsx @@ -74,7 +74,7 @@ const ContentWrapper = ({ return (
{ return ( -
+
{
{
{ {title && (
{title}