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 + Content + + ), + status: 'warning', + }, +}; + export const Inline: Story = { args: { children: Content,