impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Panel/Panel.styles.scss

@@ -1,71 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact_drawer_container_medium {
-  width: 375px;
-  height: 100%;
-}
-.impact_drawer_container_large {
-  width: 526px;
-  height: 100%;
-}
-.MuiBox-root {
-  width: auto;
-}
-
-.impact_drawer_container {
-  .impact_drawer_header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: $lightBlueColor;
-    height: 40px;
-    display: flex;
-    justify-content: space-between;
-    padding: 0 16px;
-    align-items: center;
-    .impact_drawer_heading {
-      font-size: 16px;
-      font-weight: $BoldFontWeight;
-    }
-    .close_icon {
-      background: url("../../assets/close.svg") no-repeat;
-      background-size: 16px;
-      background-position: center;
-      width: 16px;
-      height: 16px;
-      cursor: pointer;
-    }
-  }
-
-  .impact_drawer_body {
-    z-index: 0;
-    position: relative;
-    padding: 16px;
-    overflow-y: auto;
-    height: calc(100% - 100px);
-    width: 100%;
-  }
-
-  .impact_drawer_footer {
-    position: absolute;
-    bottom: 0;
-    background: white;
-    z-index: 1;
-    display: flex;
-    align-items: center;
-    padding: 0 16px;
-    height: 56px;
-    border-top: 1px solid #d9dde7;
-    left: 0;
-    right: 0;
-    .ia-styles.ia-btn.ia-btn-link {
-      text-decoration: none;
-    }
-    .impact_drawer_footer_right_container {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-left: auto;
-    }
-  }
-}

package/src/components/Panel/index.js

@@ -1,144 +0,0 @@
-import React from "react";
-import Box from "@mui/material/Box";
-import Drawer from "@mui/material/Drawer";
-import { Button } from "../Button";
-import List from "@mui/material/List";
-import Divider from "@mui/material/Divider";
-import ListItem from "@mui/material/ListItem";
-import ListItemButton from "@mui/material/ListItemButton";
-import ListItemIcon from "@mui/material/ListItemIcon";
-import ListItemText from "@mui/material/ListItemText";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-import MailIcon from "@mui/icons-material/Mail";
-import "./Panel.styles.scss";
-
-export function Panel({
-  className,
-  title,
-  size,
-  anchor = "right",
-  open,
-  setIsOpen,
-  children,
-  onClose,
-  primaryButtonLabel,
-  onPrimaryButtonClick,
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  primaryButtonProps,
-  secondaryButtonProps,
-  width,
-  zIndex = 1500,
-  customFooterContent,
-  ...args
-}) {
-  const toggleDrawer = (anchor, isOpen) => (event) => {
-    if (
-      event.type === "keydown" &&
-      (event.key === "Tab" || event.key === "Shift")
-    ) {
-      return;
-    }
-    if (onClose) {
-      onClose();
-    }
-    setIsOpen(isOpen);
-  };
-
-  const getSize = (size) => {
-    switch (size) {
-      case "medium":
-        return "impact_drawer_container_medium";
-      default:
-        return "impact_drawer_container_large";
-    }
-  };
-
-  if (!secondaryButtonLabel && !primaryButtonLabel) {
-    return (
-      <Drawer
-        anchor={anchor}
-        open={open}
-        onClose={toggleDrawer(anchor, false)}
-        sx={{
-          "& .MuiDrawer-paper": {
-            zIndex: `${zIndex}`,
-          },
-        }}
-      >
-        <div
-          className={`impact_drawer_container ${getSize(size)} ${className}`}
-          style={{ width: `${width}px` }}
-        >
-          <div className="impact_drawer_header">
-            <div className="impact_drawer_heading">{title}</div>
-            <span
-              role="button"
-              className="close_icon"
-              onClick={toggleDrawer(anchor, false)}
-            ></span>
-          </div>
-          <div
-            className="impact_drawer_body"
-            style={{ height: "calc(100% - 40px)" }}
-          >
-            {children}
-          </div>
-        </div>
-      </Drawer>
-    );
-  }
-
-  return (
-    <Drawer
-      anchor={anchor}
-      open={open}
-      onClose={toggleDrawer(anchor, false)}
-      sx={{
-        "& .MuiDrawer-paper": {
-          zIndex: `${zIndex}`,
-        },
-      }}
-      {...args}
-    >
-      <div
-        className={`impact_drawer_container ${getSize(size)} ${className}`}
-        style={{ width: `${width}px` }}
-      >
-        <div className="impact_drawer_header">
-          <div className="impact_drawer_heading">{title}</div>
-          <span
-            role="button"
-            className="close_icon"
-            onClick={toggleDrawer(anchor, false)}
-          ></span>
-        </div>
-        <div className="impact_drawer_body">{children}</div>
-        <div className="impact_drawer_footer">
-          {customFooterContent ? customFooterContent : null}
-          <div className="impact_drawer_footer_right_container">
-            {secondaryButtonLabel && (
-              <Button
-                label={secondaryButtonLabel}
-                variant="url"
-                onClick={onSecondaryButtonClick}
-                {...secondaryButtonProps}
-              >
-                {secondaryButtonLabel}
-              </Button>
-            )}
-            {primaryButtonLabel && (
-              <Button
-                label={primaryButtonLabel}
-                onClick={onPrimaryButtonClick}
-                {...primaryButtonProps}
-              >
-                {primaryButtonLabel}
-              </Button>
-            )}
-          </div>
-        </div>
-      </div>
-    </Drawer>
-  );
-}

package/src/components/Popover/Popover.styles.scss

@@ -1,52 +0,0 @@
-@import "../../styles/index.scss";
-
-.popover-container {
-  min-width: 240px;
-  padding: 12px;
-  border-radius: 12px !important;
-  box-shadow: 0px 0px 4px 0px $boxShadowColor;
-  margin-top: 2px;
-
-  .popover-content {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-
-    .popover-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .popover-header-title {
-        font-size: $normalFontSize;
-        font-weight: $ExtraFontWeight;
-        line-height: 21px;
-        color: $darkColor;
-      }
-    }
-
-    .popover-body {
-      overflow-y: auto;
-      height: calc(100% - 40px);
-      width: 100%;
-    }
-
-    .popover-footer {
-      .popover-footer-content {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        .divider-line {
-          background: $disabledSecondaryBorder;
-          width: 100%;
-          height: 1px;
-        }
-        .popover-footer-buttons {
-          display: flex;
-          gap: 12px;
-          justify-content: flex-end;
-        }
-      }
-    }
-  }
-}

package/src/components/Popover/index.js

@@ -1,71 +0,0 @@
-import React from "react";
-import { Popover as PopoverComponent } from "@mui/material";
-import "./Popover.styles.scss";
-import CloseIcon from "@mui/icons-material/Close";
-import { Button } from "../Button";
-
-export function Popover({
-  children,
-  title,
-  onClose,
-  primaryButtonLabel,
-  secondaryButtonLabel,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  primaryButtonProps,
-  secondaryButtonProps,
-  ...props
-}) {
-  return (
-    <PopoverComponent
-      {...props}
-      onClose={onClose}
-      slotProps={{
-        paper: {
-          className: "popover-container",
-        },
-      }}
-    >
-      <div className="popover-content">
-        <div className="popover-header">
-          <span className="popover-header-title">{title}</span>
-          {onClose && (
-            <CloseIcon
-              fontSize="small"
-              onClick={onClose}
-              sx={{ color: "#60697D", cursor: "pointer" }}
-            />
-          )}
-        </div>
-        <div className="popover-body">{children}</div>
-        <div className="popover-footer">
-          <div className="popover-footer-content">
-            {primaryButtonLabel || secondaryButtonLabel ? (
-              <div className="divider-line" />
-            ) : null}
-            <div className="popover-footer-buttons">
-              {secondaryButtonLabel && (
-                <Button
-                  variant="tertiary"
-                  onClick={onSecondaryButtonClick}
-                  {...secondaryButtonProps}
-                >
-                  {secondaryButtonLabel}
-                </Button>
-              )}
-              {primaryButtonLabel && (
-                <Button
-                  variant="primary"
-                  onClick={onPrimaryButtonClick}
-                  {...primaryButtonProps}
-                >
-                  {primaryButtonLabel}
-                </Button>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-    </PopoverComponent>
-  );
-}

package/src/components/Portal/index.js

@@ -1,31 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { renderPortal } from "../../renderReactRoot";
-
-const Portal = ({ children, container }) => {
-  const [portalContent, setPortalContent] = useState(null);
-
-  useEffect(() => {
-    let isMounted = true;
-
-    if (container) {
-      renderPortal(children, container).then((portal) => {
-        if (isMounted) {
-          setPortalContent(portal);
-        }
-      });
-    } else {
-      setPortalContent(null);
-    }
-
-    return () => {
-      isMounted = false;
-    };
-  }, [children, container]);
-
-  // If no container, return null immediately
-  if (!container) return null;
-
-  return portalContent;
-};
-
-export default Portal;

package/src/components/ProgressBar/ProgressBar.styles.scss

@@ -1,62 +0,0 @@
-@import "../../styles/index.scss";
-
-.progressbar_layout {
-  min-width: 232px;
-}
-
-.progress_container {
-  .progressbar_label_container {
-    font-size: 12px;
-    font-weight: $normalFontWeight;
-    margin-bottom: 4px;
-  }
-
-  .progressbar_status {
-    .MuiLinearProgress-root {
-      height: 8px;
-      background-color: $progressBarBg;
-      border-radius: 10px;
-    }
-
-    .MuiLinearProgress-bar {
-      background-color: $primaryColor;
-      border-radius: 8px;
-    }
-  }
-}
-
-.progress_container_remaining {
-  .progressbar_label_container {
-    color: $inputInfoColor;
-  }
-}
-
-.progress_container_completed {
-  .progressbar_label_container {
-    color: $greenBadgeDark;
-    font-size: $smallFontSize;
-  }
-  .MuiLinearProgress-bar {
-    background-color: $greenBadge !important;
-  }
-}
-
-.progress_container_failed {
-  .progressbar_label_container {
-    color: $destructiveHoverBg;
-    font-size: $smallFontSize;
-  }
-  .MuiLinearProgress-bar {
-    background-color: $redBadge !important;
-  }
-}
-
-.progress_bar_remaining .MuiLinearProgress-bar {
-  background-color: $primaryColor;
-}
-.progress_bar_completed .MuiLinearProgress-bar {
-  background-color: $greenBadge;
-}
-.progress_bar_failed .MuiLinearProgress-bar {
-  background-color: $redBadge;
-}

package/src/components/ProgressBar/index.js

@@ -1,40 +0,0 @@
-import React from "react";
-import LinearProgress from "@mui/material/LinearProgress";
-import "./ProgressBar.styles.scss";
-
-export function ProgressBar(props) {
-  const {
-    value = 10,
-    showTime = true,
-    time = 30,
-    customLabel,
-    status = "remaining", // "completed", "failed", or "remaining"
-  } = props;
-
-  const getLabel = () => {
-    if (customLabel) return customLabel;
-    if (status === "completed") return "Completed";
-    if (status === "failed") return "Failed";
-    return `${Math.round(value)}%${
-      showTime ? ` • ${time} seconds remaining` : ""
-    }`;
-  };
-
-  return (
-    <div className="progressbar_layout">
-      <div className={`progress_container progress_container_${status}`}>
-        <div className="progressbar_label_container">
-          <div className="label_name">{getLabel()}</div>
-        </div>
-        <div className="progressbar_status">
-          <LinearProgress
-            variant="determinate"
-            value={value}
-            className={`progress_bar progress_bar_${status}`}
-            {...props}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/Prompt/Prompt.styles.scss

@@ -1,107 +0,0 @@
-@import "../../styles/index.scss";
-
-.ia-styles.ia-prompt {
-  .MuiDialogContent-root {
-    padding: 0px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    align-items: center;
-    justify-content: flex-start;
-    padding-bottom: 12px;
-
-    .MuiDialogContentText-root {
-      color: $textButtonFontColor;
-      font-size: $normalFontSize;
-      font-weight: $normalFontWeight;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-family: $fontFamily;
-      width: 400px;
-      padding: 0 24px;
-      text-align: center;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      box-sizing: border-box;
-    }
-  }
-  .MuiDialog-paper {
-    min-width: 400px;
-    min-height: 224px;
-    box-shadow: 0px 0px 4px 0px $boxShadowColor;
-    border-radius: 8px;
-    position: relative;
-
-    h2 {
-      padding: 0px 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: $mediumFontSize;
-      font-weight: 800;
-      color: #0d152c;
-      line-height: 24px;
-      text-align: center;
-    }
-  }
-
-  .ia-prompt-close-button {
-    cursor: pointer;
-    display: flex;
-    justify-content: flex-end;
-    padding-right: 16px;
-    padding-top: 8px;
-  }
-
-  .ia-prompt-close-icon {
-    color: #60697d;
-  }
-
-  .ia-prompt-info-icon-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 48px;
-    height: 48px;
-    background-color: #eceefd;
-    background-image: url("../../assets/prompt-info-icon.svg");
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 12px;
-
-    &.ia-prompt-warning {
-      background: url("../../assets/prompt-warning-icon.svg");
-      background-color: #f6ebbf;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-
-    &.ia-prompt-error {
-      background: url("../../assets/prompt-delete-icon.svg");
-      background-color: #fceeee;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-
-    &.ia-prompt-success {
-      background: url("../../assets/prompt-success-icon.svg");
-      background-color: #ebf7f1;
-      background-repeat: no-repeat;
-      background-position: center;
-    }
-  }
-
-  .MuiDialogActions-root {
-    gap: 12px;
-    padding: 16px;
-    justify-content: center;
-  }
-  .MuiDialogActions-root > :not(:first-of-type) {
-    margin-left: 0px;
-  }
-
-  .ia-styles.ia-btn.ia-btn-contained:focus {
-    outline: none;
-  }
-}

package/src/components/Prompt/index.js

@@ -1,107 +0,0 @@
-import React, { useMemo } from "react";
-import Dialog from "@mui/material/Dialog";
-import DialogActions from "@mui/material/DialogActions";
-import DialogContent from "@mui/material/DialogContent";
-import DialogContentText from "@mui/material/DialogContentText";
-import DialogTitle from "@mui/material/DialogTitle";
-import PropTypes from "prop-types";
-import { Close } from "@mui/icons-material";
-
-import { Button } from "../Button";
-
-import "./Prompt.styles.scss";
-
-export const Prompt = ({
-  variant = "info",
-  title,
-  children,
-  primaryButtonLabel,
-  secondaryButtonLabel,
-  isOpen,
-  onPrimaryButtonClick,
-  onSecondaryButtonClick,
-  handleClose,
-  primaryButtonProps,
-  secondaryButtonProps,
-  ...args
-}) => {
-  const variantClassName = useMemo(() => {
-    let retVal = "";
-    switch (variant) {
-      case "error":
-        retVal = "ia-prompt-error";
-        break;
-      case "success":
-        retVal = "ia-prompt-success";
-        break;
-      case "warning":
-        retVal = "ia-prompt-warning";
-        break;
-      case "info":
-      default:
-        retVal = "ia-prompt-info";
-        break;
-    }
-
-    return retVal;
-  }, [variant]);
-
-  return (
-    <Dialog
-      className={`ia-styles ia-prompt ${variantClassName}`}
-      open={isOpen}
-      onClose={handleClose}
-      aria-labelledby="alert-dialog-title"
-      aria-describedby="alert-dialog-description"
-      {...args}
-    >
-      <div onClick={handleClose} className="ia-prompt-close-button">
-        {handleClose && <Close className="ia-prompt-close-icon" />}
-      </div>
-      <DialogContent>
-        <div className={`ia-prompt-info-icon-container ${variantClassName}`} />
-        <DialogTitle className={`ia-dialog-title ${variantClassName}`}>
-          {title}
-        </DialogTitle>
-        <DialogContentText className="ia-dialog-content">
-          {children}
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        {secondaryButtonLabel ? (
-          <Button
-            onClick={onSecondaryButtonClick}
-            label={secondaryButtonLabel}
-            variant="text"
-            {...secondaryButtonProps}
-          >
-            {secondaryButtonLabel}
-          </Button>
-        ) : null}
-        {primaryButtonLabel && variant !== "success" ? (
-          <Button
-            onClick={onPrimaryButtonClick}
-            label={primaryButtonLabel}
-            autoFocus
-            type={variant === "error" ? "destructive" : ""}
-            {...primaryButtonProps}
-          >
-            {primaryButtonLabel}
-          </Button>
-        ) : null}
-      </DialogActions>
-    </Dialog>
-  );
-};
-
-Prompt.propTypes = {
-  variant: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node,
-  primaryButtonLabel: PropTypes.string,
-  secondaryButtonLabel: PropTypes.string,
-  handleClose: PropTypes.func,
-  onPrimaryButtonClick: PropTypes.func,
-  onSecondaryButtonClick: PropTypes.func,
-  isOpen: PropTypes.bool,
-};