braid-design-system
Version:
Themeable design system for the SEEK Group
123 lines (122 loc) • 5.66 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
const lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_Alert_Alert_css_cjs = require("./Alert.css.cjs");
const lib_css_textAlignedToIcon_css_cjs = require("../../css/textAlignedToIcon.css.cjs");
const lib_components_icons_IconCritical_IconCritical_cjs = require("../icons/IconCritical/IconCritical.cjs");
const lib_components_icons_IconCaution_IconCaution_cjs = require("../icons/IconCaution/IconCaution.cjs");
const lib_components_icons_IconPromote_IconPromote_cjs = require("../icons/IconPromote/IconPromote.cjs");
const lib_components_icons_IconInfo_IconInfo_cjs = require("../icons/IconInfo/IconInfo.cjs");
const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
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: lib_components_icons_IconPositive_IconPositive_cjs.IconPositive,
info: lib_components_icons_IconInfo_IconInfo_cjs.IconInfo,
promote: lib_components_icons_IconPromote_IconPromote_cjs.IconPromote,
caution: lib_components_icons_IconCaution_IconCaution_cjs.IconCaution,
critical: lib_components_icons_IconCritical_IconCritical_cjs.IconCritical
};
const Alert = ({
tone = "info",
children,
id,
closeLabel = "Close",
data,
onClose,
...restProps
}) => {
const isLegacyTheme = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
const parentBackground = lib_components_Box_BackgroundContext_cjs.useBackground();
const Icon = icons[tone];
return /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.Box,
{
id,
background: backgroundForTone[tone],
paddingY: "medium",
paddingX: "gutter",
borderRadius,
position: "relative",
role: "alert",
"aria-live": "polite",
textAlign: "left",
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "small", children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone }) }),
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_css_textAlignedToIcon_css_cjs.textAlignedToIcon.standard, children }) }),
onClose ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.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: [lib_components_Alert_Alert_css_cjs.closeButton, lib_hooks_useIcon_index_cjs.iconContainerSize()],
children: [
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_Overlay_Overlay_cjs.Overlay,
{
component: "span",
background: "surface",
transition: "fast",
borderRadius: "full",
className: lib_components_Alert_Alert_css_cjs.closeButtonHover
}
),
/* @__PURE__ */ jsxRuntime.jsx(
lib_components_Box_Box_cjs.Box,
{
component: "span",
display: "block",
zIndex: 1,
position: "relative",
children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { size: "fill", tone })
}
)
]
}
) }) : null
] }),
isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
lib_components_private_Overlay_Overlay_cjs.Overlay,
{
borderRadius,
boxShadow: { lightMode: borderForTone[tone] },
visible: true
}
)
]
}
);
};
exports.Alert = Alert;