@octopusdeploy/design-system-components
Version:
The design systems component library.
38 lines (37 loc) • 3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogMainPanel = DialogMainPanel;
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 LinearProgress_1 = require("../Progress/LinearProgress");
const DialogHeader_1 = require("./DialogHeader");
const DialogScrollableContent_1 = require("./DialogScrollableContent");
const dialogBreakpoints_styles_1 = require("./dialogBreakpoints.styles");
/**
* DialogMainPanel – the primary content section of a dialog.
*/
function DialogMainPanel({ width, hasSidePanel, title, headerAction, progressTracker, errorPanel, footer, children, isLoading }) {
const sidePanelWidth = (0, dialogBreakpoints_styles_1.toSidePanelWidth)(width);
return ((0, jsx_runtime_1.jsxs)("section", { className: (0, css_1.cx)(mainPanelStyles, widthStyles[width], hasSidePanel && sidePanelWidth ? hasSidePanelStyles[sidePanelWidth] : null), children: [(0, jsx_runtime_1.jsx)(DialogHeader_1.DialogHeader, { title: title, width: width, action: headerAction, isLoading: isLoading }), (0, jsx_runtime_1.jsx)(LinearProgress_1.LinearProgress, { show: !!isLoading, variant: "indeterminate" }), (0, jsx_runtime_1.jsx)(DialogScrollableContent_1.DialogScrollableContent, { progressTracker: progressTracker, errorPanel: errorPanel, children: children }), footer] }));
}
const mainPanelStyles = (0, css_1.css)({
display: "flex",
flexDirection: "column",
color: design_system_tokens_1.themeTokens.color.text.primary,
background: design_system_tokens_1.themeTokens.color.dialog.background.primary,
position: "relative",
zIndex: 1,
minHeight: 0,
});
const widthStyles = {
small: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.small, maxWidth: "100%" } }),
medium: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.medium, maxWidth: "100%" } }),
large: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.large, maxWidth: "100%" } }),
extraLarge: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogBreakpoints.tablet})`]: { width: design_system_tokens_1.dialog.mainPanel.width.extraLarge, maxWidth: "100%" } }),
};
const hasSidePanelStyles = {
small: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.small})`]: { minWidth: 0 } }),
medium: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.medium})`]: { minWidth: 0 } }),
large: (0, css_1.css)({ [`@media (min-width: ${dialogBreakpoints_styles_1.dialogSidePanelBreakpoint.large})`]: { minWidth: 0 } }),
};