pixel-react 1.5.2 → 1.5.4

package/src/components/Button/Button.stories.tsx

@@ -1,81 +1,81 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Button from './Button';
-
-const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Button>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Primary Button',
-    variant: 'primary',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Secondary Button',
-    variant: 'secondary',
-  },
-};
-export const Tertiary: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Tertiary Button',
-    variant: 'tertiary',
-  },
-};
-export const Delete: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Delete',
-    variant: 'delete',
-  },
-};
-export const Warning: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Warning',
-    variant: 'warning',
-  },
-};
-export const PrimaryWithIcon: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Primary Button',
-    variant: 'primary',
-    iconName: 'manage_apps',
-  },
-};
-
-export const SecondaryWithIcon: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Secondary Button',
-    variant: 'secondary',
-    iconName: 'manage_apps',
-  },
-};
-export const TertiaryWithIcon: Story = {
-  args: {
-    ...defaultArgs,
-    label: 'Tertiary Button',
-    variant: 'tertiary',
-    iconName: 'manage_apps',
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Button from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Button>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+export const Tertiary: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+  },
+};
+export const Delete: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Delete',
+    variant: 'delete',
+  },
+};
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    variant: 'warning',
+  },
+};
+export const PrimaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Primary Button',
+    variant: 'primary',
+    iconName: 'manage_apps',
+  },
+};
+
+export const SecondaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Secondary Button',
+    variant: 'secondary',
+    iconName: 'manage_apps',
+  },
+};
+export const TertiaryWithIcon: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Tertiary Button',
+    variant: 'tertiary',
+    iconName: 'manage_apps',
+  },
+};
+
+export default meta;

package/src/components/Button/Button.tsx

@@ -1,73 +1,73 @@
-import { forwardRef } from 'react';
-import './Button.scss';
-import '../../assets/styles/_colors.scss';
-import Icon from '../Icon';
-import { ButtonProps } from './types';
-import classNames from 'classnames';
-import Typography from '../Typography';
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      variant = 'primary',
-      backgroundColor,
-      size = 'small',
-      onClick,
-      label,
-      disabled = false,
-      children = null,
-      type = 'button',
-      className = '',
-      style = {},
-      iconName,
-      iconPosition = 'left',
-      ...props
-    }: ButtonProps,
-    ref
-  ) => {
-    const renderIcon = () =>
-      iconName && (
-        <div>
-          <Icon
-            height={8}
-            width={8}
-            color={
-              variant === 'primary'
-                ? `var(--primary-icon-color)`
-                : `var(--secondary-icon-color)`
-            }
-            name={iconName}
-          />
-        </div>
-      );
-    return (
-      <button
-        type={type}
-        ref={ref}
-        className={classNames(
-          'ff-button',
-          `ff-button--${size}`,
-          `ff-button--${variant}`,
-          `${className}`,
-          'button'
-        )}
-        style={{ backgroundColor, ...style }}
-        onClick={onClick}
-        disabled={disabled}
-        {...props}
-      >
-        {iconPosition === 'left' && renderIcon()}
-        <Typography
-          fontSize={10}
-          fontWeight="semi-bold"
-          className={classNames(`ff-button-${variant}--text`)}
-        >
-          {label}
-        </Typography>
-        {iconPosition === 'right' && renderIcon()}
-        {children}
-      </button>
-    );
-  }
-);
-export default Button;
+import { forwardRef } from 'react';
+import './Button.scss';
+import '../../assets/styles/_colors.scss';
+import Icon from '../Icon';
+import { ButtonProps } from './types';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      variant = 'primary',
+      backgroundColor,
+      size = 'small',
+      onClick,
+      label,
+      disabled = false,
+      children = null,
+      type = 'button',
+      className = '',
+      style = {},
+      iconName,
+      iconPosition = 'left',
+      ...props
+    }: ButtonProps,
+    ref
+  ) => {
+    const renderIcon = () =>
+      iconName && (
+        <div>
+          <Icon
+            height={8}
+            width={8}
+            color={
+              variant === 'primary'
+                ? `var(--primary-icon-color)`
+                : `var(--secondary-icon-color)`
+            }
+            name={iconName}
+          />
+        </div>
+      );
+    return (
+      <button
+        type={type}
+        ref={ref}
+        className={classNames(
+          'ff-button',
+          `ff-button--${size}`,
+          `ff-button--${variant}`,
+          `${className}`,
+          'button'
+        )}
+        style={{ backgroundColor, ...style }}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
+      >
+        {iconPosition === 'left' && renderIcon()}
+        <Typography
+          fontSize={10}
+          fontWeight="semi-bold"
+          className={classNames(`ff-button-${variant}--text`)}
+        >
+          {label}
+        </Typography>
+        {iconPosition === 'right' && renderIcon()}
+        {children}
+      </button>
+    );
+  }
+);
+export default Button;

package/src/components/Button/index.ts

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

package/src/components/Button/types.ts

