All files / src/theme/components checkbox.tsx

100% Statements 2/2
100% Branches 0/0
100% Functions 1/1
100% Lines 2/2

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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64                  484x                         6783x                                                                                  
import { Components } from "@mui/material";
// import { palette } from "@palette";
import {
  CheckboxIcon,
  CheckboxCheckedIcon,
  CheckboxIndeterminateIcon,
} from "@assets/rebrandIcons";
import { isSecondVersion } from "@theme/v2/utils";
 
export const checkbox: Components["MuiCheckbox"] = {
  defaultProps: {
    disableRipple: true,
    version: "one",
    icon: <CheckboxIcon />,
    checkedIcon: <CheckboxCheckedIcon />,
    indeterminateIcon: <CheckboxIndeterminateIcon />,
  },
 
  styleOverrides: {
    root: {
      variants: [
        {
          props: (props: any) => !isSecondVersion(props?.version),
          style: {
            padding: "0 9px 0 9px",
            // Show arrow on hover
            ":not(&.Mui-checked):not(&.MuiCheckbox-indeterminate):not(&.Mui-disabled) input:hover + svg > g > path":
              {
                stroke: "#E1E1DE",
              },
            // fill when disabled
            ":not(&.Mui-checked):not(&.MuiCheckbox-indeterminate) input:disabled + svg":
              {
                fill: "#B8B8B8",
              },
 
            "&.Mui-checked, &.MuiCheckbox-indeterminate": {
              "input:hover + svg": {
                borderRadius: 6,
                boxShadow: "0px 0px 2px #8F8F8F, 0px 0px 0px 2px #8F8F8F",
              },
 
              "input:disabled + svg": {
                boxShadow: "none",
                backgroundColor: "#A8A8A8",
              },
            },
 
            "input:focus + svg": {
              borderRadius: 6,
              boxShadow: "0px 0px 2px #8F8F8F, 0px 0px 0px 2px #8F8F8F",
            },
 
            "& .MuiSvgIcon-fontSizeSmall": {
              width: 18,
              height: 18,
            },
          },
        },
      ],
    },
  },
};