braid-design-system
Version:
Themeable design system for the SEEK Group
57 lines (56 loc) • 2.49 kB
JavaScript
"use strict";
const jsxRuntime = require("react/jsx-runtime");
const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
const lib_components_icons_IconCaution_IconCaution_cjs = require("../icons/IconCaution/IconCaution.cjs");
const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
const lib_components_icons_IconCritical_IconCritical_cjs = require("../icons/IconCritical/IconCritical.cjs");
const tones = ["neutral", "critical", "positive", "caution"];
const icon = {
critical: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconCritical_IconCritical_cjs.IconCritical, { tone: "critical" }),
positive: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconPositive_IconPositive_cjs.IconPositive, { tone: "positive" }),
caution: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconCaution_IconCaution_cjs.IconCaution, { tone: "caution" })
};
const FieldMessage = ({
id,
tone = "neutral",
message,
secondaryMessage,
reserveMessageSpace = true,
disabled,
data,
...restProps
}) => {
if (tones.indexOf(tone) === -1) {
throw new Error(`Invalid tone: ${tone}`);
}
if (!message && !secondaryMessage && !reserveMessageSpace) {
return null;
}
const showMessage = !disabled && message;
return /* @__PURE__ */ jsxRuntime.jsxs(
lib_components_Box_Box_cjs.Box,
{
id,
display: "flex",
justifyContent: "flexEnd",
textAlign: "left",
...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsxRuntime.jsx(
lib_components_Text_Text_cjs.Text,
{
size: "small",
tone: tone === "neutral" ? "secondary" : tone,
icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
children: showMessage ? message : " "
}
) }),
secondaryMessage && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
]
}
);
};
exports.FieldMessage = FieldMessage;
exports.tones = tones;