pixel-react-excel-sheet 1.0.11 → 1.0.12

package/src/components/AttachImage/AttachImage.tsx

@@ -2,23 +2,19 @@ import React from 'react';
 import './AttachImage.scss';
 import Icon from '../Icon/Icon';
 import Tooltip from '../Tooltip';
-
-export interface AttachImageProps {
-  imageSrc: string;
-  onExpandClick: () => void;
-  onDeleteClick: () => void;
-  onDownloadClick: () => void;
-}
+import { AttachImageProps } from './types';
 
 const AttachImage: React.FC<AttachImageProps> = ({
   imageSrc,
   onExpandClick,
   onDeleteClick,
   onDownloadClick,
+  height = '75px',
+  width = '79px',
 }) => {
   return (
-    <div className="ff-attach-image-container">
-      <div className="ff-image-wrapper">
+    <div className="ff-attach-image-container" style={{ height, width }}>
+      <div className="ff-image-wrapper" style={{ height, width }}>
         <img src={imageSrc} alt="Attached" />
         <div className="ff-hover-icons">
           <div className="ff-top-icons">

package/src/components/AttachImage/types.ts

@@ -1,19 +1,26 @@
 export interface AttachImageProps {
-    /**
-     * The image source to display.
-     */
-    imageSrc: string;
-    /**
-     * Function triggered when the expand icon is clicked.
-     */
-    onExpandClick: () => void;
-    /**
-     * Function triggered when the delete icon is clicked.
-     */
-    onDeleteClick: () => void;
-    /**
-     * Function triggered when the download icon is clicked.
-     */
-    onDownloadClick: () => void;
-  }
-  
+  /**
+   * The image source to display.
+   */
+  imageSrc: string;
+  /**
+   * Function triggered when the expand icon is clicked.
+   */
+  onExpandClick: () => void;
+  /**
+   * Function triggered when the delete icon is clicked.
+   */
+  onDeleteClick: () => void;
+  /**
+   * Function triggered when the download icon is clicked.
+   */
+  onDownloadClick: () => void;
+  /**
+   * Custom height for the component.
+   */
+  height?: string;
+  /**
+   * Custom width for the component.
+   */
+  width?: string;
+}

package/src/components/Avatar/Avatar.scss

@@ -20,5 +20,9 @@
       width: 64px;
       height: 64px;
     }
+    .ff-avatar-label {
+      font-weight: bold;
+      text-align: center;
+    }
   }
   

package/src/components/Avatar/Avatar.stories.tsx

@@ -9,12 +9,12 @@ const meta: Meta<typeof Avatar> = {
     layout: 'centered',
   },
   argTypes: {
-  variant: {
-    control: { type: 'radio' },
-    options: ['small', 'medium', 'large'],
+    variant: {
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+    },
   },
-}
-}
+};
 export default meta;
 
 type Story = StoryObj<typeof meta>;
@@ -41,16 +41,36 @@ export const Large: Story = {
 };
 
 export const CustomAvatarSize: Story = {
-    args: {
-      customAvatarSize: 30,
-      iconName: 'accordion_header_icon',
-    },
-  };
-  
-  export const CustomIconSize: Story = {
-    args: {
-      customIconSize: 30,
-      customAvatarSize: 40,
-      iconName: 'accordion_header_icon',
-    },
-  };
+  args: {
+    customAvatarSize: 30,
+    iconName: 'accordion_header_icon',
+  },
+};
+
+export const CustomIconSize: Story = {
+  args: {
+    customIconSize: 30,
+    customAvatarSize: 40,
+    iconName: 'accordion_header_icon',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    label: 'AB',
+    customAvatarSize: 40,
+    labelFontSize: '16px',
+    backgroundColor: '#E0E0E0',
+    iconColor: '#333',
+  },
+};
+
+export const LabelWithCustomSize: Story = {
+  args: {
+    label: 'XY',
+    customAvatarSize: 50,
+    labelFontSize: '20px',
+    backgroundColor: '#F5A623',
+    iconColor: '#FFF',
+  },
+};

package/src/components/Avatar/Avatar.tsx

