pixel-react 1.4.6 → 1.4.8

package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss

@@ -5,16 +5,52 @@
   flex-direction: column;
   justify-content: flex-start;
   .ff-all-project-dropdown {
-    background-color: var(--secondary-icon-color);
+    width: fit-content;
+    border-radius: 16px;
+    background-color: var(--ff-all-projects-default-color);
     color: var(--expandable-menu-default-bg);
-    height: 24px;
+    line-height: 18px;
     @include mixins.center-content();
-    gap: 10px;
-    padding: 4px;
-    .label-icon {
-      height: 16px;
-      width: 16px;
-      @include mixins.center-content();
+    padding: 3px;
+    cursor: pointer;
+    &--selected {
+      background-color: var(--primary-icon-color);
+      border-radius: 20px;
+      .ff-all-project-container {
+        border-radius: 20px;
+        background-color: var(--brand-color);
+      }
+    }
+    &:not(.ff-all-project-dropdown--selected):hover {
+      .projects-label {
+        position: relative;
+        white-space: nowrap;
+        &:hover::after {
+          animation: oscillate-border-width 0.5s ease-in-out forwards;
+        }
+        &::after {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 0%;
+          width: 0%;
+          height: 2px;
+          background-color: var(--ff-app-header-menu-border-bottom-color);
+          border-radius: 4px;
+          transition: width 0.15s ease-in-out;
+        }
+      }
+    }
+    .ff-all-project-container {
+      display: flex;
+      padding: 4px;
+      gap: 4px;
+      justify-content: center;
+      .label-icon {
+        height: 16px;
+        width: 16px;
+        @include mixins.center-content();
+      }
     }
   }
   .ff-projects-dropdown {
@@ -130,3 +166,17 @@
     }
   }
 }
+@keyframes oscillate-border-width {
+  0% {
+    width: 50%;
+    left: 25%;
+  }
+  50% {
+    width: 70%;
+    left: 15%;
+  }
+  100% {
+    width: 50%;
+    left: 25%;
+  }
+}

