impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Checkbox/Checkbox.styles.scss

@@ -1,232 +0,0 @@
-@import "../../styles/index.scss";
-/* checkbox custom starts here  */
-
-.impact-form-checkbox-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin: 0px !important;
-
-  .MuiCheckbox-root.impact-checkbox-container {
-    padding: 4px !important;
-    background: #ffffff;
-    width: 16px;
-    height: 16px;
-    border-radius: 4px;
-    border: 1px solid $deactivateColor;
-    margin-right: 7px;
-  }
-
-  .MuiCheckbox-root.impact-checkbox-container:hover {
-    border: 1px solid $primaryColor;
-  }
-
-  .MuiCheckbox-root.impact-checkbox-container > svg {
-    width: 21px;
-    height: 21px;
-    fill: transparent;
-  }
-
-  .MuiCheckbox-root.default-variant.Mui-checked {
-    background: $lightBlueColor url("../../assets/tick.svg") no-repeat;
-    background-size: 10px;
-    background-position: center;
-    border: 1px solid $primaryColor;
-  }
-
-  .MuiCheckbox-root.default-variant.Mui-checked.Mui-disabled {
-    background: $disabledSecondaryBg url("../../assets/tick-disabled.svg")
-      no-repeat;
-    border: 1px solid $disabledSecondaryBorder;
-    background-size: cover;
-    background-size: 10px;
-    background-position: center;
-  }
-
-  .MuiCheckbox-root.dashed-variant.Mui-checked {
-    background: $lightBlueColor url("../../assets/checkbox-dash.svg") no-repeat !important;
-    border: 1px solid $primaryColor !important;
-    background-size: 10px !important;
-    background-position: center !important;
-  }
-
-  .MuiCheckbox-root.dashed-variant.Mui-checked.Mui-disabled {
-    background: $disabledSecondaryBg
-      url("../../assets/checkbox-dash-disabled.svg") no-repeat !important;
-    border: 1px solid $disabledSecondaryBorder !important;
-    background-size: cover !important;
-    background-size: 10px !important;
-    background-position: center !important;
-  }
-
-  .MuiFormControlLabel-root {
-    margin-left: 0px;
-  }
-
-  .MuiCheckbox-colorPrimary.impact_checkbox_custom.Mui-checked > svg {
-    fill: $lightBlueColor;
-    display: none;
-  }
-
-  .MuiCheckbox-root.Mui-disabled {
-    pointer-events: none;
-    border: 1px solid #d9dde7;
-    background-color: #f8f9fb;
-  }
-
-  .MuiCheckbox-root.MuiTypography-root {
-    font-family: $fontFamily;
-    font-weight: $normalFontWeight;
-  }
-
-  .MuiCheckbox-root.impact_checkbox_custom:hover {
-    border: 1px solid $primaryColor !important;
-  }
-  .MuiFormControlLabel-root:hover .impact_checkbox_custom {
-    border: 1px solid $primaryColor !important;
-  }
-
-  .MuiCheckbox-root.checkbox_custom:hover::after {
-    background: #fff;
-  }
-
-  .MuiCheckbox-root.MuiCheckbox-colorPrimary.impact_checkbox_custom.Mui-checked::after {
-    display: none;
-  }
-  .MuiCheckbox-root.impact_checkbox_custom.Mui-checked.Mui-disabled > svg {
-    fill: #efefef;
-  }
-
-  .MuiCheckbox-root.impact_checkbox_custom.impact_checkbox_dash.Mui-checked.Mui-disabled
-    > svg {
-    fill: #efefef;
-  }
-
-  .MuiCheckbox-root.impact_checkbox_custom.Mui-disabled::after {
-    background: #efefef;
-    border: 1px solid #d4d4d4;
-  }
-
-  .MuiCheckbox-root.impact_checkbox_custom:hover {
-    background-color: rgba(255, 255, 255, 0) !important;
-  }
-
-  .MuiTypography-root:hover .impact_checkbox_custom {
-    display: none !important;
-  }
-  .MuiFormControlLabel-asterisk {
-    color: #da1e28;
-  }
-
-  .impact-checkbox-label-with-required {
-    display: flex;
-    gap: 4px;
-    align-items: flex-start;
-    span {
-      color: $redBadge;
-    }
-  }
-  .MuiFormControlLabel-label {
-    align-items: center;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    color: #7a8294;
-    font-family: $fontFamily;
-  }
-
-  .impact-checkbox-label {
-    font-family: $fontFamily;
-    display: inline-block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    color: #7a8294;
-  }
-  .impact-checkbox-label.checked {
-    color: #0d152c;
-  }
-
-  .impact-checkbox-label.disabled {
-    color: #b4bac7;
-  }
-}
-
-.impact-form-checkbox-container.checked {
-  .MuiFormControlLabel-label {
-    color: #0d152c;
-  }
-}
-
-.MuiFormControlLabel-label.Mui-disabled {
-  color: #b4bac7 !important;
-}
-
-.impact-form-checkbox {
-  display: flex;
-  align-items: center;
-
-  .MuiCheckbox-root.impact-checkbox-container {
-    margin-right: 2px;
-    cursor: pointer;
-  }
-}
-
-.impact-arrow-button {
-  color: #60697d;
-  cursor: pointer;
-  font-size: 16px !important;
-}
-
-.impact-arrow-button.up {
-  transform: rotate(180deg);
-}
-
-.ia-styles.ia-checkbox-menu {
-  .MuiPaper-root {
-    background: #fff;
-    border: 1px solid $menuBorderColor;
-    box-shadow: 0px 1px 6px 0px rgba(26, 39, 124, 0.14);
-    border-radius: 12px;
-    padding: 0 6px;
-    max-height: 180px;
-    min-width: 240px;
-    margin-top: 4px;
-    margin-left: 7px;
-  }
-  .MuiList-root {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-  }
-  .MuiButtonBase-root {
-    font-size: 14px;
-    color: $mainFontColor;
-    font-family: $fontFamily;
-    font-weight: $normalFontWeight;
-    line-height: 20px;
-    height: 35px;
-    font-size: 14px;
-    padding: 0 12px;
-    display: flex;
-    gap: 8px;
-    align-items: center;
-
-    &.Mui-focusVisible {
-      background-color: transparent;
-    }
-
-    &:hover {
-      background: #f5f6fa;
-      border-radius: 8px;
-      color: $mainFontColor;
-    }
-  }
-  .css-kk1bwy-MuiButtonBase-root-MuiMenuItem-root.Mui-selected {
-    background-color: #eceefd;
-    border-radius: 8px;
-  }
-}

