pixel-react 1.4.6 → 1.4.7

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,117 @@ 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"
+                  />
                 </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/EditTextField/EditTextField.tsx

@@ -5,6 +5,7 @@ import Typography from '../Typography';
 import HighlightText from '../HighlightText';
 import Icon from '../Icon';
 import Tooltip from '../Tooltip';
+import { capitalize } from '../../utils/capitalize/capitalize';
 
 const getErrorMessage = (
   inputValue: string,
@@ -91,10 +92,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
   };
 
   return (
-    <div
-      className="ff-label-edit-text-field"
-      ref={containerRef}
-    >
+    <div className="ff-label-edit-text-field" ref={containerRef}>
       {isEditing ? (
         <div className="ff-label-text-field">
           <div className="ff-label-text-field-without-dropdown">
@@ -159,7 +157,7 @@ const EditTextField: FC<LabelEditTextFieldTypes> = ({
               <HighlightText text={inputValue} highlight={highlightText} />
             </span>
           )}
-          <Tooltip title={editIcon?.name ?? 'edit'}>
+          <Tooltip title={capitalize(editIcon?.name || '') ?? 'Edit'}>
             <Icon
               color={editIcon?.color ?? 'var(--label-edit-cancel-icon)'}
               height={editIcon?.height ?? 20}

package/src/components/Icon/iconList.ts

@@ -111,6 +111,7 @@ import AndroidIcon from '../../assets/icons/android_icon.svg?react';
 import NoAccessIcon from '../../assets/icons/no_access_icon.svg?react';
 import FullAccessIcon from '../../assets/icons/full_access_icon.svg?react';
 import ViewAccessIcon from '../../assets/icons/view_access_icon.svg?react';
+import HideAccessIcon from '../../assets/icons/hide_access_icon.svg?react';
 import AddLocator from '../../assets/icons/add_locator.svg?react';
 import PlusUserIcon from '../../assets/icons/plus_user_icon.svg?react';
 
@@ -248,7 +249,6 @@ Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
 
-
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -345,6 +345,7 @@ Components['linked_defects'] = LinkedDefects;
 Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
+Components['hide_access_icon'] = HideAccessIcon;
 Components['eye_closed'] = EyeClosed;
 Components['attachment_icon'] = AttachmentIcon;
 Components['authorization_icon'] = AuthorizationIcon;
@@ -405,5 +406,4 @@ Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
 Components['eye_open_icon'] = EyeOpenIcon;
 
-
 export default Components;

package/src/components/MenuOption/MenuOption.scss

@@ -47,37 +47,34 @@
 .ff-option-card {
   position: fixed;
   margin: 4px;
-
-  .ff-option-wrapper {
-    border: 1px solid var(--option-card-border-color);
-    background: var(--option-card-bg-color);
-    overflow: hidden;
-    min-height: 32px;
-    min-width: 112px;
-    width: max-content;
-    border-radius: 4px;
-    .ff-options {
-      @extend .fontSm;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  overflow: hidden;
+  min-height: 32px;
+  min-width: 112px;
+  width: max-content;
+  border-radius: 4px;
+  .ff-options {
+    @extend .fontSm;
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 8px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
       cursor: pointer;
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      padding: 8px;
-      gap: 8px;
-      &:hover {
-        background-color: var(--hover-color);
-      }
-      label {
-        cursor: pointer;
-      }
     }
+  }
 
-    .ff-disable-option {
-      opacity: 0.5;
+  .ff-disable-option {
+    opacity: 0.5;
+    cursor: no-drop;
+    label {
       cursor: no-drop;
-      label {
-        cursor: no-drop;
-      }
     }
   }
 }