@postenbring/hedwig-react
Version:
React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).
82 lines (80 loc) • 2.59 kB
JavaScript
import {
__objRest,
__spreadProps,
__spreadValues
} from "./chunk-YOSPWY5K.mjs";
// src/warning-banner/warning-banner.tsx
import { forwardRef, useId, useState } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx, jsxs } from "react/jsx-runtime";
var WarningBanner = forwardRef(
(_a, ref) => {
var _b = _a, { title, description, className } = _b, rest = __objRest(_b, ["title", "description", "className"]);
const descriptionId = useId();
const expandable = !!description;
return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, rest), { className: clsx("hds-warning-banner", className), ref, children: [
/* @__PURE__ */ jsx(
WarningBannerTitle,
{
variant: expandable ? "expandable" : "default",
descriptionId,
children: title
}
),
expandable ? /* @__PURE__ */ jsx(WarningBannerDescription, { id: descriptionId, children: description }) : null
] }));
}
);
WarningBanner.displayName = "WarningBanner";
var WarningBannerTitle = forwardRef((_a, ref) => {
var _b = _a, { variant, descriptionId, children, className } = _b, rest = __objRest(_b, ["variant", "descriptionId", "children", "className"]);
const [open, setOpen] = useState(false);
if (variant === "expandable") {
return /* @__PURE__ */ jsx(
"button",
__spreadProps(__spreadValues({}, rest), {
"aria-expanded": open,
"aria-controls": descriptionId,
"data-state": open ? "open" : "closed",
className: clsx(
"hds-warning-banner__title",
"hds-warning-banner__title-trigger",
className
),
onClick: () => {
setOpen((prev) => !prev);
},
ref,
type: "button",
children: /* @__PURE__ */ jsx("div", { children })
})
);
}
return /* @__PURE__ */ jsx(
"p",
__spreadProps(__spreadValues({}, rest), {
className: clsx("hds-warning-banner__title", className),
ref,
children
})
);
});
WarningBannerTitle.displayName = "WarningBannerTitle";
var WarningBannerDescription = forwardRef(
(_a, ref) => {
var _b = _a, { className, id } = _b, rest = __objRest(_b, ["className", "id"]);
return /* @__PURE__ */ jsx(
"p",
__spreadValues({
id,
className: clsx("hds-warning-banner__description", className),
ref
}, rest)
);
}
);
WarningBannerDescription.displayName = "WarningBannerDescription";
export {
WarningBanner
};
//# sourceMappingURL=chunk-EMQB6JIS.mjs.map