@@ -9,15 +9,31 @@ const Avatar: React.FC<AvatarProps> = ({
   iconColor= 'var(--avatar-icon-color)',
   customAvatarSize,
   customIconSize,
-  backgroundColor
+  backgroundColor,
+  label,
+  labelFontSize,
 }) => {
-    
+  const truncatedLabel = label?.slice(0, 2);
   return (
     <div
       className={`ff-avatar ff-avatar--${variant}`}
       style={{ height: `${customAvatarSize}px`, width: `${customAvatarSize}px`, backgroundColor }}
     >
-      <Icon name={iconName} height={customIconSize} width={customIconSize} color={iconColor}/>
+     {label ? (
+        <span
+          className="ff-avatar-label"
+          style={{ fontSize: labelFontSize || '14px', color: iconColor }}
+        >
+          {truncatedLabel}
+        </span>
+      ) : (
+        <Icon
+          name={iconName!}
+          height={customIconSize}
+          width={customIconSize}
+          color={iconColor}
+        />
+      )}
     </div>
   );
 };

package/src/components/Avatar/types.ts

@@ -10,7 +10,7 @@ export interface AvatarProps {
   /**
    * This property specifies the name of the icon to be displayed within the avatar.
    */
-  iconName: string;
+  iconName?: string;
   /**
    * This property allows you to customize the color of the icon within the avatar.
    */
@@ -24,4 +24,12 @@ export interface AvatarProps {
    * This property allows you to set a custom size for the icon within the avatar.
    */
   customIconSize?: number;
+   /**
+   * This property specifies the label to display inside the avatar, used as an alternative to the icon.
+   */
+   label?: string;
+   /**
+    * This property allows you to customize the font size of the label inside the avatar.
+    */
+   labelFontSize?: string;
 }

package/src/components/Charts/DonutChart/DonutChart.tsx

@@ -51,8 +51,7 @@ const DonutChart: React.FC<DonutChartProps> = ({
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
   let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
-  let currentAngle = Math.PI / 2;
-
+  let currentAngle = -Math.PI / 2;
   const MIN_PERCENTAGE = 1;
   const MIN_ANGLE = (MIN_PERCENTAGE / 100) * (2 * Math.PI);
   let minAngleTotal = 0;
@@ -98,7 +97,11 @@ const DonutChart: React.FC<DonutChartProps> = ({
           strokeWidth={lineWidth}
           onMouseEnter={() => handleMouseEnter(normalizedStatus)}
           onMouseLeave={handleMouseLeave}
-          strokeOpacity={0.8}
+          strokeOpacity={
+            hoveredStatus === null || hoveredStatus === normalizedStatus
+              ? 0.8
+              : 0.3
+          }
         />
         {/* Hover effect */}
         {hoveredStatus === normalizedStatus && (
@@ -129,6 +132,8 @@ const DonutChart: React.FC<DonutChartProps> = ({
             ? 'ff-highlighted'
             : 'ff-fade'
         }`}
+        onMouseEnter={() => handleMouseEnter(statusKey)}
+        onMouseLeave={handleMouseLeave}
       >
         <div className="ff-status-label">
           <div

package/src/components/Charts/RadialChart/RadialChart.scss

@@ -2,7 +2,11 @@
 
 .ff-radial-chart-container {
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   svg {
+    vertical-align: middle;
     text {
       @extend .font-size-8;
       font-size: var(--fontSize) !important;

package/src/components/Charts/RadialChart/RadialChart.tsx

@@ -6,6 +6,7 @@ import {
   ArcResult,
   ArcAnglesResult,
 } from './types';
+import Tooltip from '../../Tooltip';
 
 const useColorMappings = () =>
   useMemo(() => {
@@ -117,54 +118,59 @@ const RadialChart: React.FC<RadialChartProps> = ({
           calculateArcAngles(status.value, total, currentAngle, radius);
         currentAngle = endAngle;
         return (
-          <svg
-            key={status.status}
-            width={svgSize}
-            height={svgSize}
-            viewBox={`0 0 ${svgSize} ${svgSize}`}
-            onClick={() => onClick(status)}
-            role="img"
-            aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
+          <Tooltip
+            title={`${status.status}: ${Math.round(percentage * 100)}%`}
+            zIndex={1000}
           >
-            <g
-              transform={`translate(${radius + lineWidth}, ${
-                radius + lineWidth
-              })`}
+            <svg
+              key={status.status}
+              width={svgSize}
+              height={svgSize}
+              viewBox={`0 0 ${svgSize} ${svgSize}`}
+              onClick={() => onClick(status)}
+              role="img"
+              aria-label={`${status.status}: ${Math.round(percentage * 100)}%`}
             >
-              {/* Background Circle */}
-              <path
-                d={backgroundArcPath}
-                fill="none"
-                stroke={
-                  backgroundColorMapping[
-                    normalizedStatus as keyof typeof colorMapping
-                  ]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Status Arc */}
-              <path
-                d={foregroundArcPath}
-                fill="none"
-                stroke={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                strokeWidth={lineWidth}
-              />
-              {/* Percentage Text */}
-              <text
-                x="0"
-                y="0"
-                fill={
-                  colorMapping[normalizedStatus as keyof typeof colorMapping]
-                }
-                textAnchor="middle"
-                dominantBaseline="central"
+              <g
+                transform={`translate(${radius + lineWidth}, ${
+                  radius + lineWidth
+                })`}
               >
-                {`${Math.round(percentage * 100)}%`}
-              </text>
-            </g>
-          </svg>
+                {/* Background Circle */}
+                <path
+                  d={backgroundArcPath}
+                  fill="none"
+                  stroke={
+                    backgroundColorMapping[
+                      normalizedStatus as keyof typeof colorMapping
+                    ]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Status Arc */}
+                <path
+                  d={foregroundArcPath}
+                  fill="none"
+                  stroke={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  strokeWidth={lineWidth}
+                />
+                {/* Percentage Text */}
+                <text
+                  x="0"
+                  y="0"
+                  fill={
+                    colorMapping[normalizedStatus as keyof typeof colorMapping]
+                  }
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                >
+                  {`${Math.round(percentage * 100)}%`}
+                </text>
+              </g>
+            </svg>
+          </Tooltip>
         );
       })}
     </div>

package/src/components/Checkbox/Checkbox.scss

@@ -55,10 +55,49 @@
   .ff-checkbox-input:checked + .ff-checkbox-custom {
     background: var(--brand-color);
     border-color: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background-color: var(--ff-card-passed-status-bg-color);
+        border-color: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background-color: var(--ff-card-failed-status-bg-color);
+        border-color: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background-color: var(--ff-card-warning-status-bg-color);
+        border-color: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background-color: var(--ff-card-skipped-status-bg-color);
+        border-color: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background-color: var(-- ff-card-flaky-status-bg-color);
+        border-color: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
   }
 
   .ff-checkbox-input:checked:hover + .ff-checkbox-custom {
     background: var(--brand-color);
+    &.ff-checkbox-checked {
+      &--passed {
+        background: var(--ff-card-passed-status-bg-color);
+      }
+      &--failed {
+        background: var(--ff-card-failed-status-bg-color);
+      }
+      &--warning {
+        background: var(--ff-card-warning-status-bg-color);
+      }
+      &--skipped {
+        background: var(--ff-card-skipped-status-bg-color);
+      }
+      &--flaky {
+        background: var(-- ff-card-flaky-status-bg-color);
+      }
+    }
     &::after {
       opacity: 1;
     }
@@ -86,4 +125,22 @@
       }
     }
   }
+
+  .ff-checkbox {
+    &--passed {
+      border-color: var(--ff-card-passed-status-bg-color);
+    }
+    &--failed {
+      border-color: var(--ff-card-failed-status-bg-color);
+    }
+    &--warning {
+      border-color: var(--ff-card-warning-status-bg-color);
+    }
+    &--skipped {
+      border-color: var(--ff-card-skipped-status-bg-color);
+    }
+    &--flaky {
+      border-color: var(-- ff-card-flaky-status-bg-color);
+    }
+  }
 }

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Checkbox from './Checkbox';
-import { useState } from 'react';
 
 const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
@@ -10,38 +10,114 @@ const meta: Meta<typeof Checkbox> = {
     layout: 'centered',
   },
 };
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const useCheckboxState = (initialState = false) => {
+  const [checked, setChecked] = useState(initialState);
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked);
+  };
+  return { checked, handleChange };
+};
+
+// Story: Default Checkbox
 export const Default: Story = {
-  args: {
-    label: 'Enter label',
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Default Checkbox" checked={checked} onChange={handleChange} />;
   },
 };
 
+// Story: Partial Checkbox
 export const Partial: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    const [partial, setPartial] = useState(true);
+
+    const handlePartialChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setPartial(!event.target.checked);
+      handleChange(event);
+    };
+
+    return (
+      <Checkbox
+        label="Partially Selected Checkbox"
+        partial={partial}
+        checked={checked}
+        onChange={handlePartialChange}
+      />
+    );
+  },
+};
+
+// Story: Disabled Checkbox
+export const Disabled: Story = {
   args: {
-    label: 'Enter label',
-    partial: true,
+    label: 'Disabled Checkbox',
+    disabled: true,
   },
 };
 
-export const Controlled: Story = {
+// Story: Checkbox Variants
+export const Variants: Story = {
   render: () => {
-    const [checked, setChecked] = useState(false);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+    const initialStates = variants.reduce((acc, variant) => ({ ...acc, [variant]: false }), {});
+    const [checkedStates, setCheckedStates] = useState(initialStates);
 
-    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setChecked((event.target as HTMLInputElement).checked);
+    const handleChange = (variant: string) => (event: React.ChangeEvent<HTMLInputElement>) => {
+      setCheckedStates({ ...checkedStates, [variant]: event.target.checked });
     };
 
     return (
-      <Checkbox
-        label="click here to proceed with controlled component"
-        disabled={false}
-        checked={checked}
-        onChange={handleChange}
-      />
+      <div style={{ display: 'flex', gap: '16px' }}>
+        {variants.map((variant) => (
+          <Checkbox
+            key={variant}
+            label={variant.charAt(0).toUpperCase() + variant.slice(1)}
+            variant={variant}
+            checked={checkedStates[variant]}
+            onChange={handleChange(variant)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+// Story: Controlled Checkbox
+export const Controlled: Story = {
+  render: () => {
+    const { checked, handleChange } = useCheckboxState();
+    return <Checkbox label="Controlled Checkbox" checked={checked} onChange={handleChange} />;
+  },
+};
+
+// Story: All Features Showcase
+export const AllFeatures: Story = {
+  render: () => {
+    const { checked: defaultChecked, handleChange: handleDefaultChange } = useCheckboxState();
+    const { checked: partialChecked, handleChange: handlePartialChange } = useCheckboxState(true);
+    const variants = ['passed', 'failed', 'warning', 'skipped', 'flaky'] as const;
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+        <Checkbox label="Default Checkbox" checked={defaultChecked} onChange={handleDefaultChange} />
+        <Checkbox
+          label="Partially Selected"
+          partial={partialChecked}
+          onChange={handlePartialChange}
+        />
+        <Checkbox label="Disabled Checkbox" disabled />
+        <div style={{ display: 'flex', gap: '16px' }}>
+          {variants.map((variant) => (
+            <Checkbox key={variant} label={variant} variant={variant} />
+          ))}
+        </div>
+      </div>
     );
   },
 };

package/src/components/Checkbox/Checkbox.tsx

@@ -14,6 +14,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
   checked: initialChecked = false,
   partial = false,
   onChange,
+  variant
 }) => {
   const [checked, setChecked] = useState(initialChecked);
 
@@ -34,8 +35,10 @@ const Checkbox: React.FC<CheckboxProps> = ({
       />
       <span
         className={classNames('ff-checkbox-custom', {
-          'ff-checkbox-checked': checked,
+          'ff-checkbox-checked': checked ,
           'ff-storybook-checkbox--partial': partial && !checked,
+          [`ff-checkbox--${variant}`]: variant,
+          [`ff-checkbox-checked--${variant}`]: checked && variant,
         })}
       >
         {checked && (

package/src/components/Checkbox/types.ts

@@ -27,4 +27,8 @@ export interface CheckboxProps {
    * For partially checked checkbox
    */
   partial?: boolean;
+  /**
+   * For variant color
+   */
+  variant?: 'passed' | 'failed' | 'warning' | 'skipped' | 'flaky';
 }