feat(components): add warning variant for Alert (#1508)

launchdarkly · Dec 11, 2024 · 714abcf · 714abcf
1 parent f7c4b37
commit 714abcf
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 0 deletions.
diff --git a/.changeset/olive-doors-rule.md 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
@@ -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
@@ -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
@@ -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>,