pixel-react 1.6.5 → 1.6.7

package/src/components/Comment/type.ts

@@ -0,0 +1,36 @@
+export interface CommentType {
+  id?: string | number;
+  description?: string;
+  createdBy?: string;
+  modifiedBy?: string;
+  createdByUname?: string;
+  modifiedByUname?: string;
+  createdOn?: string;
+  modifiedOn?: string;
+  name?: string;
+  emailId?: string[];
+  commentParentId?: string;
+  comments: CommentType[];
+}
+
+export type HandleAddComment = (
+  newComment: CommentType,
+  parentCommentId?: string
+) => void;
+
+// Handles editing an existing comment
+export type HandleEditComment = (
+  commentId: string,
+  updatedDescription: string
+) => void;
+
+// Handles deleting a comment
+export type HandleDeleteComment = (commentId: string) => void;
+export type HandleNodeFunction = (commentId: string, value: string) => void;
+export interface CommentsProps {
+  commentsData: any;
+  handleAddComment: HandleAddComment;
+  handleEditComment: HandleEditComment;
+  handleDeleteComment: HandleDeleteComment;
+  onCommentsDataChange: (data: any) => void;
+}

package/src/components/Drawer/Drawer.scss

@@ -77,7 +77,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        gap: 12px;
+        gap: 8px;
         height: 24px;
 
         .ff-action-button {
@@ -100,6 +100,7 @@
           .ff-custom-header {
             background-color: var(--drawer-footer-bg);
             padding: 4px 8px;
+            width: 100%;
           }
         }
       }

package/src/components/Editor/Editor.stories.tsx

@@ -2,7 +2,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import Editor from './Editor';
 import { EditorProps } from './types';
-import { varibaleList } from './constants';
+import { variableList } from './constants';
 import { useState } from 'react';
 
 const meta: Meta<EditorProps> = {
@@ -49,6 +49,6 @@ export const Default: Story = {
     width: '100%',
     height: '90vh',
     readOnly: false,
-    variableOptionsList: varibaleList,
+    variableOptionsList: variableList,
   },
 };

package/src/components/Editor/Editor.tsx

@@ -115,8 +115,8 @@ const Editor = forwardRef<any, EditorProps>(
         option?.type === 'GLOBAL'
           ? 'GV'
           : option?.type === 'LOCAL'
-            ? 'LV'
-            : 'PEV'
+          ? 'LV'
+          : 'PEV'
       );
     };
 
