pixel-react 1.9.8 → 1.10.0

package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx

@@ -25,10 +25,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
   labelHeading,
   legendType = 'numberLegend',
   isLegendDetails = true,
-  chartToPillGap,
-  pillLegendGap,
+  chartToLegendGap = '16px',
+  legendGap = '8px',
   labelFontSize = 12,
   subLabelFontSize = 8,
+  gapBetweenArch = 10,
 }) => {
   const [tooltip, setTooltip] = useState<{
     visible: boolean;
@@ -47,7 +48,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
     0
   );
   const baseRadius = radius;
-  const radiusIncrement = lineWidth + 10;
+  const radiusIncrement = lineWidth + gapBetweenArch;
   const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
   const svgSize = 2 * (maxRadius + lineWidth);
   const reversedBarValues = [...barValues].reverse();
@@ -58,7 +59,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
     switch (legendType) {
       case 'numberLegend':
         return (
-          <div className="ff-legend-container ff-number-legend" style={{gap:pillLegendGap}}>
+          <div
+            className="ff-legend-container ff-number-legend"
+            style={{ gap: legendGap }}
+          >
             {legendData.map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <Typography
@@ -83,7 +87,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
       case 'pillLegend':
         return (
-          <div className="ff-legend-container ff-pill-legend" style={{gap:pillLegendGap}}>
+          <div
+            className="ff-legend-container ff-pill-legend"
+            style={{ gap: legendGap }}
+          >
             {legendData.reverse().map((item, index) => (
               <div className="ff-legend-item" key={index}>
                 <span
@@ -92,11 +99,11 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     backgroundColor: item.arcColor,
                   }}
                 >
-                  <Typography fontSize={10} color="var(--tooltip-text-color)">{item.value}</Typography>
+                  <Typography fontSize={10} color="var(--tooltip-text-color)">
+                    {item.value}
+                  </Typography>
                 </span>
-                <Typography className="ff-legend-key">
-                  {item.label}
-                </Typography>
+                <Typography className="ff-legend-key">{item.label}</Typography>
               </div>
             ))}
           </div>
@@ -109,20 +116,22 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
   const handleMouseEnter = (e: React.MouseEvent, content: string) => {
     const { clientX, clientY } = e;
+    const container = e.currentTarget.getBoundingClientRect();
     setTooltip({
       visible: true,
-      x: clientX,
-      y: clientY,
+      x: clientX - container.left,
+      y: clientY - container.top,
       content: content,
     });
   };
 
   const handleMouseMove = (e: React.MouseEvent) => {
     const { clientX, clientY } = e;
+    const container = e.currentTarget.getBoundingClientRect();
     setTooltip((prev) => ({
       ...prev,
-      x: clientX,
-      y: clientY,
+      x: clientX - container.left,
+      y: clientY - container.top,
     }));
   };
 
@@ -136,11 +145,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
 
   const getArcColorFromTooltip = () => {
     if (!tooltip.visible) return '';
-    const valueString = tooltip.content.split(':')[1]?.trim(); 
-    const value = valueString ? Number(valueString) : undefined; 
-    if (value === undefined) return ''; 
-    const matchingBar = barValues.find((val) => val.value === value); 
-    return matchingBar?.arcColor || ''; 
+    const valueString = tooltip.content.split(':')[0]?.trim();
+    if (valueString === undefined) return '';
+    const matchingBar = barValues.find((val) => val.barLabel === valueString);
+    return matchingBar?.arcColor || '';
   };
 
   return (
@@ -150,29 +158,41 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
           ? 'ff-multi-radial-chart-number'
           : 'ff-multi-radial-chart-pill'
       }`}
-      style={{gap: chartToPillGap}}
+      style={{ gap: chartToLegendGap }}
     >
       <div className="relative" style={{ width: svgSize, height: svgSize }}>
-        <svg width={svgSize} height={svgSize} viewBox={`0 0 ${svgSize} ${svgSize}`} className="absolute top-0 left-0">
-          <g transform={`translate(${svgSize / 2}, ${svgSize / 2})`}>
+        <svg
+          width={svgSize}
+          height={svgSize}
+          viewBox={`0 0 ${svgSize} ${svgSize}`}
+          className="absolute top-0 left-0"
+        >
+          <g transform={`translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`}>
             {reversedBarValues.map((values, i) => {
               const originalIndex = barValues.length - 1 - i;
               const percentage = values.value / totalBarValue;
               const angleIncrement = percentage * 2 * Math.PI;
-              let startAngle = -Math.PI / 2; 
+              let startAngle = -Math.PI / 2;
               let endAngle = startAngle + angleIncrement;
               if (values.value === totalBarValue) {
                 startAngle = 0;
                 endAngle = 2 * Math.PI;
               }
-              const currentRadius = baseRadius + radiusIncrement * originalIndex;
+              const currentRadius =
+                baseRadius + radiusIncrement * originalIndex;
 
-              const backGroundArcPath = calculateArc(0, 0, currentRadius, 0, 2 * Math.PI);
+              const backGroundArcPath = calculateArc(
+                0,
+                0,
+                currentRadius,
+                0,
+                2 * Math.PI
+              );
 
               // If value is 0, render a dot at the top of the circle (angle = -Math.PI / 2)
               if (values.value === 0) {
                 const dotX = currentRadius * Math.cos(-Math.PI / 2);
-                const dotY = currentRadius * Math.sin(-Math.PI / 2); 
+                const dotY = currentRadius * Math.sin(-Math.PI / 2);
                 return (
                   <g key={originalIndex}>
                     <path
@@ -185,10 +205,13 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     <circle
                       cx={dotX}
                       cy={dotY}
-                      r={5}
+                      r={lineWidth + 1}
                       fill={values.arcColor}
                       onMouseEnter={(e) =>
-                        handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                        handleMouseEnter(
+                          e,
+                          `${values.barLabel || 'Data'}: ${values.value}`
+                        )
                       }
                       onMouseMove={handleMouseMove}
                       onMouseLeave={handleMouseLeave}
@@ -197,7 +220,13 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                 );
               }
 
-              const foregroundArcPath = calculateArc(0, 0, currentRadius, startAngle, endAngle);
+              const foregroundArcPath = calculateArc(
+                0,
+                0,
+                currentRadius,
+                startAngle,
+                endAngle
+              );
               return (
                 <g key={originalIndex}>
                   <path
@@ -214,7 +243,10 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
                     strokeWidth={lineWidth}
                     strokeLinecap={lineCap === 'square' ? 'butt' : 'round'}
                     onMouseEnter={(e) =>
-                      handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`)
+                      handleMouseEnter(
+                        e,
+                        `${values.barLabel || 'Data'}: ${values.value}`
+                      )
                     }
                     onMouseMove={handleMouseMove}
                     onMouseLeave={handleMouseLeave}
@@ -227,17 +259,25 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
             })}
             <text
               x="0"
