Skip to content

feat: alert update #304

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: alert update #304

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbbe19b
feat: alert update
adaam2 Oct 2, 2025
79bdcb7
fix: stories
adaam2 Oct 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
171 changes: 118 additions & 53 deletions src/components/Alert/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import { Alert } from '.'
import { Meta, StoryObj } from '@storybook/react-vite'
import { variants } from './types'
import { fn } from 'storybook/test'
import { Button } from '../Button'

const defaultDecorators = [
// eslint-disable-next-line @typescript-eslint/no-explicit-any
(Story: any) => (
<div className="m-auto flex h-full max-w-xl flex-col gap-2">{Story()}</div>
<div className="m-auto flex max-w-6xl items-center p-10">{Story()}</div>
),
]
const meta: Meta<typeof Alert> = {
Expand All @@ -18,6 +18,9 @@ const meta: Meta<typeof Alert> = {
options: variants,
},
},
parameters: {
layout: 'fullscreen',
},
}

export default meta
Expand All @@ -27,96 +30,158 @@ type Story = StoryObj<typeof Alert>
export const Default: Story = {
args: {
variant: 'default',
children: 'This is an alert',
children: [
<Alert.Icon name="info" />,
<Alert.Title>Default Alert</Alert.Title>,
<Alert.Description>This is a default alert message.</Alert.Description>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const DefaultWithCTA: Story = {
args: {
variant: 'default',
children: [
<Alert.Icon name="info" />,
<Alert.Title>Default Alert</Alert.Title>,
<Alert.Description>This is a default alert message.</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Got it</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const Success: Story = {
args: {
variant: 'success',
children: 'This is an alert',
children: [
<Alert.Icon name="check" />,
<Alert.Title>Success!</Alert.Title>,
<Alert.Description>
Your changes have been saved successfully.
</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Continue</Button.Text>
</Button>
<Button variant="secondary" size="sm">
<Button.Text>View Changes</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const Error: Story = {
args: {
variant: 'error',
children: 'This is an alert',
children: [
<Alert.Icon name="circle-alert" />,
<Alert.Title>Error</Alert.Title>,
<Alert.Description>
Something went wrong. Please try again.
</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Retry</Button.Text>
</Button>
<Button variant="secondary" size="sm">
<Button.Text>Cancel</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const Warning: Story = {
args: {
variant: 'warning',
children: 'This is an alert',
},
decorators: defaultDecorators,
}

export const Feature: Story = {
args: {
variant: 'feature',
children: 'This is an alert',
children: [
<Alert.Icon name="circle-alert" />,
<Alert.Title>Warning</Alert.Title>,
<Alert.Description>This action cannot be undone.</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Confirm</Button.Text>
</Button>
<Button variant="secondary" size="sm">
<Button.Text>Cancel</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const Info: Story = {
args: {
variant: 'info',
children: 'This is an alert',
},
decorators: defaultDecorators,
}

export const Inline: Story = {
args: {
variant: 'default',
inline: true,
children: 'This is an alert',
},
decorators: defaultDecorators,
}

export const Dismissible: Story = {
args: {
variant: 'default',
dismissible: true,
children: 'This is an alert',
onDismiss: fn().mockImplementation(() => {
console.log('dismissed')
}),
children: [
<Alert.Icon name="info" />,
<Alert.Title>Information</Alert.Title>,
<Alert.Description>
Here's some helpful information for you.
</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Learn More</Button.Text>
</Button>
<Button variant="secondary" size="sm">
<Button.Text>Dismiss</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const Multiline: Story = {
args: {
variant: 'error',
dismissible: true,
children: (
<div className="my-1 flex flex-col">
<h2 className="text-lg font-semibold">Whoops!</h2>
<p className="text-sm">
We couldn't find the API you were looking for.
</p>
</div>
),
children: [
<Alert.Icon name="circle-alert" />,
<Alert.Title>Whoops!</Alert.Title>,
<Alert.Description>
We couldn't find the API you were looking for.
</Alert.Description>,
<Alert.Footer>
<Button variant="primary" size="sm">
<Button.Text>Go Back</Button.Text>
</Button>
<Button variant="secondary" size="sm">
<Button.Text>Report Issue</Button.Text>
</Button>
</Alert.Footer>,
<Alert.Dismiss />,
],
},
decorators: defaultDecorators,
}

export const WithContainer: Story = {
export const Brand: Story = {
args: {
variant: 'default',
useContainer: true,
children: 'This is an alert',
variant: 'brand',
children: [
<Alert.Icon name="star" />,
<Alert.Title>Brand Alert</Alert.Title>,
<Alert.Description>
This alert features our signature rainbow border.
</Alert.Description>,
<Alert.Dismiss />,
],
},
parameters: {
decorators: [],
},
decorators: [(Story) => <div className="w-screen">{Story()}</div>],
decorators: defaultDecorators,
}
Loading
Loading