@drivy/cobalt/components/ProgressBanner/index.js

Opinionated design system for Drivy's projects.

import React from 'react';
import cx from 'classnames';
import { ProgressCircular } from '../ProgressCircular/index.js';
import '../Icon/index.js';
import CheckIcon from '../Icon/__generated__/CheckIcon.js';

function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, }) {
    return (React.createElement("div", { className: cx("cobalt-progressBanner", className, {
            "cobalt-progressBanner--completed": completed,
            "cobalt-progressBanner--fullWidth": fullWidth,
        }) },
        progress && !completed && (React.createElement(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated },
            React.createElement("div", { className: "cobalt-progressBanner__progress-container" },
                progress.done,
                "/",
                progress.total))),
        completed && (React.createElement("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
                "cobalt-progressBanner__completed-icon-container--animated": animated,
            }) },
            React.createElement(CheckIcon, { color: "success", size: 32 }))),
        React.createElement("div", { className: "cobalt-progressBanner__text-container" },
            React.createElement("div", { className: "cobalt-progressBanner__title" }, title),
            React.createElement("div", { className: "cobalt-progressBanner__description" }, description))));
}

export { ProgressBanner };
//# sourceMappingURL=index.js.map