-              y="-20"
+              y={`-${lineWidth + gapBetweenArch + 2}`}
               fill={getArcColorFromTooltip()}
               textAnchor="middle"
               dominantBaseline="central"
             >
               {tooltip.visible ? (
                 <>
-                  <tspan x="0" dy={10} className="ff-center-text-tooltip">
+                  <tspan
+                    x="0"
+                    dy={`${lineWidth + gapBetweenArch - 5}`}
+                    className="ff-center-text-tooltip"
+                  >
                     {textData(tooltip.content.split(':')[1]?.trim() || '', 5)}
                   </tspan>
-                  <tspan x="0" dy={18} className="ff-center-text-tooltip">
+                  <tspan
+                    x="0"
+                    dy={`${lineWidth + gapBetweenArch + 5}`}
+                    className="ff-center-text-tooltip"
+                  >
                     {textData(tooltip.content.split(':')[0] ?? '', 8)}
                   </tspan>
                 </>
@@ -289,7 +329,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
             className="ff-multi-radial-tooltip"
             style={{
               top: tooltip.y + 10,
-              left: tooltip.x + 10,
+              left: tooltip.x + 100,
               zIndex: 1000,
             }}
           >
@@ -301,7 +341,7 @@ const MultiRadialChart: React.FC<MultiRadialChartProps> = ({
         renderLegend(
           barValues.map((value) => ({
             ...value,
-            label:value?.barLabel,
+            label: value?.barLabel,
             key: value.value.toString(),
           })),
           legendType

package/src/components/Charts/MultiRadialChart/types.ts

@@ -16,11 +16,12 @@ export interface MultiRadialChartProps {
   barValues: BarValue[];
   legendType?: LegendType;
   isLegendDetails?: boolean;
-  labelFontSize?: number;
-  subLabelFontSize?: number;
+  labelFontSize?: number,
+  subLabelFontSize?: number
   gapAngle?: number;
-  chartToPillGap?: number | string;
-  pillLegendGap?: number | string;
+  chartToLegendGap?: string;
+  legendGap?: string;
+  gapBetweenArch?:number;
 }
 export interface ChartItem extends BarValue {
   label: string;

package/src/components/Checkbox/Checkbox.scss

@@ -47,7 +47,6 @@
       @include mixins.transition(border-color, background-color);
     }
     &:hover {
-      border-color: var(--brand-color);
       &::after {
         opacity: 1;
       }
@@ -75,8 +74,8 @@
         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);
+        background-color: var(--ff-card-flaky-status-bg-color);
+        border-color: var(--ff-card-flaky-status-bg-color);
       }
     }
   }
@@ -97,7 +96,7 @@
         background: var(--ff-card-skipped-status-bg-color);
       }
       &--flaky {
-        background: var(-- ff-card-flaky-status-bg-color);
+        background: var(--ff-card-flaky-status-bg-color);
       }
     }
     &::after {
@@ -142,7 +141,7 @@
       border-color: var(--ff-card-skipped-status-bg-color);
     }
     &--flaky {
-      border-color: var(-- ff-card-flaky-status-bg-color);
+      border-color: var(--ff-card-flaky-status-bg-color);
     }
   }
 }

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

