@drivy/cobalt
Version:
Opinionated design system for Drivy's projects.
45 lines (44 loc) • 1.74 kB
JavaScript
import { jsx, jsxs } from "react/jsx-runtime";
import classnames from "classnames";
import { cloneElement, isValidElement } from "react";
const Banner = ({ title, children, cta, variant = "secondary", illustrationUrl, illustrationHeight, className })=>{
const enforcedCTA = cta && /*#__PURE__*/ isValidElement(cta) ? /*#__PURE__*/ cloneElement(cta, {
size: "small",
variant
}) : cta;
return /*#__PURE__*/ jsxs("div", {
className: classnames("cobalt-banner", {
"cobalt-banner--secondary": "secondary" === variant,
"cobalt-banner--tertiary": "tertiary" === variant,
"cobalt-banner--business": "business" === variant
}, className),
children: [
/*#__PURE__*/ jsxs("div", {
className: "cobalt-banner__content",
children: [
title && /*#__PURE__*/ jsx("div", {
className: "cobalt-banner__title",
children: title
}),
/*#__PURE__*/ jsx("div", {
className: "cobalt-banner__body",
children: children
}),
enforcedCTA
]
}),
illustrationUrl && /*#__PURE__*/ jsx("img", {
alt: title ?? "",
className: "cobalt-banner__illustration",
src: illustrationUrl,
style: illustrationHeight ? {
height: `${illustrationHeight}px`
} : void 0
})
]
});
};
const components_Banner = Banner;
export default components_Banner;
export { Banner };
//# sourceMappingURL=index.js.map