@octopusdeploy/design-system-components/dist/src/components/Form/Primitives/FormDescription.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FormDescription = FormDescription;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const utils_1 = require("../../../utils");
const renderLiteral_1 = require("../../literal/renderLiteral");
/**
 *
 * FormDescription renders descriptive text for form fields, providing additional context
 * or instructions to users. This primitive handles various styling states including
 * disabled appearance, radio/checkbox positioning, and accessibility requirements.
 *
 * @internal
 */
function FormDescription({ id, description, isDisabled, isRadioOrCheckbox, isGroupLabel, hideDescription }) {
    return ((0, jsx_runtime_1.jsx)("p", { id: id, className: (0, css_1.cx)(helperTextStyles, {
            [legendDescriptionStyles]: isGroupLabel,
            [helperTextRadioOrCheckboxStyles]: isRadioOrCheckbox,
            [helperTextDisabledStyles]: isDisabled,
            [accessibleHiddenStyles]: hideDescription,
            // Used to add a classname that can be used to target for styling purposes
            ["hasHiddenDescription"]: hideDescription,
        }), children: typeof description === "string" ? description : (0, renderLiteral_1.renderLiteral)(description, { code: "default", link: "default" }) }));
}
const helperTextStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.secondary,
    font: design_system_tokens_1.text.body.regular.medium,
    margin: 0,
});
const legendDescriptionStyles = (0, css_1.css)({
    marginBottom: design_system_tokens_1.space[16],
});
const helperTextDisabledStyles = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const helperTextRadioOrCheckboxStyles = (0, css_1.css)({
    gridColumn: "2 / -1",
});
const accessibleHiddenStyles = (0, css_1.css)({
    ...utils_1.accessibilityStyles.hidden,
});