@parkassist/pa-ui-library/dist/components/MaterialSteps/index.js

INX Platform elements

import { jsx as _jsx } from "react/jsx-runtime";
import styled from "@emotion/styled";
import { Check } from "@mui/icons-material";
import Box from '@mui/material/Box';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import Stepper from '@mui/material/Stepper';
import Typography from '@mui/material/Typography';
import Palette from "../../constants/Palette";
const NumberStep = styled.div(() => ({
  backgroundColor: "black",
  color: "white",
  width: 20,
  height: 20,
  fontSize: 12,
  display: 'flex',
  justifyContent: "center",
  alignItems: "center",
  borderRadius: "50%"
}));
export function MaterialStepList(props) {
  const {
    stepList,
    activeStep,
    width,
    clickable,
    onStepClick,
    failed
  } = props;
  return _jsx(Box, {
    sx: {
      width: width || "100%",
      height: 88,
      padding: 3,
      backgroundColor: Palette.WHITE_SMOKE,
      fontFamily: "Poppins"
    },
    children: _jsx(Stepper, {
      activeStep: activeStep,
      children: stepList.map(({
        label,
        subLabel
      }, index) => {
        const isFuture = index > activeStep;
        const isPast = index < activeStep;
        const isCurrent = index === activeStep;
        const extraIconStuff = isCurrent && failed ? {} : {
          StepIconComponent: () => {
            if (isCurrent && failed) {
              return undefined;
            }
            if (isPast) {
              return _jsx(NumberStep, {
                style: {
                  backgroundColor: Palette.SUCCESS_GREEN
                },
                children: _jsx(Check, {
                  style: {
                    width: 14,
                    height: 14
                  }
                })
              });
            }
            return _jsx(NumberStep, {
              style: {
                opacity: isFuture ? 0.7 : 1
              },
              children: index + 1
            });
          }
        };
        let color = Palette.BLACK;
        if (isPast) {
          color = Palette.SUCCESS_GREEN;
        }
        if (failed && isCurrent) {
          color = Palette.ERROR_RED;
        }
        const subLabelComponent = _jsx(Typography, {
          style: {
            color: Palette.DIM_GREY,
            fontSize: 14,
            fontFamily: "Poppins"
          },
          children: subLabel
        });
        return _jsx(Step, {
          children: _jsx(StepLabel, Object.assign({
            onClick: () => clickable && onStepClick(index),
            style: {
              fontFamily: "Poppins",
              opacity: isFuture ? 0.7 : 1,
              color: "RED",
              cursor: clickable ? "pointer" : "initial"
            },
            optional: subLabelComponent,
            StepIconProps: {
              color: "black"
            },
            error: isCurrent && failed
          }, extraIconStuff, {
            children: _jsx("div", {
              style: {
                color,
                fontSize: 14,
                fontFamily: "Poppins"
              },
              children: label
            })
          }))
        }, label);
      })
    })
  });
}