impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/FilterPanel/FilterPanel.styles.scss

@@ -1,241 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact_drawer_filter_container_medium {
-  width: 675px;
-  height: 100%;
-}
-.impact_drawer_filter_container_large {
-  width: 840px;
-  height: 100%;
-}
-.MuiBox-root {
-  width: auto;
-}
-
-.impact_drawer_filter_container {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  .impact_drawer_filter_header {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    background: $whiteColor;
-    border-bottom: 1px solid #d9dde7;
-    display: flex;
-    justify-content: space-between;
-    padding: 9px 16px;
-    align-items: center;
-    .impact_drawer_filter_left_header {
-      display: flex;
-      gap: 16px;
-      align-items: center;
-
-      .impact_drawer_filter_left_heading_icon {
-        width: 32px;
-        height: 32px;
-        background: $whiteColor url("../../assets/filter-icon.svg") no-repeat;
-        background-size: 14px;
-        border: 1px solid #eceefd;
-        border-radius: 8px;
-        background-position: center;
-      }
-
-      .impact_drawer_filter_left_heading {
-        font-size: 18px;
-        font-weight: 700;
-        color: $mainFontColor;
-      }
-    }
-  }
-
-  .impact_drawer_filter_container_left_panel {
-    flex-shrink: 0;
-    width: 200px;
-    background: $textButtonPrimaryBg;
-    border-right: 1px solid $disabledSecondaryBorder;
-    padding-top: 10px;
-    height: 100%;
-
-    .impact_drawer_filter_left_filters_tabs {
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-      padding: 0 8px;
-
-      .impact-drawer-filter-separator {
-        display: block;
-        height: 1px;
-        width: 200px;
-        background-color: #d9dde7;
-        margin-left: -8px;
-        margin-right: -8px;
-      }
-
-      .impact_drawer_filter_tab {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 6px 8px 6px 18px;
-        &:hover {
-          cursor: pointer;
-          border-radius: 8px;
-          background-color: #eceefd;
-        }
-      }
-      .impact_drawer_filter_tab_content {
-        display: flex;
-        align-items: center;
-        gap: 10px;
-        width: 85%;
-      }
-
-      .impact_drawer_filter_tab_icon {
-        svg {
-          display: flex;
-          color: #60697d;
-          width: 16px;
-          height: 16px;
-        }
-
-        img {
-          display: flex;
-          color: #60697d;
-          width: 16px;
-          height: 16px;
-        }
-      }
-
-      .impact_drawer_filter_tab_label {
-        display: flex;
-        flex-direction: row;
-        gap: 4px;
-        font-size: 16px;
-        line-height: 20px;
-        color: $textButtonFontColor;
-        overflow: hidden;
-        white-space: nowrap;
-        & span {
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
-        // & span {
-        //   display: block;
-        //   gap: 4px;
-        //   font-size: 16px;
-        //   line-height: 20px;
-        //   color: #60697d;
-        //   overflow: hidden;
-        //   text-overflow: ellipsis;
-        //   text-wrap: nowrap;
-        //   max-width: 120px;
-        // }
-      }
-
-      .impact_drawer_filter_tab_label-required {
-        color: $redBadge;
-      }
-
-      .impact_drawer_filter_tab_badges {
-        background-color: $whiteColor;
-        padding: 0px 8px;
-        border-radius: 8px;
-        color: $textButtonFontColor;
-        height: 18px;
-        box-sizing: border-box;
-        font-size: 12px;
-        line-height: 18px;
-        min-width: 27px;
-        text-align: center;
-      }
-
-      .filter_tab_active {
-        border-radius: 8px;
-        background-color: #eceefd;
-        .impact_drawer_filter_tab_label {
-          color: $primaryColor;
-        }
-
-        .impact_drawer_filter_tab_icon {
-          svg {
-            color: $primaryColor;
-          }
-
-          img {
-            filter: brightness(0) saturate(100%) invert(30%) sepia(100%)
-              saturate(4545%) hue-rotate(231deg) brightness(103%) contrast(87%);
-          }
-        }
-
-        .impact_drawer_filter_tab_badges {
-          color: $primaryColor;
-        }
-      }
-
-      .filter_tab_disabled {
-        .impact_drawer_filter_tab_icon {
-          svg {
-            color: $lightGrayColor;
-          }
-        }
-        .impact_drawer_filter_tab_label {
-          color: $lightGrayColor;
-        }
-        .impact_drawer_filter_tab_badges {
-          color: $lightGrayColor;
-        }
-        svg {
-          color: $lightGrayColor;
-        }
-        &:hover {
-          cursor: default;
-          background-color: $textButtonPrimaryBg;
-        }
-      }
-    }
-  }
-  .impact-drawer-filter-main-container {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    height: calc(100% - 40px);
-  }
-  .impact_drawer_filter_container_right_panel {
-    width: 640px;
-    .impact_drawer_filter_body {
-      z-index: 0;
-      position: relative;
-      padding: 16px;
-      overflow-y: auto;
-      height: calc(100% - 60px);
-      width: 100%;
-    }
-
-    .impact_drawer_filter_footer {
-      position: absolute;
-      bottom: 0;
-      background: white;
-      z-index: 1;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 0 16px;
-      height: 56px;
-      border-top: 1px solid #d9dde7;
-      left: 200px;
-      right: 0;
-
-      .impact_drawer_filter_footer_left_container,
-      .impact_drawer_filter_footer_right_container {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-    }
-
-    .impact_drawer_filter_footer_no_buttons {
-      height: 100%;
-    }
-  }
-}

package/src/components/FilterPanel/FilterPanelHeader.js

@@ -1,15 +0,0 @@
-import { Button } from "../Button";
-import React from "react";
-import CloseIcon from "@mui/icons-material/Close";
-
-export default function FilterPanelHeader({ title, toggleDrawer }) {
-  return (
-    <div className="impact_drawer_filter_header">
-      <div className="impact_drawer_filter_left_header">
-        <span className="impact_drawer_filter_left_heading_icon"></span>
-        <div className="impact_drawer_filter_left_heading">{title}</div>
-      </div>
-      <Button variant="text" onClick={toggleDrawer} icon={<CloseIcon />} />
-    </div>
-  );
-}

package/src/components/FilterPanel/PanelFooter.js

@@ -1,65 +0,0 @@
-import React from "react";
-import { Button } from "../Button";
-
-export default function PanelFooter({
-  quaternaryButtonLabel,
-  onQuaternaryButtonClick,
-  tertiaryButtonLabel,
-  onTertiaryButtonClick,
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  primaryButtonLabel,
-  onPrimaryButtonClick,
-  primaryButtonProps,
-  secondaryButtonProps,
-  tertiaryButtonProps,
-  quaternaryButtonProps,
-}) {
-  return (
-    <div className="impact_drawer_filter_footer">
-      <div className="impact_drawer_filter_footer_left_container">
-        {tertiaryButtonLabel ? (
-          <Button
-            label={tertiaryButtonLabel}
-            variant="text"
-            onClick={onTertiaryButtonClick}
-            {...tertiaryButtonProps}
-          >
-            {tertiaryButtonLabel}
-          </Button>
-        ) : null}
-        {quaternaryButtonLabel ? (
-          <Button
-            label={tertiaryButtonLabel}
-            variant="tertiary"
-            onClick={onQuaternaryButtonClick}
-            {...quaternaryButtonProps}
-          >
-            {quaternaryButtonLabel}
-          </Button>
-        ) : null}
-      </div>
-      <div className="impact_drawer_filter_footer_right_container">
-        {secondaryButtonLabel ? (
-          <Button
-            label={secondaryButtonLabel}
-            variant="tertiary"
-            onClick={onSecondaryButtonClick}
-            {...secondaryButtonProps}
-          >
-            {secondaryButtonLabel}
-          </Button>
-        ) : null}
-        {primaryButtonLabel ? (
-          <Button
-            label={primaryButtonLabel}
-            onClick={onPrimaryButtonClick}
-            {...primaryButtonProps}
-          >
-            {primaryButtonLabel}
-          </Button>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/src/components/FilterPanel/PanelSidebar.js

@@ -1,85 +0,0 @@
-import React, { useState, useRef, useEffect } from "react";
-import { Tooltip } from "../Tooltip";
-import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
-
-export default function PanelSidebar({ filters, active, setActive }) {
-  return (
-    <div className="impact_drawer_filter_container_left_panel">
-      <div className="impact_drawer_filter_left_filters_tabs">
-        {filters.map((item, index) => {
-          return (
-            <SidebarItems
-              key={index}
-              item={item}
-              active={active}
-              setActive={setActive}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-const SidebarItems = ({ item, active, setActive }) => {
-  const textRef = useRef(null);
-  const [showTooltip, setShowTooltip] = useState(false);
-
-  useEffect(() => {
-    const checkEllipsis = () => {
-      if (textRef.current) {
-        const isEllipsis =
-          textRef.current.scrollWidth > textRef.current.clientWidth;
-        setShowTooltip(isEllipsis);
-      }
-    };
-
-    checkEllipsis();
-    // Recheck on window resize
-    window.addEventListener("resize", checkEllipsis);
-    return () => window.removeEventListener("resize", checkEllipsis);
-  }, [item.title]);
-
-  if (item.type === "separator") {
-    return <div className="impact-drawer-filter-separator" />;
-  }
-
-  const tabContent = (
-    <div
-      className={`impact_drawer_filter_tab ${
-        active == item.value ? "filter_tab_active" : ""
-      } ${item?.disabled ? "filter_tab_disabled" : ""}`}
-      role="button"
-      onClick={() => {
-        if (!item?.disabled) setActive(item.value);
-      }}
-    >
-      <div className="impact_drawer_filter_tab_content">
-        <div className="impact_drawer_filter_tab_icon">{item.icon}</div>
-        <div className="impact_drawer_filter_tab_label">
-          <span ref={textRef}>{item.title}</span>
-          {item.required && (
-            <span className="impact_drawer_filter_tab_label-required">*</span>
-          )}
-        </div>
-      </div>
-      {item?.error ? (
-        <ErrorOutlineIcon fontSize="small" color="error" />
-      ) : (
-        typeof item.numberOfFilter === "number" && (
-          <div className="impact_drawer_filter_tab_badges">
-            {item.numberOfFilter}
-          </div>
-        )
-      )}
-    </div>
-  );
-
-  return showTooltip ? (
-    <Tooltip title={item.title} orientation="left" variant="tertiary">
-      {tabContent}
-    </Tooltip>
-  ) : (
-    tabContent
-  );
-};

package/src/components/FilterPanel/index.js

@@ -1,147 +0,0 @@
-import React from "react";
-import Drawer from "@mui/material/Drawer";
-import PanelSidebar from "./PanelSidebar";
-import FilterPanelHeader from "./FilterPanelHeader";
-import PanelFooter from "./PanelFooter";
-import "./FilterPanel.styles.scss";
-
-export function FilterPanel({
-  className,
-  title,
-  size,
-  anchor = "right",
-  isOpen,
-  setIsOpen,
-  active,
-  setActive,
-  filters,
-  handleClose,
-  primaryButtonLabel,
-  onPrimaryButtonClick,
-  secondaryButtonLabel,
-  onSecondaryButtonClick,
-  tertiaryButtonLabel,
-  onTertiaryButtonClick,
-  quaternaryButtonLabel,
-  onQuaternaryButtonClick,
-  primaryButtonProps,
-  secondaryButtonProps,
-  tertiaryButtonProps,
-  quaternaryButtonProps,
-  alwaysRender = false,
-}) {
-  const toggleDrawer = (anchor, open) => (event) => {
-    if (
-      event.type === "keydown" &&
-      (event.key === "Tab" || event.key === "Shift")
-    ) {
-      return;
-    }
-    if (handleClose) {
-      handleClose();
-    } else {
-      setIsOpen(!isOpen);
-    }
-  };
-
-  const getSize = (size) => {
-    switch (size) {
-      case "medium":
-        return "impact_drawer_filter_container_medium";
-      default:
-        return "impact_drawer_filter_container_large";
-    }
-  };
-
-  let children = filters.filter((item) => item.value === active);
-
-  if (!tertiaryButtonLabel && !secondaryButtonLabel && !primaryButtonLabel) {
-    return (
-      <Drawer
-        anchor={anchor}
-        open={isOpen}
-        onClose={toggleDrawer(anchor, false)}
-      >
-        <div
-          className={`impact_drawer_filter_container ${getSize(
-            size
-          )} ${className}`}
-        >
-          <FilterPanelHeader
-            title={title}
-            toggleDrawer={toggleDrawer(anchor, false)}
-          />
-          <div className="impact-drawer-filter-main-container">
-            <PanelSidebar
-              filters={filters}
-              active={active}
-              setActive={setActive}
-            />
-            <div className="impact_drawer_filter_container_right_panel">
-              <div className="impact_drawer_filter_body impact_drawer_filter_footer_no_buttons">
-                {children[0].children}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Drawer>
-    );
-  }
-
-  return (
-    <Drawer anchor={anchor} open={isOpen} onClose={toggleDrawer(anchor, false)}>
-      <div
-        className={`impact_drawer_filter_container ${getSize(
-          size
-        )} ${className}`}
-      >
-        <FilterPanelHeader
-          title={title}
-          toggleDrawer={toggleDrawer(anchor, false)}
-        />
-        <div className="impact-drawer-filter-main-container">
-          <PanelSidebar
-            filters={filters}
-            active={active}
-            setActive={setActive}
-          />
-          <div className="impact_drawer_filter_container_right_panel">
-            {alwaysRender ? (
-              filters.map((item) => {
-                return (
-                  <div
-                    className="impact_drawer_filter_body"
-                    key={item.id}
-                    style={{
-                      display: item.value === active ? "block" : "none",
-                    }}
-                  >
-                    {item.children}
-                  </div>
-                );
-              })
-            ) : (
-              <div className="impact_drawer_filter_body">
-                {children[0].children}
-              </div>
-            )}
-            <PanelFooter
-              quaternaryButtonLabel={quaternaryButtonLabel}
-              onQuaternaryButtonClick={onQuaternaryButtonClick}
-              tertiaryButtonLabel={tertiaryButtonLabel}
-              onTertiaryButtonClick={onTertiaryButtonClick}
-              secondaryButtonLabel={secondaryButtonLabel}
-              onSecondaryButtonClick={onSecondaryButtonClick}
-              primaryButtonLabel={primaryButtonLabel}
-              onPrimaryButtonClick={onPrimaryButtonClick}
-              primaryButtonProps={primaryButtonProps}
-              secondaryButtonProps={secondaryButtonProps}
-              tertiaryButtonProps={tertiaryButtonProps}
-              quaternaryButtonProps={quaternaryButtonProps}
-            />
-          </div>
-        </div>
-      </div>
-    </Drawer>
-  );
-}