pixel-react 1.1.6 → 1.1.8

package/src/components/Chip/Chip.scss

@@ -1,9 +1,8 @@
-@use '../../assets/styles/colors' as *;
 @use '../../assets/styles/fonts' as *;
 
 @mixin chip-variant-background($color) {
   background-color: $color;
-  color: $drawer-footer-bg;
+  color: var(--ff-chip-bg);
 }
 
 .ff-chip-wrapper {
@@ -24,32 +23,34 @@
     line-height: 15px;
     border: none;
     transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;
-    box-shadow: 1px 1px 3px 0px $ff-chips-blur-color inset,
-      -1px -1px 2px 0px $drawer-footer-bg inset,
-      1px -1px 2px 0px $ff-chips-blur-color inset,
-      -1px -1px 2px 0px $ff-chips-blur-color, 1px 1px 2px 0px $drawer-footer-bg;
+    box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+      -1px -1px 2px 0px var(--ff-chip-bg) inset,
+      1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+      1px 1px 2px 0px var(--ff-chip-bg);
     &--fullText:hover {
-      box-shadow: 1px 1px 6px 0px $ff-chips-blur-color inset,
-        -1px -1px 4px 0px $drawer-footer-bg inset;
+      box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset,
+        -1px -1px 2px 0px var(--ff-chip-bg) inset,
+        1px -1px 2px 0px var(--ff-chips-blur-color) inset,
+        1px 1px 2px 0px var(--ff-chip-bg);
       padding-right: 12px;
     }
     @extend .fontXs;
 
     &--primary {
-      @include chip-variant-background($ff-chips-fill-color);
-      color: $text-color;
+      @include chip-variant-background(var(--ff-chips-fill-color));
+      color: var(--ff-chip-text-color);
     }
 
     &--success {
-      @include chip-variant-background($ff-success);
+      @include chip-variant-background(var(--ff-success));
     }
 
     &--error {
-      @include chip-variant-background($ff-error-light);
+      @include chip-variant-background(var(--ff-error-light));
     }
 
     &--warning {
-      @include chip-variant-background($ff-warning);
+      @include chip-variant-background(var(--ff-warning));
     }
     &--custom {
       @extend .fontSm;

package/src/components/Drawer/Drawer.scss

@@ -11,7 +11,6 @@
   .ff-drawer {
     position: fixed;
     right: 0;
-    top: 80px;
     bottom: 0;
     min-width: 450px;
     background-color: var(--primary-button-text-color);

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

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof Icon>;
 
 export const Icons: Story = {
   args: {
-    name: 'delete_black',
+    name: 'more',
     color: '',
   },
 };

package/src/components/Icon/Icons.scss

@@ -7,7 +7,7 @@
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 5px;
+  padding: 4px;
   box-sizing: content-box;
   &:hover {
     border-radius: 50%;

package/src/components/Icon/iconList.ts

@@ -71,12 +71,29 @@ 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 PlusUserIcon from '../../assets/icons/plus_user_icon.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 LabelPlusIcon from '../../assets/icons/label_plus.svg?react';
 import Drag from '../../assets/icons/drag_icon.svg?react';
+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 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';
+import UserProfile from '../../assets/icons/user_profile.svg?react';
+import ContinueSignIn from '../../assets/icons/continue_without_sign.svg?react';
+import CloudServerHost from '../../assets/icons/cloud_server_host_icon.svg?react';
+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';
+
 
 //icons
 Components['delete_info'] = DeleteInfoIcon;
@@ -140,6 +157,7 @@ Components['sales_force'] = SalesForceIcon;
 Components['ms_dynamic'] = MSDynamicIcon;
 Components['all_projects'] = AllProjectsIcon;
 Components['android_icon'] = AndroidIcon;
+Components['plus_user_icon'] = PlusUserIcon;
 Components['label_plus'] = LabelPlusIcon;
 Components['manual_locator'] = ManualLocator;
 Components['select_license'] = SwitchLicenseIcon;
@@ -155,5 +173,19 @@ Components['android_icon'] = Android;
 Components['chrome_icon'] = Chrome;
 Components['browser_stack_icon'] = BrowserStack;
 Components['run_icon'] = Run;
+Components['backward_icon'] = BackwardIcon;
+Components['forward_icon'] = ForwardIcon;
+Components['reload'] = Reload;
+Components['window_maximize'] = WindowMaximize;
+Components['window_minimize'] = WindowMinimize;
+Components['hamburger_menu'] = HamburgerMenu;
+Components['app_switch'] = AppSwitchIcon;
+Components['user_profile'] = UserProfile;
+Components['continue_without_signin'] = ContinueSignIn;
+Components['cloud_server_host'] = CloudServerHost;
+Components['notification_icon'] = NotificationIcon;
+Components['nlp_help_icon'] = NLPHelpIcon;
+Components['update_icon'] = UpdateIcon;
+Components['add_file'] = AddFile;
 
 export default Components;

package/src/components/IconButton/IconButton.scss

@@ -2,9 +2,7 @@
 @use '../../assets/styles/mixins';
 
 .ff-plus-icon {
-  min-width: 71px;
-  min-height: 24px;
-  border-radius: 12px;
+  border-radius: 16px;
   border-style: none;
   text-align: center;
   text-decoration: none;
@@ -14,13 +12,20 @@
   background-color: var(--secondary-icon-color);
   padding: 2px 8px 2px 2px;
   border: 1px solid transparent;
-  .ff-icon-color {
-    path {
-      color: var(--primary-icon-color);
+  .button-icon {
+    width: 20px;
+    height: 20px;
+    border: 1px solid transparent;
+    border-radius: 50%;
+    @include mixins.center-content();
+    background-color: var(--hover-color);
+    .ff-icon-color {
+      path {
+        color: var(--secondary-icon-color);
+      }
     }
   }
   .icon-name {
-    min-width: 33px;
     color: var(--primary-icon-color);
     @include mixins.center-content();
   }
@@ -28,15 +33,21 @@
     border: 1px solid var(--secondary-icon-color);
     background-color: var(--hover-color);
     .icon-name {
-      min-width: 33px;
-      min-height: 20px;
       font-weight: 600;
       color: var(--secondary-icon-color);
       @include mixins.center-content();
     }
-    .ff-icon-color {
-      path {
-        color: var(--secondary-icon-color);
+    .button-icon {
+      width: 20px;
+      height: 20px;
+      border: 1px solid transparent;
+      border-radius: 50%;
+      @include mixins.center-content();
+      background-color: var(--secondary-icon-color);
+      .ff-icon-color {
+        path {
+          color: var(--primary-icon-color);
+        }
       }
     }
   }

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

@@ -12,10 +12,18 @@ const meta: Meta<typeof IconButton> = {
 
 type Story = StoryObj<typeof IconButton>;
 
+export const Default: Story = {
+  args: {
+    label: 'Script',
+    iconName: 'download_icon',
+    onClick: () => {},
+  },
+};
+
 export const PrimaryIconButton: Story = {
   render: () => {
     const name = 'Project';
-    const icon = 'plus_icon';
+    const icon = 'plus_user_icon';
     const onClick = () => {};
 
     return <IconButton label={name} iconName={icon} onClick={onClick} />;

package/src/components/IconButton/IconButton.tsx

@@ -7,17 +7,19 @@ import { IconButtonProps } from './types';
 
 const IconButton: React.FC<IconButtonProps> = ({
   label,
-  iconName = 'plus_icon',
+  iconName = 'plus_user_icon',
   onClick,
 }) => {
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')}>
+      <div className={classNames('button-icon')}>
       <Icon
-        height={20}
-        width={20}
+        height={12}
+        width={12}
         name={iconName}
         className={'ff-icon-color'}
       />
+      </div>
       <Typography as="div" textAlign="center" className="icon-name">
         {label}
       </Typography>

package/src/components/Input/Input.scss

@@ -11,6 +11,9 @@
     border-radius: 4px;
     outline: none;
     line-height: 18px;
+    &--medium {
+      padding: 10px 9px;
+    }
     @extend .fontSm;
     &:disabled {
       cursor: not-allowed;
@@ -44,7 +47,9 @@
     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 {

package/src/components/Input/Input.tsx

@@ -22,6 +22,7 @@ const Input = ({
   minValue = -Infinity,
   maxValue = Infinity,
   transparentBackground = false,
+  size = 'small',
   ...props
 }: InputProps) => {
   return (
@@ -33,9 +34,12 @@ const Input = ({
     >
       <label
         htmlFor={name}
-        className={classNames('ff-input-label-container', {
-          'ff-input-label-container--danger': !!error,
-        })}
+        className={classNames(
+          `ff-input-label-container ff-input-label-container--${size}`,
+          {
+            'ff-input-label-container--danger': !!error,
+          }
+        )}
       >
         {required && <span className="required-asterisk">*</span>}
         <span
@@ -55,7 +59,7 @@ const Input = ({
         spellCheck={false}
         id={name}
         className={classNames(
-          `ff-input ff-input--${variant} default-input `,
+          `ff-input ff-input-${variant} default-input ff-input--${size}`,
           {
             ['ff-input--transparentBackground']: !!transparentBackground,
             'ff-input--no-hover': !!value,

package/src/components/Input/types.ts

@@ -74,4 +74,8 @@ export interface InputProps {
    * background of the input field prop
    */
   transparentBackground?: boolean;
+  /**
+   * size for the input field
+   */
+  size?: 'small' | 'medium';
 }

package/src/components/MiniModal/MiniModal.scss

@@ -1,3 +1,13 @@
+@mixin arrow-before($width, $height, $top, $left) {
+  content: '';
+  position: absolute;
+  width: $width;
+  height: $height;
+  border-radius: 50px;
+  background-color: var(--ff-mini-modal-border);
+  top: $top;
+  left: $left;
+}
 .ff-mini-edit-modal-container {
   width: fit-content;
   padding: 0;
@@ -20,16 +30,24 @@
       bottom: 100%;
       left: 30px;
       border-width: 0 10px 10px 10px;
+      padding: 0 3px 0 0;
       border-color: transparent transparent var(--ff-mini-modal-border)
         transparent;
-      filter: drop-shadow(0 -2px 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));
+      &::before {
+        @include arrow-before(3px, 4px, -0.5px, 0);
+      }
     }
     &.popover-arrow-left {
       left: -15px; //align the arrow with modal for the right side modal
       border-width: 10px 10px 10px 0;
       border-color: transparent var(--ff-mini-modal-border) transparent
         transparent;
-      filter: drop-shadow(-2px 0 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(4px, 3px, 0, 0);
+      }
     }
     &.popover-arrow-bottom {
       top: 100%;
@@ -37,22 +55,30 @@
       border-width: 10px 10px 0 10px;
       border-color: var(--ff-mini-modal-border) transparent transparent
         transparent; // Bottom part of the arrow with the correct color
-      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 0 3px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, -2px, 0);
+      }
     }
     &.popover-arrow-right {
       right: -10px;
-      top: 75px;
+      top: 66px;
       border-width: 10px 0 10px 10px;
       border-color: transparent transparent transparent
         var(--ff-mini-modal-border);
-      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-box-shadow));
+      filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));
+      padding: 3px 1px 0 0;
+      &::before {
+        @include arrow-before(3px, 3px, 0, -2px);
+      }
     }
 
     &.left-top-arrow {
       top: 10%;
     }
     &.left-middle-arrow {
-      top: 50%;
+      top: 45%;
     }
   }
   .wrapped-div {
@@ -97,8 +123,13 @@
     border-radius: 7px;
     margin: 0 0 0 -5px;
     height: 100%;
-    box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
-
+    box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);
+    &.mini-edit-modal-wrapper-shadow {
+      box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);
+    }
+    &.mini-edit-modal-arrow-shadow {
+      box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);
+    }
     header {
       border-radius: 4px 4px 0 0;
     }