impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/DynamicLayout/DynamicLayout.styles.scss

@@ -1,153 +0,0 @@
-.dynamic-layout-container {
-  display: flex;
-  position: absolute;
-  inset: 90px 230px 90px 230px;
-  border-radius: 8px;
-  background-color: #fff;
-  box-shadow: 0px 0px 4px 0px #ababab40;
-
-  .left-panel {
-    width: 375px;
-    padding: 100px 48px;
-    border-right: 1px solid #d9dde7;
-
-    h1 {
-      font-size: 24px;
-      font-weight: 600;
-      color: #1a1a1a;
-      margin-bottom: 16px;
-    }
-
-    p {
-      font-size: 14px;
-      color: #666;
-      line-height: 1.5;
-    }
-  }
-
-  .right-content {
-    width: calc(100% - 375px);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    background-color: #fff;
-    border-radius: 0 8px 8px 0;
-    padding: 100px 120px;
-    &.with-stepper {
-      padding-top: 50px;
-    }
-
-    .content-wrapper {
-      flex: 1;
-      overflow-y: auto;
-
-      &.no-scroll {
-        & + .actions {
-          &::before {
-            display: none;
-          }
-        }
-      }
-
-      // .progress-steps {
-      //   display: flex;
-      //   gap: 8px;
-      //   margin-bottom: 32px;
-      //   position: sticky;
-      //   top: 0;
-      //   background: #fff;
-      //   padding-bottom: 16px;
-      //   z-index: 1;
-
-      //   .step {
-      //     height: 4px;
-      //     flex: 1;
-      //     background-color: #e8e8e8;
-      //     border-radius: 2px;
-
-      //     &.active {
-      //       background-color: #3649c6;
-      //     }
-      //   }
-      // }
-
-      .heading {
-        margin-bottom: 32px;
-
-        h2 {
-          font-size: 20px;
-          font-weight: 600;
-          color: #1a1a1a;
-          margin-bottom: 8px;
-        }
-
-        .field-label {
-          font-size: 14px;
-          color: #666;
-          margin-bottom: 8px;
-        }
-      }
-
-      .form-section {
-        margin-bottom: 32px;
-
-        .field-group {
-          display: flex;
-          flex-wrap: wrap;
-          gap: 24px;
-          margin-bottom: 24px;
-          justify-content: flex-start;
-        }
-      }
-    }
-
-    .actions {
-      padding-top: 12px;
-      display: flex;
-      justify-content: space-between;
-      background: #fff;
-      flex-wrap: wrap;
-      position: relative;
-
-      &::before {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: -25px;
-        height: 1px;
-        background: #d9dde7;
-        right: -25px;
-      }
-    }
-  }
-}
-
-@media screen and (min-width: 1400px) and (max-width: 1600px) {
-  .dynamic-layout-container {
-    inset: 90px 150px 90px 150px;
-    .right-content {
-      padding: 50px 90px;
-    }
-    .left-panel-image {
-      width: 100%;
-    }
-  }
-}
-
-@media screen and (max-width: 1399px) {
-  .dynamic-layout-container .left-panel {
-    width: 300px;
-  }
-  .dynamic-layout-container .right-content {
-    width: calc(100% - 300px);
-  }
-  .dynamic-layout-container {
-    inset: 90px 100px 90px 100px;
-    .right-content {
-      padding: 50px 60px;
-    }
-    .left-panel-image {
-      width: 100%;
-    }
-  }
-}

package/src/components/DynamicLayout/index.js

@@ -1,73 +0,0 @@
-import React, { useRef, useEffect, useState } from "react";
-import Box from "@mui/material/Box";
-import "./DynamicLayout.styles.scss";
-
-export const DynamicLayout = ({
-  leftPanel,
-  rightContent,
-  leftPanelWidth,
-  className,
-  showStepper,
-  ...props
-}) => {
-  const contentRef = useRef(null);
-  const [hasScroll, setHasScroll] = useState(false);
-
-  // Use layout effect so ref is attached before we measure.
-  React.useLayoutEffect(() => {
-    const el = contentRef.current;
-
-    const checkScroll = () => {
-      if (!el) return;
-      const hasScrollbar = el.scrollHeight > el.clientHeight;
-      setHasScroll(hasScrollbar);
-    };
-
-    // Initial measurement after DOM updates.
-    checkScroll();
-
-    // Recalculate on window resize.
-    window.addEventListener("resize", checkScroll);
-
-    // Observe element size changes.
-    const resizeObserver =
-      typeof ResizeObserver !== "undefined"
-        ? new ResizeObserver(() => checkScroll())
-        : null;
-    resizeObserver?.observe(el);
-
-    // Observe DOM mutations that might affect scroll height (content changes).
-    const mutationObserver =
-      typeof MutationObserver !== "undefined"
-        ? new MutationObserver(() => checkScroll())
-        : null;
-    mutationObserver?.observe(el, {
-      childList: true,
-      subtree: true,
-      characterData: true,
-      attributes: true,
-    });
-
-    return () => {
-      window.removeEventListener("resize", checkScroll);
-      resizeObserver?.disconnect();
-      mutationObserver?.disconnect();
-    };
-  }, [rightContent]);
-
-  return (
-    <Box className={`dynamic-layout-container ${className || ""}`} {...props}>
-      <Box
-        className="left-panel"
-        style={{
-          width: leftPanelWidth,
-        }}
-      >
-        {leftPanel}
-      </Box>
-      <Box className={`right-content ${showStepper ? "with-stepper" : ""}`}>
-        {React.cloneElement(rightContent, { contentRef, hasScroll })}
-      </Box>
-    </Box>
-  );
-};

