@octopusdeploy/design-system-components
Version:
The design systems component library.
57 lines (56 loc) • 2.94 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputValidationMessage = InputValidationMessage;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const CircularProgress_1 = require("../../Progress/CircularProgress");
/**
* InputValidationMessage renders a validation message for a form field.
* Use the `displayState` prop to switch between error, success and progress styling.
*
* @internal
*/
function InputValidationMessage({ message, displayState, id }) {
if (!message || displayState === "none")
return null;
if (displayState === "progress") {
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(containerStyles, progressTextStyles), id: id, role: "status", "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)("div", { className: progressIconStyles, children: (0, jsx_runtime_1.jsx)(CircularProgress_1.CircularProgress, { size: "container" }) }), (0, jsx_runtime_1.jsx)("div", { className: messageStyles, children: message })] }));
}
const isSuccess = displayState === "success";
const Icon = isSuccess ? design_system_icons_1.CheckCircleIcon : design_system_icons_1.ExclamationDiamondIcon;
const iconColor = isSuccess ? design_system_tokens_1.themeTokens.color.icon.success : design_system_tokens_1.themeTokens.color.icon.danger;
const ariaLabel = isSuccess ? "Success" : "Error";
return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(containerStyles, isSuccess ? successTextStyles : errorTextStyles), id: id, children: [(0, jsx_runtime_1.jsx)(Icon, { size: 20, ariaLabel: ariaLabel, color: iconColor }), (0, jsx_runtime_1.jsx)("div", { className: messageStyles, children: message })] }));
}
const containerStyles = (0, css_1.css)({
display: "grid",
margin: 0,
gridTemplateColumns: "auto 1fr",
alignItems: "start",
gap: design_system_tokens_1.space[4],
font: design_system_tokens_1.text.body.regular.medium,
lineHeight: 1.25, // Note: Design tweak - line-height looked awkward on narrow inputs
textWrap: "pretty",
// Align icon with form inputs
transform: `translateX(-${design_system_tokens_1.space[1]})`,
});
const messageStyles = (0, css_1.css)({
alignSelf: "center",
});
const errorTextStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.danger,
});
const successTextStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.success,
});
const progressTextStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.secondary,
});
const progressIconStyles = (0, css_1.css)({
boxSizing: "border-box",
width: 20,
height: 20,
padding: design_system_tokens_1.space[2],
});