pixel-react 1.1.3 → 1.1.5

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Drawer from './Drawer';
 import { useState } from 'react';
 import Button from '../Button';
+import Icon from '../Icon';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Drawer',
@@ -20,6 +21,7 @@ const defaultArgs = {
   title: 'Drawer Title',
   showEditButton: false,
   _isExpanded: false,
+  showHeader: true,
   onClose: () => {},
   primaryButtonProps: {
     label: 'Create',
@@ -49,12 +51,51 @@ const defaultArgs = {
   overlay: false,
   isFooterRequired: true,
   footerContent: null,
+  backButtonIcon: <Icon name="error" height={16} width={16} />,
+  onCloseIconClick: () => alert('Close icon clicked!'),
 };
 
 export const Default: Story = {
   args: {
     ...defaultArgs,
     size: 'medium',
+    showHeader: true,
+  },
+};
+export const WithoutHeader: Story = {
+  args: {
+    ...defaultArgs,
+    showHeader: false,
+    size: 'medium',
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomHeader: Story = {
+  args: {
+    ...defaultArgs,
+    customHeader: (
+      <div>
+        <h3>My Custom Header</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomFooter: Story = {
+  args: {
+    ...defaultArgs,
+    customFooter: (
+      <div>
+        <h3>My Custom Footer</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
   },
 };
 

package/src/components/Drawer/Drawer.tsx

@@ -25,6 +25,11 @@ const Drawer: FC<DrawerProps> = ({
   _isExpanded = false,
   isBackButtonVisible = false,
   _isCloseModalButtonVisible = true,
+  showHeader = true,
+  backButtonIcon,
+  onCloseIconClick,
+  customHeader,
+  customFooter,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
 
@@ -68,45 +73,69 @@ const Drawer: FC<DrawerProps> = ({
           'ff-drawer--open': isOpen,
         })}
       >
-        <div className="ff-drawer-header">
-          <div className="ff-drawer-action-section">
-            <div className="ff-action-button">
-              {showEditButton && (
-                <button className="ff-expand-collapse-button" onClick={onEdit}>
-                  {/* icons are not provided yet so using dummy icons */}
-                  <Icon name="logo" height={16} width={16} />
-                  Edit
-                </button>
-              )}
-              {_isExpanded && (
-                <button
-                  className="ff-expand-collapse-button"
-                  onClick={toggleExpand}
-                >
-                  <Icon
-                    name={isExpanded ? 'logo' : 'logo'}
-                    height={16}
-                    width={16}
-                  />
-                </button>
-              )}
-              {isBackButtonVisible && (
-                <button className="ff-expand-collapse-button" onClick={onClose}>
-                  <Icon
-                    name="error"
-                    height={16}
-                    width={16}
-                    hoverEffect={false}
-                  />
-                </button>
-              )}
-              <div className="ff-drawer-title">{title}</div>
-            </div>
-            {_isCloseModalButtonVisible && (
-              <Icon name="close" hoverEffect={false} onClick={onClose} />
+        {showHeader && (
+          <div className="ff-drawer-header">
+            {customHeader ? (
+              customHeader
+            ) : (
+              <div className="ff-drawer-action-section">
+                <div className="ff-action-button">
+                  {showEditButton && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onEdit}
+                    >
+                      <Icon name="logo" height={16} width={16} />
+                      Edit
+                    </button>
+                  )}
+                  {_isExpanded && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={toggleExpand}
+                    >
+                      <Icon
+                        name={isExpanded ? 'logo' : 'logo'}
+                        height={16}
+                        width={16}
+                      />
+                    </button>
+                  )}
+                  {isBackButtonVisible && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onClose}
+                    >
+                      {backButtonIcon ? (
+                        backButtonIcon
+                      ) : (
+                        <Icon
+                          name="error"
+                          height={16}
+                          width={16}
+                          hoverEffect={false}
+                        />
+                      )}
+                    </button>
+                  )}
+                  {title && <div className="ff-drawer-title">{title}</div>}
+                </div>
+                {_isCloseModalButtonVisible && (
+                  <div className="ff-close-icon">
+                    <Icon
+                      name="close"
+                      hoverEffect={false}
+                      onClick={onCloseIconClick || onClose}
+                      height={6}
+                      width={6}
+                      color="var(--tabs-label-active-color)"
+                    />
+                  </div>
+                )}
+              </div>
             )}
           </div>
-        </div>
+        )}
 
         <div
           className={classNames('ff-drawer-body', {
@@ -118,9 +147,7 @@ const Drawer: FC<DrawerProps> = ({
 
         {isFooterRequired && (
           <div className="ff-drawer-footer">
-            {footerContent ? (
-              footerContent
-            ) : (
+            {customFooter || footerContent || (
               <>
                 <div className="button-container">
                   {leftSecondaryButtonProps.label && (

package/src/components/Drawer/Types.ts

@@ -48,7 +48,7 @@ export interface DrawerProps {
   /**
    * Header title for the drawer
    */
-  title: string | ReactNode;
+  title?: string | ReactNode;
   /**
    * To show the edit button on the header
    */
@@ -85,4 +85,28 @@ export interface DrawerProps {
    * footer Content
    */
   footerContent?: ReactNode;
+  /**
+   * To show or hide the header
+   */
+  showHeader?: boolean;
+  /**
+   *  Custom back button icon
+   * The icon to display for the back button.
+   * If not provided, a default icon will be used.
+   */
+  backButtonIcon?: ReactNode; 
+  /**
+   * Callback function when the close icon is clicked
+   */
+  onCloseIconClick?: () => void;
+   /**
+   * Custom header for the drawer, replacing the default header.
+   * If provided, this will render in place of the default header.
+   */
+   customHeader?: ReactNode;
+   /**
+   * Custom footer for the drawer, replacing the default footer.
+   * If provided, this will render in place of the default footer.
+   */
+  customFooter?: ReactNode;
 }

package/src/components/GridLayout/GridLayout.scss

@@ -1,5 +1,3 @@
-
-
 /* Container */
 .ff-container {
   margin-right: auto;

package/src/components/GridLayout/GridLayout.tsx

@@ -1,32 +1,39 @@
-
 import React from 'react';
 import './GridLayout.scss';
 import { ContainerProps, RowProps, ColProps } from './types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 export const Container: React.FC<ContainerProps> = ({
   children,
   fluid = false,
   gap = '0px',
-  className=''
+  className = '',
 }) => {
   const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return (
-    <div className={cx(containerClassName,className)} style={{ gap }}>
+    <div className={cx(containerClassName, className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Row: React.FC<RowProps> = ({ children, gap = '0px',className='' }) => {
+export const Row: React.FC<RowProps> = ({
+  children,
+  gap = '0px',
+  className = '',
+}) => {
   return (
-    <div className={cx("ff-row",className)} style={{ gap }}>
+    <div className={cx('ff-row', className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Col: React.FC<ColProps> = ({ children, size = 12,className='' }) => {
+export const Col: React.FC<ColProps> = ({
+  children,
+  size = 12,
+  className = '',
+}) => {
   const colClassName = `ff-col-${size}`;
-  return <div className={cx(colClassName,className)}>{children}</div>;
+  return <div className={cx(colClassName, className)}>{children}</div>;
 };

package/src/components/Icon/Icon.tsx

@@ -1,43 +1,49 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Components from './iconList';
 import './Icons.scss';
 import { IconProps } from './types';
 
-const Icon = ({
-  name,
-  height,
-  width,
-  onClick = () => {},
-  color = '#808080',
-  hoverEffect = false,
-  className = '',
-  disabled = false,
-  ...props
-}: IconProps) => {
-  const IconComponent = Components[name];
+const Icon = forwardRef<HTMLSpanElement, IconProps>(
+  (
+    {
+      name,
+      height,
+      width,
+      onClick = () => {},
+      color = 'var(--brand-color)', // Default color
+      hoverEffect = false,
+      className = '',
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    const IconComponent = Components[name];
 
-  const iconHeight = height ? height : 16;
-  const iconWidth = width ? width : 16;
-
-  if (!IconComponent) {
-    return null;
-  }
+    const iconHeight = height || 16;
+    const iconWidth = width || 16;
 
+    if (!IconComponent) {
+      return null;
+    }
 
-  return (
-    <span
-      onClick={disabled ? () => {} : onClick}
-      style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
-      className={classNames('ff-icon-container', {
-        'ff-icon-click': !!hoverEffect,
-        'ff-icon-disabled': disabled,
-        [className]: !!className,
-      })}
-      {...props}
-    >
-      <IconComponent height="100%" width="100%" style={{ color: color }} />
-    </span>
-  );
-};
+    return (
+      <span
+        ref={ref}
+        onClick={disabled ? () => {} : onClick}
+        style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
+        className={classNames('ff-icon-container', {
+          'ff-icon-click': !!hoverEffect,
+          'ff-icon-disabled': disabled,
+          [className]: !!className,
+        })}
+        {...props}
+      >
+        <IconComponent height="100%" width="100%" style={{ color: color }} />
+      </span>
+    );
+  }
+);
 
 export default Icon;

package/src/components/Icon/iconList.ts

@@ -38,7 +38,7 @@ import ViewIcon from '../../assets/icons/view_icon.svg?react';
 import ExportCollection from '../../assets/icons/export_collection_icon.svg?react';
 import RunIcon from '../../assets/icons/run_icon.svg?react';
 import AddVariable from '../../assets/icons/add_variable_icon.svg?react';
-
+import ManualLocator from '../../assets/icons/manual_locator.svg?react';
 import LicenseIcon from '../../assets/icons/active_license_icon.svg?react';
 import DeleteIcon from '../../assets/icons/delete.svg?react';
 import DetailsIcon from '../../assets/icons/details.svg?react';
@@ -54,6 +54,14 @@ import DownloadFile from '../../assets/icons/download-icon.svg?react';
 import RefreshIcon from '../../assets/icons/refresh-icon.svg?react';
 import LicenseInfo from '../../assets/icons/license_info.svg?react';
 import LicenseWarning from '../../assets/icons/license_warning.svg?react';
+import Windows from '../../assets/icons/windows.svg?react';
+import DataListIcon from '../../assets/icons/dataset_list.svg?react';
+import Mac from '../../assets/icons/mac.svg?react';
+import Android from '../../assets/icons/android.svg?react';
+import Chrome from '../../assets/icons/chrome.svg?react';
+import BrowserStack from '../../assets/icons/browser_stack.svg?react';
+import Run from '../../assets/icons/run_icon.svg?react';
+
 import DownloadIcon from '../../assets/icons/download_icon.svg?react';
 import WebIcon from '../../assets/icons/web_icon.svg?react';
 import WebMobileIcon from '../../assets/icons/web&mobile_icon.svg?react';
@@ -62,12 +70,13 @@ import SalesForceIcon from '../../assets/icons/sales_force.svg?react';
 import MSDynamicIcon from '../../assets/icons/ms_dynamic.svg?react';
 import AllProjectsIcon from '../../assets/icons/all_projects.svg?react';
 import AndroidIcon from '../../assets/icons/android_icon.svg?react';
-
+import AddLocator from '../../assets/icons/add_locator.svg?react';
 import SwitchLicenseIcon from '../../assets/icons/switch_license_icon.svg?react';
 import FireflinkLogo from '../../assets/icons/fireflink_logo.svg?react';
-import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react'
-import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react'
-
+import WSWBDeleteIcon from '../../assets/icons/wswb_delete_icon.svg?react';
+import WSWBPlusIcon from '../../assets/icons/wswb_plus_icon.svg?react';
+import LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
+import Drag from '../../assets/icons/drag_icon.svg?react';
 
 //icons
 Components['delete_info'] = DeleteInfoIcon;
@@ -131,10 +140,20 @@ Components['sales_force'] = SalesForceIcon;
 Components['ms_dynamic'] = MSDynamicIcon;
 Components['all_projects'] = AllProjectsIcon;
 Components['android_icon'] = AndroidIcon;
-
+Components['label_plus'] = LabelPlusIcon;
+Components['manual_locator'] = ManualLocator;
 Components['select_license'] = SwitchLicenseIcon;
 Components['fireflink-logo'] = FireflinkLogo;
 Components['wswb_delete_icon'] = WSWBDeleteIcon;
 Components['wswb_plus_icon'] = WSWBPlusIcon;
+Components['add_locator'] = AddLocator;
+Components['drag'] = Drag;
+Components['windows'] = Windows;
+Components['datalist_icon'] = DataListIcon;
+Components['mac_icon'] = Mac;
+Components['android_icon'] = Android;
+Components['chrome_icon'] = Chrome;
+Components['browser_stack_icon'] = BrowserStack;
+Components['run_icon'] = Run;
 
 export default Components;

package/src/components/InputWithDropdown/InputWithDropdown.scss

@@ -133,7 +133,7 @@
       }
 
       .ff-floating-label {
-        top: -6.5px;
+        top: -6px;
         background-color: var(--input-label-bg-color);
         padding: 0px 2px;
         color: var(--input-active-text-color);

package/src/components/InputWithDropdown/InputWithDropdown.tsx

@@ -3,6 +3,7 @@ import './InputWithDropdown.scss';
 import { InputWithDropdownProps } from './types';
 import Select from '../Select/Select';
 import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
 const InputWithDropdown = ({
   name = '',
@@ -20,7 +21,7 @@ const InputWithDropdown = ({
   onInputBlurHandler,
   optionsRequired = true,
 }: InputWithDropdownProps) => {
-  const isValueFilled = value !== undefined && value >= 0;
+  const isValueFilled = !checkEmpty(value);
   return (
     <div
       className={classNames('ff-input-with-dropdown-container', {

package/src/components/MachineInputField/MachineInputField.scss

@@ -0,0 +1,44 @@
+.ff-machine-input-field-wrapper {
+  min-width: 100px;
+  height: 32px;
+  position: relative;
+  cursor: pointer;
+
+  .ff-machine-input-field,
+  .ff-machine-input-field-reverse {
+    height: 100%;
+    width: 100%;
+    border: 1px solid var(--ff-machine-input-field-border-color);
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    .ff-machine-icon-text-wrapper,
+    .ff-machine-icon-text-wrapper-reverse {
+      display: flex;
+
+      .ff-machine-icon {
+        margin-right: 8px;
+      }
+    }
+    
+    .ff-machine-icon-text-wrapper-reverse {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .ff-machine-input-field-reverse {
+    flex-direction: row-reverse;
+  }
+
+  .ff-machine-input-label {
+    position: absolute;
+    top: -6px;
+    left: 8px;
+    background-color: var(--ff-machine-input-field-border-color);
+    border-radius: 4px;
+    padding: 1px 2px;
+    height: 10px;
+  }
+}

package/src/components/MachineInputField/MachineInputField.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import MachineInputField from './MachineInputField';
+import { MachineType } from './types';
+
+const meta: Meta<typeof MachineInputField> = {
+  title: 'Components/MachineInputField',
+  component: MachineInputField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof MachineInputField>;
+
+// Sample data for the MachineInputField
+const sampleOptions: MachineType[] = [
+  { label: 'Local', type: 'Local' },
+  { label: '121.25.36', type: 'Google Chrome' },
+  { label: '17, iPhone 15', type: 'mac' },
+  { label: 'Samsung Galaxy S23', type: 'android' },
+];
+
+export const Primary: Story = {
+  args: {
+    width: '410px', // Example width
+    options: sampleOptions,
+    runCount: 1,
+  },
+};
+
+export default meta;

package/src/components/MachineInputField/MachineInputField.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+import './MachineInputField.scss';
+import Typography from '../Typography';
+import Icon from '../Icon';
+import { MachineInputFieldProps, MachineType } from './types';
+import classNames from 'classnames';
+
+const MachineInputField = forwardRef<HTMLDivElement, MachineInputFieldProps>(
+  (
+    {
+      width = '',
+      options = [],
+      runCount = 0,
+      className = '',
+      contentReverse = false,
+    },
+    ref
+  ) => {
+    const getIcon: Record<MachineType['type'], string> = {
+      Local: 'browser_stack_icon',
+      mac: 'mac_icon',
+      android: 'android_icon',
+      'Google Chrome': 'chrome_icon',
+    };
+
+    return (
+      <div
+        ref={ref}
+        style={{ width: width }}
+        className={classNames('ff-machine-input-field-wrapper', className)}
+      >
+        <Typography
+          as="span"
+          color="var(--ff-machine-input-field-text-color)"
+          fontSize={8}
+          textAlign="center"
+          className="ff-machine-input-label"
+        >
+          Run {runCount}
+        </Typography>
+
+        <div
+          className={classNames('ff-machine-input-field', {
+            'ff-machine-input-field-reverse': contentReverse,
+          })}
+        >
+          {options.map(({ label, type }) => (
+            <div
+              key={type}
+              className={classNames('ff-machine-icon-text-wrapper', {
+                'ff-machine-icon-text-wrapper-reverse': contentReverse,
+              })}
+            >
+              <Icon name={getIcon[type]} className="ff-machine-icon" />
+              <Typography
+                className="ff-machine-text"
+                color="var(--ff-machine-input-field-text-color)"
+              >
+                {label}
+              </Typography>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+);
+
+MachineInputField.displayName = 'MachineInputField';
+
+export default MachineInputField;

package/src/components/MachineInputField/index.ts

@@ -0,0 +1 @@
+export { default } from './MachineInputField';

package/src/components/MachineInputField/types.ts

@@ -0,0 +1,12 @@
+export interface MachineType {
+  type: 'Local' | 'mac' | 'android' | 'Google Chrome';
+  label: string;
+}
+
+export interface MachineInputFieldProps {
+  width: string;
+  options: MachineType[];
+  runCount: number;
+  className?: string;
+  contentReverse?: boolean;
+}

package/src/components/MenuOption/MenuOption.scss

@@ -16,6 +16,17 @@
       &:hover {
         background-color: var(--hover-color);
       }
+      &.dark {
+        background-color: var(--brand-color);
+        &:hover {
+          background-color: var(--menu-variant-dark-icon-color);
+          svg {
+            path {
+              fill: var(--brand-color);
+            }
+          }
+        }
+      }
     }
 
     .ff-menuicon-container-clicked {
@@ -27,6 +38,9 @@
       &:hover {
         background-color: var(--brand-color);
       }
+      &.dark {
+        background-color: var(--menu-variant-dark-icon-color);
+      }
     }
   }