package/src/components/Checkbox/dashed/index.js

@@ -1,34 +0,0 @@
-import React from "react";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import MUICheckbox from "@mui/material/Checkbox";
-
-export default function Dashed({
-  defaultChecked,
-  checked,
-  onChange,
-  isRequired,
-  isDisabled,
-  label,
-  ...args
-}) {
-  return (
-    <FormControlLabel
-      className={`impact-form-checkbox-container ${
-        checked || defaultChecked ? "checked" : ""
-      }`}
-      control={
-        <MUICheckbox
-          {...args}
-          className="impact-checkbox-container dashed-variant"
-          defaultChecked={defaultChecked}
-          checked={checked}
-          onChange={onChange}
-          disableRipple={true}
-        />
-      }
-      required={isRequired}
-      disabled={isDisabled}
-      label={label}
-    />
-  );
-}

package/src/components/Checkbox/default/index.js

@@ -1,70 +0,0 @@
-import React from "react";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import MUICheckbox from "@mui/material/Checkbox";
-import WithoutFormLabel from "../withoutFormLabel";
-import WithDropDown from "../withDropDown";
-
-export default function Default({
-  defaultChecked,
-  checked,
-  onChange,
-  isRequired,
-  isDisabled,
-  label,
-  withoutFormLabel,
-  withDropDown,
-  dropDownData,
-  onDropDownCheckBoxClick,
-  ...args
-}) {
-  if (withoutFormLabel) {
-    return (
-      <WithoutFormLabel
-        {...args}
-        label={label}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onChange={onChange}
-      />
-    );
-  }
-
-  if (withDropDown && dropDownData && dropDownData.length > 0) {
-    return (
-      <WithDropDown
-        {...args}
-        label={label}
-        isDisabled={isDisabled}
-        isRequired={isRequired}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onChange={onChange}
-        dropDownData={dropDownData}
-        onDropDownCheckBoxClick={onDropDownCheckBoxClick}
-      />
-    );
-  }
-  return (
-    <FormControlLabel
-      className={`impact-form-checkbox-container ${
-        checked || defaultChecked ? "checked" : ""
-      }`}
-      control={
-        <MUICheckbox
-          {...args}
-          className="impact-checkbox-container default-variant"
-          defaultChecked={defaultChecked}
-          checked={checked}
-          onChange={onChange}
-          disabled={isDisabled}
-          disableRipple={true}
-        />
-      }
-      required={isRequired}
-      disabled={isDisabled}
-      label={label}
-    />
-  );
-}

package/src/components/Checkbox/index.js

