@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
50 lines (49 loc) • 1.82 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { cloneElement, isValidElement } from "react";
function enforceCTA(cta, variant) {
if (!cta || !/*#__PURE__*/ isValidElement(cta)) return cta;
return "error" === variant ? /*#__PURE__*/ cloneElement(cta, {
size: "small",
primary: true,
destructive: true
}) : /*#__PURE__*/ cloneElement(cta, {
size: "small",
variant
});
}
const Callout = ({ title, children, cta, variant = "neutral", illustrationUrl, className })=>{
const enforcedCTA = enforceCTA(cta, variant);
return /*#__PURE__*/ jsxs("div", {
className: classnames("cobalt-callout", {
"cobalt-callout--warning": "warning" === variant,
"cobalt-callout--neutral": "neutral" === variant,
"cobalt-callout--error": "error" === variant
}, className),
children: [
/*#__PURE__*/ jsxs("div", {
className: "cobalt-callout__content",
children: [
title && /*#__PURE__*/ jsx("div", {
className: "cobalt-callout__title",
children: title
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-callout__body",
children: children
}),
enforcedCTA
]
}),
illustrationUrl && /*#__PURE__*/ jsx("img", {
alt: title ?? "",
className: "cobalt-callout__illustration",
src: illustrationUrl
})
]
});
};
const components_Callout = Callout;
export default components_Callout;
export { Callout };
//# sourceMappingURL=index.js.map