@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
57 lines (56 loc) • 2.28 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
import { faLock } from "@fortawesome/free-solid-svg-icons/faLock";
import useLocale from "../../hooks/useLocale.js";
import Icon from "../Icon/Icon.js";
import Description from "../Description/Description.js";
import Feedback from "../Feedback/Feedback.js";
/**
* Container for multiple inputs to be styled as a group.
*/ const FieldGroup = /*#__PURE__*/ forwardRef(({ children, className, label, description, feedback, state = "default", required = false, optional = false, disabled = false, readOnly = false, ...props }, ref)=>{
const locale = useLocale();
return /*#__PURE__*/ _jsxs("fieldset", {
className: "bf-fieldset",
disabled: disabled,
children: [
label && /*#__PURE__*/ _jsxs("legend", {
className: "bf-label bf-fieldgroup-legend",
children: [
label,
(required || optional) && /*#__PURE__*/ _jsxs("span", {
className: "bf-label-required",
children: [
"(",
required ? locale.required : locale.optional,
")"
]
}),
(disabled || readOnly) && /*#__PURE__*/ _jsx(Icon, {
icon: faLock,
className: "bf-input-disabled-icon"
})
]
}),
/*#__PURE__*/ _jsx(Description, {
children: description
}),
/*#__PURE__*/ _jsx("div", {
className: classnames(className, "bf-fieldgroup", {
"bf-fieldgroup-alert": state === "alert",
"bf-fieldgroup-disabled": disabled,
"bf-fieldgroup-readonly": readOnly
}),
...props,
ref: ref,
children: children
}),
/*#__PURE__*/ _jsx(Feedback, {
children: feedback
})
]
});
});
FieldGroup.displayName = "FieldGroup";
export default FieldGroup;