package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AllProjectsDropdown from './AllProjectsDropdown';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { optionsType } from './types';
 
 const meta: Meta<typeof AllProjectsDropdown> = {
@@ -13,45 +13,76 @@ const meta: Meta<typeof AllProjectsDropdown> = {
 };
 
 type Story = StoryObj<typeof AllProjectsDropdown>;
-
+const options = [
+  {
+    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: '',
+  },
+];
 export const Default: Story = {
-  args: {
-    options: [
-      {
-        label: 'Pantaloon Project',
-        value: '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: 'Web Service',
-        value: 'Web Service',
-        iconName: '',
-      },
-    ],
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState({
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
+    });
+
+    const handleSelectedOption = (option: optionsType) => {
+      setSelectedOption(option);
+    };
+
+    return (
+      <div
+        style={{
+          backgroundColor: 'var(--brand-color)',
+          height: 50,
+          width: 120,
+          padding: 10,
+        }}
+      >
+        <AllProjectsDropdown
+          options={options}
+          onClick={handleSelectedOption}
+          selectedOption={selectedOption}
+        />
+      </div>
+    );
   },
 };
-
-export const PrimaryIconButton: Story = {
+export const Selected: Story = {
   render: () => {
     const [selectedOption, setSelectedOption] = useState({
       label: 'All Projects',
@@ -63,45 +94,22 @@ export const PrimaryIconButton: Story = {
       setSelectedOption(option);
     };
 
-    const options = [
-      {
-        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: 'Web Service',
-        value: 'Web Service',
-        iconName: '',
-      },
-    ];
-
     return (
-      <AllProjectsDropdown
-        options={options}
-        onClick={handleSelectedOption}
-        selectedOption={selectedOption}
-      />
+      <div
+        style={{
+          backgroundColor: 'var(--brand-color)',
+          height: 50,
+          width: 120,
+          padding: 10,
+        }}
+      >
+        <AllProjectsDropdown
+          options={options}
+          onClick={handleSelectedOption}
+          selectedOption={selectedOption}
+          selected={true}
+        />
+      </div>
     );
   },
 };

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -10,12 +10,14 @@ import useClickOutside from '../../hooks/useClickOutside';
 
 const AllProjectsDropdown = ({
   onClick = () => {},
+  onMenuClick = () => {},
   options,
   selectedOption = {
     label: 'All Projects',
     value: 'All Projects',
     iconName: 'all_projects',
   },
+  selected = false,
 }: AllProjectsDropdownProps) => {
   const [showOptions, setShowOptions] = useState(false);
   const [selectedOptions, setSelectedOptions] = useState(selectedOption);
@@ -47,24 +49,35 @@ const AllProjectsDropdown = ({
   useClickOutside(optionsRef, closeOptions);
   return (
     <div className={classNames('ff-all-project')}>
-      <div className={classNames('ff-all-project-dropdown')}>
-        <Typography
-          as={'div'}
-          lineHeight={'18px'}
-          fontSize={12}
-          fontWeight={'regular'}
-          className={classNames('projects-label')}
-        >
-          {truncateText(selectedOptions?.label, 12)}
-        </Typography>
-        <div className={classNames('label-icon')} onClick={handleShowOption}>
-          <Icon
-            name="arrows_down_icon"
-            color="var(--primary-icon-color)"
-            height={8}
-            width={8}
-            hoverEffect={false}
-          />
+      <div
+        className={classNames('ff-all-project-dropdown', {
+          ['ff-all-project-dropdown--selected']: selected,
+        })}
+      >
+        <div className={classNames('ff-all-project-container')}>
+          <Typography
+            as={'div'}
+            lineHeight={'18px'}
+            fontSize={12}
+            fontWeight={'regular'}
+            className={classNames('projects-label')}
+            onClick={onMenuClick}
+          >
+            <Tooltip title={selectedOptions?.label}>
+              {selectedOptions.label.length <= 12
+                ? selectedOptions.label
+                : truncateText(selectedOptions?.label, 8)}
+            </Tooltip>
+          </Typography>
+          <div className={classNames('label-icon')} onClick={handleShowOption}>
+            <Icon
+              name="arrows_down_icon"
+              color="var(--primary-icon-color)"
+              height={8}
+              width={8}
+              hoverEffect={false}
+            />
+          </div>
         </div>
       </div>
       {showOptions && (

package/src/components/AllProjectsDropdown/types.ts

@@ -5,6 +5,8 @@ export interface optionsType {
 }
 export interface AllProjectsDropdownProps {
   options: optionsType[];
+  onMenuClick?: () => void;
   onClick: (option: optionsType) => void;
   selectedOption: optionsType;
+  selected?: boolean;
 }

package/src/components/AppHeader/AppHeader.scss

@@ -3,8 +3,7 @@
   justify-content: space-between;
   background-color: var(--brand-color);
   padding-left: 8px;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  height: 40px;
   .ff-app-header-left-container {
     display: flex;
     .ff-app-header-logo-icon {
@@ -82,6 +81,7 @@
               height: 2px;
               border-radius: 4px;
               transition: width 0.15s ease-in-out;
+              background: var(--ff-app-header-submenu-border-bottom-color);
             }
             padding-left: 8px;
             &--selected {

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

@@ -6,7 +6,7 @@ import {
   appHeaderQuickMenuItemProps,
 } from './types';
 import Icon from '../Icon';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { optionsType } from '../AllProjectsDropdown/types';
 
 const meta: Meta<typeof AppHeader> = {
@@ -159,6 +159,9 @@ export const Controlled: Story = {
     const handleProjectClick = (item: optionsType) => {
       setSelectedProject(item);
     };
+    const handleProjectDropdownLabelClick = () => {
+      setSelectedMenuItem('Projects');
+    }
 
     return (
       <>
@@ -178,6 +181,7 @@ export const Controlled: Story = {
             onSubMenuClick={handleSubMenuClick}
             onQuickMenuClick={handleQuickMenuClick}
             onProjectMenuClick={handleProjectClick}
+            onProjectDropdownLabelClick={handleProjectDropdownLabelClick}
           />
         </div>
       </>

package/src/components/AppHeader/AppHeader.tsx

@@ -22,6 +22,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
   onSubMenuClick = () => {},
   onQuickMenuClick = () => {},
   onProjectMenuClick = () => {},
+  onProjectDropdownLabelClick = () => {},
   onMoreMenuOptionClick = () => {},
 }) => {
   return (
@@ -35,112 +36,118 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <div className="ff-app-header-left-content">{leftContent}</div>
           )}
         </div>
-        <div className="ff-app-header-nav-bar">
-          {projectsList && !checkEmpty(projectsList) && (
-            <div>
-              {
-                <AllProjectsDropdown
-                  onClick={onProjectMenuClick}
-                  options={projectsList}
-                  selectedOption={selectedProject}
-                />
-              }
-            </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)}
+        {!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}
                   >
-                    {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)}
+                    <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"
                           >
-                            {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>
+                            {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>
-                      );
-                    })}
+                                            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>
+                                        </>
+                                      );
+                                    }
+                                  )}
+                                </div>
+                              )}
+                          </div>
+                        );
+                      })}
+                  </div>
+                );
+              })}
+            </div>
+            {appHeaderHiddenMenuItems &&
+              !checkEmpty(appHeaderHiddenMenuItems) && (
+                <div>
+                  <MenuOption
+                    iconName="more"
+                    options={appHeaderHiddenMenuItems}
+                    onOptionClick={onMoreMenuOptionClick}
+                    variant="dark"
+                    dropdownPlacement="down"
+                  />
                 </div>
-              );
-            })}
+              )}
           </div>
-          {appHeaderHiddenMenuItems && !checkEmpty(appHeaderHiddenMenuItems) && (
-            <div>
-              <MenuOption
-                iconName="more"
-                options={appHeaderHiddenMenuItems}
-                onOptionClick={onMoreMenuOptionClick}
-                variant='dark'
-              />
-            </div>
-          )}
-        </div>
+        )}
         {rightContent && (
           <div className="ff-app-header-right-content">{rightContent}</div>
         )}

package/src/components/AppHeader/types.ts

@@ -20,6 +20,7 @@ export interface AppHeaderProps {
   onSubMenuClick?: (text: any) => void;
   onQuickMenuClick?: (text: any) => void;
   onProjectMenuClick?: (text: any) => void;
+  onProjectDropdownLabelClick?: () => void;
   onMoreMenuOptionClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {

package/src/components/AttachmentButton/AttachmentButton.tsx

@@ -5,6 +5,7 @@ import Toaster from '../Toast';
 import Icon from '../Icon';
 import { AttachmentUploaderProps } from './types';
 import './AttachmentButton.scss';
+import Tooltip from '../Tooltip';
 
 const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
   label,
@@ -81,7 +82,7 @@ const AttachmentButton: React.FC<AttachmentUploaderProps> = ({
         multiple
         accept="*"
       />
-      {fileError && (
+      {/* {fileError && ( */}
         <Toaster
           isOpen={!!fileError}
           variant="info"
@@ -89,24 +90,28 @@ 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">
                 <Icon
-                  name="add_file"
-                  height={24}
-                  width={24}
+                name="add_file"
+                hoverEffect={true}
                   onClick={handleAttachmentClick}
                 />
+                </Tooltip>
               )}
           </div>
         ))}