package/src/components/EmptyState/EmptyState.styles.scss

@@ -1,88 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact_emptystate {
-  width: 884px;
-  height: auto; // changed to allow dynamic height
-  border: 1px solid $StepperBorder;
-  border-radius: 12px;
-  background-color: #fff;
-  margin: 0 auto;
-  padding: 40px 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-
-  .impact_center_svg {
-    width: 225px;
-    height: 150px;
-    min-height: 180px;
-    position: relative;
-    overflow: hidden;
-    margin-bottom: 12px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .impact_center_svg_with_icon {
-    background: none !important;
-    min-height: 180px;
-  }
-
-  .impact_heading {
-    font-size: 20px;
-    font-weight: $BoldFontWeight;
-    color: $mainFontColor;
-    margin-bottom: 16px;
-  }
-
-  .impact_paragraph {
-    font-size: 16px;
-    font-weight: $normalFontWeight;
-    color: $grayBadge;
-    margin-top: 12px;
-    margin-bottom: 40px;
-    width: 650px;
-    text-align: center;
-    line-height: 21px;
-  }
-
-  .bottom_cta_container {
-    display: flex;
-    gap: 16px;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-
-    .primary_btn {
-      cursor: pointer;
-      border: none;
-      text-transform: capitalize;
-      font-size: 14px;
-      border-radius: 8px;
-      height: 32px;
-      padding: 6px 12px;
-      box-sizing: border-box;
-      font-weight: 500;
-      line-height: 20px;
-    }
-
-    .secondary_btn {
-      cursor: pointer;
-      background: #ffffff;
-      color: #1f2b4d;
-      border: 1px solid #c3c8d4;
-      text-transform: capitalize;
-      font-size: 14px;
-      border-radius: 8px;
-      height: 32px;
-      padding: 6px 12px;
-      box-sizing: border-box;
-      font-weight: 500;
-      line-height: 20px;
-    }
-  }
-}

package/src/components/EmptyState/EmptyStateImageComponent.jsx

@@ -1,36 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { ReactComponent as EmptyState1 } from "../../assets/emptyState1.svg";
-import { ReactComponent as EmptyState2 } from "../../assets/emptyState2.svg";
-import { ReactComponent as EmptyState3 } from "../../assets/emptyState3.svg";
-import { ReactComponent as EmptyState4 } from "../../assets/emptyState4.svg";
-import { ReactComponent as EmptyState5 } from "../../assets/emptyState5.svg";
-import { ReactComponent as EmptyState6 } from "../../assets/emptyState6.svg";
-const images = [
-  EmptyState1,
-  EmptyState2,
-  EmptyState3,
-  EmptyState4,
-  EmptyState5,
-  EmptyState6,
-];
-
-const EmptyStateImageComponent = () => {
-  const [prevImage, setPrevImage] = useState(null);
-  const [currentImage, setCurrentImage] = useState(0);
-
-  useEffect(() => {
-    let randomIndex = Math.floor(Math.random() * images.length);
-    // Prevent consecutive repeat
-    if (prevImage !== null && randomIndex === prevImage) {
-      randomIndex = (randomIndex + 1) % images.length;
-    }
-    setCurrentImage(randomIndex);
-    setPrevImage(randomIndex);
-  }, []);
-
-  const ImageComponent = images[currentImage];
-  return <ImageComponent />;
-};
-
-export default EmptyStateImageComponent;

package/src/components/EmptyState/index.js

@@ -1,54 +0,0 @@
-import React from "react";
-import { Button } from "../Button";
-import "./EmptyState.styles.scss";
-import EmptyStateImageComponent from "./EmptyStateImageComponent";
-
-export function EmptyState({
-  heading,
-  description,
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  primaryButtonLabel,
-  onPrimaryButtonClick,
-  emptyStateIcon = null,
-  emptyStateBottomOptions = null,
-  primaryButtonProps = {},
-  secondaryButtonProps = {},
-}) {
-  return (
-    <div className="impact_emptystate">
-      <div
-        className={`impact_center_svg ${
-          emptyStateIcon ? "impact_center_svg_with_icon" : ""
-        }`}
-      >
-        {emptyStateIcon ? emptyStateIcon : <EmptyStateImageComponent />}
-      </div>
-      <div className="impact_heading">{heading}</div>
-      <div className="impact_paragraph">{description}</div>
-      <div className="bottom_cta_container">
-        {emptyStateBottomOptions}
-        {/* Both the buttons needs to be replaced with design system buttons */}
-        {secondaryButtonLabel && (
-          <Button
-            className="secondary_btn"
-            variant="secondary"
-            onClick={onSecondaryButtonClick}
-            {...secondaryButtonProps}
-          >
-            {secondaryButtonLabel}
-          </Button>
-        )}
-        {primaryButtonLabel && (
-          <Button
-            className="primary_btn"
-            onClick={onPrimaryButtonClick}
-            {...primaryButtonProps}
-          >
-            {primaryButtonLabel}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}