@@ -1,69 +1,69 @@
-import { ReactNode } from 'react';
-
-export interface ButtonProps {
-  /**
-   * Variant of the button
-   */
-  variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label?: string;
-  /**
-   * Type of the button
-   */
-
-  type?: 'button' | 'submit';
-
-  disabled?: boolean;
-  /**
-   * Optional click handler
-   */
-  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /**
-   * Button content
-   */
-  children?: ReactNode;
-  /**
-   * Button id
-   */
-  id?: string;
-  /**
-   * onSubmit function handler
-   */
-  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
-  /**
-   * react ref for the button
-   */
-  ref?: any;
-  /**
-   * Classname for the button
-   */
-  className?: string;
-  /**
-   * Additional styles for the button
-   */
-  style?: React.CSSProperties;
-
-  /**
-   * Give icon name availble in storybook that to be on left side of button
-   */
-  iconName?: string;
-  /**
-   * Give icon name availble in storybook that to be on left side of button
-   */
-  iconPosition?: 'left' | 'right';
-  transparentBackground?: boolean;
-  /**
-   * form to accept form id in string
-   */
-  form?: string;
-}
+import { ReactNode } from 'react';
+
+export interface ButtonProps {
+  /**
+   * Variant of the button
+   */
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete' | 'warning';
+  /**
+   * What background color to use
+   */
+  backgroundColor?: string;
+  /**
+   * How large should the button be?
+   */
+  size?: 'small' | 'medium' | 'large';
+  /**
+   * Button contents
+   */
+  label?: string;
+  /**
+   * Type of the button
+   */
+
+  type?: 'button' | 'submit';
+
+  disabled?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * Button content
+   */
+  children?: ReactNode;
+  /**
+   * Button id
+   */
+  id?: string;
+  /**
+   * onSubmit function handler
+   */
+  onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  /**
+   * react ref for the button
+   */
+  ref?: any;
+  /**
+   * Classname for the button
+   */
+  className?: string;
+  /**
+   * Additional styles for the button
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconName?: string;
+  /**
+   * Give icon name availble in storybook that to be on left side of button
+   */
+  iconPosition?: 'left' | 'right';
+  transparentBackground?: boolean;
+  /**
+   * form to accept form id in string
+   */
+  form?: string;
+}

package/src/components/Charts/BarChart/BarChart.scss

@@ -1,66 +1,66 @@
-@use '../../../assets/styles/fonts';
-.ff-bar-chart-container {
-  margin-top: 40px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-
-  .ff-bar-chart-border {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .ff-bar-chart-icon {
-    position: absolute;
-    pointer-events: none;
-    width: 24px;
-    height: 24px;
-  }
-
-  .ff-bar-chart-icon-wrapper {
-    position: absolute;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .ff-bar-chart-labels {
-    @extend .fontXs;
-    font-weight: 400;
-    color: var(--drawer-title-color);
-  }
-  .ff-bar-chart-tooltip {
-    position: absolute;
-    padding: 5px 10px;
-    background-color: var(--file-details-bg);
-    color: var(--status-skipped-text-color);
-    border-radius: 4px;
-    pointer-events: none;
-    @extend .fontXs;
-    font-weight: 600;
-  }
-  .ff-bar-chart-legend {
-    margin-top: 10px;
-    display: grid;
-    gap: 0.5rem;
-    grid-row-gap: 2;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: auto;
-    .ff-bar-chart-legend-item {
-      display: flex;
-      align-items: center;
-
-      .ff-bar-chart-legend-item-circle {
-        display: inline-block;
-        width: 12px;
-        height: 12px;
-        margin-right: 5px;
-        border-radius: 50%;
-      }
-    }
-    .ff-legend-label {
-      margin-left: 5px;
-    }
-  }
-}
+@use '../../../assets/styles/fonts';
+.ff-bar-chart-container {
+  margin-top: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  .ff-bar-chart-border {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .ff-bar-chart-icon {
+    position: absolute;
+    pointer-events: none;
+    width: 24px;
+    height: 24px;
+  }
+
+  .ff-bar-chart-icon-wrapper {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .ff-bar-chart-labels {
+    @extend .fontXs;
+    font-weight: 400;
+    color: var(--drawer-title-color);
+  }
+  .ff-bar-chart-tooltip {
+    position: absolute;
+    padding: 5px 10px;
+    background-color: var(--file-details-bg);
+    color: var(--status-skipped-text-color);
+    border-radius: 4px;
+    pointer-events: none;
+    @extend .fontXs;
+    font-weight: 600;
+  }
+  .ff-bar-chart-legend {
+    margin-top: 10px;
+    display: grid;
+    gap: 0.5rem;
+    grid-row-gap: 2;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: auto;
+    .ff-bar-chart-legend-item {
+      display: flex;
+      align-items: center;
+
+      .ff-bar-chart-legend-item-circle {
+        display: inline-block;
+        width: 12px;
+        height: 12px;
+        margin-right: 5px;
+        border-radius: 50%;
+      }
+    }
+    .ff-legend-label {
+      margin-left: 5px;
+    }
+  }
+}