mirror of https://github.com/mastodon/mastodon
Create reusable Alert/Snackbar component (#36141)
diondiondion
2 months ago
committed by
GitHub
parent
db0cd9489c
commit
085e9ea676
@ -0,0 +1,2 @@
|
|||||||
|
<html class="no-reduce-motion">
|
||||||
|
</html>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
import type { Meta, StoryObj } from '@storybook/react-vite';
|
||||||
|
import { fn, expect } from 'storybook/test';
|
||||||
|
|
||||||
|
import { Alert } from '.';
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'Components/Alert',
|
||||||
|
component: Alert,
|
||||||
|
args: {
|
||||||
|
isActive: true,
|
||||||
|
animateFrom: 'side',
|
||||||
|
title: '',
|
||||||
|
message: '',
|
||||||
|
action: '',
|
||||||
|
onActionClick: fn(),
|
||||||
|
},
|
||||||
|
argTypes: {
|
||||||
|
isActive: {
|
||||||
|
control: 'boolean',
|
||||||
|
type: 'boolean',
|
||||||
|
description: 'Animate to the active (displayed) state of the alert',
|
||||||
|
},
|
||||||
|
animateFrom: {
|
||||||
|
control: 'radio',
|
||||||
|
type: 'string',
|
||||||
|
options: ['side', 'below'],
|
||||||
|
description:
|
||||||
|
'Direction that the alert animates in from when activated. `side` is dependent on reading direction, defaulting to left in ltr languages.',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
control: 'text',
|
||||||
|
type: 'string',
|
||||||
|
description: '(Optional) title of the alert',
|
||||||
|
},
|
||||||
|
message: {
|
||||||
|
control: 'text',
|
||||||
|
type: 'string',
|
||||||
|
description: 'Main alert text',
|
||||||
|
},
|
||||||
|
action: {
|
||||||
|
control: 'text',
|
||||||
|
type: 'string',
|
||||||
|
description:
|
||||||
|
'Label of the alert action (requires `onActionClick` handler)',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
tags: ['test'],
|
||||||
|
} satisfies Meta<typeof Alert>;
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
|
||||||
|
type Story = StoryObj<typeof meta>;
|
||||||
|
|
||||||
|
export const Simple: Story = {
|
||||||
|
args: {
|
||||||
|
message: 'Post published.',
|
||||||
|
},
|
||||||
|
render: (args) => (
|
||||||
|
<div style={{ overflow: 'clip', padding: '1rem' }}>
|
||||||
|
<Alert {...args} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithAction: Story = {
|
||||||
|
args: {
|
||||||
|
...Simple.args,
|
||||||
|
action: 'Open',
|
||||||
|
},
|
||||||
|
render: Simple.render,
|
||||||
|
play: async ({ args, canvas, userEvent }) => {
|
||||||
|
const button = await canvas.findByRole('button', { name: 'Open' });
|
||||||
|
await userEvent.click(button);
|
||||||
|
await expect(args.onActionClick).toHaveBeenCalled();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithTitle: Story = {
|
||||||
|
args: {
|
||||||
|
title: 'Warning:',
|
||||||
|
message: 'This is an alert',
|
||||||
|
},
|
||||||
|
render: Simple.render,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const WithDismissButton: Story = {
|
||||||
|
args: {
|
||||||
|
message: 'More replies found',
|
||||||
|
action: 'Show',
|
||||||
|
onDismiss: fn(),
|
||||||
|
},
|
||||||
|
render: Simple.render,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const InSizedContainer: Story = {
|
||||||
|
args: WithDismissButton.args,
|
||||||
|
render: (args) => (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
overflow: 'clip',
|
||||||
|
padding: '1rem',
|
||||||
|
width: '380px',
|
||||||
|
maxWidth: '100%',
|
||||||
|
boxSizing: 'border-box',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Alert {...args} />
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
import { useIntl } from 'react-intl';
|
||||||
|
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||||
|
|
||||||
|
import { IconButton } from '../icon_button';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Snackbar/Toast-style notification component.
|
||||||
|
*/
|
||||||
|
export const Alert: React.FC<{
|
||||||
|
isActive?: boolean;
|
||||||
|
animateFrom?: 'side' | 'below';
|
||||||
|
title?: string;
|
||||||
|
message: string;
|
||||||
|
action?: string;
|
||||||
|
onActionClick?: () => void;
|
||||||
|
onDismiss?: () => void;
|
||||||
|
}> = ({
|
||||||
|
isActive,
|
||||||
|
animateFrom = 'side',
|
||||||
|
title,
|
||||||
|
message,
|
||||||
|
action,
|
||||||
|
onActionClick,
|
||||||
|
onDismiss,
|
||||||
|
}) => {
|
||||||
|
const intl = useIntl();
|
||||||
|
|
||||||
|
const hasAction = Boolean(action && onActionClick);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={classNames('notification-bar', {
|
||||||
|
'notification-bar--active': isActive,
|
||||||
|
'from-side': animateFrom === 'side',
|
||||||
|
'from-below': animateFrom === 'below',
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
<span className='notification-bar__content'>
|
||||||
|
{Boolean(title) && (
|
||||||
|
<span className='notification-bar__title'>{title}</span>
|
||||||
|
)}
|
||||||
|
{message}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{hasAction && (
|
||||||
|
<button className='notification-bar__action' onClick={onActionClick}>
|
||||||
|
{action}
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{onDismiss && (
|
||||||
|
<IconButton
|
||||||
|
title={intl.formatMessage({
|
||||||
|
id: 'dismissable_banner.dismiss',
|
||||||
|
defaultMessage: 'Dismiss',
|
||||||
|
})}
|
||||||
|
icon='times'
|
||||||
|
iconComponent={CloseIcon}
|
||||||
|
className='notification-bar__dismiss-button'
|
||||||
|
onClick={onDismiss}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue