pixel-react 1.5.0 → 1.5.1

package/src/components/AppHeader/AppHeader.tsx

@@ -6,6 +6,7 @@ import Typography from '../Typography';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import AllProjectsDropdown from '../AllProjectsDropdown';
 import MenuOption from '../MenuOption';
+import Tooltip from '../Tooltip';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
@@ -26,7 +27,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onMoreMenuOptionClick = () => {},
 }) => {
   return (
-    <>
+    <div className='ff-app-header-main'>
       <div className="ff-app-header">
         <div className="ff-app-header-left-container">
           <div className="ff-app-header-logo-icon">
@@ -70,79 +71,99 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                       {menuItem.label}
                     </Typography>
                     {menuItem.label === selectedMenu &&
-                      menuItem?.subMenuItems &&
-                      menuItem.subMenuItems.map((subMenuItem) => {
-                        return (
-                          <div
-                            key={subMenuItem.label}
-                            className="ff-app-header-submenu-container"
-                          >
-                            <Typography
-                              as="div"
-                              className={classNames(
-                                'ff-app-header-nav-bar-submenu-item',
-                                {
-                                  ['ff-app-header-nav-bar-submenu-item--selected']:
-                                    subMenuItem.label === selectedSubMenu,
-                                }
-                              )}
-                              lineHeight="18px"
-                              onClick={() => onSubMenuClick(subMenuItem)}
-                            >
-                              {subMenuItem.label}
-                            </Typography>
-                            {subMenuItem.label === selectedSubMenu &&
-                              subMenuItem?.quickMenuItems && (
-                                <div className="ff-app-header-quickmenu-container">
-                                  <div>
-                                    <Icon name="vertical_separator" />
-                                  </div>
-                                  {subMenuItem.quickMenuItems.map(
-                                    (quickMenuItem) => {
-                                      return (
-                                        <>
-                                          <div
-                                            key={quickMenuItem.iconName}
-                                            onClick={() =>
-                                              onQuickMenuClick(quickMenuItem)
-                                            }
-                                            className={classNames(
-                                              'ff-app-header-nav-bar-quickmenu-item',
-                                              {
-                                                ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                  quickMenuItem.path ===
-                                                  selectedQuickMenu,
-                                              }
-                                            )}
-                                          >
-                                            <Icon
-                                              name={quickMenuItem.iconName}
-                                              height={24}
-                                              width={24}
-                                            />
-                                          </div>
-                                        </>
-                                      );
+                      menuItem?.subMenuItems && (
+                        <>
+                          {menuItem.subMenuItems.map((subMenuItem) => {
+                            return (
+                              <div
+                                key={subMenuItem.label}
+                                className="ff-app-header-submenu-container"
+                              >
+                                <Typography
+                                  as="div"
+                                  className={classNames(
+                                    'ff-app-header-nav-bar-submenu-item',
+                                    {
+                                      ['ff-app-header-nav-bar-submenu-item--selected']:
+                                        subMenuItem.label === selectedSubMenu,
                                     }
                                   )}
-                                </div>
-                              )}
-                          </div>
-                        );
-                      })}
+                                  lineHeight="18px"
+                                  onClick={() => onSubMenuClick(subMenuItem)}
+                                >
+                                  {subMenuItem.label}
+                                </Typography>
+                              </div>
+                            );
+                          })}
+                          {menuItem.subMenuItems.map((subMenuItem) => {
+                            return (
+                              <div
+                                key={subMenuItem.label}
+                                className="ff-app-header-submenu-container"
+                              >
+                                {subMenuItem.label === selectedSubMenu &&
+                                  subMenuItem?.quickMenuItems && (
+                                    <div className="ff-app-header-quickmenu-container">
+                                      <div>
+                                        <Icon name="vertical_separator" />
+                                      </div>
+                                      {subMenuItem.quickMenuItems.map(
+                                        (quickMenuItem) => {
+                                          return (
+                                            <>
+                                              <div
+                                                key={quickMenuItem.iconName}
+                                                onClick={() =>
+                                                  onQuickMenuClick(
+                                                    quickMenuItem
+                                                  )
+                                                }
+                                                className={classNames(
+                                                  'ff-app-header-nav-bar-quickmenu-item',
+                                                  {
+                                                    ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                      quickMenuItem.iconName ===
+                                                      selectedQuickMenu,
+                                                  }
+                                                )}
+                                              >
+                                                <Tooltip title={quickMenuItem?.label}>
+                                                <Icon
+                                                  name={quickMenuItem.iconName}
+                                                  height={24}
+                                                  width={24}
+                                                  hoverEffect={true}
+                                                />
+                                                </Tooltip>
+                                              </div>
+                                            </>
+                                          );
+                                        }
+                                      )}
+                                    </div>
+                                  )}
+                              </div>
+                            );
+                          })}
+                        </>
+                      )}
                   </div>
                 );
               })}
             </div>
             {appHeaderHiddenMenuItems &&
               !checkEmpty(appHeaderHiddenMenuItems) && (
-                <div>
+                <div className='more-menu'>
                   <MenuOption
                     iconName="more"
                     options={appHeaderHiddenMenuItems}
                     onOptionClick={onMoreMenuOptionClick}
                     variant="dark"
                     dropdownPlacement="down"
+                    zIndex={1001}
+                    tooltipTitle='More'
+                    optionCardVariant='primary'
                   />
                 </div>
               )}
