pixel-react 1.7.2 → 1.7.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-react",
   "description": "Great for pixel-perfect, design-focused components in React",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
   "types": "lib/index.d.ts",

package/src/components/AppHeader/AppHeader.scss

@@ -36,7 +36,7 @@
           flex: 1 1 auto;
           overflow: hidden;
           transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;
-          max-width: 100px; /* Initial max-width */
+          max-width: 150px; /* Initial max-width */
           &:not(.ff-app-header-nav-bar-item--selected):hover::after {
             animation: oscillate-border-width 0.5s ease-in-out forwards;
           }
@@ -60,7 +60,7 @@
             background-color: var(--primary-icon-color);
             border-radius: 20px;
             flex-grow: 12; /* Increase size on hover */
-            max-width: 550px;
+            max-width: 700px;
             opacity: 1;
             .ff-app-header-nav-bar-item-label {
               box-shadow: 0px 4px 4px 0px #00000040 inset;

package/src/components/Charts/BarChart/BarChart.stories.tsx

@@ -63,5 +63,8 @@ export const BarChartDashboard: Story = {
       'opera',
     ],
     iconSize: 20,
+    onSelectedBar: (label) => {
+      console.log(label);
+    },
   },
 };

package/src/components/Charts/BarChart/BarChart.tsx

