pixel-react 1.5.0 → 1.5.2

package/src/components/AppHeader/AppHeader.stories.tsx

@@ -29,11 +29,42 @@ const defaultArgs = {
 };
 const projectList = [
   {
-    label: 'Test Project1',
-    value: 'Test Project1',
-    iconName: 'plus_icon',
+    label:
+      'Pantaloon Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
+    value:
+      'Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project Pantaloon Web Project',
+    iconName: 'web_icon',
+  },
+  {
+    label: 'Mobile Project',
+    value: 'Mobile Project',
+    iconName: 'mobile_icon',
+  },
+  {
+    label: 'Web & Mobile Project',
+    value: 'Web & Mobile Project',
+    iconName: 'web&mobile_icon',
+  },
+  {
+    label: 'Sales Force',
+    value: 'Sales Force',
+    iconName: 'sales_force',
+  },
+  {
+    label: 'MS Dynamic',
+    value: 'MS Dynamic',
+    iconName: 'ms_dynamic',
+  },
+  {
+    label: 'Test',
+    value: 'test',
+    iconName: 'mobile_icon',
+  },
+  {
+    label: 'Web Service',
+    value: 'Web Service',
+    iconName: '',
   },
-  { label: 'Test Project2', value: 'Test Project2', iconName: 'plus_icon' },
 ];
 const headerMenuItems = [
   { label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
@@ -82,12 +113,14 @@ const headerMenuItems = [
         path: 'Scripts',
         quickMenuItems: [
           {
-            quickMenuName: 'Delete Icon',
-            iconName: 'delete',
+            label:'Element',
+            quickMenuName: 'Element',
+            iconName: 'element',
           },
           {
-            quickMenuName: 'Details Icon',
-            iconName: 'details',
+            label:'Project Element',
+            quickMenuName: 'Project Element',
+            iconName: 'project_element',
           },
           {
             quickMenuName: 'Sun Icon',
@@ -111,8 +144,9 @@ const headerMenuItems = [
   },
 ];
 const headerHiddenMenuItems = [
-  { label: 'Configuration', value: 'Configuration', icon: 'plus_icon' },
-  { label: 'Approval Request', value: 'Approval Request', icon: 'plus_icon' },
+  { label: 'Defects', value: 'Defects', icon: 'defects' },
+  { label: 'Approval Request', value: 'Approval Request', icon: 'approval_pending' },
+  { label: 'Configuration', value: 'Configuration', icon: 'configuration' },
 ];
 const headerRightSideContent = (
   <div>
@@ -135,13 +169,13 @@ export const SampleAppHeader: Story = {
 };
 export const Controlled: Story = {
   render: () => {
-    const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
+    const [selectedMenuItem, setSelectedMenuItem] = useState('Projects');
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
     const [selectedProject, setSelectedProject] = useState({
-      label: '',
-      value: '',
-      iconName: '',
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
     });
     const handleMenuClick = (item: appHeaderMenuItemProps) => {
       setSelectedMenuItem(item.label);

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,133 +27,153 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onMoreMenuOptionClick = () => {},
 }) => {
   return (
-    <>
-      <div className="ff-app-header">
-        <div className="ff-app-header-left-container">
-          <div className="ff-app-header-logo-icon">
-            <Icon color="" name={logoIconName} height={24} width={21} />
-          </div>
-          {leftContent && (
-            <div className="ff-app-header-left-content">{leftContent}</div>
-          )}
+    <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">
+          <Icon color="" name={logoIconName} height={24} width={21} />
         </div>
-        {!checkEmpty(appHeaderMenuItems) && (
-          <div className="ff-app-header-nav-bar">
-            {projectsList && !checkEmpty(projectsList) && (
-              <div>
-                {
-                  <AllProjectsDropdown
-                    onClick={onProjectMenuClick}
-                    options={projectsList}
-                    selectedOption={selectedProject}
-                    onMenuClick={onProjectDropdownLabelClick}
-                    selected={selectedMenu === 'Projects'}
-                  />
-                }
-              </div>
-            )}
-            <div className="ff-app-header-nav-bar-items fontSm">
-              {appHeaderMenuItems.map((menuItem) => {
-                return (
-                  <div
-                    className={classNames('ff-app-header-nav-bar-item', {
-                      ['ff-app-header-nav-bar-item--selected']:
-                        menuItem.label === selectedMenu,
-                    })}
-                    key={menuItem.label}
+        {leftContent && (
+          <div className="ff-app-header-left-content">{leftContent}</div>
+        )}
+      </div>
+      {!checkEmpty(appHeaderMenuItems) && (
+        <div className="ff-app-header-nav-bar">
+          {projectsList && !checkEmpty(projectsList) && (
+            <div>
+              {
+                <AllProjectsDropdown
+                  onClick={onProjectMenuClick}
+                  options={projectsList}
+                  selectedOption={selectedProject}
+                  onMenuClick={onProjectDropdownLabelClick}
+                  selected={selectedMenu === 'Projects'}
+                />
+              }
+            </div>
+          )}
+          <div className="ff-app-header-nav-bar-items fontSm">
+            {appHeaderMenuItems.map((menuItem) => {
+              return (
+                <div
+                  className={classNames('ff-app-header-nav-bar-item', {
+                    ['ff-app-header-nav-bar-item--selected']:
+                      menuItem.label === selectedMenu,
+                  })}
+                  key={menuItem.label}
+                >
+                  <Typography
+                    as="div"
+                    className="ff-app-header-nav-bar-item-label"
+                    lineHeight="18px"
+                    onClick={() => onMenuClick(menuItem)}
                   >
-                    <Typography
-                      as="div"
-                      className="ff-app-header-nav-bar-item-label"
-                      lineHeight="18px"
-                      onClick={() => onMenuClick(menuItem)}
-                    >
-                      {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)}
+                    {menuItem.label}
+                  </Typography>
+                  {menuItem.label === selectedMenu &&
+                    menuItem?.subMenuItems && (
+                      <>
+                        {menuItem.subMenuItems.map((subMenuItem) => {
+                          return (
+                            <div
+                              key={subMenuItem.label}
+                              className="ff-app-header-submenu-container"
                             >
-                              {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,
+                              <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>
+                            </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)
                                               }
-                                            )}
-                                          >
-                                            <Icon
-                                              name={quickMenuItem.iconName}
-                                              height={24}
-                                              width={24}
-                                            />
-                                          </div>
-                                        </>
-                                      );
-                                    }
-                                  )}
-                                </div>
-                              )}
-                          </div>
-                        );
-                      })}
-                  </div>
-                );
-              })}
-            </div>
-            {appHeaderHiddenMenuItems &&
-              !checkEmpty(appHeaderHiddenMenuItems) && (
-                <div>
-                  <MenuOption
-                    iconName="more"
-                    options={appHeaderHiddenMenuItems}
-                    onOptionClick={onMoreMenuOptionClick}
-                    variant="dark"
-                    dropdownPlacement="down"
-                  />
+                                              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={16}
+                                                  width={16}
+                                                  hoverEffect={true}
+                                                />
+                                              </Tooltip>
+                                            </div>
+                                          </>
+                                        );
+                                      }
+                                    )}
+                                  </div>
+                                )}
+                            </div>
+                          );
+                        })}
+                      </>
+                    )}
                 </div>
