@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
40 lines (39 loc) • 3.79 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Alert = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const Button_1 = require("../Button");
require("./Alert.css");
const defaultIcons = {
error: ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 9l-6 6M9 9l6 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
warning: ((0, jsx_runtime_1.jsx)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })),
info: ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 16v-4m0-4h.01", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" })] })),
success: ((0, jsx_runtime_1.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 12l2 2 4-4", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })),
neutral: null,
};
const Alert = ({ variant = 'info', children, icon, linkText, linkHref = '#', onLinkClick, closable = true, onClose, className = '', role = 'alert', }) => {
const [isVisible, setIsVisible] = react_1.default.useState(true);
const handleClose = () => {
setIsVisible(false);
onClose === null || onClose === void 0 ? void 0 : onClose();
};
const handleLinkClick = (e) => {
if (onLinkClick) {
e.preventDefault();
onLinkClick(e);
}
};
if (!isVisible)
return null;
const displayIcon = icon !== undefined ? icon : defaultIcons[variant];
return ((0, jsx_runtime_1.jsxs)("div", { className: [
'ds-alert',
`ds-alert--${variant}`,
className
].filter(Boolean).join(' '), role: role, "aria-live": role === 'alert' ? 'assertive' : 'polite', children: [(0, jsx_runtime_1.jsxs)("div", { className: "ds-alert__content", children: [displayIcon && ((0, jsx_runtime_1.jsx)("span", { className: "ds-alert__icon", "aria-hidden": "true", children: displayIcon })), (0, jsx_runtime_1.jsxs)("div", { className: "ds-alert__text", children: [(0, jsx_runtime_1.jsx)("span", { className: "ds-alert__message", children: children }), linkText && ((0, jsx_runtime_1.jsx)("a", { href: linkHref, className: "ds-alert__link", onClick: handleLinkClick, children: linkText }))] })] }), closable && ((0, jsx_runtime_1.jsx)(Button_1.Button, { shape: "icon", variant: "ghost", size: "medium", onClick: handleClose, "aria-label": "Cerrar alerta", className: "ds-alert__close", iconLeft: ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: (0, jsx_runtime_1.jsx)("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }))] }));
};
exports.Alert = Alert;