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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import styled, { css, keyframes } from 'styled-components';
import Copy from './copy';
import Icon from './icon.js';
const pop = keyframes `
  0% { transform: scale(0.9); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
`;
const popAnimation = () => css `
  animation: ${pop} 0.3s ${({ theme }) => theme.materialTransitionTiming};
  transform-origin: center;
`;
const dash = keyframes `
    to { stroke-dashoffset: 0; }
`;
const IconBase = styled.circle `
  fill: ${({ theme }) => theme.neutral100};
  stroke: ${({ theme }) => theme.neutral200};
  stroke-width: ${({ strokeWidth }) => strokeWidth};
  ${({ iconState }) => iconState === 'complete' && popAnimation}
`;
const ActiveStatus = styled.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 = styled(Icon) `
  fill: ${({ iconState, theme }) => (iconState === 'active' ? theme.bubbleBlue500 : theme.neutral300)};
`;
const FlowIcon = ({ icon, currentState }) => {
    const [lineLength, setLineLength] = 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 (_jsxs("svg", Object.assign({ viewBox: `0 0 ${circleContainer} ${circleContainer}` }, { children: [_jsx(IconBase, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, iconState: currentState }, void 0), currentState === 'active' && (_jsx(ActiveStatus, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, ref: pathLength, lineLength: lineLength }, void 0)), _jsx(StyledIcon, { name: currentState !== 'complete' ? icon : 'actions/check-circle', x: iconCenter, y: iconCenter, iconState: currentState }, void 0)] }), void 0));
};
const IconStepContainer = styled.div `
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 80px;
  z-index: 1;
`;
const iconWidth = 80;
const StyledStatusBar = styled.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;
  }
`;
export default ({ currentPath, flow = [], endLocation }) => {
    const step = flow.findIndex((path) => path.route === currentPath);
    return (_jsxs(StyledStatusBar, Object.assign({ iconCount: flow.length }, { children: [flow.map((item, i) => (_jsxs(IconStepContainer, { children: [_jsx(FlowIcon, { icon: item.icon, currentState: item.route === currentPath ? 'active' : i >= step ? 'incomplete' : 'complete' }, void 0), _jsx(Copy, Object.assign({ size: "sm" }, { children: item.name }), void 0)] }, i))), endLocation && (_jsxs(IconStepContainer, { children: [_jsx(FlowIcon, { icon: endLocation.icon }, void 0), _jsx(Copy, Object.assign({ size: "sm" }, { children: endLocation.name }), void 0)] }, void 0))] }), void 0));
};
//# sourceMappingURL=flow-steps.js.map