impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Badge/stroke/strokeIconLabelBadges/index.js

@@ -1,38 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function StrokeIconLabelBadges({
-  color,
-  label,
-  icon,
-  size,
-  ...args
-}) {
-  // this function fetch class name according to given props color
-  const getStrokeBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-stroke";
-      case "error":
-        return "error-badge-stroke";
-      case "warning":
-        return "warning-badge-stroke";
-      case "success":
-        return "success-badge-stroke";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_icon_label_stroke ${getStrokeBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      icon={icon}
-      label={label}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/stroke/strokeIconLabelBadges/strokeIconLabelBadges.styles.scss

@@ -1,33 +0,0 @@
-.MuiChip-root.impact_badges_icon_label_stroke {
-  height: 24px;
-  border: 1px solid $grayBadge;
-  padding: 2px 8px;
-  max-width: max-content;
-  background: $whiteColor;
-  cursor: default;
-  .MuiChip-label {
-    padding: 0px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    font-family: $fontFamily;
-    color: $grayBadge;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-    color: $grayBadge;
-    font-size: 14px !important;
-    margin: 0 6px 0 0px !important;
-  }
-
-  &:hover {
-    background: $whiteColor;
-  }
-}

package/src/components/Badge/stroke/strokeOnlyIconBadges/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function StrokeOnlyIconBadges({ color, icon, size, ...args }) {
-  /// this function fetch class name according to given props color
-  const getStrokeBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-stroke";
-      case "error":
-        return "error-badge-stroke";
-      case "warning":
-        return "warning-badge-stroke";
-      case "success":
-        return "success-badge-stroke";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_only_icon_stroke ${getStrokeBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      icon={icon}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/stroke/strokeOnlyIconBadges/strokeOnlyIconBadges.styles.scss

@@ -1,27 +0,0 @@
-.MuiChip-root.impact_badges_only_icon_stroke {
-  width: 24px;
-  height: 24px;
-  max-width: 24px;
-  padding: 4px;
-  border: 1px solid $deactivateColor;
-  background: $whiteColor;
-  cursor: default !important;
-  &.small-badge {
-    height: 20px;
-    width: 20px;
-  }
-  svg {
-    color: $grayBadge;
-    width: 14px;
-    height: 14px;
-    font-size: 14px !important;
-    margin: 0px !important;
-  }
-  span {
-    display: none;
-  }
-
-  &:hover {
-    background: $textButtonPrimaryBg;
-  }
-}

package/src/components/Badge/stroke/strokeOnlyLabelBadges/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function StrokeOnlyLabelBadges({ color, label, size, ...args }) {
-  // this function fetch class name according to given props color
-  const getStrokeBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-stroke";
-      case "error":
-        return "error-badge-stroke";
-      case "warning":
-        return "warning-badge-stroke";
-      case "success":
-        return "success-badge-stroke";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_only_label_stroke ${getStrokeBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      label={label}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/stroke/strokeOnlyLabelBadges/strokeOnlyLabelBadges.styles.scss

@@ -1,89 +0,0 @@
-.MuiChip-root.impact_badges_only_label_stroke {
-  height: 24px;
-  border: 1px solid $grayBadge;
-  background: $whiteColor;
-  padding: 2px 8px;
-  max-width: max-content;
-  .MuiChip-label {
-    padding: 0px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    font-family: $fontFamily;
-    color: $grayBadge;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-
-  &:hover {
-    background: $whiteColor;
-  }
-}
-
-.MuiChip-root.info-badge-stroke {
-  border: 1px solid $primaryBadge;
-  background: $whiteColor;
-  .MuiChip-label {
-    color: $primaryColor;
-  }
-
-  svg {
-    color: $primaryColor;
-  }
-
-  &:hover {
-    background-color: $whiteColor;
-  }
-}
-
-.MuiChip-root.success-badge-stroke {
-  border: 1px solid $greenBadge;
-  background: $whiteColor;
-  .MuiChip-label {
-    color: $greenBadge;
-  }
-
-  svg {
-    color: $greenBadge;
-  }
-
-  &:hover {
-    background: $whiteColor;
-  }
-}
-
-.MuiChip-root.warning-badge-stroke {
-  border: 1px solid $yellowBadgeOutlined;
-  background: $whiteColor;
-  .MuiChip-label {
-    color: $yellowBadgeOutlined;
-  }
-
-  svg {
-    color: $yellowBadgeOutlined;
-  }
-
-  &:hover {
-    background: $whiteColor;
-  }
-}
-
-.MuiChip-root.error-badge-stroke {
-  border: 1px solid $subtleErrorFontColor;
-  background: $whiteColor;
-  .MuiChip-label {
-    color: $subtleErrorFontColor;
-  }
-
-  svg {
-    color: $subtleErrorFontColor;
-  }
-
-  &:hover {
-    background: $whiteColor;
-  }
-}

package/src/components/Badge/styles.css

@@ -1,52 +0,0 @@
-.impact_toast.MuiChip-root {
-  border-radius: 4px;
-  height: 26px;
-  background: #ebecf0;
-  color: #758490;
-  font-size: 12px;
-  padding: 4px 8px;
-  box-sizing: border-box;
-}
-.impact_toast.MuiChip-root.small_chip {
-  height: 22px;
-  padding: 2px 4px;
-}
-.impact_toast.MuiChip-root span {
-  padding: 0px;
-}
-.impact_toast.MuiChip-root.MuiChip-deletable span {
-  padding-right: 8px;
-}
-.impact_toast.MuiChip-root.MuiChip-deletable svg.MuiChip-deleteIcon {
-  width: 16px;
-  height: 16px;
-  margin: 0px;
-}
-.impact_toast.MuiChip-root.small_chip svg.MuiChip-deleteIcon {
-  width: 12px;
-  height: 12px;
-  margin: 0px;
-}
-.impact_toast.MuiChip-root.MuiChip-deletable:hover {
-  background: #e2e4ed;
-  cursor: pointer;
-}
-.impact_toast.MuiChip-root.Mui-disabled {
-  background: #efefef;
-  color: #c7c7c7;
-  opacity: 1;
-}
-.impact_chip_layout {
-  padding: 15px;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  flex-direction: column;
-  border: 1px solid #d4d4d4;
-  width: 100%;
-  margin: 0 15px !important;
-}
-.impact_chip_layout h1 {
-  font-weight: 600;
-  margin-bottom: 15px;
-}

package/src/components/Badge/subtle/index.js

@@ -1,41 +0,0 @@
-import React from "react";
-import SubtleIconLabelBadges from "./subtleIconLabelBadges";
-import SubtleOnlyIconBadges from "./subtleIOnlyIconBadges";
-import SubtleOnlyLabelBadges from "./subtleOnlyLabelBadges";
-
-export default function SubtleBadges({
-  label,
-  icon,
-  color,
-  isIcon,
-  size,
-  ...args
-}) {
-  if (isIcon && label) {
-    return (
-      <SubtleIconLabelBadges
-        label={label}
-        icon={icon}
-        color={color}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  if (isIcon && !label) {
-    return (
-      <SubtleOnlyIconBadges
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  return (
-    <SubtleOnlyLabelBadges label={label} color={color} size={size} {...args} />
-  );
-}

package/src/components/Badge/subtle/subtleIOnlyIconBadges/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function SubtleOnlyIconBadges({ color, icon, size, ...args }) {
-  // this function fetch class name according to given props color
-  const getFilledBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-subtle";
-      case "error":
-        return "error-badge-subtle";
-      case "warning":
-        return "warning-badge-subtle";
-      case "success":
-        return "success-badge-subtle";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_only_icon_subtle ${getFilledBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      icon={icon}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/subtle/subtleIOnlyIconBadges/subtleIOnlyIconBadges.scss

@@ -1,26 +0,0 @@
-.MuiChip-root.impact_badges_only_icon_subtle {
-  width: 24px;
-  height: 24px;
-  max-width: 24px;
-  padding: 4px;
-  background: $grayBadge;
-  cursor: default !important;
-  &.small-badge {
-    height: 20px;
-    width: 20px;
-  }
-  svg {
-    color: $whiteColor;
-    width: 14px;
-    height: 14px;
-    font-size: 14px !important;
-    margin: 0px !important;
-  }
-  span {
-    display: none;
-  }
-
-  &:hover {
-    background: $grayBadge;
-  }
-}

package/src/components/Badge/subtle/subtleIconLabelBadges/index.js

@@ -1,38 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function SubtleIconLabelBadges({
-  label,
-  icon,
-  color,
-  size,
-  ...args
-}) {
-  // this function fetch class name according to given props color
-  const getFilledBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-subtle";
-      case "error":
-        return "error-badge-subtle";
-      case "warning":
-        return "warning-badge-subtle";
-      case "success":
-        return "success-badge-subtle";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_icon_label_subtle ${getFilledBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      icon={icon}
-      label={label}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/subtle/subtleIconLabelBadges/subtleIconLabelBadges.scss

@@ -1,56 +0,0 @@
-.MuiChip-root.impact_badges_icon_label_subtle {
-  height: 24px;
-  background: $subtleDefaultColor;
-  padding: 2px 8px;
-  max-width: max-content;
-  cursor: default;
-  .MuiChip-label {
-    padding: 0px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    font-family: $fontFamily;
-    color: $grayBadge;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-    color: $grayBadge !important;
-    font-size: 14px !important;
-    margin: 0 6px 0 0px !important;
-  }
-
-  &:hover {
-    background: $subtleDefaultColor;
-  }
-}
-
-.MuiChip-root.info-badge-subtle {
-  svg {
-    color: $primaryBadge !important;
-  }
-}
-
-.MuiChip-root.success-badge-subtle {
-  svg {
-    color: $subtleSuccessFontColor !important;
-  }
-}
-
-.MuiChip-root.warning-badge-subtle {
-  svg {
-    color: $yellowBadgeOutlined !important;
-  }
-}
-
-.MuiChip-root.error-badge-subtle {
-  svg {
-    color: $subtleErrorFontColor !important;
-  }
-}

package/src/components/Badge/subtle/subtleOnlyLabelBadges/index.js

@@ -1,31 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function SubtleOnlyLabelBadges({ label, color, size, ...args }) {
-  // this function fetch class name according to given props color
-  const getFilledBadgesColor = (color) => {
-    switch (color) {
-      case "info":
-        return "info-badge-subtle";
-      case "error":
-        return "error-badge-subtle";
-      case "warning":
-        return "warning-badge-subtle";
-      case "success":
-        return "success-badge-subtle";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_only_label_subtle ${getFilledBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      label={label}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/subtle/subtleOnlyLabelBadges/subtleOnlyLabelBadges.scss

@@ -1,70 +0,0 @@
-.MuiChip-root.impact_badges_only_label_subtle {
-  height: 24px;
-  background: $subtleDefaultColor;
-  padding: 2px 8px;
-  max-width: max-content;
-  cursor: default;
-  .MuiChip-label {
-    padding: 0px;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    font-family: $fontFamily;
-    color: $grayBadge;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-    cursor: default !important;
-  }
-
-  &:hover {
-    background: $subtleDefaultColor;
-  }
-}
-
-.MuiChip-root.info-badge-subtle {
-  background: $subtleInfoColor;
-  .MuiChip-label {
-    color: $primaryBadge;
-  }
-  &:hover {
-    background: $subtleInfoColor;
-  }
-}
-
-.MuiChip-root.success-badge-subtle {
-  background: $subtleSuccessColor;
-  .MuiChip-label {
-    color: $subtleSuccessFontColor;
-  }
-  &:hover {
-    background: $subtleSuccessColor;
-  }
-}
-
-.MuiChip-root.warning-badge-subtle {
-  background: $subtleWarningColor;
-  .MuiChip-label {
-    color: $yellowBadgeOutlined;
-  }
-  &:hover {
-    background: $subtleWarningColor;
-  }
-}
-
-.MuiChip-root.error-badge-subtle {
-  background: $subtleErrorColor;
-  .MuiChip-label {
-    color: $subtleErrorFontColor;
-  }
-  &:hover {
-    background: $subtleErrorColor;
-  }
-}

package/src/components/BottomSheet/BottomSheet.styles.scss

@@ -1,46 +0,0 @@
-.bottom-sheet {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  transition: height 0.3s ease-in-out;
-
-  .MuiDialog-container {
-    align-items: flex-end;
-  }
-
-  .MuiDialog-paper {
-    margin: 0;
-    width: 100%;
-    max-width: 100%;
-    // height: 465px;
-    border-radius: 16px 16px 0 0;
-    transition: height 0.3s ease-in-out;
-  }
-
-  .ia_modalPopover.ia_modal_medium {
-    width: 100%;
-    transition: height 0.3s ease-in-out;
-  }
-
-  .ia_modalPopover {
-    position: absolute;
-    left: 0;
-    right: 0;
-    margin: auto;
-    bottom: 0;
-    background: #fff;
-    border-radius: 16px 16px 0 0;
-  }
-}
-.ia_modalHeader {
-  padding: 12px 16px;
-  padding-bottom: 24px;
-}
-
-.ia_modalBody {
-  top: 40px;
-}
-.modal-actions {
-  gap: 25px !important;
-}