@octopusdeploy/design-system-components/dist/src/components/Progress/LinearProgress.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.LinearProgress = LinearProgress;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
/**
 * <LinearProgress show={true} />
 * ```
 */
function LinearProgress(props) {
    if (props.show) {
        if (isDeterminateProgressProps(props)) {
            return (0, jsx_runtime_1.jsx)(DeterminateLinearProgress, { value: props.value });
        }
        return (0, jsx_runtime_1.jsx)(IndeterminateLinearProgress, {});
    }
    return (0, jsx_runtime_1.jsx)("div", { className: hiddenSpacerStyle });
}
function DeterminateLinearProgress(props) {
    return (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { role: "progressbar", variant: "determinate", classes: { bar: barStyles, root: rootStyles }, "aria-label": "Progress", value: props.value, "aria-valuenow": props.value, "aria-valuemin": 0, "aria-valuemax": 100 });
}
function IndeterminateLinearProgress() {
    return (0, jsx_runtime_1.jsx)(LinearProgress_1.default, { role: "progressbar", variant: "indeterminate", classes: { bar: barStyles, root: rootStyles }, "aria-label": "Progress" });
}
function isDeterminateProgressProps(props) {
    return props.variant === "determinate";
}
LinearProgress.displayName = "LinearProgress";
const linearProgressClasses = {
    root: "MuiLinearProgress-root",
    bar: "MuiLinearProgress-bar",
};
const barStyles = (0, css_1.css)({
    [`&.${linearProgressClasses.bar}`]: {
        backgroundColor: design_system_tokens_1.themeTokens.color.progress.foreground.linear,
    },
});
const rootStyles = (0, css_1.css)({
    [`&.${linearProgressClasses.root}`]: {
        width: "100%",
        backgroundColor: design_system_tokens_1.themeTokens.color.progress.background.linear,
    },
});
const hiddenSpacerStyle = (0, css_1.css)({
    width: "100%",
    height: "0.25rem", //This matches <LinearProgress> height so we avoid jankiness from show/hide.
});