-              )}
+              );
+            })}
           </div>
-        )}
-        {rightContent && (
-          <div className="ff-app-header-right-content">{rightContent}</div>
-        )}
-      </div>
-    </>
+          {appHeaderHiddenMenuItems &&
+            !checkEmpty(appHeaderHiddenMenuItems) && (
+              <div className="more-menu">
+                <MenuOption
+                  iconName="more"
+                  options={appHeaderHiddenMenuItems}
+                  onOptionClick={onMoreMenuOptionClick}
+                  variant="dark"
+                  dropdownPlacement="down"
+                  zIndex={1001}
+                  tooltipTitle="More"
+                  optionCardVariant="primary"
+                />
+              </div>
+            )}
+        </div>
+      )}
+      {rightContent && (
+        <div className="ff-app-header-right-content">{rightContent}</div>
+      )}
+    </div>
+    </div>
   );
 };
 export default AppHeader;

package/src/components/AttachmentButton/AttachmentButton.stories.tsx

@@ -13,6 +13,8 @@ const meta: Meta<typeof AttachmentButton> = {
     maxFiles: { control: 'number' },
     buttonLabel: { control: 'text' },
     showSelectedFiles: { control: 'boolean' },
+    deleteButton: { control: 'boolean' },
+    addAttachmentButton:{control:'boolean'}
   },
 };
 

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -17,12 +17,15 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
   buttonLabel = 'Select Files',
   showSelectedFiles = true,
   buttonVariant = 'primary',
