pixel-react-excel-sheet 1.0.11 → 1.0.13

package/src/components/Icon/iconList.ts

@@ -127,6 +127,7 @@ import BackwardIcon from '../../assets/icons/backward_icon.svg?react';
 import ForwardIcon from '../../assets/icons/forward_icon.svg?react';
 import Reload from '../../assets/icons/reload.svg?react';
 import WindowMaximize from '../../assets/icons/window_maximize.svg?react';
+import WindowRestore from '../../assets/icons/window_restore.svg?react';
 import WindowMinimize from '../../assets/icons/window_minimize.svg?react';
 import HamburgerMenu from '../../assets/icons/hamburger_menu.svg?react';
 import AppSwitchIcon from '../../assets/icons/app_switch.svg?react';
@@ -219,9 +220,32 @@ 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';
+import ProjectStatusIcon from '../../assets/icons/project_status_icon.svg?react';
+import captureIcon from '../../assets/icons/capture_icon.svg?react';
+import rotateIcon from '../../assets/icons/rotate_icon.svg?react';
+import tapIcon from '../../assets/icons/tap_icon.svg?react';
+import refreshIcon from '../../assets/icons/refresh_icon.svg?react';
+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;
@@ -267,7 +291,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;
@@ -347,6 +371,7 @@ Components['backward_icon'] = BackwardIcon;
 Components['forward_icon'] = ForwardIcon;
 Components['reload'] = Reload;
 Components['window_maximize'] = WindowMaximize;
+Components['window_restore'] = WindowRestore;
 Components['window_minimize'] = WindowMinimize;
 Components['hamburger_menu'] = HamburgerMenu;
 Components['app_switch'] = AppSwitchIcon;
@@ -439,8 +464,28 @@ 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;
-
+Components['project_status_icon'] = ProjectStatusIcon;
+Components['capture_icon'] = captureIcon;
+Components['backward'] = backward;
+Components['forward'] = forward;
+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.scss

@@ -9,32 +9,32 @@
   cursor: pointer;
   @include mixins.center-content();
   gap: 8px;
-  background-color: var(--secondary-icon-color);
+  background-color: var(--hover-color);
   padding: 2px 8px 2px 2px;
-  border: 1px solid transparent;
+  border: 1px solid var(--secondary-icon-color);
   .button-icon {
     width: 20px;
     height: 20px;
-    border: 1px solid transparent;
+    border: 1px solid var(--primary-icon-color);
     border-radius: 50%;
     @include mixins.center-content();
-    background-color: var(--hover-color);
+    background-color: var(--secondary-icon-color);
     .ff-icon-color {
       path {
-        color: var(--secondary-icon-color);
+        color: var(--primary-icon-color);
       }
     }
   }
   .icon-name {
-    color: var(--primary-icon-color);
+    color: var(--secondary-icon-color);
     @include mixins.center-content();
   }
   &:hover {
-    border: 1px solid var(--secondary-icon-color);
-    background-color: var(--hover-color);
+    border: 1px solid transparent;
+    background-color: var(--secondary-icon-color);
     .icon-name {
       font-weight: 600;
-      color: var(--secondary-icon-color);
+      color: var(--primary-icon-color);
       @include mixins.center-content();
     }
     .button-icon {
@@ -43,10 +43,10 @@
       border: 1px solid transparent;
       border-radius: 50%;
       @include mixins.center-content();
-      background-color: var(--secondary-icon-color);
+      background-color: var(--hover-color);
       .ff-icon-color {
         path {
-          color: var(--primary-icon-color);
+          color: var(--secondary-icon-color);
         }
       }
     }

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,17 +1,16 @@
-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) => {
   return (
-    <button onClick={onClick} className={classNames('ff-plus-icon')}>
+    <button onClick={onClick} className={classNames('ff-plus-icon')} ref={ref}>
       <div className={classNames('button-icon')}>
         <Icon
           height={12}
@@ -30,6 +29,5 @@ const IconButton: React.FC<IconButtonProps> = ({
       </Typography>
     </button>
   );
-};
-
-export default IconButton;
+});
+export default IconButton;

package/src/components/IconButton/types.ts

@@ -2,4 +2,5 @@ export interface IconButtonProps {
   label: string;
   iconName: string;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-}
+  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.scss

@@ -1,159 +1,171 @@
 @use '../../assets/styles/fonts';
 
