pixel-react 1.10.15 → 1.10.16

package/src/components/StatusButton/StatusButton.tsx

@@ -1,46 +0,0 @@
-import classNames from 'classnames';
-import './StatusButton.scss';
-import { StatusButtonProps } from './types';
-import Typography from '../Typography';
-import Tooltip from '../Tooltip';
-
-const StatusButton = ({
-  status = 'passed',
-  label = '',
-  onClick = () => {},
-  className = '',
-  style = {},
-  disabled = false,
-  ...props
-}: StatusButtonProps) => {
-  const hasTooltip =
-    status === 'partially-executed' || status === 'not-executed';
-
-  return (
-    <Tooltip title={hasTooltip ? label : ''} placement="bottom">
-      <button
-        className={classNames(
-          'ff-status-button',
-          `ff-status-button--${status}`,
-          className
-        )}
-        style={style}
-        onClick={onClick}
-        disabled={disabled}
-        {...props}
-      >
-        <Typography
-          as="div"
-          fontWeight="semi-bold"
-          lineHeight="16px"
-          textAlign="center"
-          className="ff-status-button__text"
-        >
-          {label}
-        </Typography>
-      </button>
-    </Tooltip>
-  );
-};
-
-export default StatusButton;

package/src/components/StatusButton/index.ts

@@ -1 +0,0 @@
-export { default } from './StatusButton';

package/src/components/StatusButton/types.ts

@@ -1,45 +0,0 @@
-import { ReactNode } from 'react';
-
-export interface StatusButtonProps {
-  /**
-   * Status of the button
-   */
-  status:
-    | 'passed'
-    | 'failed'
-    | 'running'
-    | 'skipped'
-    | 'warning'
-    | 'terminated'
-    | 'partially-executed'
-    | 'aborted'
-    | 'not-executed';
-  /**
-   * Button label (status text)
-   */
-  label?: string;
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /**
-   * Button content
-   */
-  children?: ReactNode;
-  /**
-   * Button id
-   */
-  id?: string;
-  /**
-   * Disabled state
-   */
-  disabled?: boolean;
-  /**
-   * Classname for the button
-   */
-  className?: string;
-  /**
-   * Additional styles for the button
-   */
-  style?: React.CSSProperties;
-}

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

@@ -1,190 +0,0 @@
-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',
-  component: Card,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<CardProps>;
-
-export const Passed: Story = {
-  args: {
-    icon: 'passed_status_icon',
-    status: 'Passed',
-    count: 66,
-    text: 'Scripts were passed all the time.',
-    style: { width: '200px' },
-  },
-};
-
-export const Failed: Story = {
-  args: {
-    icon: 'failed_status_icon',
-    status: 'Failed',
-    count: 33,
-    text: 'Scripts were failed all the time.',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    icon: 'warning_status_icon',
-    status: 'Warning',
-    count: 22,
-    text: 'Scripts were marked as warning.',
-  },
-};
-
-export const Skipped: Story = {
-  args: {
-    icon: 'skipped_status_icon',
-    status: 'Skipped',
-    count: 11,
-    text: 'Scripts were not part of any execution.',
-  },
-};
-
-export const Flaky: Story = {
-  args: {
-    icon: 'flaky_status_icon',
-    status: 'Flaky',
-    count: 44,
-    text: 'Scripts were flaky in their behavior.',
-  },
-};
-
-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: { name: CardProps['status']; count: number; text: string }[] = [
-      {
-        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',
-      },
-      {
-        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) => {
-      setToggledCard(index);
-      console.log(`Selected status: ${status}`);
-    };
-
-    return (
-      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-        {data.map((row, index) => (
-          <div key={index}>
-            <StatusCard
-              count={row?.count}
-              icon={`${row.name
-                .toLowerCase()
-                .split(' ')
-                .join('_')}_status_icon`}
-              status={row?.name}
-              text={row.text}
-              onSelectedStatus={(status) => onHandleStatus(status, index)}
-              resetToggle={toggledCard !== index}
-            />
-          </div>
-        ))}
-      </div>
-    );
-  },
-};

package/src/components/StatusCard/StatusCard.tsx

@@ -1,134 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { CardProps } from './types';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import './StatusCard.scss';
-
-const StatusCard: React.FC<CardProps> = ({
-  icon,
-  status,
-  count,
-  text,
-  style = { width: '196.4px' },
-  resetToggle,
-  onSelectedStatus = (_status) => {},
-}) => {
-  const [isToggled, setIsToggled] = useState<boolean>(false);
-
-  const hideStatusText = [
-    'total defects',
-    'defect density',
-    'open defects',
-    'closed defects',
-    'quality score',
-  ];
-
-  const swapCountAndText = hideStatusText.includes(status.toLowerCase());
-
-  const redBackground = hideStatusText.includes(status.toLowerCase());
-
-  const handleSelectStatus = (status: string) => {
-    if (hideStatusText.includes(status.toLowerCase())) {
-      return;
-    }
-    setIsToggled(true);
-    onSelectedStatus(status);
-  };
-
-  useEffect(() => {
-    if (resetToggle) {
-      setIsToggled(false);
-    }
-  }, [resetToggle]);
-
-  const handleStaticCard = () => {
-    if (status.toLowerCase() === 'defect density') {
-      return (
-        <>
-          {count.toString().padStart(2, '0')}
-          <Typography fontSize="15px" fontWeight="semi-bold">
-            / Modules
-          </Typography>
-        </>
-      );
-    } else if (status.toLowerCase() === 'quality score') {
-      return `${parseFloat(count.toString()).toFixed(2)}%`;
-    } else {
-      return count.toString().padStart(2, '0');
-    }
-  };
-
-  return (
-    <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} />
-        </div>
-        {!hideStatusText.includes(status.toLowerCase()) && (
-          <Typography
-            fontWeight="semi-bold"
-            fontSize="10px"
-            textAlign="center"
-            lineHeight="15px"
-            className="ff-status-text"
-            as="div"
-          >
-            {status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()}
-          </Typography>
-        )}
-      </div>
-      <div className={`ff-content ${redBackground ? 'red-background' : ''}`}>
-        {swapCountAndText ? (
-          <>
-            <Typography
-              fontWeight="semi-bold"
-              fontSize="10px"
-              className="ff-text"
-              lineHeight="15px"
-              color='var(--ff-chip-text-color)'
-            >
-              {text}
-            </Typography>
-            <Typography
-              fontWeight="semi-bold"
-              fontSize="24px"
-              className="ff-number"
-              lineHeight="36px"
-            >
-              {handleStaticCard()}
-            </Typography>
-          </>
-        ) : (
-          <>
-            <Typography
-              fontWeight="semi-bold"
-              fontSize="24px"
-              className="ff-number"
-              lineHeight="24px"
-              color={isToggled ? 'var(--base-bg-color)' : ''}
-            >
-              {count.toString().padStart(2, '0')}
-            </Typography>
-            <Typography
-              className="ff-text"
-              lineHeight="18px"
-              color={
-                isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)'
-              }
-            >
-              {text}
-            </Typography>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default StatusCard;

package/src/components/StatusCard/index.ts

@@ -1 +0,0 @@
-export {default} from './StatusCard'

package/src/components/StatusCard/types.ts

@@ -1,18 +0,0 @@
-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' | 'Total Defects' | 'Defect Density' | 'Open Defects' | 'Closed Defects' | 'Quality Score';
-  /** 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;
-  /** make Card Select false */
-  resetToggle?: boolean;
-  /** call back */
-  onSelectedStatus?: (_status: string) => void;
-}