@@ -235,6 +235,8 @@ const Editor = forwardRef<any, EditorProps>(
         />
         {showDropdown && dropdownPosition && (
           <VariableDropdown
+            position="absolute"
+            width="300px"
             optionsList={variableOptionsList}
             onSelectVariable={handleSelectVariable}
             dropdownPosition={dropdownPosition}

package/src/components/Editor/VariableDropdown.scss

@@ -1,6 +1,4 @@
 .ff-variable-dropdown {
-  position: absolute;
-  width: 200px;
   height: 300px;
   display: flex;
   flex-direction: column;
@@ -8,6 +6,14 @@
   border: 1px solid var(--border-color);
   border-radius: 3px;
   z-index: 9999;
+  overflow: hidden;
+  overflow-y: auto;
+  &.absolute {
+    position: absolute;
+  }
+  &.relative {
+    position: relative;
+  }
 }
 .ff-variable-option {
   display: flex;

package/src/components/Editor/VariableDropdown.tsx

@@ -3,19 +3,27 @@ import { VariableDropdownProps, DyanamicObj } from './types';
 import Icon from '../Icon';
 import './VariableDropdown.scss';
 import Typography from '../Typography';
+import cx from 'classnames';
 
 const VariableDropdown: FC<VariableDropdownProps> = ({
   optionsList = [],
   onSelectVariable,
   dropdownPosition,
+  position = 'relative',
+  width = '300px',
 }): ReactNode => {
   return (
     <div
-      className="ff-variable-dropdown"
-      style={{
-        top: dropdownPosition.top + 30,
-        left: dropdownPosition.left - 30,
-      }}
+      className={cx('ff-variable-dropdown', position)}
+      style={
+        dropdownPosition
+          ? {
+              top: dropdownPosition.top + 30,
+              left: dropdownPosition.left - 30,
+              width,
+            }
+          : { width }
+      }
     >
       {optionsList?.map((option: DyanamicObj): ReactNode => {
         return (
@@ -32,8 +40,8 @@ const VariableDropdown: FC<VariableDropdownProps> = ({
                 option?.type === 'LOCAL'
                   ? 'local_variable_icon'
                   : option?.type === 'GLOBAL'
-                    ? 'global_variable_icon'
-                    : 'project_env_variable_icon'
+                  ? 'global_variable_icon'
+                  : 'project_env_variable_icon'
               }
               height={16}
               width={16}

package/src/components/Editor/constants.ts

@@ -8,7 +8,7 @@ export const optionsList: option[] = [
   { label: 'Plain Text', value: 'plaintext' },
 ];
 
-export const varibaleList: DyanamicObj[] = [
+export const variableList: DyanamicObj[] = [
   {
     createdBy: 'USR1428',
     modifiedBy: '--',

package/src/components/Editor/types.ts

@@ -58,10 +58,20 @@ export interface dropdownPositionType {
 }
 
 export interface VariableDropdownProps {
+  /**
+   * Position whether absoloute or relative
+   */
+  position: 'absolute' | 'relative';
+
+  /**
+   * Dropdown width
+   */
+  width: string;
+
   /**
    * List of variables
    */
-  optionsList: {}[];
+  optionsList: DyanamicObj[];
 
   /**
    * Function to handle click on variable
@@ -71,7 +81,7 @@ export interface VariableDropdownProps {
   /**
    * Dropdown postion used for dropdown placement
    */
-  dropdownPosition: dropdownPositionType;
+  dropdownPosition?: dropdownPositionType;
 }
 
 export interface option {

package/src/components/FieldSet/FieldSet.scss

@@ -1,9 +1,10 @@
 .ff_fieldSet_container {
   .ff_fieldSet {
-    border-color: var(--ff-connecting-branch-modal-border);
+    border:1px solid var(--ff-select-border-color);
     border-radius: 5px;
     .ff_legend_container{
         display: flex;
+        margin-left: 8px
     }
   }
 }

package/src/components/FieldSet/FieldSet.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import FieldSet from './FieldSet';
+import Typography from '../Typography';
 
 const meta: Meta<typeof FieldSet> = {
   title: 'Components/FieldSet',
@@ -17,7 +18,7 @@ const defaultArgs = {
   legendName: 'Default Legend',
   height: '200px',
   width: '300px',
-  children: 'Default content inside the FieldSet.',
+  children: <Typography>'Default content inside the FieldSet.'</Typography>,
 };
 
 export const Default: Story = {

package/src/components/Icon/iconList.ts

@@ -219,6 +219,7 @@ import NoData from '../../assets/icons/no_data.svg?react';
 import AddUser from '../../assets/icons/add_user.svg?react';
 import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
+import AddVariableIcon from '../../assets/icons/add_variable.svg?react';
 import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
 import InfoUser from '../../assets/icons/info_user.svg?react';
 import WebServiceIcon from '../../assets/icons/web_service_icon.svg?react';
@@ -231,6 +232,20 @@ import swipeIcon from '../../assets/icons/swipe_icon.svg?react';
 import backward from '../../assets/icons/backward.svg?react';
 import forward from '../../assets/icons/forward.svg?react';
 
+import dependsOnScript from '../../assets/icons/depends_on_script.svg?react';
+import parameters from '../../assets/icons/parameters.svg?react';
+import prePostCondition from '../../assets/icons/pre_post_condition.svg?react';
+import programElement from '../../assets/icons/program_element.svg?react';
+import testData from '../../assets/icons/test_data.svg?react';
+import testDataSet from '../../assets/icons/test_data_set.svg?react';
+import emailGroup from '../../assets/icons/email_group.svg?react';
+import variableSet from '../../assets/icons/variable_set.svg?react';
+
+import machineEnableIcon from '../../assets/icons/machine_enable_icon.svg?react';
+import machineDisableIcon from '../../assets/icons/machine_disable_icon.svg?react';
+import suitesIcon from '../../assets/icons/suites_icon.svg?react'; 
+import executionsIcon from '../../assets/icons/executions_icon.svg?react';
+
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
 Components['alert'] = Alert;
@@ -275,7 +290,7 @@ Components['delete'] = DeleteIcon;
 Components['details'] = DetailsIcon;
 Components['impactList'] = ImpactListIcon;
 Components['beautify_icon'] = BeautifyIcon;
-Components['add_variable'] = AddVariable;
+Components['add_variable_icon'] = AddVariable;
 Components['replace_file'] = ReplaceFile;
 Components['formate_painter'] = FormatePainter;
 Components['bold'] = Bold;
@@ -447,6 +462,7 @@ Components['no_data'] = NoData;
 Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
+Components['add_variable'] = AddVariableIcon;
 Components['dashboard_icon'] = DashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = InfoUser;
 Components['web_service_icon'] = WebServiceIcon;
@@ -458,5 +474,16 @@ Components['refresh_icon'] = refreshIcon;
 Components['rotate_icon'] = rotateIcon;
 Components['tap_icon'] = tapIcon;
 Components['swipe_icon'] = swipeIcon;
-
+Components['depends_on_script'] = dependsOnScript;
+Components['parameters'] = parameters;
+Components['pre_post_condition'] = prePostCondition;
+Components['program_element'] = programElement;
+Components['test_data'] = testData;
+Components['test_data_set'] = testDataSet;
+Components['email_group'] = emailGroup;
+Components['variable_set'] = variableSet;
+Components['machine_enable_icon'] = machineEnableIcon;
+Components['machine_disable_icon'] = machineDisableIcon;
+Components['executions_icon'] = executionsIcon;
+Components['suites_icon'] = suitesIcon;
 export default Components;

package/src/components/IconButton/IconButton.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import IconButton from './IconButton';
+import React from 'react';
 
 const meta: Meta<typeof IconButton> = {
   title: 'Components/IconButton',

package/src/components/IconButton/IconButton.tsx

@@ -1,16 +1,14 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import Icon from '../Icon';
 import './IconButton.scss';
 import classNames from 'classnames';
 import Typography from '../Typography';
 import { IconButtonProps } from './types';
-
-const IconButton: React.FC<IconButtonProps> = ({
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(({
   label,
   iconName = 'plus_user_icon',
   onClick,
-  ref,
-}) => {
+}, ref) => {
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
       <div className={classNames('button-icon')}>
@@ -31,6 +29,5 @@ const IconButton: React.FC<IconButtonProps> = ({
       </Typography>
     </button>
   );
-};
-
-export default IconButton;
+});
+export default IconButton;

package/src/components/IconButton/types.ts

@@ -2,5 +2,5 @@ export interface IconButtonProps {
   label: string;
   iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  ref?: React.RefObject<HTMLButtonElement>;
-}
+  ref?: React.Ref<HTMLButtonElement>;
+}

package/src/components/IconRadioGroup/IconRadioGroup.scss

@@ -16,6 +16,7 @@
   align-items: center;
   cursor: pointer;
   position: relative;
+  z-index: 5;
 
   &.selected {
     background-color: var(--brand-color);
@@ -57,7 +58,7 @@
   right: 0;
   height: 1px;
   background-color: var(--border-color);
-  z-index: -1;
+  z-index: 3;
   border-radius: 2px 0px 0px 0px;
   opacity: 0px;
 }

package/src/components/Input/Input.tsx

@@ -1,103 +1,114 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import './Input.scss';
 import { InputProps } from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 
-const Input = ({
-  type = 'text',
-  variant = 'primary',
-  name = '',
-  label,
-  disabled = false,
-  required = false,
-  placeholder = 'Enter input',
-  value = '',
-  helperText = '',
-  error,
-  noBorder,
-  className = '',
-  onChange,
-  onBlur,
-  onFocus,
-  autoComplete = 'off',
-  minValue = -Infinity,
-  maxValue = Infinity,
-  transparentBackground = false,
-  size = 'small',
-  isLabelRequired = true,
-  ...props
-}: InputProps) => {
-  const isValueFilled = !checkEmpty(value);
-  return (
-    <div
-      className={classNames('ff-input-container', {
-        'ff-input-container--float': isValueFilled,
-        'ff-input-container--disabled': !!disabled,
-      })}
-    >
-      {isLabelRequired && (
-        <label
-          htmlFor={name}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    {
+      type = 'text',
+      variant = 'primary',
+      name = '',
+      label,
+      disabled = false,
+      required = false,
+      placeholder = 'Enter input',
+      value = '',
+      helperText = '',
+      error,
+      noBorder,
+      className = '',
+      onChange,
+      onBlur,
+      onFocus,
+      autoComplete = 'off',
+      minValue = -Infinity,
+      maxValue = Infinity,
+      transparentBackground = false,
+      size = 'small',
+      isLabelRequired = true,
+      ...props
+    },
+    ref
+  ) => {
+    const isValueFilled = !checkEmpty(value);
+
+    return (
+      <div
+        className={classNames('ff-input-container', {
+          'ff-input-container--float': isValueFilled,
+          'ff-input-container--disabled': !!disabled,
+        })}
+      >
+        {isLabelRequired && (
+          <label
+            htmlFor={name}
+            className={classNames(
+              `ff-input-label-container ff-input-label-container--${size}`,
+              {
+                'ff-input-label-container--danger': !!error,
+              }
+            )}
+          >
+            {required && <span className="required-asterisk">*</span>}
+            <span
+              className={classNames(
+                `ff-input-label ff-input-label--${variant}`,
+                {
+                  'ff-input-label--no-hover': !!value,
+                  'ff-input-label--disabled': !!disabled,
+                  'ff-input-label--danger': !!error,
+                }
+              )}
+            >
+              {label}
+            </span>
+          </label>
+        )}
+
+        <input
+          ref={ref} // Forward the ref here
+          name={name}
+          value={value}
+          type={type}
+          spellCheck={false}
+          id={name}
           className={classNames(
-            `ff-input-label-container ff-input-label-container--${size}`,
+            `ff-input ff-input-${variant} default-input ff-input--${size}`,
             {
-              'ff-input-label-container--danger': !!error,
-            }
+              ['ff-input--transparentBackground']: !!transparentBackground,
+              'ff-input--no-hover': !!value,
+              'ff-input--disabled': !!disabled,
+              'ff-input--danger': !!error,
+              'ff-input--no-border': !!noBorder,
+              'ff-input--placeholder': !isLabelRequired,
+            },
+            `${className}`
           )}
-        >
-          {required && <span className="required-asterisk">*</span>}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          autoComplete={autoComplete}
+          min={minValue}
+          max={maxValue}
+          {...props}
+        />
+
+        {helperText && error && (
           <span
-            className={classNames(`ff-input-label ff-input-label--${variant}`, {
-              'ff-input-label--no-hover': !!value,
-              'ff-input-label--disabled': !!disabled,
-              'ff-input-label--danger': !!error,
+            className={classNames('ff-input-message', {
+              'ff-input-message--danger': !!error,
             })}
           >
-            {label}
+            {helperText}
           </span>
-        </label>
-      )}
-
-      <input
-        name={name}
-        value={value}
-        type={type}
-        spellCheck={false}
-        id={name}
-        className={classNames(
-          `ff-input ff-input-${variant} default-input ff-input--${size}`,
-          {
-            ['ff-input--transparentBackground']: !!transparentBackground,
-            'ff-input--no-hover': !!value,
-            'ff-input--disabled': !!disabled,
-            'ff-input--danger': !!error,
-            'ff-input--no-border': !!noBorder,
-            'ff-input--placeholder': !isLabelRequired,
-          },
-          `${className}`
         )}
-        placeholder={placeholder}
-        disabled={disabled}
-        onChange={onChange}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        autoComplete={autoComplete}
-        min={minValue}
-        max={maxValue}
-        {...props}
-      />
-
-      {helperText && error && (
-        <span
-          className={classNames('ff-input-message', {
-            'ff-input-message--danger': !!error,
-          })}
-        >
-          {helperText}
-        </span>
-      )}
-    </div>
-  );
-};
+      </div>
+    );
+  }
+);
 
 export default Input;

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -34,7 +34,7 @@ const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
   variant = 'textField',
   dropdownData = [],
   width,
-  height = '22px',
+  height,
   isOpen = false,
   confirmAction,
   onClick,

package/src/components/Modal/Modal.stories.tsx

@@ -1,6 +1,7 @@
+import React, { useState } from 'react';
+
 import type { Meta, StoryObj } from '@storybook/react';
 import Modal from './Modal';
-import { useState } from 'react';
 import Button from '../Button';
 
 const meta: Meta<typeof Modal> = {

package/src/components/MultiSelect/MultiSelect.scss

@@ -32,6 +32,31 @@
     }
   }
 }
+
+@mixin ff-scroll-style {
+
+    &::-webkit-scrollbar {
+      width: 4px;
+      height: 40px;
+      border-radius: 12px 0px 0px 0px;
+      background: var(--description-text);
+  
+      &-track {
+        background: var(--ff-select-scroll-track-bg);
+      }
+  
+      &-thumb {
+        background: var(--ff-select-scroll-thumb-color);
+        border-radius: 10px;
+  
+        &:hover {
+          background: var(--ff-select-scroll-thumb-hover);
+        }
+      }
+    }
+}
+
+
 .ff-multiselect-container-with-icon {
   display: flex;
   align-items: center;
@@ -83,7 +108,11 @@
           display: flex;
           flex-wrap: wrap;
           align-items: center;
+          overflow-y: auto;
+          max-height: 64px;
           gap: 5px;
+          @include ff-scroll-style;
+
           .ff-multiselect-chip {
             @include flex-center;
             box-sizing: border-box;