@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
10 lines (9 loc) • 1.36 kB
JavaScript
import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { VuiLabel } from "../form/label/Label";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiText } from "../typography/Text";
import { VuiTextColor } from "../typography/TextColor";
import { VuiFlexContainer } from "../flex/FlexContainer";
export const VuiBlockFormGroup = ({ label, labelRightContent, labelFor, labelSize, isRequired, helpText, ariaDescribedByLabel, errorMessages, content }) => {
return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
};