pixel-react 1.1.3 → 1.1.5

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

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AllProjectsDropdown from './AllProjectsDropdown';
+import { useState } from 'react';
+import { optionsType } from './types';
 
 const meta: Meta<typeof AllProjectsDropdown> = {
   title: 'Components/AllProjectsDropdown',
@@ -12,9 +14,105 @@ const meta: Meta<typeof AllProjectsDropdown> = {
 
 type Story = StoryObj<typeof AllProjectsDropdown>;
 
+export const Default: Story = {
+  args: {
+    options: [
+      {
+        label: 'All Projects',
+        value: 'All Projects',
+        iconName: 'all_projects',
+      },
+      {
+        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: '',
+      },
+    ],
+  },
+};
+
 export const PrimaryIconButton: Story = {
   render: () => {
-    return <AllProjectsDropdown/>;
+    const [selectedOption, setSelectedOption] = useState({
+      label: 'All Projects',
+      value: 'All Projects',
+      iconName: 'all_projects',
+    });
+
+    const handleSelectedOption = (option: optionsType) => {
+      setSelectedOption(option);
+    };
+
+    const options = [
+      {
+        label: 'All Projects',
+        value: 'All Projects',
+        iconName: 'all_projects',
+      },
+      {
+        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: '',
+      },
+    ];
+
+    return (
+      <AllProjectsDropdown
+        options={options}
+        onClick={handleSelectedOption}
+        selectedOption={selectedOption}
+      />
+    );
   },
 };
 

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -1,79 +1,49 @@
 import { useState } from 'react';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { ffid } from '../../utils/ffID/ffid';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import './AllProjectsDropdown.scss';
 import classNames from 'classnames';
+import { AllProjectsDropdownProps, optionsType } from './types';
 
-const AllProjectsDropdown = () => {
-  const [showOptions, setShowOptions] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState({
+const AllProjectsDropdown = ({
+  onClick = () => {},
+  options,
+  selectedOption = {
     label: 'All Projects',
     value: 'All Projects',
     iconName: 'all_projects',
-  });
+  },
+}: AllProjectsDropdownProps) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState(selectedOption);
   const [search, setSearch] = useState(true);
 
-  let options = [
-    {
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    },
-    {
-      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: '',
-    },
-  ];
-
-  const handleSelect = () => {
+  const handleShowOption = () => {
     setShowOptions(!showOptions);
   };
 
-  const handleSelectOption = (option: {
-    label: string;
-    value: string;
-    iconName: string;
-  }) => {
+  const handleSelectOption = (option: optionsType) => {
     setSelectedOptions(option);
     setShowOptions(false);
+    () => onClick(option);
   };
 
   const handleInput = () => {
     setSearch(false);
   };
 
+  const handleSearchEnter = () => {
+    setSearch(false);
+  };
+  const handleSearchLeave = () => {
+    setSearch(true);
+  };
+
   return (
     <div className={classNames('ff-all-project')}>
       <div
-        onClick={handleSelect}
+        onClick={handleShowOption}
         className={classNames('ff-all-project-dropdown')}
       >
         <Typography
@@ -83,7 +53,7 @@ const AllProjectsDropdown = () => {
           fontWeight={'regular'}
           className={classNames('projects-label')}
         >
-          {truncateText(selectedOptions.label, 12)}
+          {truncateText(selectedOptions?.label, 12)}
         </Typography>
         <div className={classNames('label-icon')}>
           <Icon
@@ -96,11 +66,15 @@ const AllProjectsDropdown = () => {
       </div>
       {showOptions && (
         <div className={classNames('ff-dropdown')}>
-          <div className={classNames('ff-search')}>
+          <div
+            className={classNames('ff-search')}
+            onMouseEnter={() => handleSearchEnter()}
+            onMouseLeave={() => handleSearchLeave()}
+          >
             {search && <Icon name="search" height={8} width={8} />}
             <input
               type="text"
-              placeholder="Search Project"
+              placeholder={`${search ? 'Search Project' : ''}`}
               onClick={() => handleInput()}
             />
           </div>
@@ -110,9 +84,9 @@ const AllProjectsDropdown = () => {
               `${options.length > 4 ? 'scroll' : ''}`
             )}
           >
-            {options.map((option) => (
+            {options.map((option, index) => (
               <div
-                key={ffid()}
+                key={index}
                 onClick={() => handleSelectOption(option)}
                 className={classNames(
                   'projects-options',
@@ -133,7 +107,7 @@ const AllProjectsDropdown = () => {
                     }
                   />
                 </div>
-                <Typography key={ffid()} as={'div'} lineHeight={'30px'}>
+                <Typography key={index} as={'div'} lineHeight={'30px'}>
                   {option.label}
                 </Typography>
               </div>

package/src/components/AllProjectsDropdown/types.ts

@@ -0,0 +1,10 @@
+export interface optionsType {
+  label: string;
+  value: string;
+  iconName: string;
+}
+export interface AllProjectsDropdownProps {
+  options: optionsType[];
+  onClick: (option: optionsType) => void;
+  selectedOption: optionsType;
+}

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

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import AppHeader from './AppHeader';
+import {
+  appHeaderMenuItemProps,
+  appHeaderSubMenuItemProps,
+  appHeaderQuickMenuItemProps,
+} from './types';
 import Icon from '../Icon';
 import { useState } from 'react';
 
@@ -23,22 +28,23 @@ const defaultArgs = {
 };
 
 const headerMenuItems = [
+  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
   {
-    menuName: 'Dashboard',
-    subMenuItems: [],
-  },
-  {
+    menuLabel: 'Repo',
     menuName: 'Repo',
     subMenuItems: [
       {
+        subMenuLabel: 'Elements',
         subMenuName: 'Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Program Elements',
         subMenuName: 'Program Elements',
         quickMenuItems: [],
       },
       {
+        subMenuLabel: 'Step Groups',
         subMenuName: 'Step Groups',
         quickMenuItems: [
           {
@@ -58,13 +64,16 @@ const headerMenuItems = [
     ],
   },
   {
+    menuLabel: 'Test Data',
     menuName: 'Test Data',
     subMenuItems: [],
   },
   {
+    menuLabel: 'Test Dev',
     menuName: 'Test Dev',
     subMenuItems: [
       {
+        subMenuLabel: 'Scripts',
         subMenuName: 'Scripts',
         quickMenuItems: [
           {
@@ -90,6 +99,7 @@ const headerMenuItems = [
         ],
       },
       {
+        subMenuLabel: 'Executions',
         subMenuName: 'Executions',
         quickMenuItems: [],
       },
@@ -121,14 +131,14 @@ export const Controlled: Story = {
     const [selectedMenuItem, setSelectedMenuItem] = useState('Test Data');
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
-    const handleMenuClick = (item: string) => {
-      setSelectedMenuItem(item);
+    const handleMenuClick = (item: appHeaderMenuItemProps) => {
+      setSelectedMenuItem(item.menuLabel);
     };
-    const handleSubMenuClick = (item: string) => {
-      setSelectedSubMenuItem(item);
+    const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
+      setSelectedSubMenuItem(item.subMenuLabel);
     };
-    const handleQuickMenuClick = (item: string) => {
-      setSelectedQuickMenuItem(item);
+    const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
+      setSelectedQuickMenuItem(item.quickMenuIconName);
     };
 
     return (

package/src/components/AppHeader/AppHeader.tsx

@@ -3,10 +3,14 @@ import Icon from '../Icon';
 import './AppHeader.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+// import AllProjectsDropdown from '../AllProjectsDropdown';
 
 const AppHeader: React.FC<AppHeaderProps> = ({
   logoIconName = 'fireflink_icon',
+  leftContent,
   rightContent,
+  projectsList,
   appHeaderMenuItems,
   selectedMenu,
   selectedSubMenu,
@@ -21,35 +25,38 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         <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-nav-bar">
-          <div>All projects</div>
+          {checkEmpty(projectsList) && (
+            <div>{/* <AllProjectsDropdown /> */}</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.menuName === selectedMenu,
+                      menuItem.menuLabel === selectedMenu,
                   })}
-                  key={menuItem.menuName}
-                  onClick={() => onMenuClick(menuItem.menuName)}
+                  key={menuItem.menuLabel}
+                  onClick={() => onMenuClick(menuItem)}
                 >
                   <Typography
                     as="div"
                     className="ff-app-header-nav-bar-item-label"
                     lineHeight="18px"
                   >
-                    {menuItem.menuName}
+                    {menuItem.menuLabel}
                   </Typography>
-                  {menuItem.menuName === selectedMenu &&
+                  {menuItem.menuLabel === selectedMenu &&
                     menuItem?.subMenuItems &&
                     menuItem.subMenuItems.map((subMenuItem) => {
                       return (
                         <div
-                          key={subMenuItem.subMenuName}
-                          onClick={() =>
-                            onSubMenuClick(subMenuItem.subMenuName)
-                          }
+                          key={subMenuItem.subMenuLabel}
+                          onClick={() => onSubMenuClick(subMenuItem)}
                           className="ff-app-header-submenu-container"
                         >
                           <Typography
@@ -58,14 +65,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                               'ff-app-header-nav-bar-submenu-item',
                               {
                                 ['ff-app-header-nav-bar-submenu-item--selected']:
-                                  subMenuItem.subMenuName === selectedSubMenu,
+                                  subMenuItem.subMenuLabel === selectedSubMenu,
                               }
                             )}
                             lineHeight="18px"
                           >
-                            {subMenuItem.subMenuName}
+                            {subMenuItem.subMenuLabel}
                           </Typography>
-                          {subMenuItem.subMenuName === selectedSubMenu &&
+                          {subMenuItem.subMenuLabel === selectedSubMenu &&
                             subMenuItem?.quickMenuItems && (
                               <div className="ff-app-header-quickmenu-container">
                                 <div>
@@ -78,9 +85,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                         <div
                                           key={quickMenuItem.quickMenuIconName}
                                           onClick={() =>
-                                            onQuickMenuClick(
-                                              quickMenuItem.quickMenuName
-                                            )
+                                            onQuickMenuClick(quickMenuItem)
                                           }
                                           className={classNames(
                                             'ff-app-header-nav-bar-quickmenu-item',
@@ -116,7 +121,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
             <Icon name="more" className="ff-app-header-more-icon" />
           </div>
         </div>
-        <div className="ff-app-header-right-content">{rightContent}</div>
+        {rightContent && (
+          <div className="ff-app-header-right-content">{rightContent}</div>
+        )}
       </div>
     </>
   );

package/src/components/AppHeader/types.ts

@@ -2,26 +2,30 @@ import { ReactNode } from 'react';
 
 export interface AppHeaderProps {
   logoIconName: string;
-  rightContent: ReactNode;
-  projectsList: string[];
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: string[];
   appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems: string[];
+  appHeaderHiddenMenuItems?: string[];
   selectedMenu: string;
-  selectedSubMenu : string;
-  selectedQuickMenu : string;
-  onMenuClick ?:  (text: any) => void;
-  onSubMenuClick ?:  (text: any) => void;
-  onQuickMenuClick ?:  (text: any) => void;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-  menuName: string;
-  subMenuItems: appHeaderSubMenuItemProps[];
+  menuLabel: string;
+  menuName?: string;
+  subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-  subMenuName: string;
-  quickMenuItems: appHeaderQuickMenuItemProps[];
+  subMenuLabel: string;
+  subMenuName?: string;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-  quickMenuName: string;
+  quickMenuLabel?: string;
+  quickMenuName?: string;
   quickMenuIconName: string;
 }

package/src/components/Button/Button.scss

@@ -92,6 +92,10 @@
       background: $delete-button-hover;
     }
   }
+  &--warning {
+    background: var(--warning-button-color);
+    border: var(--warning-button-border);
+  }
 
   &--secondary {
     &:before {

package/src/components/Button/Button.stories.tsx

@@ -45,6 +45,13 @@ export const Delete: Story = {
     variant: 'delete',
   },
 };
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    variant: 'warning',
+  },
+};
 export const PrimaryWithIcon: Story = {
   args: {
     ...defaultArgs,

package/src/components/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export { default } from './Button';

package/src/components/Button/types.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
   /**
    * Variant of the button
    */
-  variant: 'primary' | 'secondary' | 'tertiary' | 'delete';
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete'| 'warning';
   /**
    * What background color to use
    */
@@ -61,5 +61,5 @@ export interface ButtonProps {
    * Give icon name availble in storybook that to be on left side of button
    */
   iconPosition?: 'left' | 'right';
-  transparentBackground?:boolean;
+  transparentBackground?: boolean;
 }

package/src/components/Drawer/Drawer.scss

@@ -9,10 +9,9 @@
   }
 
   .ff-drawer {
-    height: 100vh;
     position: fixed;
     right: 0;
-    top: 0;
+    top: 80px;
     bottom: 0;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
@@ -42,14 +41,14 @@
     &--x-large {
       transition: all 0.4s ease-in-out;
       border-radius: 5px;
-      border: 2px solid var(--border-color);
+      border: 1px solid var(--border-color);
     }
 
     .ff-drawer-header {
-      padding: 10px 8px 10px 8px;
+      padding: 4px 8px 4px 8px;
       display: flex;
       gap: 10px;
-      border-bottom: 2px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
 
       .ff-drawer-title {
         @extend .fontSm;
@@ -59,6 +58,15 @@
         align-items: center;
         gap: 12px;
       }
+      .ff-close-icon {
+        height: 16px;
+        width: 16px;
+        background-color: var(--button-bg-color);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
       .ff-drawer-action-section {
         width: 100%;
@@ -66,14 +74,17 @@
         align-items: center;
         justify-content: space-between;
         gap: 12px;
+        height: 24px;
 
         .ff-action-button {
           display: flex;
           align-items: center;
-          gap: 12px;
+          gap: 5px;
 
           .ff-expand-collapse-button {
             cursor: pointer;
+            height: 24px;
+            width: 24px;
             background-color: var(--button-bg-color);
             outline: none;
             border: none;
@@ -82,8 +93,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 6px;
-            padding: 6px;
+            border-radius: 8px;
           }
         }
       }
@@ -100,19 +110,20 @@
     }
 
     .ff-drawer-footer {
+      height: 24px;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      padding: 5px 16px 5px 16px;
+      padding: 4px 8px 4px 8px;
       display: flex;
       justify-content: space-between;
-      border-top: 2px solid var(--drawer-footer-border);
+      border-top: 1px solid var(--drawer-footer-border);
 
       .button-container {
         display: flex;
         justify-content: flex-end;
-        gap: 16px;
+        gap: 10px;
       }
     }
   }