+  deleteButton = true,
+  addAttachmentButton = true,
 }) => {
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const [fileError, setFileError] = useState<string>('');
   const maxFileSizeBytes = maxFileSizeMB * 1024 * 1024;
 
   const handleAttachmentClick = () => {
+    setFileError('');
     fileInputRef.current?.click();
   };
 
@@ -82,7 +85,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
         multiple
         accept="*"
       />
-      {/* {fileError && ( */}
+      {fileError && (
         <Toaster
           isOpen={!!fileError}
           variant="info"
@@ -90,27 +93,31 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
           toastMessage={fileError}
           zIndex={10000000}
         />
-      {/* )} */}
+      )}
       {showSelectedFiles &&
         selectedFiles.map((file, index) => (
           <div key={file.name} className="ff-attachment-files">
             <Typography color="var(--brand-color)">{file.name}</Typography>
-            <Tooltip title="delete">
-            <Icon
-              name="delete"
-              hoverEffect={true}
-              color="var(--ff-delete-button-attachment)"
-              onClick={() => handleDeleteFile(index)}
-            />
-            </Tooltip>
-            {index === selectedFiles.length - 1 &&
-              selectedFiles.length < maxFiles && (
-              <Tooltip title="add attachment">
+            {deleteButton && (
+              <Tooltip title="Delete">
                 <Icon
-                name="add_file"
-                hoverEffect={true}
-                  onClick={handleAttachmentClick}
+                  name="delete"
+                  hoverEffect={true}
+                  color="var(--ff-delete-button-attachment)"
+                  variant="danger"
+                  onClick={() => handleDeleteFile(index)}
                 />
+              </Tooltip>
+            )}
+            {index === selectedFiles.length - 1 &&
+              selectedFiles.length < maxFiles &&
+              addAttachmentButton && (
+                <Tooltip title="Add Attachment">
+                  <Icon
+                    name="add_file"
+                    hoverEffect={true}
+                    onClick={handleAttachmentClick}
+                  />
                 </Tooltip>
               )}
           </div>

package/src/components/AttachmentButton/types.ts

@@ -8,4 +8,6 @@ export interface AttachmentUploaderProps {
   buttonLabel?: string;
   showSelectedFiles?: boolean;
   buttonVariant?: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
+  deleteButton: boolean;
+  addAttachmentButton: boolean;
 }

package/src/components/Icon/Icon.tsx

@@ -54,7 +54,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       className: classNames('ff-icon-container', {
         'ff-icon-click': hoverEffect,
         'ff-icon-disabled': disabled,
-        'ff-icon-dark': variant === "dark",
+        'ff-icon-dark': variant === 'dark',
+        'ff-icon-danger': variant === 'danger',
         [className]: !!className,
       }),
       ...props,

package/src/components/Icon/Icons.scss

@@ -5,6 +5,11 @@
   padding: 4px;
   box-sizing: content-box;
 
+  &.ff-icon-danger {
+    &:hover {
+      background-color: var(--ff-icon-color-danger-variant);
+    }
+  }
   &.ff-icon-dark {
     background-color: var(--brand-color);
     &.ff-icon-click {

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/Icon/types.ts

@@ -7,7 +7,7 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
-  variant?: "dark" | "light";
+  variant?: "dark" | "light" | 'danger';
   x?:string;
   y?:string;
   chartIcon?:boolean

package/src/components/MenuOption/MenuOption.scss

@@ -51,16 +51,33 @@
   background: var(--option-card-bg-color);
   overflow: hidden;
   min-height: 32px;
-  min-width: 112px;
+  min-width: 110px;
   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;
     border-radius: 3px;
     display: flex;
     align-items: center;
-    padding: 8px;
+    padding: 4px;
     gap: 8px;
     &:hover {
       background-color: var(--hover-color);

package/src/components/MenuOption/MenuOption.tsx

@@ -31,6 +31,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     )}
     <Typography
       as="label"
+      lineHeight='18px'
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
     >
       {option.label}
@@ -46,6 +47,7 @@ const OptionCard = ({
   closeDropdown,
   zIndex,
   dropdownPlacement,
+  variant,
 }: OptionCardProps) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -95,7 +97,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 +127,7 @@ const MenuOption = ({
   variant = 'light',
   zIndex = 99,
   dropdownPlacement = 'down',
+  optionCardVariant
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -202,6 +209,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 {

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react';
 import RadioGroup from './RadioGroup';
 import { useState } from 'react';
 import Icon from '../Icon';
+import React from 'react';
+import { Option } from '../MultiSelect/MultiSelectTypes';
 
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/RadioGroup',

package/src/components/Tooltip/Tooltip.scss

@@ -16,7 +16,7 @@
   color: var(--tooltip-text-color);
   text-align: center;
   border-radius: 5px;
-  padding: 6px 12px;
+  padding: 4px 8px;
   opacity: 0;
   z-index: 10000;