pixel-react 1.4.5 → 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/Charts/DashboardDonutChart/DashboardDonutChart.tsx

@@ -141,7 +141,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
-                  fontSize={22}
+                  fontSize={20}
                   fontWeight="semi-bold"
                   className="ff-legend-value"
                   color={
@@ -152,7 +152,7 @@ const DashboardDonutChart: React.FC<DashboardDonutChartProps> = ({
                 >
                   {item.value} {showUnit && unit?.toUpperCase()}
                 </Typography>
-                <Typography fontSize={12} className="ff-legend-key">
+                <Typography fontSize={10} className="ff-legend-key">
                   {item.key}
                 </Typography>
               </div>

package/src/components/Checkbox/Checkbox.scss

@@ -14,7 +14,7 @@
     @include mixins.box(16px, 1px solid var(--checkbox-border-color));
     box-sizing: border-box;
     border-radius: 2px;
-    margin-right: 8px;
+    margin-right: 4px;
     background-color: var(--checkbox-bg-color);
     position: relative;
     @include mixins.center-content;

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';
 
@@ -202,6 +203,7 @@ import AddLabelIcon from '../../assets/icons/add_label_icon.svg?react';
 import QuickRunSettingIcon from '../../assets/icons/quick_run_setting_icon.svg?react';
 import RunManualTestcaseIcon from '../../assets/icons/run_manual_testcase_icon.svg?react';
 import RunAutomationScriptsIcon from '../../assets/icons/run_automation_scripts_icon.svg?react';
+import EyeOpenIcon from '../../assets/icons/eye_open_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -247,7 +249,6 @@ Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
 Components['add_variable'] = AddVariable;
 
-
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
 Components['italic'] = Italic;
@@ -344,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;
@@ -402,6 +404,6 @@ Components['add_label_icon'] = AddLabelIcon;
 Components['quick_run_setting'] = QuickRunSettingIcon;
 Components['run_manual_testcase'] = RunManualTestcaseIcon;
 Components['run_automation_scripts'] = RunAutomationScriptsIcon;
-
+Components['eye_open_icon'] = EyeOpenIcon;
 
 export default Components;