pixel-react 1.1.9 → 1.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/assets/Themes/BaseTheme.scss

@@ -185,6 +185,8 @@ $base-theme: (
   in-active-button-color: #808080,
   button-background-gradient-color: #9c1ebb,
   details-page-value-color: #808080,
+  table-header-text-color: #252c37,
+  table-column-text-color: #200624,
   // TODO:: Need to change the color code values of below 7 color (N/A in DS)
   ff-machine-input-field-border-color: #f1ebf2,
   ff-machine-input-field-text-color: #1e161f,
@@ -199,6 +201,7 @@ $base-theme: (
   ff-delete-button-attachment: #a91224,
   email-table-border-color: #959595,
   ff-icon-hover-fill-color: #f7ebff,
+  ff-icon-color-dark-variant: #FFFFFF,
 );
 :root {
   @each $key, $value in $base-theme {

package/src/assets/Themes/DarkTheme.scss

@@ -196,9 +196,12 @@ $dark-theme: (
   ff-app-header-menu-border-bottom-color:#FFFFFF,
   ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592F7C 0%, #741EBB 100%),
   details-page-value-color: #808080,
+  table-header-text-color: #252c37,
+  table-column-text-color: #200624,
   ff-delete-button-attachment: #a91224,
   email-table-border-color: #959595,
   ff-icon-hover-fill-color:#F7ECF8,
+  ff-icon-color-dark-variant: #FFFFFF,
 );
 :root {
   @each $key, $value in $dark-theme {

package/src/assets/icons/eye_closed.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.7651 6.07607C14.9992 6.22242 15.0704 6.5309 14.9241 6.76507C14.485 7.46755 13.9633 8.10658 13.3703 8.66318L14.5713 9.8642C14.7666 10.0595 14.7666 10.376 14.5713 10.5713C14.376 10.7666 14.0595 10.7666 13.8642 10.5713L12.6012 9.30831C11.8051 9.90297 10.909 10.3622 9.93383 10.6512L10.383 12.3278C10.4545 12.5946 10.2962 12.8687 10.0295 12.9402C9.76275 13.0116 9.48858 12.8534 9.41712 12.5866L8.95924 10.8777C8.4875 10.9581 8.00042 11.0001 7.50007 11.0001C6.9997 11.0001 6.51262 10.9581 6.04087 10.8777L5.58303 12.5866C5.51157 12.8533 5.23741 13.0116 4.97068 12.9402C4.70394 12.8687 4.54564 12.5946 4.6171 12.3278L5.06629 10.6512C4.09115 10.3622 3.19506 9.90296 2.39892 9.30829L1.13591 10.5713C0.940646 10.7666 0.624063 10.7666 0.428801 10.5713C0.233539 10.376 0.233539 10.0595 0.428801 9.86419L1.62984 8.66316C1.03683 8.10656 0.515117 7.46754 0.0760684 6.76507C-0.0702873 6.5309 0.000898553 6.22242 0.235066 6.07607C0.469234 5.92971 0.77771 6.0009 0.924065 6.23507C1.40355 7.00224 1.98901 7.68069 2.66235 8.24283C2.67317 8.25109 2.68373 8.25985 2.69399 8.26911C4.009 9.35541 5.65541 10.0001 7.50007 10.0001C10.3079 10.0001 12.6565 8.50643 14.0761 6.23507C14.2224 6.0009 14.5309 5.92971 14.7651 6.07607Z" fill="currentColor"/>
+</svg>

package/src/components/AppHeader/AppHeader.scss

@@ -45,7 +45,7 @@
         }
 
         &--selected {
-          padding: 3px 6px 3px 3px;
+          padding: 3px;
           background-color: var(--primary-icon-color);
           border-radius: 20px;
           .ff-app-header-nav-bar-item-label {
@@ -53,6 +53,13 @@
             border-radius: 20px;
             padding: 4px 8px;
           }
+          :last-child{
+            margin-right: 3px;
+          }
+          :first-child {
+            margin: 0;
+          }
+          
         }
         .ff-app-header-submenu-container {
           display: flex;
@@ -60,6 +67,7 @@
             color: var(--ff-header-submenu-text-color);
             align-content: center;
             position: relative;
+            white-space: nowrap;
             &:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {
               animation: oscillate-border-width 0.5s ease-in-out forwards;
             }

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

@@ -28,79 +28,79 @@ const defaultArgs = {
 };
 
 const headerMenuItems = [
-  { menuLabel: 'Dashboard', menuName: 'Dashboard', subMenuItems: [] },
+  { label: 'Dashboard', path: 'Dashboard', subMenuItems: [] },
   {
-    menuLabel: 'Repo',
-    menuName: 'Repo',
+    label: 'Repo',
+    path: 'Repo',
     subMenuItems: [
       {
-        subMenuLabel: 'Elements',
-        subMenuName: 'Elements',
+        label: 'Elements',
+        path: 'Elements',
         quickMenuItems: [],
       },
       {
-        subMenuLabel: 'Program Elements',
-        subMenuName: 'Program Elements',
+        label: 'Program Elements',
+        path: 'Program Elements',
         quickMenuItems: [],
       },
       {
-        subMenuLabel: 'Step Groups',
-        subMenuName: 'Step Groups',
+        label: 'Step Groups',
+        path: 'Step Groups',
         quickMenuItems: [
           {
             quickMenuName: 'Success Icon',
-            quickMenuIconName: 'success',
+            iconName: 'success',
           },
           {
             quickMenuName: 'Warning Icon',
-            quickMenuIconName: 'warning',
+            iconName: 'warning',
           },
           {
             quickMenuName: 'Info Icon',
-            quickMenuIconName: 'info',
+            iconName: 'info',
           },
         ],
       },
     ],
   },
   {
-    menuLabel: 'Test Data',
-    menuName: 'Test Data',
+    label: 'Test Data',
+    path: 'Test Data',
     subMenuItems: [],
   },
   {
-    menuLabel: 'Test Dev',
-    menuName: 'Test Dev',
+    label: 'Test Dev',
+    path: 'Test Dev',
     subMenuItems: [
       {
-        subMenuLabel: 'Scripts',
-        subMenuName: 'Scripts',
+        label: 'Scripts',
+        path: 'Scripts',
         quickMenuItems: [
           {
             quickMenuName: 'Delete Icon',
-            quickMenuIconName: 'delete',
+            iconName: 'delete',
           },
           {
             quickMenuName: 'Details Icon',
-            quickMenuIconName: 'details',
+            iconName: 'details',
           },
           {
             quickMenuName: 'Sun Icon',
-            quickMenuIconName: 'sun_icon',
+            iconName: 'sun_icon',
           },
           {
             quickMenuName: 'Moon Stars Icon',
-            quickMenuIconName: 'moon_stars_icon',
+            iconName: 'moon_stars_icon',
           },
           {
             quickMenuName: 'Impact List Icon',
-            quickMenuIconName: 'impactList',
+            iconName: 'impactList',
           },
         ],
       },
       {
-        subMenuLabel: 'Executions',
-        subMenuName: 'Executions',
+        label: 'Executions',
+        path: 'Executions',
         quickMenuItems: [],
       },
     ],
@@ -132,13 +132,13 @@ export const Controlled: Story = {
     const [selectedSubMenuItem, setSelectedSubMenuItem] = useState('');
     const [selectedQuickMenuItem, setSelectedQuickMenuItem] = useState('');
     const handleMenuClick = (item: appHeaderMenuItemProps) => {
-      setSelectedMenuItem(item.menuLabel);
+      setSelectedMenuItem(item.label);
     };
     const handleSubMenuClick = (item: appHeaderSubMenuItemProps) => {
-      setSelectedSubMenuItem(item.subMenuLabel);
+      setSelectedSubMenuItem(item.label);
     };
     const handleQuickMenuClick = (item: appHeaderQuickMenuItemProps) => {
-      setSelectedQuickMenuItem(item.quickMenuIconName);
+      setSelectedQuickMenuItem(item.iconName);
     };
 
     return (

package/src/components/AppHeader/AppHeader.tsx

@@ -40,9 +40,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                 <div
                   className={classNames('ff-app-header-nav-bar-item', {
                     ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.menuLabel === selectedMenu,
+                      menuItem.label === selectedMenu,
                   })}
-                  key={menuItem.menuLabel}
+                  key={menuItem.label}
                   onClick={() => onMenuClick(menuItem)}
                 >
                   <Typography
@@ -50,14 +50,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                     className="ff-app-header-nav-bar-item-label"
                     lineHeight="18px"
                   >
-                    {menuItem.menuLabel}
+                    {menuItem.label}
                   </Typography>
-                  {menuItem.menuLabel === selectedMenu &&
+                  {menuItem.label === selectedMenu &&
                     menuItem?.subMenuItems &&
                     menuItem.subMenuItems.map((subMenuItem) => {
                       return (
                         <div
-                          key={subMenuItem.subMenuLabel}
+                          key={subMenuItem.label}
                           onClick={() => onSubMenuClick(subMenuItem)}
                           className="ff-app-header-submenu-container"
                         >
@@ -67,14 +67,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                               'ff-app-header-nav-bar-submenu-item',
                               {
                                 ['ff-app-header-nav-bar-submenu-item--selected']:
-                                  subMenuItem.subMenuLabel === selectedSubMenu,
+                                  subMenuItem.label === selectedSubMenu,
                               }
                             )}
                             lineHeight="18px"
                           >
-                            {subMenuItem.subMenuLabel}
+                            {subMenuItem.label}
                           </Typography>
-                          {subMenuItem.subMenuLabel === selectedSubMenu &&
+                          {subMenuItem.label === selectedSubMenu &&
                             subMenuItem?.quickMenuItems && (
                               <div className="ff-app-header-quickmenu-container">
                                 <div>
@@ -85,7 +85,7 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                     return (
                                       <>
                                         <div
-                                          key={quickMenuItem.quickMenuIconName}
+                                          key={quickMenuItem.iconName}
                                           onClick={() =>
                                             onQuickMenuClick(quickMenuItem)
                                           }
@@ -93,14 +93,14 @@ const AppHeader: React.FC<AppHeaderProps> = ({
                                             'ff-app-header-nav-bar-quickmenu-item',
                                             {
                                               ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                quickMenuItem.quickMenuName ===
+                                                quickMenuItem.path ===
                                                 selectedQuickMenu,
                                             }
                                           )}
                                         >
                                           <Icon
                                             name={
-                                              quickMenuItem.quickMenuIconName
+                                              quickMenuItem.iconName
                                             }
                                             height={24}
                                             width={24}

package/src/components/AppHeader/types.ts

@@ -15,17 +15,17 @@ export interface AppHeaderProps {
   onQuickMenuClick?: (text: any) => void;
 }
 export interface appHeaderMenuItemProps {
-  menuLabel: string;
-  menuName?: string;
+  label: string;
+  path?: string;
   subMenuItems?: appHeaderSubMenuItemProps[];
 }
 export interface appHeaderSubMenuItemProps {
-  subMenuLabel: string;
-  subMenuName?: string;
+  label: string;
+  path?: string;
   quickMenuItems?: appHeaderQuickMenuItemProps[];
 }
 export interface appHeaderQuickMenuItemProps {
-  quickMenuLabel?: string;
-  quickMenuName?: string;
-  quickMenuIconName: string;
+  label?: string;
+  path?: string;
+  iconName: string;
 }

package/src/components/Button/Button.scss

@@ -125,6 +125,7 @@
     @extend .fontXs;
     font-weight: 500;
     padding: 4.5px 8px;
+    line-height: 15px;
   }
 
   &--medium {

package/src/components/Checkbox/Checkbox.tsx

@@ -53,7 +53,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
           />
         )}
       </span>
-      <Typography as="label">{label}</Typography>
+      <Typography as="span">{label}</Typography>
     </label>
   );
 };

package/src/components/Drawer/Drawer.scss

@@ -12,6 +12,7 @@
     position: fixed;
     right: 0;
     bottom: 0;
+    top: 80px;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
     z-index: 999;
@@ -94,23 +95,21 @@
             justify-content: center;
             border-radius: 8px;
           }
+          .ff-custom-header {
+            background-color: var(--drawer-footer-bg);
+            padding: 4px 8px;
+          }
         }
       }
     }
 
     .ff-drawer-body {
       background-color: var(--drawer-footer-bg);
-      height: calc(100vh - 76px);
-      overflow: hidden auto;
-    }
-
-    .no-footer {
-      height: 100vh;
+      overflow-y: auto;
     }
 
     .ff-drawer-footer {
-      height: 24px;
-      position: absolute;
+      position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
@@ -118,11 +117,16 @@
       display: flex;
       justify-content: space-between;
       border-top: 1px solid var(--drawer-footer-border);
+      z-index: 1000;
 
       .button-container {
         display: flex;
         justify-content: flex-end;
-        gap: 10px;
+        gap: 8px;
+      }
+      .ff-custom-footer {
+        background-color: var(--drawer-footer-bg);
+        padding: 4px 8px;
       }
     }
   }

package/src/components/Drawer/Drawer.stories.tsx

@@ -98,6 +98,34 @@ export const WithCustomFooter: Story = {
     docs: { disable: true },
   },
 };
+export const WithTertiaryButtons: Story = {
+  args: {
+    ...defaultArgs,
+    tertiaryButtonProps: {
+      left: {
+        label: 'Help',
+        onClick: () => {},
+      },
+      right: {
+        label: 'More Info',
+        onClick: () => {},
+      },
+    },
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+
+export const WithCustomZIndex: Story = {
+  args: {
+    ...defaultArgs,
+    zIndex: 1050,
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
 
 export const Controlled: Story = {
   render: () => {

package/src/components/Drawer/Drawer.tsx

@@ -30,6 +30,8 @@ const Drawer: FC<DrawerProps> = ({
   onCloseIconClick,
   customHeader,
   customFooter,
+  tertiaryButtonProps = { left: {}, right: {} },
+  zIndex = 999,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
 
@@ -72,11 +74,16 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
+        style={{ zIndex }}
       >
         {showHeader && (
-          <div className="ff-drawer-header">
+          <div
+            className={classNames('ff-drawer-header', {
+              'ff-custom-header': customHeader,
+            })}
+          >
             {customHeader ? (
-              customHeader
+              <div className="ff-custom-header">{customHeader}</div>
             ) : (
               <div className="ff-drawer-action-section">
                 <div className="ff-action-button">
@@ -106,9 +113,7 @@ const Drawer: FC<DrawerProps> = ({
                       className="ff-expand-collapse-button"
                       onClick={onClose}
                     >
-                      {backButtonIcon ? (
-                        backButtonIcon
-                      ) : (
+                      {backButtonIcon || (
                         <Icon
                           name="error"
                           height={16}
@@ -146,7 +151,11 @@ const Drawer: FC<DrawerProps> = ({
         </div>
 
         {isFooterRequired && (
-          <div className="ff-drawer-footer">
+          <div
+            className={classNames('ff-drawer-footer', {
+              'ff-custom-footer': customFooter,
+            })}
+          >
             {customFooter || footerContent || (
               <>
                 <div className="button-container">
@@ -166,8 +175,22 @@ const Drawer: FC<DrawerProps> = ({
                       transparentBackground={true}
                     />
                   )}
+                  {tertiaryButtonProps.left?.label && (
+                    <Button
+                      {...tertiaryButtonProps.left}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                 </div>
                 <div className="button-container">
+                  {tertiaryButtonProps.right?.label && (
+                    <Button
+                      {...tertiaryButtonProps.right}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                   {secondaryButtonProps.label && (
                     <Button
                       {...secondaryButtonProps}

package/src/components/Drawer/Types.ts

@@ -109,4 +109,15 @@ export interface DrawerProps {
    * If provided, this will render in place of the default footer.
    */
   customFooter?: ReactNode;
+  /**
+   * Tertiary button properties (optional)
+   */
+  tertiaryButtonProps?: {
+    left?: BtnPropsCommon;   
+    right?: BtnPropsCommon;
+  };
+  /**
+   * Custom z-index for the drawer
+   */
+  zIndex?: number;
 }

package/src/components/Icon/Icon.stories.tsx

@@ -6,6 +6,12 @@ const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+    },
+  },
 };
 
 type Story = StoryObj<typeof Icon>;
@@ -34,4 +40,25 @@ export const AllIcons: Story = {
   },
 };
 
+export const DarkVariantIcons: Story = {
+  args: {
+    name: 'hamburger_menu',
+    color: 'var(--ff-icon-color-dark-variant)',
+    variant: 'dark',
+    hoverEffect: true, 
+  },
+  render: (args) => {
+    const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
+    const iconColor = args.variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : 'var(--brand-color)';
+
+    return (
+      <div style={{ backgroundColor, padding: '20px' }}>
+        <Icon {...args} color={iconColor} height={16} width={16} />
+      </div>
+    );
+  },
+};
+
+
+
 export default meta;

package/src/components/Icon/Icon.tsx

@@ -15,6 +15,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       hoverEffect = false,
       className = '',
       disabled = false,
+      variant = "light",
       ...props
     },
     ref
@@ -28,6 +29,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       return null;
     }
 
+    const iconColor = variant === "dark" ? 'var(--ff-icon-color-dark-variant)'  : color;
+
     return (
       <span
         ref={ref}
@@ -36,11 +39,12 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
         className={classNames('ff-icon-container', {
           'ff-icon-click': !!hoverEffect,
           'ff-icon-disabled': disabled,
+          'ff-icon-dark': variant === "dark",
           [className]: !!className,
         })}
         {...props}
       >
-        <IconComponent height="100%" width="100%" style={{ color: color }} />
+        <IconComponent height="100%" width="100%" style={{ color: iconColor }} />
       </span>
     );
   }

package/src/components/Icon/Icons.scss

@@ -1,13 +1,24 @@
-
 .ff-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 4px;
+  &.ff-icon-dark {
+    background-color: var(--brand-color);
+    &.ff-icon-click {
+      &:hover {
+        border-radius: 4px;
+        background-color: white;
+        svg path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
 }
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 4px;
   box-sizing: content-box;
   &:hover {
     border-radius: 4px;

package/src/components/Icon/iconList.ts

@@ -113,6 +113,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 
 import CloneIcon from '../../assets/icons/clone_icon.svg?react';
 import MoveIcon from '../../assets/icons/move_icon.svg?react';
@@ -236,5 +237,6 @@ Components['linked_defects'] = LinkedDefects;
 Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
+Components['eye_closed'] = EyeClosed;
 
 export default Components;

package/src/components/Icon/types.ts

@@ -7,4 +7,5 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
+  variant?: "dark" | "light";
 }

package/src/components/Modal/Modal.tsx

@@ -3,6 +3,7 @@ import { createPortal } from 'react-dom';
 import './modal.scss';
 import { ModalProps } from './types';
 import { ThemeContext } from '../ThemeProvider/ThemeProvider';
+import classNames from 'classnames';
 
 const Modal: React.FC<ModalProps> = ({
   isOpen,
@@ -54,7 +55,13 @@ const Modal: React.FC<ModalProps> = ({
       onClick={shouldCloseOnOverlayClick ? onClose : undefined}
     >
       <div
-        className={`ff-modal-content ${currentTheme} ${contentClassName || ''}`}
+        className={classNames(
+          `ff-modal-content ${currentTheme} ${contentClassName}`,
+          {
+            'modal-bottom-border': !isFooterDisplayed,
+            'modal-top-border': !isHeaderDisplayed,
+          }
+        )}
         style={{ width: customWidth, height: customHeight }}
         onClick={(e) => e.stopPropagation()}
         aria-label={contentLabel}

package/src/components/Modal/modal.scss

@@ -15,7 +15,6 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px;
   padding: 8px;
   
   .ff-modal-header {
@@ -24,6 +23,15 @@
   }
 }
 
+.modal-bottom-border {
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+.modal-top-border {
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
 .ff-modal-footer {
   background-color: var(--expandable-menu-option-bg);
   max-width: 100%;
@@ -35,5 +43,5 @@
   justify-content: end;
   align-items: center;
   gap: 8px;
-  padding: 4px 16px;
+  padding: 4px 8px;
 }