-.ff-input-container {
-  display: flex;
-  flex-direction: column;
-  position: relative;
+.ff-input-fieldset {
+  display: inline-block;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
 
-  .ff-input {
-    padding: 6px 8px;
+  &--disabled {
     border: 1px solid var(--input-default-border-color);
+    background: var(--input-disabled-background-color);
     border-radius: 4px;
-    outline: none;
-    line-height: 18px;
-    @extend .fontSm;
-    &--medium {
-      padding: 10px 9px;
-    }
-    &:disabled {
-      cursor: not-allowed;
-    }
-    &::placeholder {
-      opacity: 0;
-      @extend .fontXs;
-      line-height: 15px;
-    }
-    &--disabled {
-      background: transparent;
-      border-color: var(--input-default-border-color);
-    }
-    &--danger {
-      border-color: var(--input-error-text-color);
-    }
-    &--transparentBackground {
-      background: transparent;
-    }
-    &--no-border {
-      border: none;
-    }
-    &--placeholder {
-      &::placeholder {
-        opacity: 1;
-      }
-    }
+    opacity: 0.5;
   }
-
-  .ff-input-label-container {
-    @extend .ff-input;
+  .ff-input-container {
     display: flex;
-    gap: 2px;
-    position: absolute;
-    border: none;
-    outline: none;
-    line-height: 18px;
-    margin-top: 1px;
-    transition: all 0.3s ease-in-out;
-    &--medium {
-      line-height: 25px;
-    }
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-        background-color: var(--input-label-bg-color);
-      }
-    }
+    flex-direction: column;
+    position: relative;
 
-    .required-asterisk {
-      color: var(--input-error-text-color);
-    }
-  }
-  &:hover {
-    .ff-input-label {
-      color: var(--input-default-label-color);
-      &--no-hover {
-        color: var(--input-default-label-color);
-      }
-      &--disabled {
-        color: var(--input-default-border-color);
-      }
-      &--danger {
-        color: var(--input-error-text-color);
-      }
-    }
     .ff-input {
-      border-color: var(--brand-color);
-      &--no-hover {
-        border-color: var(--input-default-border-color);
+      padding: 6px 8px;
+      border: 1px solid var(--input-default-border-color);
+      border-radius: 4px;
+      outline: none;
+      line-height: 18px;
+      @extend .fontSm;
+      &--medium {
+        padding: 10px 9px;
       }
-      &--disabled {
+      &:disabled {
+        cursor: not-allowed;
+        border: none;
         background: transparent;
-        border-color: var(--input-default-border-color);
+      }
+      &::placeholder {
+        opacity: 0;
+        @extend .fontXs;
+        line-height: 15px;
       }
       &--danger {
         border-color: var(--input-error-text-color);
       }
+      &--transparentBackground {
+        background: transparent;
+      }
+      &--no-border {
+        border: none;
+      }
+      &--placeholder {
+        &::placeholder {
+          opacity: 1;
+        }
+      }
     }
-  }
-  &:focus-within {
+
     .ff-input-label-container {
-      top: -9px;
-      @extend .fontXs;
-      background-color: var(--input-label-bg-color);
-      line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
-    }
-    .ff-input-label {
-      &--primary {
-        color: var(--brand-color);
+      @extend .ff-input;
+      display: flex;
+      gap: 2px;
+      position: absolute;
+      border: none;
+      outline: none;
+      line-height: 18px;
+      margin-top: 1px;
+      transition: all 0.3s ease-in-out;
+      &--medium {
+        line-height: 25px;
       }
-      &--danger {
+      .ff-input-label {
+        color: var(--input-default-label-color);
+        &--danger {
+          color: var(--input-error-text-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+          background-color: var(--input-label-bg-color);
+        }
+      }
+
+      .required-asterisk {
         color: var(--input-error-text-color);
       }
     }
-    .ff-input {
-      border-color: var(--brand-color);
-
-      &--danger {
-        border-color: var(--input-error-text-color);
+    &:hover {
+      .ff-input-label {
+        color: var(--input-default-label-color);
+        &--no-hover {
+          color: var(--input-default-label-color);
+        }
+        &--disabled {
+          color: var(--input-default-border-color);
+        }
+        &--danger {
+          color: var(--input-error-text-color);
+        }
       }
-
-      &::placeholder {
-        opacity: 1;
-        margin-bottom: 1px;
+      .ff-input {
+        border-color: var(--brand-color);
+        &--no-hover {
+          border-color: var(--input-default-border-color);
+        }
+        &--disabled {
+          background: transparent;
+          border-color: var(--input-default-border-color);
+        }
+        &--danger {
+          border-color: var(--input-error-text-color);
+        }
       }
     }
-  }
+    &:focus-within {
+      .ff-input-label-container {
+        top: -9px;
+        @extend .fontXs;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+      }
+      .ff-input-label {
+        &--primary {
+          color: var(--brand-color);
+        }
+        &--danger {
+          color: var(--input-error-text-color);
+        }
+      }
+      .ff-input {
+        border-color: var(--brand-color);
+
+        &--danger {
+          border-color: var(--input-error-text-color);
+        }
 
-  .ff-input-message {
-    @extend .fontXs;
-    padding: 0px 4px;
-    margin-left: 8px;
-    line-height: 15px;
-    &--danger {
-      color: var(--input-error-text-color);
+        &::placeholder {
+          opacity: 1;
+          margin-bottom: 1px;
+        }
+      }
     }
-  }
 
-  &--float {
-    .ff-input-label-container {
-      //re-written label container code to place it at on border
-      top: -9px;
-      font-size: 10px;
-      background-color: var(--input-label-bg-color);
+    .ff-input-message {
+      @extend .fontXs;
+      padding: 0px 4px;
+      margin-left: 8px;
       line-height: 15px;
-      padding: 0px 2px;
-      margin-left: 10px;
+      &--danger {
+        color: var(--input-error-text-color);
+      }
     }
-    &--disabled {
-      cursor: not-allowed;
+
+    &--float {
       .ff-input-label-container {
+        //re-written label container code to place it at on border
+        top: -9px;
+        font-size: 10px;
+        background-color: var(--input-label-bg-color);
+        line-height: 15px;
+        padding: 0px 2px;
+        margin-left: 10px;
+      }
+      &--disabled {
         cursor: not-allowed;
+        .ff-input-label-container {
+          cursor: not-allowed;
+        }
       }
     }
   }
-}
+}