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(