impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Alert/Alert.styles.scss

@@ -1,131 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-alert {
-  position: relative;
-  font-family: $fontFamily !important;
-  border: 1px solid #c4e8d5;
-  min-height: 36px;
-  box-sizing: border-box;
-  font-size: 12px !important;
-  font-weight: $normalFontWeight;
-  border-radius: $borderRadius;
-  min-width: 385px;
-  box-shadow: 0px 0px 16px 5px #0000001f;
-  padding: 8px 16px !important;
-  display: flex;
-  align-items: flex-start;
-
-  .description {
-    color: $textButtonFontColor;
-    font-size: 12px;
-    word-break: break-word;
-  }
-
-  .MuiAlert-message {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    flex-grow: 1;
-    gap: 4px;
-    overflow: initial;
-
-    button {
-      text-transform: none;
-      min-width: 0;
-      padding: 0px;
-      height: 16px;
-      color: $secondaryColor;
-      font-weight: 500;
-      font-size: 12px;
-      &:not(:last-child) {
-        margin-right: 6px;
-      }
-
-      .MuiTouchRipple-root {
-        visibility: hidden;
-      }
-    }
-    .close_btn_alert {
-      color: $textButtonFontColor;
-      background: transparent;
-      &:hover svg {
-        color: $textButtonFontColor !important;
-        path {
-          fill: $textButtonFontColor !important;
-        }
-      }
-      &:focus {
-        outline: 3px solid transparent;
-      }
-    }
-    .ia-alert-body {
-      padding: 0px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 4px;
-
-      & > .MuiTypography-root {
-        flex-grow: 1;
-        margin-bottom: 0px;
-        font-size: 14px;
-        font-weight: 500;
-        color: $darkColor;
-        font-family: $fontFamily;
-      }
-    }
-  }
-}
-
-.ia-styles.ia-alert.ia-subtleBackground {
-  box-shadow: none !important;
-  border: none !important;
-}
-
-.ia-styles.ia-alert .MuiButtonBase-root:hover {
-  background-color: transparent;
-  color: $buttonHoverColor;
-}
-
-.ia-styles.ia-alert .MuiAlert-icon {
-  margin-right: 12px;
-  font-size: 18px;
-  opacity: 1;
-  align-items: flex-start;
-  margin-top: -2px;
-  padding: 0;
-}
-
-.ia-styles.ia-alert.MuiAlert-standardSuccess {
-  background: $successBackground;
-  border: 1px solid $successStroke;
-
-  .MuiAlert-icon {
-    color: $successIconColor;
-  }
-}
-.ia-styles.ia-alert.MuiAlert-standardInfo {
-  background: $infoBackground;
-  border: 1px solid $infoStroke;
-
-  .MuiAlert-icon {
-    color: $primaryColor;
-  }
-}
-.ia-styles.ia-alert.MuiAlert-standardWarning {
-  background: $warningBackground;
-  border: 1px solid $warningStroke;
-
-  .MuiAlert-icon {
-    color: $warningAlertIcon;
-  }
-}
-.ia-styles.ia-alert.MuiAlert-standardError {
-  background: $errorBackground;
-  border: 1px solid $errorStroke;
-
-  .MuiAlert-icon {
-    color: $destructiveBg;
-  }
-}

package/src/components/Alert/index.js

@@ -1,71 +0,0 @@
-import React from "react";
-import MUIAlert from "@mui/material/Alert";
-import MUIAlertTitle from "@mui/material/AlertTitle";
-import PropTypes from "prop-types";
-import CloseIcon from "@mui/icons-material/Close";
-import CheckCircleIcon from "@mui/icons-material/CheckCircle";
-import InfoIcon from "@mui/icons-material/Info";
-import WarningIcon from "@mui/icons-material/Warning";
-import CancelIcon from "@mui/icons-material/Cancel";
-
-import { Button } from "../Button";
-
-import "./Alert.styles.scss";
-
-export const Alert = ({
-  severity,
-  title,
-  description = "",
-  actionName = "",
-  onAction = undefined,
-  onClose = undefined,
-  actionButtonProps,
-  children,
-  subtleBackground,
-  ...args
-}) => {
-  return (
-    <MUIAlert
-      iconMapping={{
-        success: <CheckCircleIcon fontSize="small" />,
-        info: <InfoIcon fontSize="small" />,
-        warning: <WarningIcon fontSize="small" />,
-        error: <CancelIcon fontSize="small" />,
-      }}
-      className={`ia-styles ia-alert ${
-        subtleBackground ? "ia-subtleBackground" : ""
-      }`}
-      severity={severity}
-      {...args}
-    >
-      <div className="ia-alert-body">
-        <MUIAlertTitle>{title || severity}</MUIAlertTitle>
-        {actionName && onAction ? (
-          <Button variant="url" size="small" onClick={onAction}>
-            {actionName}
-          </Button>
-        ) : null}
-        {onClose ? (
-          <Button
-            variant="text"
-            size="small"
-            onClick={onClose}
-            className="close_btn_alert"
-          >
-            <CloseIcon fontSize="small" />
-          </Button>
-        ) : null}
-      </div>
-      {description ? <span className="description">{description}</span> : null}
-    </MUIAlert>
-  );
-};
-
-Alert.propTypes = {
-  severity: PropTypes.string,
-  title: PropTypes.string,
-  description: PropTypes.string,
-  actionName: PropTypes.string,
-  onAction: PropTypes.func,
-  onClose: PropTypes.func,
-};

