eventx-design-system
Version:
Design System do EventX
91 lines (90 loc) • 3.89 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import { Alert } from './Alert';
const meta = {
title: 'Components/Alert',
component: Alert,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
variant: {
control: { type: 'select' },
options: ['success', 'error', 'warning', 'info'],
},
dismissible: {
control: { type: 'boolean' },
},
},
};
export default meta;
export const Default = {
args: {
children: 'Esta é uma mensagem de alerta informativa.',
},
};
export const Success = {
args: {
variant: 'success',
title: 'Sucesso!',
children: 'A operação foi concluída com sucesso.',
},
};
export const Error = {
args: {
variant: 'error',
title: 'Erro!',
children: 'Ocorreu um erro durante a operação. Tente novamente.',
},
};
export const Warning = {
args: {
variant: 'warning',
title: 'Atenção!',
children: 'Esta ação não pode ser desfeita.',
},
};
export const Info = {
args: {
variant: 'info',
title: 'Informação',
children: 'Esta é uma informação importante para você.',
},
};
export const Dismissible = {
args: {
variant: 'info',
title: 'Alerta Dismissível',
children: 'Este alerta pode ser fechado clicando no botão X.',
dismissible: true,
},
};
export const WithoutTitle = {
args: {
variant: 'success',
children: 'Alerta sem título, apenas com a mensagem.',
},
};
export const LongMessage = {
args: {
variant: 'warning',
title: 'Mensagem Longa',
children: 'Esta é uma mensagem muito longa que demonstra como o componente Alert se comporta quando o conteúdo é extenso. O texto deve quebrar adequadamente e manter a legibilidade.',
},
};
export const WithCallback = {
render: () => {
const [isVisible, setIsVisible] = useState(true);
if (!isVisible) {
return (_jsxs("div", { children: [_jsx("p", { children: "Alerta foi fechado!" }), _jsx("button", { onClick: () => setIsVisible(true), children: "Mostrar novamente" })] }));
}
return (_jsx(Alert, { variant: "error", title: "Com Callback", dismissible: true, onDismiss: () => setIsVisible(false), children: "Este alerta tem um callback que \u00E9 executado quando fechado." }));
},
};
export const AllVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }, children: [_jsx(Alert, { variant: "success", title: "Sucesso", children: "Opera\u00E7\u00E3o conclu\u00EDda com sucesso!" }), _jsx(Alert, { variant: "error", title: "Erro", children: "Ocorreu um erro durante a opera\u00E7\u00E3o." }), _jsx(Alert, { variant: "warning", title: "Aten\u00E7\u00E3o", children: "Esta a\u00E7\u00E3o n\u00E3o pode ser desfeita." }), _jsx(Alert, { variant: "info", title: "Informa\u00E7\u00E3o", children: "Esta \u00E9 uma informa\u00E7\u00E3o importante." })] })),
};
export const DismissibleVariants = {
render: () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '600px' }, children: [_jsx(Alert, { variant: "success", title: "Sucesso", dismissible: true, children: "Opera\u00E7\u00E3o conclu\u00EDda com sucesso!" }), _jsx(Alert, { variant: "error", title: "Erro", dismissible: true, children: "Ocorreu um erro durante a opera\u00E7\u00E3o." }), _jsx(Alert, { variant: "warning", title: "Aten\u00E7\u00E3o", dismissible: true, children: "Esta a\u00E7\u00E3o n\u00E3o pode ser desfeita." }), _jsx(Alert, { variant: "info", title: "Informa\u00E7\u00E3o", dismissible: true, children: "Esta \u00E9 uma informa\u00E7\u00E3o importante." })] })),
};