@@ -18,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => {
-    const [checked, setChecked] = useState(true); // Default starts as checked
+    const [checked, setChecked] = useState(true);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       setChecked(event.target.checked);
@@ -38,21 +38,23 @@ export const Default: Story = {
 
 export const Partial: Story = {
   render: () => {
-    const [checked, setChecked] = useState(true); // Default starts as checked
+    const [checked, setChecked] = useState(true);
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       setChecked(event.target.checked);
     };
 
     return (
-      <Checkbox
-        label="Partial Checkbox"
-        id="partial-checkbox"
-        name="partial"
-        partial={true}
-        checked={checked}
-        onChange={handleChange}
-      />
+      <>
+        <Checkbox
+          label="Partial Checkbox"
+          id="partial-checkbox"
+          name="partial"
+          partial={true}
+          checked={checked}
+          onChange={handleChange}
+        />
+      </>
     );
   },
 };
@@ -76,3 +78,31 @@ export const Controlled: Story = {
     );
   },
 };
+
+export const Varient: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setChecked(event.target.checked);
+    };
+
+    return (
+      <>
+        {['passed', 'failed', 'warning', 'skipped', 'flaky'].map((varient) => (
+          <Checkbox
+            key={varient}
+            label={
+              checked ? 'Checked! Click to uncheck.' : 'Click here to check.'
+            }
+            id="controlled-checkbox"
+            name="controlled"
+            checked={checked}
+            onChange={handleChange}
+            variant={varient as any}
+          />
+        ))}
+      </>
+    );
+  },
+};

package/src/components/Icon/iconList.ts

@@ -288,6 +288,13 @@ import JiraColored from '../../assets/icons/jira_colored.svg?react';
 import Screenshot from '../../assets/icons/screenshot.svg?react';
 import DeleteFilled from '../../assets/icons/delete_filled.svg?react';
 import PrimaryCalendarIcon from '../../assets/icons/primary_calendar_icon.svg?react'
+import SauseLabPrimaryIcon from "../../assets/icons/sause_lab_icon.svg?react"
+
+import totalDefectsStatusIcon from '../../assets/icons/total_defects_status_icon.svg?react';
+import openDefectsStatusIcon from '../../assets/icons/open_defects_icon.svg?react';
+import closedDefectsStatusIcon from '../../assets/icons/close_defects_icon.svg?react';
+import qualityScoreStatusIcon from '../../assets/icons/quality_score_icon.svg?react';
+import defectDensityStatusIcon from '../../assets/icons/defect_density_icon.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -570,5 +577,12 @@ Components['jira_colored'] = JiraColored;
 Components['screenshot'] = Screenshot;
 Components['delete_filled'] = DeleteFilled;
 Components['primary_calendar_icon'] = PrimaryCalendarIcon
+Components['sause_lab_icon'] = SauseLabPrimaryIcon
+
+Components['total_defects_status_icon'] = totalDefectsStatusIcon;
+Components['open_defects_status_icon'] = openDefectsStatusIcon;
+Components['closed_defects_status_icon'] = closedDefectsStatusIcon;
+Components['quality_score_status_icon'] = qualityScoreStatusIcon;
+Components['defect_density_status_icon'] = defectDensityStatusIcon;
 
 export default Components;

package/src/components/StatusCard/StatusCard.scss

@@ -1,3 +1,16 @@
+$ff-status-colors: (
+  passed: var(--ff-card-passed-status-bg-color),
+  failed: var(--ff-card-failed-status-bg-color),
+  warning: var(--ff-card-warning-status-bg-color),
+  skipped: var(--ff-card-skipped-status-bg-color),
+  flaky: var(--ff-card-flaky-status-bg-color),
+  total: var(--card-total-defect-color),
+  defect: var(--card-defect-density),
+  open: var(--ff-card-failed-status-bg-color),
+  closed: var(--ff-card-passed-status-bg-color),
+  quality: var(--ff-card-warning-status-bg-color),
+);
+
 .ff-card-container {
   height: 78px;
   display: flex;
@@ -8,24 +21,13 @@
   cursor: pointer;
 
   &:hover {
-    &.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);
+    @each $state, $color in $ff-status-colors {
+      &.#{$state} {
+        border-color: $color;
+        .ff-status-bar {
+          border-right: 1px solid $color;
+        }
+      }
     }
   }
 
