pixel-react 1.7.8 → 1.7.9

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

@@ -1,6 +1,8 @@
+import React, { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
 import Card from './StatusCard';
 import { CardProps } from './types';
+import StatusCard from './StatusCard';
 
 const meta: Meta<typeof Card> = {
   title: 'Components/Card',
@@ -18,7 +20,7 @@ export const Passed: Story = {
     status: 'Passed',
     count: 66,
     text: 'Scripts were passed all the time.',
-    style:{width:'200px'},
+    style: { width: '200px' },
   },
 };
 
@@ -57,3 +59,59 @@ export const Flaky: Story = {
     text: 'Scripts were flaky in their behavior.',
   },
 };
+
+export const AllCards: Story = {
+  render: () => {
+    const [toggledCard, setToggledCard] = useState<number | null>(null);
+
+    const data = [
+      {
+        name: 'Passed',
+        count: 6,
+        text: 'Scripts were Passed all the time',
+      },
+      {
+        name: 'Failed',
+        count: 6,
+        text: 'Scripts were Failed all the time',
+      },
+      {
+        name: 'Warning',
+        count: 6,
+        text: 'Scripts were Warning all the time',
+      },
+      {
+        name: 'Skipped',
+        count: 6,
+        text: 'Scripts were Skip all the time',
+      },
+      {
+        name: 'Flaky',
+        count: 6,
+        text: 'Scripts were Flaky all the time',
+      },
+    ];
+
+    const onHandleStatus = (status: string, index: number) => {
+      setToggledCard(index);
+      console.log(`Selected status: ${status}`);
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: '8px' }}>
+        {data.map((row, index) => (
+          <div key={index}>
+            <StatusCard
+              count={row?.count}
+              icon={`${row.name.toLowerCase()}_status_icon`}
+              status={row?.name as any}
+              text={row.text}
+              onSelectedStatus={(status) => onHandleStatus(status, index)}
+              resetToggle={toggledCard !== index}
+            />
+          </div>
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/StatusCard/StatusCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './StatusCard.scss';
 import { CardProps } from './types';
 import Typography from '../Typography';
@@ -10,6 +10,7 @@ const StatusCard: React.FC<CardProps> = ({
   count,
   text,
   style = { width: '196.4px' },
+  resetToggle,
   onSelectedStatus = (_status) => {},
 }) => {
   const [isToggled, setIsToggled] = useState<boolean>(false);
@@ -18,10 +19,17 @@ const StatusCard: React.FC<CardProps> = ({
     setIsToggled(true);
     onSelectedStatus(status);
   };
+
+  useEffect(() => {
+    if (resetToggle) {
+      setIsToggled(false);
+    }
+  }, [resetToggle]);
+
   return (
     <div
       className={`ff-card-container ${status.toLowerCase()} ${
-        isToggled ? 'toggled' : ''
+        isToggled ? `toggled` : ''
       }`}
       style={style}
       onClick={() => handleSelectStatus(status)}

package/src/components/StatusCard/types.ts

@@ -11,6 +11,8 @@ export interface CardProps {
   style?: React.CSSProperties;
   /** toggle update */
   handleToggleStatus?: (_status: boolean) => void;
+  /** make Card Select false */
+  resetToggle?: boolean;
   /** call back */
   onSelectedStatus?: (_status: string) => void;
 }

package/src/components/TableTree/Components/TableBody.tsx

@@ -14,21 +14,25 @@ const TableBody = React.memo(
   }: TableBodyProps) => (
     <tbody>
       <tr id="ff-table-tree-first-node" />
-      {flattenedTreeData?.map(({ node, level }) => {
-        return (
-          <TableRow
-            key={node.id}
-            node={node}
-            level={level}
-            columnsData={columnsData}
-            selected={selected}
-            select={select}
-            onRowClick={onRowClick}
-            onToggleExpand={onToggleExpand}
-            onCheckBoxChange={onCheckBoxChange}
-          />
-        );
-      })}
+      {flattenedTreeData?.map(
+        ({ node, level, lines = level + 1, isLast = false }) => {
+          return (
+            <TableRow
+              key={node.id}
+              node={node}
+              level={level}
+              columnsData={columnsData}
+              selected={selected}
+              select={select}
+              onRowClick={onRowClick}
+              onToggleExpand={onToggleExpand}
+              onCheckBoxChange={onCheckBoxChange}
+              lines={lines}
+              isLast={isLast}
+            />
+          );
+        }
+      )}
       <tr id="ff-table-tree-last-node" />
     </tbody>
   )

package/src/components/TableTree/Components/TableCell.tsx

@@ -5,10 +5,22 @@ import { TableCellProps } from '../types';
 import Arrow from '../../../assets/icons/arrows_down_icon.svg?react';
 import React from 'react';
 
-const renderSpaces = (level: number) =>
-  Array.from({ length: level }).map((_, i) => (
-    <span key={i} className="tree-table-space-block" />
-  ));
+const renderSpaces = (
+  level: number,
+  lines: number,
+  isLast?: boolean | undefined
+) => (
+  <div className="tree-table-space-container">
+    {Array.from({ length: level }).map((_, i) => (
+      <span
+        key={i}
+        className={`tree-table-space-block ${i >= lines ? 'no-lines' : ''} ${
+          isLast && i === 0 ? 'last-node' : ''
+        }`}
+      />
+    ))}
+  </div>
+);
 
 const TableCell = React.memo(
   ({
@@ -19,36 +31,40 @@ const TableCell = React.memo(
     select,
     onCheckBoxChange,
     onToggleExpand,
+    lines,
+    isLast,
   }: TableCellProps) => (
     <td>
-      {col.isTree && renderSpaces(level + 1)}
-      {col.isTree && (
-        <span
-          className={`tree-table-space-block last-block  ${
-            node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
-          } ${node.folder ? '' : 'no-folder'}`}
-          onClick={() => onToggleExpand(node)}
-        >
-          {node.folder && <Arrow />}
-        </span>
-      )}
-      <span className="tree-table-td-content">
-        {col.isTree && select === 'checkbox' && (
-          <Checkbox
-            checked={selected.includes(node.id)}
-            onChange={() => onCheckBoxChange('checkbox', node)}
-          />
+      {col.isTree && renderSpaces(level + 1, lines, isLast)}
+      <div className='tree-title-container'>
+        {col.isTree && (
+          <span
+            className={`tree-table-space-block last-block  ${
+              node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'
+            } ${node.folder ? '' : 'no-folder'}`}
+            onClick={() => onToggleExpand(node)}
+          >
+            {node.folder && <Arrow />}
+          </span>
         )}
-        {col.isTree && select === 'radio' && (
-          <RadioButton
-            name={node.title}
-            checked={selected.includes(node.id)}
-            value={node.id}
-            onChange={() => onCheckBoxChange('radio', node)}
-          />
-        )}
-        {prepareData(node, col)}
-      </span>
+        <span className="tree-table-td-content">
+          {col.isTree && select === 'checkbox' && (
+            <Checkbox
+              checked={selected.includes(node.id)}
+              onChange={() => onCheckBoxChange('checkbox', node)}
+            />
+          )}
+          {col.isTree && select === 'radio' && (
+            <RadioButton
+              name={node.title}
+              checked={selected.includes(node.id)}
+              value={node.id}
+              onChange={() => onCheckBoxChange('radio', node)}
+            />
+          )}
+          {prepareData(node, col)}
+        </span>
+      </div>
       {col.actions && (
         <div className="table-tree-row-action">{col.actions(node)}</div>
       )}

package/src/components/TableTree/Components/TableRow.tsx

@@ -12,6 +12,8 @@ const TableRow = React.memo(
     onRowClick,
     onToggleExpand,
     onCheckBoxChange,
+    lines,
+    isLast,
   }: TableRowProps) => (
     <tr
       data-level={level}
@@ -28,6 +30,8 @@ const TableRow = React.memo(
           select={select}
           onCheckBoxChange={onCheckBoxChange}
           onToggleExpand={onToggleExpand}
+          lines={lines}
+          isLast={isLast}
         />
       ))}
     </tr>

package/src/components/TableTree/TableTree.scss

@@ -1,6 +1,73 @@
 .tree-table-space-block {
   display: inline-block;
   width: 20px;
+  height: 16px;
+  text-align: center;
+  line-height: 16px;
+  vertical-align: top;
+  font-size: 19px;
+  position: relative;
+  box-sizing: border-box;
+  // margin-top: 7px;
+  border-radius: 50%;
+
+  &.btn-toggle {
+    position: relative;
+    cursor: pointer;
+    width: 22px;
+    height: 18px;
+    z-index: 12;
+
+    &::before {
+      display: none;
+    }
+  }
+
+  &.last-block::after,
+  &.no-folder::after {
+    position: absolute;
+    content: '';
+    height: 1px;
+    background: var(--tree-connecting-lines-color);
+    top: 50%;
+    margin-top: -1px;
+  }
+
+  &.last-block::after {
+    width: 12px;
+    left: -10px;
+  }
+
+  &.no-folder {
+    width: 8px;
+
+    &::after {
+      width: 18px;
+      left: -10px;
+    }
+  }
+
+  &:not(.last-block, .no-lines, .last-node)::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 40px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: 99;
+  }
+
+  &.last-node::before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 12px;
+    background: var(--tree-connecting-lines-color);
+    left: 50%;
+    top: -4px;
+    z-index: -1;
+  }
 }
 
 .hidden {
@@ -9,12 +76,11 @@
 
 .show {
   display: table-row;
+  visibility: visible;
 }
 
 .btn-toggle {
-  &.expand {
-    cursor: pointer;
-  }
+  cursor: pointer;
 
   &.is-close {
     background: #f1f1f1;
@@ -22,10 +88,7 @@
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
   }
 
-  &::before {
-    display: none;
-  }
-
+  &::before,
   &::after {
     display: none;
   }
@@ -34,13 +97,10 @@
 .tree-table-wrap {
   width: 100%;
 }
-thead{
-  position: sticky;
-  top: 12px;
-}
 
-tbody{
+tbody {
   overflow: scroll;
+  height: 300px;
 }
 
 .tree-table {
@@ -49,29 +109,49 @@ tbody{
   width: 100%;
   border-collapse: collapse;
   overflow: scroll;
+
   tr {
     .table-tree-row-action {
       display: none;
     }
+
     &:hover {
       background-color: var(--hover-color);
+      td {
+        &:first-child {
+          background-color: var(--hover-color);
+        }
+      }
+
       .table-tree-row-action {
         display: inline-flex;
         align-items: center;
       }
     }
+
+    &::after {
+      content: '';
+      display: block;
+      visibility: hidden;
+      clear: both;
+    }
+  }
+
+  th,
+  td {
+    text-align: left;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
   }
 
   th {
     color: var(--brand-color);
-    text-align: center;
-    padding: 10px 0;
     background: var(--slider-table-color);
     font-size: 13px;
     width: 400px;
-    text-align: left;
+
     &:first-child {
-      width: 400px;
       position: sticky;
       left: 0;
     }
@@ -80,126 +160,59 @@ tbody{
   td {
     font-size: 14px;
     color: var(--brand-color);
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    text-align: left;
-    height: 32px;
+    height: 18px;
 
     &:first-child {
       overflow: initial;
-      width: 400px;
       position: sticky;
       left: 0;
       background-color: white;
+
       &:hover {
         background-color: var(--hover-color);
       }
     }
-
-    .tree-table-space-block {
-      border: 1px solid transparent;
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      line-height: 16px;
-      text-align: center;
-      vertical-align: top;
-      font-size: 19px;
-      position: relative;
-      box-sizing: border-box;
-      margin-top: 7px;
-      border-radius: 50%;
-
-      &:first-child {
-        margin-left: 7px;
-      }
-
-      &.btn-toggle {
-        // border: 1px solid var(--brand-color);
-        position: relative;
-        cursor: pointer;
-        width: 22px;
-        height: 22px;
-        z-index: 12;
-
-        &::before {
-          display: none;
-        }
-      }
-
-      &.last-block {
-        &::before {
-          display: none;
-        }
-
-        &::after {
-          position: absolute;
-          content: '';
-          width: 12px;
-          height: 1px;
-          background: var(--tree-connecting-lines-color);
-          top: 50%;
-          margin-top: -1px;
-          left: -10px;
-        }
-      }
-      &.no-folder {
-        width: 8px;
-        &::after {
-          position: absolute;
-          content: '';
-          width: 18px;
-          height: 1px;
-          background: var(--tree-connecting-lines-color);
-          top: 50%;
-          margin-top: -1px;
-          left: -10px;
-        }
-      }
-
-      &:not(.last-block)::before {
-        position: absolute;
-        content: '';
-        width: 1px;
-        height: 40px;
-        background: var(--tree-connecting-lines-color);
-        left: 50%;
-        top: -12px;
-        z-index: -1;
-      }
-    }
   }
 }
 
 .tree-table-td-content {
   display: inline-flex;
   align-items: center;
-  padding: 7px;
+  padding-left: 8px;
   font-size: 12px;
-  font-family: 'Poppins';
+  font-family: 'Poppins', sans-serif;
 }
 
-.hidden {
-  display: none;
-}
-
-.show {
-  visibility: visible;
-}
 .tree-row-expanded,
 .tree-row-collapsed {
   svg {
     height: 12px;
     width: 12px;
+
     path {
       fill: var(--brand-color);
     }
   }
 }
-.tree-row-collapsed {
-  svg {
-    transform: rotate(-90deg);
-    transition: all;
-  }
+
+.tree-row-collapsed svg {
+  transform: rotate(-90deg);
+  transition: transform 0.3s ease;
+}
+
+tr:after {
+  content: ' ';
+  display: block;
+  visibility: hidden;
+  clear: both;
+}
+
+.tree-table-space-container {
+  display: inline-flex;
+  flex-direction: row-reverse;
+}
+
+.tree-title-container {
+  display: inline-flex;
+  align-items: center;
 }

package/src/components/TableTree/data.ts

@@ -28,6 +28,8 @@ const data = [
       id: 'MOD1001', // Unique ID
     },
     level: 0,
+    lines: 1,
+    isLast: true,
   },
   {
     node: {
@@ -58,6 +60,7 @@ const data = [
       id: 'MOD1002', // Unique ID
     },
     level: 1,
+    lines: 1,
   },
   {
     node: {
@@ -73,6 +76,8 @@ const data = [
       id: 'MOD1003', // Unique ID
     },
     level: 1,
+    lines: 1,
+    isLast: true,
   },
   {
     node: {
@@ -104,6 +109,7 @@ const data = [
       id: 'MOD1004', // Unique ID
     },
     level: 2,
+    lines: 1,
   },
   {
     node: {
@@ -134,6 +140,7 @@ const data = [
       id: 'MOD1101', // Unique ID
     },
     level: 3,
+    lines: 2,
   },
   {
     node: {
@@ -164,6 +171,7 @@ const data = [
       id: 'MOD1102', // Unique ID
     },
     level: 3,
+    lines: 2,
   },
   {
     node: {
@@ -194,6 +202,8 @@ const data = [
       id: 'MOD1103', // Unique ID
     },
     level: 3,
+    lines: 2,
+    isLast: true,
   },
   {
     node: {
@@ -225,6 +235,8 @@ const data = [
       id: 'MOD1005', // Unique ID
     },
     level: 2,
+    lines: 1,
+    isLast: true,
   },
   {
     node: {
@@ -255,6 +267,7 @@ const data = [
       id: 'MOD1201', // Unique ID
     },
     level: 3,
+    lines: 1,
   },
   {
     node: {
@@ -285,6 +298,7 @@ const data = [
       id: 'MOD1202', // Unique ID
     },
     level: 3,
+    lines: 1,
   },
   {
     node: {
@@ -315,8 +329,9 @@ const data = [
       id: 'MOD1203', // Unique ID
     },
     level: 3,
+    lines: 1,
+    isLast: true,
   },
 ];
 
-
 export default data;

package/src/components/TableTree/types.ts

@@ -17,6 +17,8 @@ export interface TableCellProps {
   select: string | null;
   onCheckBoxChange: (type: string, node: any) => void;
   onToggleExpand: (node: any) => void;
+  lines: number;
+  isLast: boolean | undefined;
 }
 
 export interface TableHeadProps {
@@ -42,6 +44,8 @@ export interface TableRowProps {
   onRowClick: (e: any, node: any) => void;
   onToggleExpand: (node: any) => void;
   onCheckBoxChange: (type: string, node: any) => void;
+  lines: number;
+  isLast: boolean | undefined;
 }
 
 export interface Column {