MobileStepper Step.tsx

100% Statements 7/7

100% Branches 0/0

100% Functions 3/3

100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26  
 
 
 
10x
63x
25x
 
25x
 
 
25x
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { StepRecord } from "@features/GiveOnboarding/types";
import { LinearProgress } from "@mui/material";
import { styled } from "@theme/v2/Provider";
 
export const Step = ({ steps }: { steps: StepRecord }) => {
  const completedCount = steps.steps.filter((s) => s.completed).length;
  const progress = (completedCount / steps.steps.length) * 100;
 
  return <StyledLinearProgress variant="determinate" value={progress} />;
};
 
const StyledLinearProgress = styled(LinearProgress)(({ theme }) => ({
  height: 2,
  borderRadius: 6,
  backgroundColor: theme.palette.primitive?.transparent["darken-10"],
  width: "22%",
  overflow: "hidden",
 
  "& .MuiLinearProgress-bar": {
    backgroundColor: theme.palette.icon?.["icon-secondary"],
    borderRadius: 2,
    transition: "width 0.3s ease",
    minWidth: 0,
  },
}));