@octopusdeploy/design-system-components
Version:
The design systems component library.
46 lines (45 loc) • 2.42 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverBasic = PopoverBasic;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Popover_1 = require("./Popover");
const PopoverContentContainer_1 = require("./PopoverContentContainer");
function PopoverBasic({ width = "narrow", ...props }) {
return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { placement: props.placement, onClose: props.onClose, open: props.open, anchorEl: props.anchorEl, children: (0, jsx_runtime_1.jsx)(PopoverContentContainer_1.PopoverContentContainer, { width: width, boundaryPadding: props.contentPadding, children: (0, jsx_runtime_1.jsxs)("div", { className: styles.container, children: [props.image && (0, jsx_runtime_1.jsx)("img", { className: styles.image, src: props.image }), props.video && ((0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("video", { src: props.video, playsInline: true, autoPlay: true, loop: true, muted: true, className: styles.video }) })), props.title && (0, jsx_runtime_1.jsx)("p", { className: styles.title, children: props.title }), (0, jsx_runtime_1.jsx)("div", { className: styles.content, children: props.description }), (props.link1 !== undefined || props.link2 !== undefined) && ((0, jsx_runtime_1.jsxs)("div", { className: styles.links, children: [props.link1, props.link2] }))] }) }) }));
}
const styles = {
container: (0, css_1.css)({
display: "flex",
alignItems: "left",
flexDirection: "column",
gap: design_system_tokens_1.space[8],
}),
title: (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.medium,
margin: 0,
}),
content: (0, css_1.css)({
font: design_system_tokens_1.text.body.regular.medium,
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[8],
"& p": {
margin: 0,
},
}),
image: (0, css_1.css)({
width: "100%",
}),
video: (0, css_1.css)({
width: "100%",
borderRadius: design_system_tokens_1.borderRadius.small,
}),
links: (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[16],
font: design_system_tokens_1.text.body.bold.medium,
}),
};