@octopusdeploy/design-system-components
Version:
The design systems component library.
75 lines (74 loc) • 4.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverBasicHelp = void 0;
exports.InfoPopoverIcon = InfoPopoverIcon;
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 react_1 = require("react");
const PopoverBasic_1 = require("./PopoverBasic");
exports.PopoverBasicHelp = (0, react_1.forwardRef)(function PopoverBasicHelp({ onOpen, ...props }, ref) {
const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
const containerRef = (0, react_1.useRef)(null);
(0, react_1.useImperativeHandle)(ref, () => ({
close: () => setAnchorEl(null),
}));
const preventPrematureClose = (event) => {
event.stopPropagation();
};
const handleIconClick = () => {
anchorEl ? handleClose() : handleOpen();
};
const handleOpen = () => {
setAnchorEl(containerRef.current);
onOpen?.();
};
const handleClose = () => {
setAnchorEl(null);
};
return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: (0, css_1.cx)(popoverBasicHelpContainerStyles), onClick: preventPrematureClose, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleIconClick, className: infoIconButtonStyles, children: (0, jsx_runtime_1.jsx)(InfoPopoverIcon, {}) }), (0, jsx_runtime_1.jsx)(PopoverBasic_1.PopoverBasic, { onClose: handleClose, anchorEl: anchorEl, open: !!anchorEl, ...props })] }));
});
const popoverBasicHelpContainerStyles = (0, css_1.css)({
display: "inline-block",
position: "relative",
verticalAlign: "middle",
});
const infoIconCirclePathStyles = (0, css_1.css)({
fill: design_system_tokens_1.themeTokens.color.popover.infoCircle.background.default,
});
const infoIconButtonStyles = (0, css_1.css)({
width: "24px",
height: "24px",
display: "block",
background: "none",
border: "none",
borderRadius: design_system_tokens_1.borderRadius.circle,
padding: 0,
margin: 0,
cursor: "pointer",
color: design_system_tokens_1.themeTokens.color.popover.infoCircle.text.default,
transition: "color 150ms ease-in-out",
transform: "translateY(-1px)",
[`& .${infoIconCirclePathStyles}`]: {
transitionTimingFunction: "ease-in-out",
transitionProperty: "fill",
transitionDuration: "150ms",
},
"&:hover, &:active, &:focus-visible": {
color: design_system_tokens_1.themeTokens.color.popover.infoCircle.text.hover,
[`& .${infoIconCirclePathStyles}`]: {
fill: design_system_tokens_1.themeTokens.color.popover.infoCircle.background.hover,
},
},
"&:focus-visible": {
outline: `solid ${design_system_tokens_1.borderWidth[2]} ${design_system_tokens_1.themeTokens.color.border.selected}`,
},
});
function InfoPopoverIcon() {
// This is a snowflake component and should not be widely used, please try the icons in design-system-icons package first.
return ((0, jsx_runtime_1.jsxs)("svg", { className: infoIconStyles, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsx)("title", { children: "Information" }), (0, jsx_runtime_1.jsx)("path", { className: infoIconCirclePathStyles, d: "M11.9999 21.6C6.6749 21.6 2.3999 17.325 2.3999 12C2.3999 6.71252 6.6749 2.40003 11.9999 2.40003C17.2874 2.40003 21.5999 6.71253 21.5999 12C21.5999 17.325 17.2874 21.6 11.9999 21.6Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10.5187 15L11.4187 15L11.4187 12.6L10.5187 12.6C9.99365 12.6 9.61865 12.225 9.61865 11.7C9.61865 11.2125 9.99365 10.8 10.5187 10.8L12.3187 10.8C12.8062 10.8 13.2187 11.2125 13.2187 11.7L13.2187 15L13.5187 15C14.0062 15 14.4187 15.4125 14.4187 15.9C14.4187 16.425 14.0062 16.8 13.5187 16.8L10.5187 16.8C9.99365 16.8 9.61865 16.425 9.61865 15.9C9.61865 15.4125 9.99365 15 10.5187 15ZM12.0187 9.60001C11.3437 9.60001 10.8187 9.07501 10.8187 8.40001C10.8187 7.76251 11.3437 7.20001 12.0187 7.20001C12.6562 7.20001 13.2187 7.76251 13.2187 8.40001C13.2187 9.07501 12.6562 9.60001 12.0187 9.60001Z", fill: "currentColor" })] }));
}
const infoIconStyles = (0, css_1.css)({
width: "24px",
height: "24px",
});