pixel-react 1.7.1 → 1.7.2

package/src/components/Button/Button.scss

@@ -1,155 +1,155 @@
-@use '../../assets/styles/colors' as *;
-@use '../../assets/styles/fonts';
-
-.ff-button {
-  width: auto;
-  background-color: var(--primary-button-text-color);
-  border-radius: 4px;
-  padding: 4px 8px;
-  text-align: center;
-  text-decoration: none;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  gap: 4px;
-  justify-content: center;
-  align-items: center;
-  @extend .fontXs;
-  border: 2px solid transparent;
-  &--transparent {
-    background-color: transparent;
-  }
-
-  &--primary,
-  &--delete,
-  &--secondary {
-    position: relative;
-    cursor: pointer;
-    border-radius: 4px;
-    z-index: 1;
-    border: none;
-    overflow: hidden;
-
-    &:before {
-      content: '';
-      position: absolute;
-      inset: 0;
-      border-radius: 4px;
-      padding: 0.6px;
-
-      background: var(--primary-button-border);
-      mask:
-        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
-        linear-gradient(var(--primary-button-text-color) 0 0);
-      mask-composite: exclude;
-      -webkit-mask:
-        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
-        linear-gradient(var(--primary-button-text-color) 0 0);
-      -webkit-mask-composite: destination-out;
-      z-index: -1;
-    }
-
-    &:hover {
-      background: var(--primary-button-hover);
-    }
-
-    &:disabled {
-      opacity: 50%;
-      cursor: no-drop;
-
-      &:before {
-        content: '';
-        position: absolute;
-        inset: 0;
-        border-radius: 4px;
-        padding: 0.6px;
-        -webkit-mask-composite: destination-out;
-        mask-composite: exclude;
-        z-index: -1;
-      }
-    }
-  }
-
-  &--primary {
-    background: var(--primary-button-color);
-
-    &:before {
-      background: var(--primary-button-border);
-    }
-
-    &:hover {
-      background: var(--primary-button-hover);
-    }
-  }
-
-  &--delete {
-    background: var(--delete-button-color);
-    color: var(--primary-button-text-color);
-
-    &:before {
-      background: var(--delete-button-border);
-    }
-
-    &:hover {
-      background: var(--delete-button-hover);
-    }
-  }
-  &--warning {
-    background: var(--warning-button-color);
-    border: var(--warning-button-border);
-  }
-
-  &--secondary {
-    &:before {
-      background: var(--primary-button-border);
-    }
-
-    &:hover {
-      background: var(--secondary-button-hover);
-    }
-  }
-
-  &--tertiary {
-    border: none;
-    background: var(--tertiary-button-color);
-
-    &:hover {
-      background: var(--tertiary-button-hover);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: no-drop;
-    }
-  }
-
-  &--small {
-    @extend .fontXs;
-    font-weight: 500;
-    padding: 4.5px 8px;
-    line-height: 15px;
-  }
-
-  &--medium {
-    @extend .fontXs;
-    font-weight: 500;
-    padding: 6px 12px;
-  }
-
-  &--large {
-    @extend .fontMd;
-    padding: 8px 16px;
-  }
-
-  &-primary--text {
-    color: var(--primary-button-text-color);
-  }
-
-  &-secondary--text,
-  &-tertiary--text {
-    background: var(--secondary-button-color-text);
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-  }
-}
+@use '../../assets/styles/colors' as *;
+@use '../../assets/styles/fonts';
+
+.ff-button {
+  width: auto;
+  background-color: var(--primary-button-text-color);
+  border-radius: 4px;
+  padding: 4px 8px;
+  text-align: center;
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  gap: 4px;
+  justify-content: center;
+  align-items: center;
+  @extend .fontXs;
+  border: 2px solid transparent;
+  &--transparent {
+    background-color: transparent;
+  }
+
+  &--primary,
+  &--delete,
+  &--secondary {
+    position: relative;
+    cursor: pointer;
+    border-radius: 4px;
+    z-index: 1;
+    border: none;
+    overflow: hidden;
+
+    &:before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 4px;
+      padding: 0.6px;
+
+      background: var(--primary-button-border);
+      mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
+      mask-composite: exclude;
+      -webkit-mask:
+        linear-gradient(var(--primary-button-text-color) 0 0) content-box,
+        linear-gradient(var(--primary-button-text-color) 0 0);
+      -webkit-mask-composite: destination-out;
+      z-index: -1;
+    }
+
+    &:hover {
+      background: var(--primary-button-hover);
+    }
+
+    &:disabled {
+      opacity: 50%;
+      cursor: no-drop;
+
+      &:before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        padding: 0.6px;
+        -webkit-mask-composite: destination-out;
+        mask-composite: exclude;
+        z-index: -1;
+      }
+    }
+  }
+
+  &--primary {
+    background: var(--primary-button-color);
+
+    &:before {
+      background: var(--primary-button-border);
+    }
+
+    &:hover {
+      background: var(--primary-button-hover);
+    }
+  }
+
+  &--delete {
+    background: var(--delete-button-color);
+    color: var(--primary-button-text-color);
+
+    &:before {
+      background: var(--delete-button-border);
+    }
+
+    &:hover {
+      background: var(--delete-button-hover);
+    }
+  }
+  &--warning {
+    background: var(--warning-button-color);
+    border: var(--warning-button-border);
+  }
+
+  &--secondary {
+    &:before {
+      background: var(--primary-button-border);
+    }
+
+    &:hover {
+      background: var(--secondary-button-hover);
+    }
+  }
+
+  &--tertiary {
+    border: none;
+    background: var(--tertiary-button-color);
+
+    &:hover {
+      background: var(--tertiary-button-hover);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: no-drop;
+    }
+  }
+
+  &--small {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 4.5px 8px;
+    line-height: 15px;
+  }
+
+  &--medium {
+    @extend .fontXs;
+    font-weight: 500;
+    padding: 6px 12px;
+  }
+
+  &--large {
+    @extend .fontMd;
+    padding: 8px 16px;
+  }
+
+  &-primary--text {
+    color: var(--primary-button-text-color);
+  }
+
+  &-secondary--text,
+  &-tertiary--text {
+    background: var(--secondary-button-color-text);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}

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';