package/src/components/Avatar/Avatar.styles.scss

@@ -1,25 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-avatar {
-  background-color: $successIconColor;
-  color: $whiteColor;
-  font-family: $fontFamily;
-  font-weight: $ExtraFontWeight;
-  border-radius: 12px;
-
-  &.ia-avatar-small {
-    height: 36px;
-    width: 36px;
-    font-size: $smallFontSize;
-  }
-  &.ia-avatar-medium {
-    height: $Component48px;
-    width: $Component48px;
-    font-size: $mediumFontSize;
-  }
-  &.ia-avatar-large {
-    height: 64px;
-    width: 64px;
-    font-size: $largeFontSize;
-  }
-}

package/src/components/Avatar/index.js

@@ -1,58 +0,0 @@
-import React, { useMemo } from "react";
-import PropTypes from "prop-types";
-import MUIAvatar from "@mui/material/Avatar";
-import "./Avatar.styles.scss";
-
-export const Avatar = ({
-  label = "Unknown",
-  type = "withoutPicture",
-  src = undefined,
-  size = "large",
-  ...args
-}) => {
-  const initials =
-    type !== "withPicture"
-      ? label
-          ?.trim()
-          .split(" ")
-          .filter((e) => e)
-          .map((e) => e[0].toUpperCase())
-          .join("")
-      : "";
-
-  const className = useMemo(() => {
-    let retVal = "ia-styles ia-avatar";
-
-    switch (size) {
-      case "small":
-        retVal += " ia-avatar-small";
-        break;
-      case "medium":
-        retVal += " ia-avatar-medium";
-        break;
-      case "large":
-      default:
-        retVal += " ia-avatar-large";
-        break;
-    }
-
-    return retVal;
-  }, [type, size]);
-
-  return (
-    <MUIAvatar
-      {...args}
-      className={className}
-      src={(type === "withPicture" && src) || undefined}
-    >
-      {initials.substring(0, type === "onlyName" ? 1 : 2)}
-    </MUIAvatar>
-  );
-};
-
-Avatar.propTypes = {
-  size: PropTypes.string,
-  label: PropTypes.string,
-  type: PropTypes.string,
-  src: PropTypes.string,
-};

package/src/components/Badge/Badges.style.scss

@@ -1,55 +0,0 @@
-/* Toast starts here  */
-@import "../../styles/index.scss";
-
-// for filled badges
-@import "./filled/filledIconLabelBadges/filledIconLabelBadges.styles.scss";
-@import "./filled/filledOnlyIconBadges/filledOnlyIconBadges.styles.scss";
-@import "./filled/filledOnlyLabelBadges/filledOnlyLabelBadges.styles.scss";
-
-// for stroke badges
-@import "./stroke/strokeIconLabelBadges/strokeIconLabelBadges.styles.scss";
-@import "./stroke/strokeOnlyIconBadges/strokeOnlyIconBadges.styles.scss";
-@import "./stroke/strokeOnlyLabelBadges/strokeOnlyLabelBadges.styles.scss";
-
-//for subtle badges
-
-@import "./subtle/subtleIconLabelBadges/subtleIconLabelBadges.scss";
-@import "./subtle/subtleIOnlyIconBadges/subtleIOnlyIconBadges.scss";
-@import "./subtle/subtleOnlyLabelBadges/subtleOnlyLabelBadges.scss";
-
-.MuiChip-root {
-  font-family: $fontFamily !important;
-
-  &.Mui-disabled {
-    background-color: $disabledSecondaryBg !important;
-    opacity: 1 !important;
-
-    .MuiChip-label {
-      color: $lightGrayColor !important;
-    }
-
-    svg {
-      color: $lightGrayColor !important;
-    }
-  }
-}
-
-.MuiChip-root.impact_badges_only_label_filled.small-badge,
-.MuiChip-root.impact_badges_only_label_stroke.small-badge,
-.MuiChip-root.impact_badges_only_label_subtle.small-badge,
-.MuiChip-root.impact_badges_icon_label_filled,
-.MuiChip-root.impact_badges_icon_label_stroke,
-.MuiChip-root.impact_badges_icon_label_subtle {
-  .MuiChip-label {
-    font-size: 12px;
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-  }
-}
-
-.MuiChip-root.impact_badges_only_label_stroke.Mui-disabled,
-.MuiChip-root.impact_badges_icon_label_stroke.Mui-disabled {
-  border-color: #d9dde7 !important;
-}

package/src/components/Badge/filled/filledIconLabelBadges/filledIconLabelBadges.styles.scss

@@ -1,32 +0,0 @@
-.MuiChip-root.impact_badges_icon_label_filled {
-  height: 24px;
-  background: $grayBadge;
-  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: $whiteColor;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-    color: $whiteColor !important;
-    font-size: 14px !important;
-    margin: 0 6px 0 0px !important;
-  }
-
-  &:hover {
-    background: $grayBadge;
-  }
-}

