impact-ui 3.7.25 → 4.0.0-alpha.10

package/src/components/Header/Header.styles.scss

@@ -1,223 +0,0 @@
-@import "../../styles/index.scss";
-
-.impact-header-container {
-  position: fixed;
-  top: 0;
-  left: 64px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 24px;
-  height: 56px;
-  min-width: 700px;
-  width: calc(100% - 64px);
-  background-color: #fff;
-  z-index: 1199;
-  box-shadow: 0px 0px 16px 2px #0000000f;
-}
-
-.impact-header-container-left-side {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 14px;
-}
-
-.impact-header-logo {
-  width: 91px;
-  height: 36px;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.impact-header-separator {
-  display: block;
-  width: 1px;
-  height: 24px;
-  background-color: $disabledSecondaryBorder;
-}
-
-.impact-header-title {
-  font-size: $mediumFontSize;
-  font-weight: $ExtraFontWeight;
-  line-height: 24px;
-  color: $mainFontColor;
-}
-
-.impact-header-container-right-side {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 24px;
-}
-
-.impact-header-notification-container,
-.impact-header-help-container,
-.impact-header-message-container,
-.impact-header-avatar {
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.impact-header-bot-container {
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 34px;
-  background-color: $chatbotBgColor;
-  border-radius: 8px;
-  background: linear-gradient(
-    -45deg,
-    #2ac2aa,
-    #6666ef,
-    #f26922,
-    #8863c0,
-    #0f1937
-  );
-  background-size: 400% 400%;
-  padding-inline: 11px;
-  cursor: pointer;
-
-  &::after {
-    background: url("../../assets/smartBot.svg") no-repeat;
-    width: 16px;
-    height: 16px;
-    background-position: center;
-    background-size: 16px;
-    content: "";
-    position: absolute;
-  }
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: -1px;
-    left: -1px;
-    right: -1px;
-    bottom: -1px;
-    border-radius: 9px;
-    background: linear-gradient(167deg, #2ac2ee, #6962ef, #f26921);
-    z-index: -1;
-  }
-
-  &:hover:not(.impact-header-bot-container-disabled) {
-    background: linear-gradient(-45deg, #2ac2ee, #6962ef, #f26921);
-    background-size: 400% 400%;
-    animation: gradient 2s ease infinite;
-    &::before {
-      background: none;
-    }
-  }
-
-  // Animate the gradient (2nd layer)
-  animation: gradient 5s ease infinite;
-
-  .impact-header-bot-container-text {
-    font-family: $fontFamily;
-    font-size: $normalFontSize;
-    font-weight: $normalFontWeight;
-    line-height: 20px;
-    color: $whiteColor;
-    padding-left: 23px;
-  }
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0% 20% 40% 60% 80%;
-  }
-
-  50% {
-    background-position: 80% 50%;
-  }
-
-  100% {
-    background-position: 0% 20% 40% 60% 80%;
-  }
-}
-
-.impact-header-bot-container-disabled {
-  background-color: $disabledSecondaryBorder;
-  cursor: not-allowed;
-  animation: none;
-  background-image: url("../../assets/smartBot.svg"), none;
-  background-size: 20px 20px;
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-
-  &::before {
-    background: none;
-  }
-}
-
-.impact-header-notification-container {
-  position: relative;
-}
-
-.impact-header-notification-indicator-container {
-  position: absolute;
-  top: 0;
-  left: 14px;
-  width: 8px;
-  height: 8px;
-  // border: 1px solid green;
-}
-
-.impact-header-notification-indicator-outer-circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 10px;
-  height: 10px;
-  background-color: #fceeee;
-  border-radius: 50%;
-  animation: waves 1.5s ease-out infinite;
-}
-
-.impact-header-notification-indicator-inner-circle {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8px;
-  height: 8px;
-  background-color: #c64746;
-  border-radius: 50%;
-}
-
-.impact-header-notification-dnd-container {
-  position: absolute;
-  top: -5px;
-  left: 14px;
-  width: 16px;
-  height: 16px;
-}
-
-.impact-header-avatar {
-  .ia-avatar {
-    border-radius: 8px;
-    line-height: 30px;
-    color: #fff;
-    background-color: $avatarBgColor !important;
-  }
-}
-
-@keyframes waves {
-  from {
-    width: 8px;
-    height: 8px;
-    // border: 0.2px solid red;
-  }
-
-  to {
-    width: 16px;
-    height: 16px;
-    // border: 0.2px solid red;
-  }
-}

package/src/components/Header/index.js

@@ -1,156 +0,0 @@
-import React, { useState } from "react";
-import { Avatar } from "../Avatar";
-import { Menu } from "../Menu";
-// import ImpactLogo from "../../assets/impact-logo.png";
-// import ImpactLogoHD from "../../assets/IA logo-19.svg";
-import ImpactLogoHD2 from "../../assets/IA_Logo.svg";
-import MessageIcon from "../../assets/message-icon.svg";
-import HelpIcon from "../../assets/help-icon.svg";
-import NotificationIcon from "../../assets/bell.svg";
-import NotificationDNDIcon from "../../assets/notification-dnd.svg";
-import ChatBotIcon from "../../assets/chatbot-icon.svg";
-// import DndIcon from "../../assets/dnd.svg";
-import MessageIconDisabled from "../../assets/message-icon-disabled.svg";
-import "./Header.styles.scss";
-// import ChatBotComponent from "../ChatBot";
-
-export function Header({
-  title,
-  userName,
-  handleLogoClick,
-  showNotificationIcon = true,
-  notificationIndicator = true,
-  handleNotificationClick,
-  showHelpIcon = true,
-  handleHelpClick,
-  showMessageIcon = true,
-  handleMessageClick,
-  showChatBotIcon = true,
-  handleChatBotClick,
-  isMessageIconDisabled = false,
-  isNotificationDnd = false,
-  dropMenuOptions = [
-    {
-      label: userName,
-      onClick: () => {},
-    },
-  ],
-  isChatBotDisabled = false,
-  centerComponent,
-  avatarProps,
-  avatarType = "withoutPicture",
-}) {
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
-
-  return (
-    <div className="impact-header-container">
-      <div className="impact-header-container-left-side">
-        <div
-          className="impact-header-logo"
-          role="button"
-          onClick={handleLogoClick}
-        >
-          <img src={ImpactLogoHD2} width="100%" height="100%" />
-        </div>
-        <div className="impact-header-separator" />
-        <div className="impact-header-title">{title}</div>
-      </div>
-      {centerComponent}
-      <div className="impact-header-container-right-side">
-        {showHelpIcon ? (
-          <div
-            className="impact-header-help-container"
-            role="button"
-            onClick={handleHelpClick}
-          >
-            <img src={HelpIcon} width="100%" height="100%" />
-          </div>
-        ) : null}
-        {isMessageIconDisabled ? (
-          showMessageIcon ? (
-            <div
-              className="impact-header-message-container"
-              role="button"
-              //onClick={handleMessageClick}
-            >
-              <img src={MessageIconDisabled} width="100%" height="100%" />
-            </div>
-          ) : null
-        ) : showMessageIcon ? (
-          <div
-            className="impact-header-message-container"
-            role="button"
-            onClick={handleMessageClick}
-          >
-            <img src={MessageIcon} width="100%" height="100%" />
-          </div>
-        ) : null}
-        {isNotificationDnd ? (
-          showNotificationIcon ? (
-            <div
-              className="impact-header-notification-container"
-              role="button"
-              onClick={handleNotificationClick}
-            >
-              <img src={NotificationDNDIcon} width="100%" height="100%" />
-            </div>
-          ) : null
-        ) : showNotificationIcon ? (
-          <div
-            className="impact-header-notification-container"
-            role="button"
-            onClick={handleNotificationClick}
-          >
-            <img src={NotificationIcon} width="100%" height="100%" />
-            {notificationIndicator && (
-              <div className="impact-header-notification-indicator-container">
-                <div className="impact-header-notification-indicator-outer-circle" />
-                <div className="impact-header-notification-indicator-inner-circle" />
-              </div>
-            )}
-          </div>
-        ) : null}
-        {showChatBotIcon ? (
-          <div
-            className={`impact-header-bot-container ${
-              isChatBotDisabled ? "impact-header-bot-container-disabled" : ""
-            }`}
-            role="button"
-            onClick={handleChatBotClick}
-            disabled={isChatBotDisabled}
-          >
-            <span className="impact-header-bot-container-text">Ask Alan</span>
-          </div>
-        ) : null}
-        {/* {showChatBotComponent && (
-          <div className="chatbot-modal-wrapper">
-            <ChatBotComponent
-              onClose={() => setShowChatBotComponent(false)}
-              userName={userName}
-            />
-          </div>
-        )} */}
-        <div
-          className="impact-header-avatar"
-          onClick={(event) => setAnchorEl(event.currentTarget)}
-        >
-          <Avatar
-            label={userName}
-            size="small"
-            type={avatarType}
-            {...avatarProps}
-          />
-        </div>
-        {dropMenuOptions && dropMenuOptions.length > 0 && (
-          <Menu
-            anchorEl={anchorEl}
-            open={open}
-            onClose={() => setAnchorEl(null)}
-            options={dropMenuOptions}
-          />
-        )}
-      </div>
-    </div>
-  );
-}