@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;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importStar(require("styled-components"));
const copy_1 = __importDefault(require("./copy"));
const icon_js_1 = __importDefault(require("./icon.js"));
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 `
  fill: ${({ theme }) => theme.neutral100};
  stroke: ${({ theme }) => theme.neutral200};
  stroke-width: ${({ strokeWidth }) => strokeWidth};
  ${({ iconState }) => iconState === 'complete' && popAnimation}
`;
const ActiveStatus = styled_components_1.default.circle `
  stroke-linecap: round;
  stroke-width: ${({ strokeWidth }) => strokeWidth};
  transform: rotate(-90deg);
  transform-origin: center;
  stroke-dasharray: ${({ lineLength }) => lineLength};
  stroke-dashoffset: ${({ lineLength }) => lineLength};
  stroke: ${({ theme }) => theme.bubbleBlue500};
  animation: ${dash} 1s forwards;
  fill: none;
`;
const StyledIcon = (0, styled_components_1.default)(icon_js_1.default) `
  fill: ${({ iconState, theme }) => (iconState === 'active' ? theme.bubbleBlue500 : theme.neutral300)};
`;
const FlowIcon = ({ icon, currentState }) => {
    const [lineLength, setLineLength] = (0, react_1.useState)(0);
    const strokeWidth = 4;
    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", Object.assign({ viewBox: `0 0 ${circleContainer} ${circleContainer}` }, { children: [(0, jsx_runtime_1.jsx)(IconBase, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, iconState: currentState }, void 0), currentState === 'active' && ((0, jsx_runtime_1.jsx)(ActiveStatus, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, ref: pathLength, lineLength: lineLength }, void 0)), (0, jsx_runtime_1.jsx)(StyledIcon, { name: currentState !== 'complete' ? icon : 'actions/check-circle', x: iconCenter, y: iconCenter, iconState: currentState }, void 0)] }), void 0));
};
const IconStepContainer = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 80px;
  z-index: 1;
`;
const iconWidth = 80;
const StyledStatusBar = styled_components_1.default.div `
  width: 100%;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, ${iconWidth}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.neutral200};
    top: ${iconWidth / 2}px;
  }
`;
exports.default = ({ currentPath, flow = [], endLocation }) => {
    const step = flow.findIndex((path) => path.route === currentPath);
    return ((0, jsx_runtime_1.jsxs)(StyledStatusBar, Object.assign({ iconCount: flow.length }, { children: [flow.map((item, i) => ((0, jsx_runtime_1.jsxs)(IconStepContainer, { children: [(0, jsx_runtime_1.jsx)(FlowIcon, { icon: item.icon, currentState: item.route === currentPath ? 'active' : i >= step ? 'incomplete' : 'complete' }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ size: "sm" }, { children: item.name }), void 0)] }, i))), endLocation && ((0, jsx_runtime_1.jsxs)(IconStepContainer, { children: [(0, jsx_runtime_1.jsx)(FlowIcon, { icon: endLocation.icon }, void 0), (0, jsx_runtime_1.jsx)(copy_1.default, Object.assign({ size: "sm" }, { children: endLocation.name }), void 0)] }, void 0))] }), void 0));
};
//# sourceMappingURL=flow-steps.js.map