@octopusdeploy/design-system-components/dist/src/components/Dialog/DialogScrollableContent.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DialogScrollableContent = DialogScrollableContent;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * DialogScrollableContent – the scrollable main content area of a dialog.
 *
 * Provides flex layout, overflow scrolling, standard padding, fade-out mask,
 * and typography normalisation for `p`, `h3`, and `ul` content.
 *
 * Optionally renders a `progressTracker` and `errorPanel` above the main content,
 * each separated from the content below by a bottom margin.
 */
function DialogScrollableContent({ children, progressTracker, errorPanel }) {
    return ((0, jsx_runtime_1.jsxs)("div", { className: dialogContentStyles, children: [progressTracker && (0, jsx_runtime_1.jsx)("div", { className: progressTrackerStyles, children: progressTracker }), errorPanel && (0, jsx_runtime_1.jsx)("div", { className: errorPanelStyles, children: errorPanel }), children] }));
}
const progressTrackerStyles = (0, css_1.css)({ marginBottom: design_system_tokens_1.space[12] });
const errorPanelStyles = (0, css_1.css)({ marginBottom: design_system_tokens_1.space[12] });
const dialogContentStyles = (0, css_1.css)({
    flex: 1,
    overflowY: "auto",
    display: "flex",
    flexDirection: "column",
    padding: design_system_tokens_1.space[24],
    gap: design_system_tokens_1.space[12],
    maskImage: "linear-gradient(to bottom, white 0%, white 95%, transparent 100%)",
    color: design_system_tokens_1.themeTokens.color.text.primary,
    font: design_system_tokens_1.text.body.regular.large,
    // This will handle some basic typography styles for the content to prevent inconsistent styling.
    // TODO: should replace with a more robust typography system/layout system.
    "& > p": {
        margin: 0,
        font: design_system_tokens_1.text.body.regular.large,
        textBox: "trim-both text",
    },
    "& > h3": {
        font: design_system_tokens_1.text.heading.small,
        margin: 0,
        textBox: "trim-both text",
    },
    "& > ul": {
        marginTop: 0,
        marginBottom: 0,
        font: design_system_tokens_1.text.body.regular.large,
        textBox: "trim-both text",
    },
    "& > p + h3, & > p + div": {
        marginTop: design_system_tokens_1.space[12],
    },
});