@@ -34,37 +36,49 @@
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: start;
+    justify-content: space-between;
     align-items: center;
     border-right: 1px solid var(--border-color);
-    gap: 17px;
+    border-radius: 3px;
 
     .ff-status-text {
       transform: rotate(-90deg);
       transform-origin: center;
-      display: inline-block;
+      display: flex;
+      align-items: start;
+      height: 16px;
+      width: 6px;
     }
   }
 
-  &.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);
+  @each $state, $color in $ff-status-colors {
+    &.#{$state} {
+      .ff-status-bar {
+        background-color: $color;
+        color: var(--base-bg-color);
+      }
+
+      .ff-content {
+        .ff-number {
+          color: $color;
+        }
+      }
+
+      &.toggled {
+        background-color: $color;
+        border: 1px solid $color;
+
+        .ff-status-bar {
+          border-right: 1px solid $color;
+          background-color: var(--base-bg-color);
+          color: $color;
+        }
+
+        .ff-content {
+          background-color: $color;
+        }
+      }
+    }
   }
 
   .ff-content {
@@ -81,58 +95,7 @@
     }
   }
 
-  &.passed .ff-number {
-    color: var(--ff-card-passed-status-bg-color);
-  }
-  &.failed .ff-number {
-    color: var(--ff-card-failed-status-bg-color);
-  }
-  &.warning .ff-number {
-    color: var(--ff-card-warning-status-bg-color);
-  }
-  &.skipped .ff-number {
-    color: var(--ff-card-skipped-status-bg-color);
-  }
-  &.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);
-    }
+  .ff-content.red-background {
+    gap: 8px;
   }
 }

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

@@ -60,11 +60,56 @@ export const Flaky: Story = {
   },
 };
 
+export const TotalDefect: Story = {
+  args: {
+    icon: 'total_defects_status_icon',
+    status: 'Total Defects',
+    count: 66,
+    text: 'Total Defects',
+  },
+};
+
+export const DefectDensity: Story = {
+  args: {
+    icon: 'defect_density_icon',
+    status: 'Defect Density',
+    count: 33,
+    text: 'Defect Density',
+  },
+};
+
+export const OpenDefects: Story = {
+  args: {
+    icon: 'open_defects_icon',
+    status: 'Open Defects',
+    count: 22,
+    text: 'Open Defects',
+  },
+};
+
+export const ClosedDefects: Story = {
+  args: {
+    icon: 'close_defects_icon',
+    status: 'Closed Defects',
+    count: 11,
+    text: 'Closed Defects',
+  },
+};
+
+export const QualityScore: Story = {
+  args: {
+    icon: 'quality_score_icon',
+    status: 'Quality Score',
+    count: 44,
+    text: 'Quality Score',
+  },
+};
+
 export const AllCards: Story = {
   render: () => {
     const [toggledCard, setToggledCard] = useState<number | null>(null);
 
-    const data = [
+    const data: { name: CardProps['status']; count: number; text: string }[] = [
       {
         name: 'Passed',
         count: 6,
@@ -90,6 +135,31 @@ export const AllCards: Story = {
         count: 6,
         text: 'Scripts were Flaky all the time',
       },
+      {
+        name: 'Total Defects',
+        count: 66,
+        text: 'Total Defects',
+      },
+      {
+        name: 'Defect Density',
+        count: 33,
+        text: 'Defect Density',
+      },
+      {
+        name: 'Open Defects',
+        count: 22,
+        text: 'Open Defects',
+      },
+      {
+        name: 'Closed Defects',
+        count: 11,
+        text: 'Close Defects',
+      },
+      {
+        name: 'Quality Score',
+        count: 4,
+        text: 'Quality Score',
+      },
     ];
 
     const onHandleStatus = (status: string, index: number) => {
@@ -98,13 +168,16 @@ export const AllCards: Story = {
     };
 
     return (
-      <div style={{ display: 'flex', gap: '8px' }}>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
         {data.map((row, index) => (
           <div key={index}>
             <StatusCard
               count={row?.count}
-              icon={`${row.name.toLowerCase()}_status_icon`}
-              status={row?.name as any}
+              icon={`${row.name
+                .toLowerCase()
+                .split(' ')
+                .join('_')}_status_icon`}
+              status={row?.name}
               text={row.text}
               onSelectedStatus={(status) => onHandleStatus(status, index)}
               resetToggle={toggledCard !== index}