@@ -1,50 +0,0 @@
-import React from "react";
-import Default from "./default";
-import Dashed from "./dashed";
-import "./Checkbox.styles.scss";
-
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
-
-export function Checkbox({
-  label,
-  variant,
-  disabled,
-  required,
-  defaultChecked,
-  checked,
-  onChange,
-  withoutFormLabel,
-  withDropDown,
-  dropDownData,
-  onDropDownCheckBoxClick,
-  ...args
-}) {
-  if (variant === "dashed") {
-    return (
-      <Dashed
-        {...args}
-        label={label}
-        isDisabled={disabled}
-        isRequired={required}
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onChange={onChange}
-      />
-    );
-  }
-  return (
-    <Default
-      {...args}
-      label={label}
-      isDisabled={disabled}
-      isRequired={required}
-      defaultChecked={defaultChecked}
-      checked={checked}
-      onChange={onChange}
-      withoutFormLabel={withoutFormLabel}
-      withDropDown={withDropDown}
-      dropDownData={dropDownData}
-      onDropDownCheckBoxClick={onDropDownCheckBoxClick}
-    />
-  );
-}

package/src/components/Checkbox/withDropDown/index.js

@@ -1,96 +0,0 @@
-import React, { useEffect } from "react";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import MUICheckbox from "@mui/material/Checkbox";
-import { KeyboardArrowDown } from "@mui/icons-material";
-import { useState } from "react";
-import MUIMenu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-
-export default function WithDropDown({
-  defaultChecked,
-  checked,
-  onChange,
-  isRequired,
-  isDisabled,
-  label,
-  dropDownData,
-  onDropDownCheckBoxClick,
-  ...args
-}) {
-  const [openDropDown, setOpenDropDown] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [selected, setSelected] = useState(null);
-  const isOpen = Boolean(anchorEl);
-
-  const onClose = () => {
-    setAnchorEl(null);
-    setOpenDropDown((prev) => !prev);
-  };
-
-  const hanldeClick = (event) => {
-    setOpenDropDown((prev) => !prev);
-    setAnchorEl(event.currentTarget);
-    onDropDownCheckBoxClick?.(event);
-  };
-
-  return (
-    <div className="impact-form-checkbox">
-      <div
-        onClick={hanldeClick}
-        style={{ display: "flex", alignItems: "center" }}
-      >
-        <FormControlLabel
-          className={`impact-form-checkbox-container ${
-            checked || defaultChecked ? "checked" : ""
-          }`}
-          control={
-            <MUICheckbox
-              {...args}
-              className="impact-checkbox-container default-variant"
-              defaultChecked={defaultChecked}
-              checked={checked}
-              onChange={onChange}
-              disabled={isDisabled}
-              disableRipple={true}
-            />
-          }
-          required={isRequired}
-          disabled={isDisabled}
-          label={label}
-        />
-        <KeyboardArrowDown
-          className={`impact-arrow-button ${openDropDown ? "up" : "down"}`}
-        />
-      </div>
-      <MUIMenu
-        id="basic-menu"
-        className="ia-styles ia-checkbox-menu"
-        anchorEl={anchorEl}
-        open={isOpen}
-        onClose={onClose}
-        MenuListProps={{
-          "aria-labelledby": "basic-button",
-        }}
-      >
-        {dropDownData.map((opt) => {
-          return (
-            <MenuItem
-              onClick={() => {
-                setSelected((prev) => (prev === opt.value ? null : opt.value));
-                opt.onClick && opt.onClick();
-                onClose();
-              }}
-              key={opt.label}
-              disableRipple
-              disableTouchRipple
-              disabled={opt.disabled}
-              selected={selected === opt.value}
-            >
-              {opt.label}
-            </MenuItem>
-          );
-        })}
-      </MUIMenu>
-    </div>
-  );
-}

package/src/components/Checkbox/withoutFormLabel/index.js

