@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.js';
import { Icon } from './icon.js';
import { useIsLargerThanPhone } from './use-media-query.js';
const setIconStateFill = (iconState, theme) => {
    return iconState && ['active', 'complete'].includes(iconState) ? theme.navPrimary : theme.navNeutral400;
};
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.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.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 = styled(Icon).withConfig({ displayName: "brc-sc-StyledIcon", componentId: "brc-sc-13hdxdb" }) `
  fill: ${({ $iconState, theme }) => setIconStateFill($iconState, theme)};
`;
const FlowIcon = ({ icon, currentState }) => {
    const [lineLength, setLineLength] = 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 (_jsxs("svg", { viewBox: `0 0 ${circleContainer} ${circleContainer}`, children: [_jsx(IconBase, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, "$iconState": currentState }), currentState && ['active', 'complete'].includes(currentState) && (_jsx(ActiveStatus, { strokeWidth: strokeWidth, cx: centerPoint, cy: centerPoint, r: circleRadius, ref: pathLength, lineLength: lineLength })), _jsx(StyledIcon, { name: currentState !== 'complete' ? icon : 'actions/check-circle', x: iconCenter, y: iconCenter, "$iconState": currentState })] }));
};
const IconStepContainer = styled.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.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;
    }
  }
`;
export const FlowSteps = ({ currentPath, flow = [], endLocation, 'data-testid': dataTestid, className, }) => {
    const step = flow.findIndex((path) => path.route === currentPath);
    const isDesktop = useIsLargerThanPhone();
    return (_jsxs(StyledStatusBar, { iconCount: flow.length, "data-testid": dataTestid, className: className, children: [flow.map((item, i) => (_jsxs(IconStepContainer, { children: [_jsx(FlowIcon, { icon: item.icon, 
                        // eslint-disable-next-line no-nested-ternary
                        currentState: item.route === currentPath ? 'active' : i >= step ? 'incomplete' : 'complete' }), _jsx(Copy, { size: isDesktop ? 'sm' : 'xs', children: item.name })] }, i))), endLocation && (_jsxs(IconStepContainer, { children: [_jsx(FlowIcon, { icon: endLocation.icon }), _jsx(Copy, { size: isDesktop ? 'sm' : 'xs', children: endLocation.name })] }))] }));
};
//# sourceMappingURL=flow-steps.js.map