@cimpress/react-components/dist/esm/src/ProgressBar.js

React components to support the MCP styleguide

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React from 'react';
import { cx, css } from '@emotion/css';
import cvar from './theme/cvar';
import { useFeatureFlags } from './FeatureFlags';
const sizes = {
    s: '2px',
    m: '4px',
    l: '6px',
    xl: '8px',
};
const statusColorMap = {
    success: [cvar('color-background-success'), cvar('color-progressbar-gradient-success')],
    info: [cvar('color-background-info'), cvar('color-progressbar-gradient-info')],
    warning: [cvar('color-background-warning'), cvar('dark-color-progressbar-warning')],
    danger: [cvar('color-background-error'), cvar('dark-color-progressbar-error')],
    default: [cvar('color-interactive'), cvar('color-progressbar-gradient-primary')],
    base: [cvar('color-progressbar-background'), cvar('color-background-light')],
};
const progressCss = (size) => css `
  box-shadow: none;
  background-image: linear-gradient(to bottom, ${statusColorMap.base[0]} 0, ${statusColorMap.base[1]} 100%);
  background-repeat: repeat-x;
  margin-bottom: ${cvar('spacing-16')};
  overflow: hidden;
  background-color: ${statusColorMap.base[1]};
  border-radius: 0;
  height: ${sizes[size]};
`;
const progressBarCss = (status = 'default') => {
    const colors = statusColorMap[status] || statusColorMap.default;
    return css `
    box-shadow: none;
    background-image: linear-gradient(to bottom, ${colors[0]} 0, ${colors[1]} 100%);
    background-repeat: repeat-x;
    float: left;
    height: 100%;
    background-color: ${statusColorMap.default[0]};
    transition: width 0.6s ease;
  `;
};
const noOuterMarginCss = css `
  margin-bottom: 0;
`;
export const ProgressBar = (_a) => {
    var { className, size = 's', status, color, value, style } = _a, rest = __rest(_a, ["className", "size", "status", "color", "value", "style"]);
    const { v17_noOuterSpacing } = useFeatureFlags();
    const overrideCss = css `
    ${color ? `background: ${color}` : ''};
    width: ${value}%;
  `;
    return (React.createElement("div", Object.assign({ className: cx('crc-progressbar', progressCss(size), v17_noOuterSpacing && noOuterMarginCss, className), style: style }, rest),
        React.createElement("div", { className: cx(progressBarCss(status), overrideCss) })));
};
//# sourceMappingURL=ProgressBar.js.map