package/src/components/Badge/filled/filledIconLabelBadges/index.js

@@ -1,38 +0,0 @@
-import React from "react";
-import Chip from "@mui/material/Chip";
-
-export default function FilledIconLabelBadges({
-  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-filled";
-      case "error":
-        return "error-badge-filled";
-      case "warning":
-        return "warning-badge-filled";
-      case "success":
-        return "success-badge-filled";
-      default:
-        return "";
-    }
-  };
-
-  return (
-    <Chip
-      className={`impact_badges_icon_label_filled ${getFilledBadgesColor(
-        color,
-      )} ${size === "small" ? "small-badge" : ""}`}
-      icon={icon}
-      label={label}
-      disableRipple
-      {...args}
-    />
-  );
-}

package/src/components/Badge/filled/filledOnlyIconBadges/filledOnlyIconBadges.styles.scss

@@ -1,26 +0,0 @@
-.MuiChip-root.impact_badges_only_icon_filled {
-  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/filled/filledOnlyIconBadges/index.js

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

package/src/components/Badge/filled/filledOnlyLabelBadges/filledOnlyLabelBadges.styles.scss

@@ -1,66 +0,0 @@
-// filled badge with label
-
-.MuiChip-root.impact_badges_only_label_filled {
-  height: 24px;
-  background: $grayBadge;
-  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: $whiteColor;
-  }
-  &.small-badge {
-    height: 20px;
-    .MuiChip-label {
-      line-height: 16px;
-    }
-  }
-  svg {
-    width: 14px;
-    height: 14px;
-    cursor: default !important;
-  }
-
-  &:hover {
-    background: $grayBadge;
-  }
-}
-
-.MuiChip-root.info-badge-filled {
-  background: $primaryBadge;
-  &:hover {
-    background: $primaryBadge;
-  }
-}
-
-.MuiChip-root.success-badge-filled {
-  background: $greenBadge;
-  &:hover {
-    background: $greenBadge;
-  }
-}
-
-.MuiChip-root.warning-badge-filled {
-  background: $yellowBadge;
-  &:hover {
-    background: $yellowBadge;
-  }
-  .MuiChip-label {
-    color: $mainFontColor;
-  }
-  & svg {
-    color: $mainFontColor !important;
-  }
-}
-
-.MuiChip-root.error-badge-filled {
-  background: $redBadge;
-  &:hover {
-    background: $redBadge;
-  }
-}

package/src/components/Badge/filled/filledOnlyLabelBadges/index.js

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

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

@@ -1,30 +0,0 @@
-import React from "react";
-import FilledIconLabelBadges from "./filledIconLabelBadges";
-import FilledOnlyIconBadges from "./filledOnlyIconBadges";
-import FilledOnlyLabelBadges from "./filledOnlyLabelBadges";
-
-export default function FilledBadges({ label, icon, color, isIcon, ...args }) {
-  if (isIcon && label) {
-    return (
-      <FilledIconLabelBadges
-        label={label}
-        icon={icon}
-        color={color}
-        {...args}
-      />
-    );
-  }
-
-  if (isIcon && !label) {
-    return (
-      <FilledOnlyIconBadges
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        {...args}
-      />
-    );
-  }
-
-  return <FilledOnlyLabelBadges label={label} color={color} {...args} />;
-}

package/src/components/Badge/index.js

@@ -1,53 +0,0 @@
-import React from "react";
-import "./styles.css";
-import "./Badges.style.scss";
-import FilledBadges from "./filled";
-import StrokeBadges from "./stroke";
-import SubtleBadges from "./subtle";
-
-export const Badge = ({
-  label,
-  icon,
-  variant,
-  color,
-  isIcon,
-  size,
-  ...args
-}) => {
-  if (variant === "stroke") {
-    return (
-      <StrokeBadges
-        label={label}
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  if (variant === "subtle") {
-    return (
-      <SubtleBadges
-        label={label}
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  return (
-    <FilledBadges
-      label={label}
-      icon={icon}
-      color={color}
-      isIcon={isIcon}
-      size={size}
-      {...args}
-    />
-  );
-};

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

@@ -1,43 +0,0 @@
-import React from "react";
-import StrokeIconLabelBadges from "./strokeIconLabelBadges";
-import StrokeOnlyIconBadges from "./strokeOnlyIconBadges";
-import StrokeOnlyLabelBadges from "./strokeOnlyLabelBadges";
-
-export default function StrokeBadges({
-  label,
-  icon,
-  variant,
-  color,
-  isIcon,
-  size,
-  ...args
-}) {
-  if (isIcon && label) {
-    return (
-      <StrokeIconLabelBadges
-        label={label}
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  if (isIcon && !label) {
-    return (
-      <StrokeOnlyIconBadges
-        icon={icon}
-        color={color}
-        isIcon={isIcon}
-        size={size}
-        {...args}
-      />
-    );
-  }
-
-  return (
-    <StrokeOnlyLabelBadges label={label} color={color} size={size} {...args} />
-  );
-}