pixel-react 1.1.4 → 1.1.6

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);
+      }
     }
   }
 

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -256,4 +256,25 @@ export const MenuOptionPlacementRight: Story = {
   },
 };
 
+
+export const MenuOptionCustom: Story = {
+  args: {
+    iconName: 'more',
+    dropdownPlacement: 'bottom',
+    variant:'dark',
+    options: [
+      {
+        label: 'Option1',
+        value: 'opt1',
+        icon: 'success',
+      },
+      {
+        label: 'Option2',
+        value: 'opt2',
+        icon: 'success',
+      },
+    ],
+  },
+};
+
 export default meta;

package/src/components/MenuOption/MenuOption.tsx

@@ -51,6 +51,7 @@ const MenuOption = ({
   iconButtonSize = 20,
   iconButtonBorderRadius = 7,
   iconSize = 16,
+  variant = 'light',
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -90,6 +91,7 @@ const MenuOption = ({
           <div
             className={classNames('ff-menuicon-container', {
               'ff-menuicon-container-clicked': isClicked,
+              dark: variant === 'dark',
             })}
             onClick={onIconClickHandler}
             style={{
@@ -103,9 +105,9 @@ const MenuOption = ({
               width={iconSize}
               name={iconName}
               color={
-                isClicked
-                  ? 'var(--menu-option-icon-color)'
-                  : 'var(--menu-option-icon-clicked)'
+                isClicked === (variant === 'dark')
+                ? 'var(--menu-option-icon-clicked)'
+                : 'var(--menu-option-icon-color)'
               }
             />
           </div>

package/src/components/MenuOption/types.ts

@@ -110,6 +110,15 @@ interface MenuOptionProps {
    * @type {function}
    * @optional
    */
+
+  variant?: 'dark' | 'light';
+  /**
+   * The variant of the menu option, either 'dark' or 'light'.
+   * @type {'dark' | 'light'}
+   * @default 'light'
+   * @optional
+   */
+
   onClick?: () => void;
 
   /**

package/src/components/MiniModal/MiniModal.tsx

@@ -182,7 +182,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           }}
         >
           {headerProps ? (
-            <Typography as="p">{headerProps}</Typography>
+            <Typography as="div">{headerProps}</Typography>
           ) : (
             <Typography as="header">
               <Typography as="h2">Header text</Typography>

package/src/components/Modal/Modal.tsx

@@ -20,6 +20,7 @@ const Modal: React.FC<ModalProps> = ({
   customWidth = '660px', // default width
   customHeight = 'auto', // default height
   children,
+  zIndex = 999,
 }) => {
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
@@ -49,6 +50,7 @@ const Modal: React.FC<ModalProps> = ({
   return createPortal(
     <div
       className={`ff-modal-overlay ${overlayClassName || ''}`}
+      style={{ zIndex: zIndex }}
       onClick={shouldCloseOnOverlayClick ? onClose : undefined}
     >
       <div

package/src/components/Modal/modal.scss

@@ -15,8 +15,8 @@
   background: var(--ff-mini-modal-border);
   position: relative;
   max-width: 100%;
-  border-radius: 12px;
-  padding: 16px;
+  border-radius: 12px 12px 0 0;
+  padding: 8px;
   
   .ff-modal-header {
     height: 32px;

package/src/components/Modal/types.ts

@@ -36,4 +36,5 @@ export interface ModalProps {
   isFooterDisplayed: boolean;
   customWidth: string;
   customHeight?: string;
+  zIndex?: number;
 }

package/src/components/Select/Select.tsx

@@ -283,7 +283,7 @@ const Select = ({
           >
             {required && (
               <Typography
-                color="var(--$error-light)"
+                color="var(--error-light)"
                 className="ff-select-label--required"
               >
                 *
@@ -327,7 +327,7 @@ const Select = ({
               {required && (
                 <Typography
                   fontSize={8}
-                  color={'var(--$error-light)'}
+                  color={'var(--error-light)'}
                   className="ff-select-legend--required"
                 >
                   *

package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss

@@ -0,0 +1,117 @@
+.ff-sequential-connecting-branch-wrapper {
+  .ff-connecting-select-branch-wrapper {
+    height: 66px;
+    box-sizing: border-box;
+    width: fit-content;
+    margin-bottom: 16px;
+
+    .ff-select-branch-wrapper {
+      position: relative;
+      display: flex;
+      box-sizing: border-box;
+
+      .ff-sequential-select-branch {
+        width: 240px;
+      }
+
+      .ff-select-branch-arrow {
+        position: relative;
+        display: flex;
+        align-items: center;
+
+        .ff-branch-arrow-wrapper {
+          width: 40px;
+          border-top: 1px solid var(--ff-connecting-branch-color);
+          margin-top: 4px;
+          position: relative;
+
+          .ff-branch-arrow {
+            width: 6px;
+            height: 6px;
+            background-color:  var(--ff-connecting-branch-color);
+            clip-path: polygon(100% 50%, 0 100%, 0 0);
+            position: absolute;
+            right: -1px;
+            top: -3px;
+          }
+        }
+
+        .ff-select-branch-point {
+          width: 5px;
+          height: 5px;
+          border-radius: 50%;
+          background-color:  var(--ff-connecting-branch-color);
+          position: absolute;
+          left: -3px;
+          z-index: 102;
+          top: 50%;
+        }
+
+        .branch-button {
+          margin-top: 4px;
+        }
+      }
+
+      .ff-select-branch-arrow-down {
+        position: absolute;
+        height: 38px;
+
+        .ff-select-branch-point {
+          position: absolute;
+          height: 5px;
+          width: 5px;
+          background-color:  var(--ff-connecting-branch-color);
+          border-radius: 50%;
+          top: 50%;
+          left: -2px;
+          z-index: 102;
+        }
+
+        .ff-select-branch-arrow {
+          width: 0px;
+          height: 62px;
+          top: calc(50% + 1px);
+          border-left: 1px solid  var(--ff-connecting-branch-color);
+          z-index: 102;
+        }
+      }
+    }
+
+    .ff-select-scope-datalist {
+      box-sizing: border-box;
+      width: 240px;
+      margin-top: 4px;
+      padding: 0px 4px;
+      display: flex;
+      justify-content: space-between;
+
+      .ff-scope-wrapper {
+        display: flex;
+
+        .ff-scope-text {
+          margin-left: 4px;
+        }
+      }
+
+      .ff-datalist-wrapper {
+        display: flex;
+
+        .ff-dataset-icon,
+        .ff-run-delete-icon,
+        .ff-datalist-text {
+          cursor: pointer;
+        }
+
+        .ff-datalist-text {
+          margin: 0px 12px 0px 4px;
+        }
+      }
+    }
+  }
+
+  .ff-sequential-branches-wrapper {
+    box-sizing: border-box;
+    width: fit-content;
+    height: fit-content;
+  }
+}