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