@@ -152,7 +173,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
           <div className="ff-app-header-right-content">{rightContent}</div>
         )}
       </div>
-    </>
+    </div>
   );
 };
 export default AppHeader;

package/src/components/Icon/iconList.ts

@@ -207,7 +207,13 @@ import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_
 import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 import ReplaceIcon from '../../assets/icons/replace_icon.svg?react';
 import HeaderPreset from '../../assets/icons/Header_preset.svg?react';
-
+import ProjectElement from '../../assets/icons/project_element.svg?react';
+import Element from '../../assets/icons/element.svg?react';
+import StepGroup from '../../assets/icons/step_group.svg?react';
+import Variable from '../../assets/icons/variable.svg?react';
+import Defects from '../../assets/icons/defects.svg?react';
+import ApprovalPending from '../../assets/icons/approval_pending.svg?react';
+import Configuration from '../../assets/icons/configuration.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['delete_info'] = DeleteInfoIcon;
@@ -411,5 +417,12 @@ Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
 Components['replace_icon']=ReplaceIcon;
 Components['header_preset'] = HeaderPreset;
+Components['project_element'] = ProjectElement;
+Components['element'] = Element;
+Components['step_group'] = StepGroup;
+Components['variable'] = Variable;
+Components['defects'] = Defects;
+Components['approval_pending'] = ApprovalPending;
+Components['configuration'] = Configuration;
 
 export default Components;

package/src/components/MenuOption/MenuOption.scss

@@ -54,6 +54,23 @@
   min-width: 112px;
   width: max-content;
   border-radius: 4px;
+  &--primary{
+    background: var(--brand-color);
+    color: var(--primary-button-text-color);
+    svg {
+      path {
+        fill: var(--primary-icon-color);
+      }
+    }
+    :hover{
+      color: var(--brand-color);
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+    }
+  }
   .ff-options {
     @extend .fontSm;
     cursor: pointer;

package/src/components/MenuOption/MenuOption.tsx

@@ -46,6 +46,7 @@ const OptionCard = ({
   closeDropdown,
   zIndex,
   dropdownPlacement,
+  variant,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -95,7 +96,11 @@ const OptionCard = ({
 
   return createPortal(
     <div
-      className={classNames('ff-option-card', currentTheme)}
+      className={classNames(
+        'ff-option-card',
+        [{ 'ff-option-card--primary': variant === 'primary' }],
+        currentTheme
+      )}
       style={{ ...style, zIndex }}
       ref={optionCardRef}
     >
@@ -121,6 +126,7 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
+  optionCardVariant
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -202,6 +208,7 @@ const MenuOption = ({
           closeDropdown={closeDropDown}
           zIndex={zIndex}
           dropdownPlacement={dropdownPlacement}
+          variant={optionCardVariant}
         />
       )}
     </div>

package/src/components/MenuOption/types.ts

@@ -91,6 +91,12 @@ interface OptionCardProps {
    * @optional
    */
   dropdownPlacement?: 'top' | 'down' | 'left' | 'right';
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  variant?: 'primary';
 }
 
 interface MenuOptionProps {
@@ -194,6 +200,12 @@ interface MenuOptionProps {
    * @optional
    */
   zIndex?: number;
+  /**
+   * Variant for backgroung color of options card.
+   * @type {string}
+   * @optional
+   */
+  optionCardVariant?: 'primary';
 }
 
 interface OptionProps {