pixel-react 1.6.7 → 1.6.9

package/src/components/StatusCard/StatusCard.scss

@@ -1,94 +1,94 @@
-.ff-card-container {
-  width: 120px;
-  height: 93px;
-  display: flex;
-  align-items: center;
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  overflow: hidden;
-  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);
-    }
-  }
-
-  .ff-status-bar {
-    width: 24px;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: start;
-    align-items: center;
-    border-right: 1px solid var(--border-color);
-    gap: 30px;
-
-    .ff-status-text {
-      transform: rotate(-90deg);
-      transform-origin: center;
-      display: inline-block;
-    }
-  }
-
-  &.passed .ff-status-bar {
-    background-color: var(--ff-card-passed-status-bg-color);
-  }
-  &.failed .ff-status-bar {
-    background-color: var(--ff-card-failed-status-bg-color);
-  }
-  &.warning .ff-status-bar {
-    background-color: var(--ff-card-warning-status-bg-color);
-  }
-  &.skipped .ff-status-bar {
-    background-color: var(--ff-card-skipped-status-bg-color);
-  }
-  &.flaky .ff-status-bar {
-    background-color: var(--ff-card-flaky-status-bg-color);
-  }
-
-  .ff-content {
-    flex: 1;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .ff-number {
-      margin-bottom: 4px;
-      color: inherit;
-    }
-  }
-
-  &.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);
-  }
-}
+.ff-card-container {
+  width: 120px;
+  height: 93px;
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  overflow: hidden;
+  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);
+    }
+  }
+
+  .ff-status-bar {
+    width: 24px;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    border-right: 1px solid var(--border-color);
+    gap: 30px;
+
+    .ff-status-text {
+      transform: rotate(-90deg);
+      transform-origin: center;
+      display: inline-block;
+    }
+  }
+
+  &.passed .ff-status-bar {
+    background-color: var(--ff-card-passed-status-bg-color);
+  }
+  &.failed .ff-status-bar {
+    background-color: var(--ff-card-failed-status-bg-color);
+  }
+  &.warning .ff-status-bar {
+    background-color: var(--ff-card-warning-status-bg-color);
+  }
+  &.skipped .ff-status-bar {
+    background-color: var(--ff-card-skipped-status-bg-color);
+  }
+  &.flaky .ff-status-bar {
+    background-color: var(--ff-card-flaky-status-bg-color);
+  }
+
+  .ff-content {
+    flex: 1;
+    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .ff-number {
+      margin-bottom: 4px;
+      color: inherit;
+    }
+  }
+
+  &.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);
+  }
+}

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

@@ -1,58 +1,58 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Card from './StatusCard';
-import { CardProps } from './types';
-
-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.',
-  },
-};
-
-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.',
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import Card from './StatusCard';
+import { CardProps } from './types';
+
+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.',
+  },
+};
+
+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.',
+  },
+};

package/src/components/StatusCard/StatusCard.tsx