@@ -1,46 +0,0 @@
-import React from "react";
-import MUICheckbox from "@mui/material/Checkbox";
-
-export default function WithoutFormLabel({
-  defaultChecked,
-  checked,
-  onChange,
-  isDisabled,
-  label,
-  isRequired,
-  ...args
-}) {
-  return (
-    <div className="impact-form-checkbox-container">
-      <MUICheckbox
-        {...args}
-        className="impact-checkbox-container default-variant"
-        defaultChecked={defaultChecked}
-        checked={checked}
-        onChange={onChange}
-        disabled={isDisabled}
-        disableRipple={true}
-      />
-      {isRequired ? (
-        <div className="impact-checkbox-label-with-required">
-          <div
-            className={`impact-checkbox-label ${
-              checked || defaultChecked ? "checked" : ""
-            } ${isDisabled ? "disabled" : ""}`}
-          >
-            {label}
-          </div>
-          <span>*</span>
-        </div>
-      ) : (
-        <div
-          className={`impact-checkbox-label ${
-            checked || defaultChecked ? "checked" : ""
-          } ${isDisabled ? "disabled" : ""}`}
-        >
-          {label}
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/Chips/Chip.style.scss

@@ -1,134 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-chip-container {
-  .MuiChip-filled {
-    min-width: 83px;
-    height: 32px;
-    background: #ffffff;
-    border-radius: 12px;
-    padding: 6px 12px;
-    border: 1px solid $disabledSecondaryBorder;
-    cursor: pointer;
-    &:hover {
-      background: $lightBlueColor;
-      border-color: $secondaryColor;
-      .MuiChip-label {
-        color: $secondaryColor;
-      }
-    }
-
-    // &:focus {
-    //   background: #ffffff;
-    //   outline: 3px solid $lightBlueColor;
-    //   border: none;
-    // }
-
-    &:active {
-      background: #ffffff;
-      border-color: $primaryColor;
-    }
-
-    .MuiChip-label {
-      font-family: $fontFamily;
-      font-size: $normalFontSize;
-      font-weight: $normalFontWeight;
-      color: $textButtonFontColor;
-      line-height: 20px;
-      padding-inline: 4px;
-    }
-  }
-
-  .Mui-disabled {
-    border-color: $disabledSecondaryBorder;
-    background: $disabledSecondaryBg;
-    opacity: 1;
-    border: 1px solid $outerBorder !important;
-
-    .MuiChip-label {
-      color: $lightGrayColor;
-    }
-  }
-
-  &.single:not(.selected) {
-    .MuiChip-filled {
-      flex-direction: row-reverse;
-      background-image: url("../../assets/radioButton.svg");
-      background-position: left 12px center;
-      background-repeat: no-repeat;
-      .MuiChip-label {
-        margin-left: 20px;
-        margin-bottom: 1px;
-      }
-      &:hover {
-        background-image: url("../../assets/radioButtonChipHover.svg");
-      }
-    }
-    .Mui-disabled {
-      background-image: url("../../assets/radioButtonChipDisable.svg");
-    }
-  }
-
-  &.single.selected {
-    .MuiChip-filled {
-      background-image: url("../../assets/radioButtonFilledChip.svg");
-      background-position: left 12px center;
-      background-repeat: no-repeat;
-      .MuiChip-label {
-        margin-left: 20px;
-        margin-bottom: 1px;
-      }
-    }
-    .Mui-disabled {
-      background-image: url("../../assets/radioButtonFilledDisable.svg");
-      border: 1px solid $accordionBgBackground !important;
-      background-position: left 12px center;
-      background-repeat: no-repeat;
-      .MuiChip-label {
-        color: $accordionBgBackground !important;
-      }
-    }
-  }
-
-  &.multi {
-    .MuiChip-filled {
-      flex-direction: row-reverse;
-      background-image: url("../../assets/checkMarkChip.svg");
-      background-position: left 12px center;
-      background-repeat: no-repeat;
-      .MuiChip-label {
-        margin-left: 16px;
-        margin-bottom: 1px;
-      }
-      &:hover {
-        background-image: url("../../assets/checkMarkChipHover.svg");
-      }
-    }
-    .Mui-disabled {
-      background-image: url("../../assets/checkMarkChipDisable.svg");
-    }
-    &.selected {
-      .MuiChip-filled {
-        background-image: url("../../assets/checkMarkChipHover.svg");
-      }
-      .Mui-disabled {
-        background-image: url("../../assets/checkMarkActiveDisable.svg");
-        border: 1px solid $accordionBgBackground !important;
-        background-position: left 12px center;
-        background-repeat: no-repeat;
-        .MuiChip-label {
-          color: $accordionBgBackground !important;
-        }
-      }
-    }
-  }
-
-  &.selected {
-    .MuiChip-filled {
-      flex-direction: row-reverse;
-      border-color: $primaryColor;
-      .MuiChip-label {
-        color: $primaryColor;
-      }
-    }
-  }
-}

package/src/components/Chips/index.js

@@ -1,34 +0,0 @@
-import React, { useState } from "react";
-import Chip from "@mui/material/Chip";
-import "./Chip.style.scss";
-import PropTypes from "prop-types";
-
-export const Chips = ({
-  label,
-  onClick,
-  disabled,
-  type = "default",
-  isActive = false,
-  ...args
-}) => {
-  return (
-    <div
-      className={`impact-chip-container ${type} ${isActive ? "selected" : ""}`}
-    >
-      <Chip
-        label={label}
-        onClick={() => onClick?.(label)}
-        disabled={disabled}
-        disableRipple
-        {...args}
-      />
-    </div>
-  );
-};
-
-Chips.propTypes = {
-  label: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  disabled: PropTypes.bool,
-  type: PropTypes.string,
-};