@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
15 lines (14 loc) • 1.47 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
import { VuiLabel } from "../form/label/Label";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiInfoTooltip } from "../tooltip/InfoTooltip";
import { BiError } from "react-icons/bi";
import classNames from "classnames";
import { VuiTextColor } from "../typography/TextColor";
export const VuiInlineFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
const hasErrors = errorMessages && errorMessages.length > 0;
const classes = classNames("vuiInlineFormGroup", {
"vuiInlineFormGroup-hasError": hasErrors
});
return (_jsxs(VuiFlexContainer, Object.assign({ className: classes, spacing: "none", alignItems: "stretch" }, { children: [(label || labelRightContent) && (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", className: "vuiInlineFormGroup__label", alignItems: "center", spacing: "xs" }, { children: [label ? (_jsx(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: _jsxs(VuiTextColor, Object.assign({ color: "subdued" }, { children: [label, isRequired && " (required)"] })) }))) : (_jsx("span", {})), labelRightContent, helpText && _jsx(VuiInfoTooltip, { tip: helpText, id: ariaDescribedByLabel }), hasErrors && _jsx(VuiInfoTooltip, { color: "danger", icon: _jsx(BiError, {}), tip: errorMessages })] }))), content] })));
};