@@ -22,6 +22,7 @@ type BarChartProps = {
   backgroundColor?: string;
   legendPosition?: 'top' | 'bottom';
   legendGap?: number;
+  onSelectedBar?: (_label: string) => void;
 };
 
 const BarChart: React.FC<BarChartProps> = ({
@@ -41,6 +42,7 @@ const BarChart: React.FC<BarChartProps> = ({
   iconSize,
   legendPosition = 'bottom',
   legendGap = 5,
+  onSelectedBar = (_label) => {},
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -120,6 +122,10 @@ const BarChart: React.FC<BarChartProps> = ({
     });
   };
 
+  const handleSelectLabel = (label: string) => {
+    onSelectedBar(label);
+  };
+
   return (
     <div className="ff-bar-chart-container" style={{ width: chartWidth }}>
       {legend && legendPosition === 'top' && (
@@ -232,6 +238,7 @@ const BarChart: React.FC<BarChartProps> = ({
                   }
                   onMouseMove={handleMouseMove}
                   onMouseLeave={handleMouseLeave}
+                  onClick={() => handleSelectLabel(item.label)}
                 ></rect>
 
                 {showXAxisLabels && (

package/src/components/ConditionalDropdown/ConditionalDropdown.tsx

@@ -135,23 +135,22 @@ const ConditionalDropdown: React.FC<ConditionalDropdownProps> = ({
           />
         )}
       </div>
-      {showDropdown && (
-    isHash ? (
-      <OptionsDropdown
-        position="relative"
-        width={dropdownWidth}
-        filteredOptions={filteredOptions}
-        onSelectVariable={handleDropdownClick}
-      />
-    ) : (
-      <VariableDropdown
-        position="relative"
-        width={dropdownWidth}
-        optionsList={variableList}
-        onSelectVariable={handleDropdownClick}
-      />
-    )
-  )}
+      {showDropdown &&
+        (isHash ? (
+          <OptionsDropdown
+            position="relative"
+            width={dropdownWidth}
+            filteredOptions={filteredOptions}
+            onSelectVariable={handleDropdownClick}
+          />
+        ) : (
+          <VariableDropdown
+            position="absolute"
+            width={dropdownWidth}
+            optionsList={variableList}
+            onSelectVariable={handleDropdownClick}
+          />
+        ))}
     </div>
   );
 };

package/src/components/Drawer/Drawer.scss

@@ -99,7 +99,6 @@
           }
           .ff-custom-header {
             background-color: var(--drawer-footer-bg);
-            padding: 4px 8px;
             width: 100%;
           }
         }
@@ -132,7 +131,8 @@
       }
       .ff-custom-footer {
         background-color: var(--drawer-footer-bg);
-        padding: 4px 8px;
+        width: 100%;
+        border-radius: 0 0 8px 8px;
       }
     }
   }

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import Drawer from './Drawer';
 import { useState } from 'react';

package/src/components/Drawer/Drawer.tsx

@@ -39,6 +39,7 @@ const Drawer: FC<DrawerProps> = ({
   height,
   width,
   right = 0,
+  overflow,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -88,7 +89,7 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
-        style={{ zIndex, top, height, width, right }}
+        style={{ zIndex, top, height, width, right, overflow }}
       >
         {showHeader && (
           <div

package/src/components/Drawer/Types.ts

@@ -154,4 +154,8 @@ export interface DrawerProps {
    * Position from right
    */
   right?: string | number;
+  /**
+   * Custom overflow for the drawer
+   */
+  overflow?: string;
 }

package/src/components/Editor/VariableDropdown.scss

@@ -10,6 +10,7 @@
   overflow-y: auto;
   &.absolute {
     position: absolute;
+    top: 34px;
   }
   &.relative {
     position: relative;

package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx

@@ -105,7 +105,7 @@ const ColumnIndicator: Types.ColumnIndicatorComponent = ({
 
   return (
     <th
-      style={{ minWidth: `${columnWidth}px`, position: 'relative' }} //Dynamic value, Inline Styling required
+      style={{ minWidth: `${columnWidth}px`, position: 'sticky' }} //Dynamic value, Inline Styling required
       className={classNames('ff-spreadsheet-header', {
         'ff-spreadsheet-header--selected': selected,
       })}

package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx

@@ -16,16 +16,17 @@ const CornerIndicator: Types.CornerIndicatorComponent = ({
   }, [onSelect]);
   return (
     <th
-      className={classNames('ff-spreadsheet-header ff-spreadsheet-corner-header', {
-        'ff-spreadsheet-header--selected': selected,
-      })}
+      className={'ff-spreadsheet-corner-header'}
       onClick={handleClick}
       tabIndex={0}
     >
-      <Icon
-        variant={selected ? 'dark' : 'light'}
-        name="excel_corner_menu"
-      />
+      <div
+        className={classNames('corner-header', {
+          'ff-spreadsheet-header--selected': selected,
+        })}
+      >
+        <Icon variant={selected ? 'dark' : 'light'} name="excel_corner_menu" />
+      </div>
     </th>
   );
 };

package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx

@@ -1,5 +1,7 @@
 import * as Types from './types';
 
-const HeaderRow: Types.HeaderRowComponent = (props) => <tr {...props} />;
+const HeaderRow: Types.HeaderRowComponent = (props) => (
+  <tr className="ff-spreadsheet-row-header" {...props} />
+);
 
 export default HeaderRow;

package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss

@@ -53,7 +53,6 @@
     border-collapse: collapse;
     table-layout: fixed;
   }
-
   .ff-spreadsheet-cell {
     outline: none;
     position: relative;
@@ -93,11 +92,31 @@
     color: var(--readonly-text-color);
     text-align: center;
     z-index: 1000;
+    position: sticky;
   }
 
   .ff-spreadsheet-corner-header {
-    padding-left: 20px;
+    position: fixed;
+    z-index: 2000;
+  }
+
+  .ff-spreadsheet-row-header {
+    // position: relative;
+    height: 34px;
+  }
+
+  .corner-header {
+    border: 0.1px solid var(--border-color);
+    background-color: var(--header-background-color);
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     z-index: 1100;
+    top: -1px;
+    width: 60px;
+    height: 34px;
+    left: -1px;
   }
 
   .ff-spreadsheet-header--selected {

package/src/components/Icon/iconList.ts

@@ -82,7 +82,6 @@ import IpkFileType from '../../assets/icons/ipk_file_type.svg?react';
 import TxtFileType from '../../assets/icons/txt_file_type.svg?react';
 import GifFileType from '../../assets/icons/gif_file_type.svg?react';
 import JpgFileType from '../../assets/icons/jpg_file_type.svg?react';
-
 import InfoIcon from '../../assets/icons/info_icon.svg?react';
 import CalendarIcon from '../../assets/icons/calendar_icon.svg?react';
 import HideIcon from '../../assets/icons/hide_icon.svg?react';
@@ -421,7 +420,6 @@ Components['add_testcase'] = AddTestCaseIcon;
 Components['automation_testcase'] = AutomationTestCaseIcon;
 Components['manual_testcase'] = ManualTestCaseIcon;
 Components['back_icon'] = BackIcon;
-
 Components['sause_lab'] = SauseLabIcon;
 Components['local'] = LocalIcon;
 Components['internet_explorer'] = InternetExplorerIcon;

package/src/components/StatusCard/StatusCard.scss

@@ -1,6 +1,5 @@
 .ff-card-container {
-  width: 120px;
-  height: 93px;
+  height: 78px;
   display: flex;
   align-items: center;
   border: 1px solid var(--border-color);
@@ -31,14 +30,14 @@
   }
 
   .ff-status-bar {
-    width: 24px;
+    width: 12%;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: start;
     align-items: center;
     border-right: 1px solid var(--border-color);
-    gap: 30px;
+    gap: 17px;
 
     .ff-status-text {
       transform: rotate(-90deg);
@@ -49,18 +48,23 @@
 
   &.passed .ff-status-bar {
     background-color: var(--ff-card-passed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.failed .ff-status-bar {
     background-color: var(--ff-card-failed-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.warning .ff-status-bar {
     background-color: var(--ff-card-warning-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.skipped .ff-status-bar {
     background-color: var(--ff-card-skipped-status-bg-color);
+    color: var(--base-bg-color);
   }
   &.flaky .ff-status-bar {
     background-color: var(--ff-card-flaky-status-bg-color);
+    color: var(--base-bg-color);
   }
 
   .ff-content {
@@ -91,4 +95,43 @@
   &.flaky .ff-number {
     color: var(--ff-card-flaky-status-bg-color);
   }
+
+  &.toggled {
+    &.passed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-status-bar {
+      background-color: var(--base-bg-color);
+      color: var(--ff-card-flaky-status-bg-color);
+    }
+
+    &.passed .ff-content {
+      background-color: var(--ff-card-passed-status-bg-color);
+    }
+    &.failed .ff-content {
+      background-color: var(--ff-card-failed-status-bg-color);
+    }
+    &.warning .ff-content {
+      background-color: var(--ff-card-warning-status-bg-color);
+    }
+    &.skipped .ff-content {
+      background-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &.flaky .ff-content {
+      background-color: var(--ff-card-flaky-status-bg-color);
+    }
+  }
 }

package/src/components/StatusCard/StatusCard.stories.tsx

@@ -18,6 +18,7 @@ export const Passed: Story = {
     status: 'Passed',
     count: 66,
     text: 'Scripts were passed all the time.',
+    style:{width:'200px'},
   },
 };
 

package/src/components/StatusCard/StatusCard.tsx

@@ -1,12 +1,31 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
 import Icon from '../Icon';
 
-const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
+const StatusCard: React.FC<CardProps> = ({
+  icon,
+  status,
+  count,
+  text,
+  style = { width: '196.4px' },
+  onSelectedStatus = (_status) => {},
+}) => {
+  const [isToggled, setIsToggled] = useState<boolean>(false);
+
+  const handleSelectStatus = (status: string) => {
+    setIsToggled(true);
+    onSelectedStatus(status);
+  };
   return (
-    <div className={`ff-card-container ${status.toLowerCase()}`}>
+    <div
+      className={`ff-card-container ${status.toLowerCase()} ${
+        isToggled ? 'toggled' : ''
+      }`}
+      style={style}
+      onClick={() => handleSelectStatus(status)}
+    >
       <div className="ff-status-bar">
         <div>
           <Icon name={icon} height={20} width={20} hoverEffect={false} />
@@ -14,7 +33,6 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
         <Typography
           fontWeight="semi-bold"
           fontSize="10px"
-          color="var(--ff-status-card-text-color)"
           textAlign="center"
           lineHeight="15px"
           className="ff-status-text"
@@ -29,6 +47,7 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="24px"
           className="ff-number"
           lineHeight="36px"
+          color={isToggled ? 'var(--base-bg-color)' : ''}
         >
           {count}
         </Typography>
@@ -37,7 +56,11 @@ const StatusCard: React.FC<CardProps> = ({ icon, status, count, text }) => {
           fontSize="10px"
           className="ff-text"
           lineHeight="15px"
-          color="var(--ff-card-status-text-color)"
+          color={
+            isToggled
+              ? 'var(--base-bg-color)'
+              : 'var(--ff-card-status-text-color)'
+          }
         >
           {text}
         </Typography>

package/src/components/StatusCard/types.ts

@@ -1,11 +1,16 @@
 export interface CardProps {
-    /** The icon to display in the card */
-    icon: string;
-    /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
-    status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky';
-    /** The number displayed in the card */
-    count: number | string;
-    /** The description text displayed at the bottom of the card */
-    text: string;
-  }
-  
+  /** The icon to display in the card */
+  icon: string;
+  /** The status of the card (Passed, Failed, Warning, Skipped, Flaky) */
+  status: 'Passed' | 'Failed' | 'Warning' | 'Skipped' | 'Flaky' | 'PASSED' | 'FAIL' | 'WARNING' | 'SKIPPED' | 'FLAKY';
+  /** The number displayed in the card */
+  count: number | string;
+  /** The description text displayed at the bottom of the card */
+  text: string;
+  /** Inline Styling */
+  style?: React.CSSProperties;
+  /** toggle update */
+  handleToggleStatus?: (_status: boolean) => void;
+  /** call back */
+  onSelectedStatus?: (_status: string) => void;
+}

package/src/components/Toastify/Toastify.tsx

@@ -73,6 +73,7 @@ export const Toastify = () => {
       variant={toastProps.variant}
       toastTitle={toastProps.toastTitle}
       toastMessage={toastProps.toastMessage}
+      zIndex={1000000000}
     />
   );
 };