@navinc/base-react-components/cjs/flow-steps.js

Nav's Pattern Library

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlowSteps = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importStar(require("styled-components"));
const copy_js_1 = require("./copy.js");
const icon_js_1 = require("./icon.js");
const use_media_query_js_1 = require("./use-media-query.js");
const setIconStateFill = (iconState, theme) => {
    return iconState && ['active', 'complete'].includes(iconState) ? theme.navPrimary : theme.navNeutral400;
};
const pop = (0, styled_components_1.keyframes) `
  0% { transform: scale(0.9); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
`;
const popAnimation = () => (0, styled_components_1.css) `
  animation: ${pop} 0.3s ${({ theme }) => theme.materialTransitionTiming};
  transform-origin: center;
`;
const dash = (0, styled_components_1.keyframes) `
    to { stroke-dashoffset: 0; }
`;
const IconBase = styled_components_1.default.circle.withConfig({ displayName: "brc-sc-IconBase", componentId: "brc-sc-s5739f" }) `
  fill: ${({ theme }) => theme.navNeutral100};
  stroke: ${({ theme }) => theme.navNeutral300};
  stroke-width: ${({ strokeWidth }) => strokeWidth};
  ${({ $iconState }) => $iconState === 'complete' && popAnimation}
`;
const ActiveStatus = styled_components_1.default.circle.withConfig({ displayName: "brc-sc-ActiveStatus", componentId: "brc-sc-1arxav2" }) `
  stroke-linecap: round;
  stroke-width: ${({ strokeWidth }) => strokeWidth};
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: ${({ lineLength }) => lineLength};
  stroke-dashoffset: ${({ lineLength }) => lineLength};
  stroke: ${({ theme }) => theme.navPrimary400};
  animation: ${dash} 1s forwards;
  fill: none;
`;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-13hdxdb" }) `
  fill: ${({ $iconState, theme }) => setIconStateFill($iconState, theme)};
`;
const FlowIcon = ({ icon, currentState }) => {
    const [lineLength, setLineLength] = (0, react_1.useState)(0);
    const strokeWidth = 3;
    const circleContainer = 80;
    const circleDiameter = circleContainer * 0.75;
    const circleRadius = circleDiameter / 2 - strokeWidth / 2;
    const centerPoint = circleContainer / 2;
    const iconCenter = centerPoint - 12;
    const pathLength = (node) => { var _a, _b; return node !== null && setLineLength((_b = (_a = node === null || node === void 0 ? void 0 : node.getTotalLength) === null || _a === void 0 ? void 0 : _a.call(node)) !== null && _b !== void 0 ? _b : 0); };
    return ((0, jsx_runtime_1.jsxs)("svg", { viewBox: `0 0 ${circleContainer} ${circleContainer}`, children: [(0, jsx_runtime_1.jsx)(IconBase, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, "$iconState": currentState }), currentState && ['active', 'complete'].includes(currentState) && ((0, jsx_runtime_1.jsx)(ActiveStatus, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, ref: pathLength, lineLength: lineLength })), (0, jsx_runtime_1.jsx)(StyledIcon, { name: currentState !== 'complete' ? icon : 'actions/check-circle', x: iconCenter, y: iconCenter, "$iconState": currentState })] }));
};
const IconStepContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-IconStepContainer", componentId: "brc-sc-3vvr3m" }) `
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 80px;
  z-index: 1;
`;
const iconWidth = 80;
const mobileIconWidth = 40;
const StyledStatusBar = styled_components_1.default.div.withConfig({ displayName: "brc-sc-StyledStatusBar", componentId: "brc-sc-1pvqmi6" }) `
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, ${mobileIconWidth}px);
  justify-items: stretch;
  justify-content: space-between;

  &::before {
    content: '';
    display: ${(props) => props.iconCount <= 1 && 'none'};
    position: absolute;
    width: calc(100% - 40px);
    left: 20px;
    height: 2px;
    background: ${({ theme }) => theme.navNeutral300};
    top: ${mobileIconWidth / 2}px;
  }

  @media (${({ theme }) => theme.forLargerThanPhone}) {
    grid-template-columns: repeat(auto-fit, ${iconWidth}px);

    &::before {
      top: ${iconWidth / 2}px;
    }
  }
`;
const FlowSteps = ({ currentPath, flow = [], endLocation, 'data-testid': dataTestid, className, }) => {
    const step = flow.findIndex((path) => path.route === currentPath);
    const isDesktop = (0, use_media_query_js_1.useIsLargerThanPhone)();
    return ((0, jsx_runtime_1.jsxs)(StyledStatusBar, { iconCount: flow.length, "data-testid": dataTestid, className: className, children: [flow.map((item, i) => ((0, jsx_runtime_1.jsxs)(IconStepContainer, { children: [(0, jsx_runtime_1.jsx)(FlowIcon, { icon: item.icon, 
                        // eslint-disable-next-line no-nested-ternary
                        currentState: item.route === currentPath ? 'active' : i >= step ? 'incomplete' : 'complete' }), (0, jsx_runtime_1.jsx)(copy_js_1.Copy, { size: isDesktop ? 'sm' : 'xs', children: item.name })] }, i))), endLocation && ((0, jsx_runtime_1.jsxs)(IconStepContainer, { children: [(0, jsx_runtime_1.jsx)(FlowIcon, { icon: endLocation.icon }), (0, jsx_runtime_1.jsx)(copy_js_1.Copy, { size: isDesktop ? 'sm' : 'xs', children: endLocation.name })] }))] }));
};
exports.FlowSteps = FlowSteps;
//# sourceMappingURL=flow-steps.js.map