@cimpress/react-components/dist/src/Step.js

React components to support the MCP styleguide

"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Step = void 0;
const react_1 = __importDefault(require("react"));
const css_1 = require("@emotion/css");
const Tooltip_1 = require("./Tooltip");
const internal_1 = require("./internal");
const cvar_1 = __importDefault(require("./theme/cvar"));
const pseudobold = `0 0 .65px ${(0, cvar_1.default)('dark-color-code-background')}, 0 0 .65px ${(0, cvar_1.default)('dark-color-code-background')}`;
const StepCircle = ({ size, borderWidth, color, filled = false }) => {
    const stepCircleStyle = (0, css_1.css) `
    flex-shrink: 0;
    width: ${size}px;
    height: ${size}px;
    border: ${borderWidth}px solid ${color};
    border-radius: 100%;
    background-color: ${filled ? color : (0, cvar_1.default)('color-background')};
  `;
    return react_1.default.createElement("div", { "data-value": "step-circle", className: (0, css_1.cx)(stepCircleStyle) });
};
const StepHalfCircle = ({ size, color }) => {
    const stepHalfCircleBackground = (0, css_1.css) `
    flex-shrink: 0;
    width: ${size}px;
    height: ${size}px;
    border-radius: 50%;
    border: 2px solid ${color};
    overflow: hidden;
  `;
    const stepHalfCircleFilled = (0, css_1.css) `
    display: inline-block;
    background-color: ${color};
    height: ${size}px;
    width: ${size}px;
  `;
    const stepHalfCircleEmpty = (0, css_1.css) `
    display: inline-block;
    background-color: white;
    height: ${size}px;
    width: ${size}px;
  `;
    return (react_1.default.createElement("div", { className: stepHalfCircleBackground },
        react_1.default.createElement("div", { className: stepHalfCircleFilled }),
        react_1.default.createElement("div", { className: stepHalfCircleEmpty })));
};
const Step = (_a) => {
    var { 
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    typeName = 'Step', active, activeColor = (0, cvar_1.default)('color-background-success'), completed, onClick, tip, tipDirection, small, partial, icon, children, vertical, className, style, overrideStatus } = _a, rest = __rest(_a, ["typeName", "active", "activeColor", "completed", "onClick", "tip", "tipDirection", "small", "partial", "icon", "children", "vertical", "className", "style", "overrideStatus"]);
    const handleClick = () => {
        if (!onClick) {
            return;
        }
        onClick(rest.index, rest.name);
    };
    let color = (0, cvar_1.default)('dark-color-code-base');
    const filled = completed;
    const size = small ? 14 : 20;
    if (overrideStatus) {
        color = (0, cvar_1.default)(`color-background-${overrideStatus}`) || (0, cvar_1.default)('dark-color-code-base');
    }
    else if (completed) {
        color = (0, cvar_1.default)('color-background-success');
    }
    else if (active) {
        color = activeColor;
    }
    else {
        color = (0, cvar_1.default)('dark-color-code-base');
    }
    let indicatorIcon = (react_1.default.createElement(StepCircle, { color: color, borderWidth: active ? (small ? 4 : 6) : 2, size: size, filled: filled }));
    if (icon && !small) {
        const indicatorIconStyle = (0, css_1.css) `
      display: flex;
      align-items: center;
      justify-content: center;
      height: ${size}px;
      width: ${size}px;
      background: ${color};
      color: white;
      border-radius: 100%;
    `;
        indicatorIcon = react_1.default.createElement("div", { className: (0, css_1.cx)(indicatorIconStyle) }, icon);
    }
    else if (partial) {
        indicatorIcon = react_1.default.createElement(StepHalfCircle, { color: color, size: size });
    }
    let stepperStyle;
    let indicatorStyle;
    let childrenStyle;
    const tooltipStyle = (0, css_1.css) `
    padding: inherit;
  `;
    if (vertical) {
        stepperStyle = (0, css_1.css) `
      text-align: center;
      background-color: inherit;
      border: none;
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: ${onClick ? 'pointer' : 'default'};
    `;
        indicatorStyle = (0, css_1.css) `
      display: flex;
      justify-content: center;
    `;
        childrenStyle = (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-8')} 0px;
      margin-left: 10px;
      text-shadow: ${active ? pseudobold : 'none'};
    `;
    }
    else {
        stepperStyle = (0, css_1.css) `
      padding: ${small ? '0 4px' : '0 8px'};
      textalign: center;
      width: inherit;
      cursor: ${onClick ? 'pointer' : 'default'};
    `;
        indicatorStyle = (0, css_1.css) `
      display: flex;
      justify-content: center;
      padding-bottom: ${children ? '0' : '8px'};
    `;
        childrenStyle = (0, css_1.css) `
      padding: ${(0, cvar_1.default)('spacing-8')} 0px;
      text-shadow: ${active ? pseudobold : 'none'};
    `;
    }
    const { activeSubStep, connectorColor } = rest, restProps = __rest(rest, ["activeSubStep", "connectorColor"]);
    const step = (react_1.default.createElement(internal_1.BlockButton, Object.assign({ className: (0, css_1.cx)('crc-stepper-step', stepperStyle, { clickable: !!onClick }, className), style: Object.assign({}, style), onClick: handleClick }, restProps),
        react_1.default.createElement("div", { className: (0, css_1.cx)(indicatorStyle) }, indicatorIcon),
        children && (!small || vertical) ? react_1.default.createElement("div", { className: (0, css_1.cx)(childrenStyle) }, children) : null));
    return tip ? (react_1.default.createElement(Tooltip_1.Tooltip, { direction: tipDirection, contents: tip, className: tooltipStyle }, step)) : (step);
};
exports.Step = Step;
//# sourceMappingURL=Step.js.map