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

Opinionated design system for Drivy's projects.

import { jsxs, jsx } from 'react/jsx-runtime';
import cx from 'classnames';
import '../Icon/index.js';
import { ProgressCircular } from '../ProgressCircular/index.js';
import CheckIcon from '../Icon/__generated__/CheckIcon.js';
import ChevronRightIcon from '../Icon/__generated__/ChevronRightIcon.js';

function ProgressBanner({ progress, title, description, completed = false, animated = false, fullWidth = false, className, href, }) {
    const Root = href != null ? "a" : "div";
    return (jsxs(Root, { ...(href != null ? { href } : null), className: cx("cobalt-progressBanner", className, {
            "cobalt-progressBanner--completed": completed,
            "cobalt-progressBanner--fullWidth": fullWidth,
        }), children: [progress && !completed && (jsx(ProgressCircular, { size: 48, progress: (progress.done * 100) / progress.total, animated: animated, children: jsxs("div", { className: "cobalt-progressBanner__progress-container", children: [progress.done, "/", progress.total] }) })), completed && (jsx("div", { className: cx("cobalt-progressBanner__completed-icon-container", {
                    "cobalt-progressBanner__completed-icon-container--animated": animated,
                }), children: jsx(CheckIcon, { color: "success", size: 32 }) })), jsxs("div", { className: "cobalt-progressBanner__text-container", children: [jsx("div", { className: "cobalt-progressBanner__title", children: title }), jsx("div", { className: "cobalt-progressBanner__description", children: description })] }), href && (jsx("div", { className: "c-flex", children: jsx(ChevronRightIcon, {}) }))] }));
}

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