From d56ea2cd376705f350acb0acbdfa238dcf6953d7 Mon Sep 17 00:00:00 2001
From: Robb Niznik <rniznik@launchdarkly.com>
Date: Wed, 11 Dec 2024 13:38:41 -0500
Subject: [PATCH] feat(components): add `warning` variant for `Alert`

---
 .changeset/olive-doors-rule.md                  |  5 +++++
 packages/components/src/Alert.tsx               |  1 +
 packages/components/src/styles/Alert.module.css |  9 +++++++++
 packages/components/stories/Alert.stories.tsx   | 12 ++++++++++++
 4 files changed, 27 insertions(+)
 create mode 100644 .changeset/olive-doors-rule.md

diff --git a/.changeset/olive-doors-rule.md b/.changeset/olive-doors-rule.md
new file mode 100644
index 000000000..8733782e8
--- /dev/null
+++ b/.changeset/olive-doors-rule.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Add `warning` variant for `Alert`
diff --git a/packages/components/src/Alert.tsx b/packages/components/src/Alert.tsx
index c0ef4d20f..66371daab 100644
--- a/packages/components/src/Alert.tsx
+++ b/packages/components/src/Alert.tsx
@@ -18,6 +18,7 @@ const alert = cva(styles.base, {
 			error: styles.error,
 			info: styles.info,
 			success: styles.success,
+			warning: styles.warning,
 		},
 		variant: {
 			default: styles.default,
diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css
index 1eaa46d08..ae96069a5 100644
--- a/packages/components/src/styles/Alert.module.css
+++ b/packages/components/src/styles/Alert.module.css
@@ -19,6 +19,10 @@
 	&.success .icon {
 		fill: var(--lp-color-fill-feedback-success);
 	}
+
+	&.warning .icon {
+		fill: var(--lp-color-brand-orange-base);
+	}
 }
 
 .default {
@@ -47,6 +51,11 @@
 		--color-2: var(--lp-color-green-400);
 	}
 
+	&.warning {
+		--color-1: var(--lp-color-brand-orange-base);
+		--color-2: #ffb052;
+	}
+
 	&:has(.heading) {
 		& .icon {
 			transform: translateY(2px);
diff --git a/packages/components/stories/Alert.stories.tsx b/packages/components/stories/Alert.stories.tsx
index cdef8cdf5..441a74cab 100644
--- a/packages/components/stories/Alert.stories.tsx
+++ b/packages/components/stories/Alert.stories.tsx
@@ -64,6 +64,18 @@ export const Success: Story = {
 	},
 };
 
+export const Warning: Story = {
+	args: {
+		children: (
+			<>
+				<Heading>Heading</Heading>
+				<Text>Content</Text>
+			</>
+		),
+		status: 'warning',
+	},
+};
+
 export const Inline: Story = {
 	args: {
 		children: <Text>Content</Text>,