@@ -1,49 +1,49 @@
-import React 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 }) => {
-  return (
-    <div className={`ff-card-container ${status.toLowerCase()}`}>
-      <div className="ff-status-bar">
-        <div>
-          <Icon name={icon} height={20} width={20} hoverEffect={false} />
-        </div>
-        <Typography
-          fontWeight="semi-bold"
-          fontSize="10px"
-          color="var(--ff-status-card-text-color)"
-          textAlign="center"
-          lineHeight="15px"
-          className="ff-status-text"
-          as="div"
-        >
-          {status}
-        </Typography>
-      </div>
-      <div className="ff-content">
-        <Typography
-          fontWeight="semi-bold"
-          fontSize="24px"
-          className="ff-number"
-          lineHeight="36px"
-        >
-          {count}
-        </Typography>
-        <Typography
-          fontWeight="regular"
-          fontSize="10px"
-          className="ff-text"
-          lineHeight="15px"
-          color="var(--ff-card-status-text-color)"
-        >
-          {text}
-        </Typography>
-      </div>
-    </div>
-  );
-};
-
-export default StatusCard;
+import React 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 }) => {
+  return (
+    <div className={`ff-card-container ${status.toLowerCase()}`}>
+      <div className="ff-status-bar">
+        <div>
+          <Icon name={icon} height={20} width={20} hoverEffect={false} />
+        </div>
+        <Typography
+          fontWeight="semi-bold"
+          fontSize="10px"
+          color="var(--ff-status-card-text-color)"
+          textAlign="center"
+          lineHeight="15px"
+          className="ff-status-text"
+          as="div"
+        >
+          {status}
+        </Typography>
+      </div>
+      <div className="ff-content">
+        <Typography
+          fontWeight="semi-bold"
+          fontSize="24px"
+          className="ff-number"
+          lineHeight="36px"
+        >
+          {count}
+        </Typography>
+        <Typography
+          fontWeight="regular"
+          fontSize="10px"
+          className="ff-text"
+          lineHeight="15px"
+          color="var(--ff-card-status-text-color)"
+        >
+          {text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+export default StatusCard;

package/src/components/StatusCard/index.ts

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

package/src/components/StatusCard/types.ts

@@ -1,11 +1,11 @@
-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;
-  }
+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;
+  }
   

package/src/components/Table/Table.scss

@@ -1,116 +1,117 @@
-
-
-.ff-fixed-header-table {
-  overflow-y: auto;
-}
-.ff-table-icon {
-  position: absolute;
-  top: 10px;
-  right: 0;
-  margin-right: 10px;
-  z-index: 100;
-  cursor: pointer;
-}
-.ff-table {
-  width: 100%;
-  th,
-  td {
-    text-align: left;
-    font-size: 12px;
-    padding: 9px 8px;
-  }
-  thead {
-    tr {
-      th {
-        border-bottom: 1px solid var(--slider-table-color);
-      }
-      th{
-        .ff-label-checkbox-container{
-          display: flex;
-          align-items: center;
-          .ff-table-checkbox {
-            padding-right: 8px;
-          }
-        }
-      }
-    }
-  }
-  tbody {
-    tr {
-      .action-column {
-        opacity: 0;
-      }
-      .icon-container {
-        padding-left: 10px;
-        opacity: 0;
-        display: flex;
-        justify-content: flex-end;
-        transition: opacity 0.3s ease, transform 0.3s ease;
-        transform: translateX(20px);
-      }
-      &:hover {
-        background-color: var(--hover-color);
-
-        .icon-container {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-      td {
-        position: relative;
-        color: var(--table-column-text-color);
-
-        &.clickable-cell {
-          cursor: pointer;
-        }
-      }
-      td{
-        .ff-data-checkbox-container {
-          display: flex;
-          align-items: center;
-          .ff-table-checkbox {
-            padding-right: 8px;
-          }
-        }
-      }
-    }
-  }
-  .primary-bg {
-    background-color: var(--brand-color);
-  }
-  .secondary-bg {
-    background-color: var(--slider-table-color);
-  }
-  .default-bg {
-    background-color: transparent;
-  }
-  .default-color {
-    color: var(--table-header-text-color);
-  }
-  .primary-color {
-    color: var(--brand-color);
-  }
-}
-.border-borderRadius {
-  border: 1px solid var(--slider-table-color);
-  border-radius: 5px;
-  border-collapse: none !important;
-}
-
-.ff-fixed-header {
-  position: sticky !important;
-  top: 0;
-  z-index: 99;
-  background-color: Var(--file-details-bg);
-}
-.no-data-content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-tbody tr.disabled-row {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+.ff-fixed-header-table {
+  overflow-y: auto;
+}
+.ff-table-icon {
+  position: absolute;
+  top: 10px;
+  right: 0;
+  margin-right: 10px;
+  z-index: 100;
+  cursor: pointer;
+}
+.ff-table {
+  width: 100%;
+  th,
+  td {
+    text-align: left;
+    font-size: 12px;
+    padding: 9px 8px;
+  }
+  thead {
+    tr {
+      th {
+        border-bottom: 1px solid var(--slider-table-color);
+      }
+      th {
+        .ff-label-checkbox-container {
+          display: flex;
+          align-items: center;
+          .ff-table-checkbox {
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+  tbody {
+    tr {
+      .action-column {
+        opacity: 0;
+      }
+      .icon-container {
+        padding-left: 10px;
+        opacity: 0;
+        display: flex;
+        justify-content: flex-end;
+        transition: opacity 0.3s ease, transform 0.3s ease;
+        transform: translateX(20px);
+      }
+      &:hover {
+        background-color: var(--hover-color);
+
+        .icon-container {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+      td {
+        position: relative;
+        color: var(--table-column-text-color);
+
+        &.clickable-cell {
+          cursor: pointer;
+        }
+      }
+      td {
+        .ff-data-checkbox-container {
+          display: flex;
+          align-items: center;
+          .ff-table-checkbox {
+            padding-right: 8px;
+          }
+        }
+      }
+    }
+  }
+  .primary-bg {
+    background-color: var(--brand-color);
+  }
+  .secondary-bg {
+    background-color: var(--slider-table-color);
+  }
+  .tertiary-bg {
+    background-color: var(--custom-table-header-bg-color);
+  }
+  .default-bg {
+    background-color: transparent;
+  }
+  .default-color {
+    color: var(--table-header-text-color);
+  }
+  .primary-color {
+    color: var(--brand-color);
+  }
+}
+.border-borderRadius {
+  border: 1px solid var(--slider-table-color);
+  border-radius: 5px;
+  border-collapse: none !important;
+}
+
+.ff-fixed-header {
+  position: sticky !important;
+  top: 0;
+  z-index: 99;
+  background-color: Var(--file-details-bg);
+}
+.no-data-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+tbody tr.disabled-row {
+  opacity: 0.5;
+  cursor: not-allowed;
+}