braid-design-system
Version:
Themeable design system for the SEEK Group
124 lines (123 loc) • 4.15 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { iconContainerSize } from "../../hooks/useIcon/index.mjs";
import { useBackground } from "../Box/BackgroundContext.mjs";
import { Box } from "../Box/Box.mjs";
import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
import { Column } from "../Column/Column.mjs";
import { Columns } from "../Columns/Columns.mjs";
import { Overlay } from "../private/Overlay/Overlay.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { closeButton, closeButtonHover } from "./Alert.css.mjs";
import { textAlignedToIcon } from "../../css/textAlignedToIcon.css.mjs";
import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
import { IconCaution } from "../icons/IconCaution/IconCaution.mjs";
import { IconPromote } from "../icons/IconPromote/IconPromote.mjs";
import { IconInfo } from "../icons/IconInfo/IconInfo.mjs";
import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
import { IconClear } from "../icons/IconClear/IconClear.mjs";
const borderRadius = "large";
const backgroundForTone = {
promote: "promoteLight",
info: "infoLight",
positive: "positiveLight",
caution: "cautionLight",
critical: "criticalLight"
};
const borderForTone = {
promote: "borderPromoteLight",
info: "borderInfoLight",
positive: "borderPositiveLight",
caution: "borderCautionLight",
critical: "borderCriticalLight"
};
const icons = {
positive: IconPositive,
info: IconInfo,
promote: IconPromote,
caution: IconCaution,
critical: IconCritical
};
const Alert = ({
tone = "info",
children,
id,
closeLabel = "Close",
data,
onClose,
...restProps
}) => {
const isLegacyTheme = useBraidTheme().legacy;
const parentBackground = useBackground();
const Icon = icons[tone];
return /* @__PURE__ */ jsxs(
Box,
{
id,
background: backgroundForTone[tone],
paddingY: "medium",
paddingX: "gutter",
borderRadius,
position: "relative",
role: "alert",
"aria-live": "polite",
textAlign: "left",
...buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsxs(Columns, { space: "small", children: [
/* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Icon, { tone }) }),
/* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(Box, { className: textAlignedToIcon.standard, children }) }),
onClose ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsxs(
Box,
{
component: "button",
"aria-label": closeLabel,
borderRadius: "full",
cursor: "pointer",
position: "relative",
onClick: onClose,
transition: "touchable",
transform: { active: "touchable" },
display: "flex",
alignItems: "center",
justifyContent: "center",
className: [closeButton, iconContainerSize()],
children: [
/* @__PURE__ */ jsx(
Overlay,
{
component: "span",
background: "surface",
transition: "fast",
borderRadius: "full",
className: closeButtonHover
}
),
/* @__PURE__ */ jsx(
Box,
{
component: "span",
display: "block",
zIndex: 1,
position: "relative",
children: /* @__PURE__ */ jsx(IconClear, { size: "fill", tone })
}
)
]
}
) }) : null
] }),
isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
Overlay,
{
borderRadius,
boxShadow: { lightMode: borderForTone[tone] },
visible: true
}
)
]
}
);
};
export {
Alert
};