pixel-react 1.5.4 → 1.5.5

package/src/components/StatusButton/StatusButton.stories.tsx

@@ -1,91 +1,91 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import StatusButton from './StatusButton';
-
-const meta: Meta<typeof StatusButton> = {
-  title: 'Components/StatusButton',
-  component: StatusButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof StatusButton>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Passed: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Passed',
-    status: 'passed',
-  },
-};
-
-export const Failed: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Failed',
-    status: 'failed',
-  },
-};
-
-export const Running: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Running',
-    status: 'running',
-  },
-};
-
-export const Terminated: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Terminated',
-    status: 'terminated',
-  },
-};
-
-export const Skipped: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Skipped',
-    status: 'skipped',
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Warning',
-    status: 'warning',
-  },
-};
-
-export const PartiallyExecuted: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Partially Executed',
-    status: 'partially-executed',
-  },
-};
-
-export const Aborted: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Aborted',
-    status: 'aborted',
-  },
-};
-
-export const NotExecuted: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Not Executed',
-    status: 'not-executed',
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import StatusButton from './StatusButton';
+
+const meta: Meta<typeof StatusButton> = {
+  title: 'Components/StatusButton',
+  component: StatusButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof StatusButton>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Passed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Passed',
+    status: 'passed',
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Failed',
+    status: 'failed',
+  },
+};
+
+export const Running: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Running',
+    status: 'running',
+  },
+};
+
+export const Terminated: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Terminated',
+    status: 'terminated',
+  },
+};
+
+export const Skipped: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Skipped',
+    status: 'skipped',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    status: 'warning',
+  },
+};
+
+export const PartiallyExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Partially Executed',
+    status: 'partially-executed',
+  },
+};
+
+export const Aborted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Aborted',
+    status: 'aborted',
+  },
+};
+
+export const NotExecuted: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Not Executed',
+    status: 'not-executed',
+  },
+};
+
+export default meta;

package/src/components/StatusButton/StatusButton.tsx

@@ -1,46 +1,46 @@
-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;
+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 +1 @@
-export { default } from './StatusButton';
+export { default } from './StatusButton';

package/src/components/StatusButton/types.ts

@@ -1,45 +1,45 @@
-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;
-}
+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.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.',
+  },
+};