braid-design-system
Version:
Themeable design system for the SEEK Group
58 lines (57 loc) • 1.87 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { Box } from "../Box/Box.mjs";
import { Text } from "../Text/Text.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { IconCaution } from "../icons/IconCaution/IconCaution.mjs";
import { IconPositive } from "../icons/IconPositive/IconPositive.mjs";
import { IconCritical } from "../icons/IconCritical/IconCritical.mjs";
const tones = ["neutral", "critical", "positive", "caution"];
const icon = {
critical: /* @__PURE__ */ jsx(IconCritical, { tone: "critical" }),
positive: /* @__PURE__ */ jsx(IconPositive, { tone: "positive" }),
caution: /* @__PURE__ */ jsx(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__ */ jsxs(
Box,
{
id,
display: "flex",
justifyContent: "flexEnd",
textAlign: "left",
...buildDataAttributes({ data, validateRestProps: restProps }),
children: [
/* @__PURE__ */ jsx(Box, { flexGrow: 1, userSelect: showMessage ? void 0 : "none", children: /* @__PURE__ */ jsx(
Text,
{
size: "small",
tone: tone === "neutral" ? "secondary" : tone,
icon: showMessage && tone !== "neutral" ? icon[tone] : void 0,
children: showMessage ? message : " "
}
) }),
secondaryMessage && !disabled ? /* @__PURE__ */ jsx(Box, { paddingLeft: "xsmall", flexGrow: 0, children: secondaryMessage }) : null
]
}
);
};
export {
FieldMessage,
tones
};