@navinc/base-react-components/dist/progress-bar.js

Nav's Pattern Library

import { jsx as _jsx } from "react/jsx-runtime";
import { clamp } from '@navinc/utils';
import { useEffect, useRef, useState } from 'react';
import styled, { css, keyframes } from 'styled-components';
const progressClamp = clamp(0, 100);
export const ProgressBarSection = styled.div.withConfig({ displayName: "brc-sc-ProgressBarSection", componentId: "brc-sc-8efact" }) `
  height: 8px;
  background-color: ${({ theme }) => theme.navNeutral100};
  display: inline-block;
  width: 100%;
  border-radius: 8px;
`;
const advanceProgress = (prevWidth) => keyframes `
  from {
    width: ${progressClamp(prevWidth)}%;
  }
`;
const animation = ({ prevWidth }) => css `
  animation: ${advanceProgress(prevWidth)} 1s forwards;
`;
const Progress = styled.div.withConfig({ displayName: "brc-sc-Progress", componentId: "brc-sc-ze1h9f" }) `
  background-color: ${({ bgColor, theme }) => bgColor || theme.navPrimary400};
  height: 8px;
  width: ${({ percent }) => progressClamp(percent)}%;
  border-radius: 8px;
  ${animation};
`;
const _ProgressBar = ({ bgColor, percent, className }) => {
    const prevWidth = useRef(0);
    const nextWidth = useRef(0);
    const [progress, setProgress] = useState(0);
    /*
      Keeps track of previous percentage completion, setting 'to' and 'from' values for animation.
      Updates state to set up animation for next time the percent completion changes.
    */
    useEffect(() => {
        prevWidth.current = progress;
    }, [progress]);
    useEffect(() => {
        nextWidth.current = percent;
        setProgress(percent);
    }, [percent]);
    return (_jsx(ProgressBarSection, { className: className, "data-testid": "progress-bar:container", children: _jsx(Progress, { "data-testid": "progress-bar:step-fill", bgColor: bgColor, percent: nextWidth.current, prevWidth: prevWidth.current }) }));
};
export const ProgressBar = styled(_ProgressBar).withConfig({ displayName: "brc-sc-ProgressBar", componentId: "brc-sc-wh5p3k" }) ``;
//# sourceMappingURL=progress-bar.js.map