pixel-react 1.8.1 → 1.8.3

package/src/components/ProgressBar/ProgressBar.tsx

@@ -1,61 +1,61 @@
-import React from 'react';
-import type { ProgressBarProps } from './types';
-import './ProgressBar.scss';
-import Typography from '../Typography';
-
-const ProgressBar: React.FC<ProgressBarProps> = ({
-  progressPercentage,
-  color = 'var(--brand-color)',
-  trackColor = '#f0f0f0',
-  height = 10,
-  label,
-  labelFontSize = 12,
-  labelTextColor = 'var(--ff-card-status-text-color)',
-  showPercentage = false,
-  percentageFontSize = 10,
-  percentageTextColor = 'var(--tooltip-text-color)',
-}) => {
-  // Ensure progress is between 0 and 100
-  const validProgress = Math.max(0, Math.min(progressPercentage, 100));
-
-  // Bar style for the filled part
-  const barStyle = {
-    width: `${validProgress}%`,
-    backgroundColor: color,
-    height: `${height}px`,
-  };
-
-  // Track style for the empty part of the progress bar
-  const trackStyle = {
-    backgroundColor: trackColor,
-    height: `${height}px`,
-  };
-
-  return (
-    <div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
-      <div className="ff-progress-bar-track" style={trackStyle}>
-        <div className="ff-progress-bar" style={barStyle}>
-          {showPercentage && (
-            <Typography
-              className="ff-progress-bar-percentage"
-              fontSize={percentageFontSize}
-              color={percentageTextColor}
-            >{`${validProgress}%`}</Typography>
-          )}
-        </div>
-      </div>
-      {label && (
-        <Typography
-          as="div"
-          className="ff-progress-bar-label"
-          fontSize={labelFontSize}
-          color={labelTextColor}
-        >
-          {label}
-        </Typography>
-      )}
-    </div>
-  );
-};
-
-export default ProgressBar;
+import React from 'react';
+import type { ProgressBarProps } from './types';
+import './ProgressBar.scss';
+import Typography from '../Typography';
+
+const ProgressBar: React.FC<ProgressBarProps> = ({
+  progressPercentage,
+  color = 'var(--brand-color)',
+  trackColor = '#f0f0f0',
+  height = 10,
+  label,
+  labelFontSize = 12,
+  labelTextColor = 'var(--ff-card-status-text-color)',
+  showPercentage = false,
+  percentageFontSize = 10,
+  percentageTextColor = 'var(--tooltip-text-color)',
+}) => {
+  // Ensure progress is between 0 and 100
+  const validProgress = Math.max(0, Math.min(progressPercentage, 100));
+
+  // Bar style for the filled part
+  const barStyle = {
+    width: `${validProgress}%`,
+    backgroundColor: color,
+    height: `${height}px`,
+  };
+
+  // Track style for the empty part of the progress bar
+  const trackStyle = {
+    backgroundColor: trackColor,
+    height: `${height}px`,
+  };
+
+  return (
+    <div className={`ff-progress-bar-container ${label ? 'ff-has-label' : ''}`}>
+      <div className="ff-progress-bar-track" style={trackStyle}>
+        <div className="ff-progress-bar" style={barStyle}>
+          {showPercentage && (
+            <Typography
+              className="ff-progress-bar-percentage"
+              fontSize={percentageFontSize}
+              color={percentageTextColor}
+            >{`${validProgress}%`}</Typography>
+          )}
+        </div>
+      </div>
+      {label && (
+        <Typography
+          as="div"
+          className="ff-progress-bar-label"
+          fontSize={labelFontSize}
+          color={labelTextColor}
+        >
+          {label}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/ProgressBar/types.ts

@@ -1,12 +1,12 @@
-export interface ProgressBarProps {
-  progressPercentage: number; // The current progress value (0-100)
-  color?: string; // Custom color of the progress bar
-  trackColor?: string; // Custom color of the track (empty part)
-  height?: number;
-  label?: string; // Optional label to display inside or outside the progress bar
-  showPercentage?: boolean; // Whether to show the percentage inside the bar
-  percentageFontSize?: number;
-  percentageTextColor?: string;
-  labelFontSize?: number; // Font size of the label
-  labelTextColor?: string;
-}
+export interface ProgressBarProps {
+  progressPercentage: number; // The current progress value (0-100)
+  color?: string; // Custom color of the progress bar
+  trackColor?: string; // Custom color of the track (empty part)
+  height?: number;
+  label?: string; // Optional label to display inside or outside the progress bar
+  showPercentage?: boolean; // Whether to show the percentage inside the bar
+  percentageFontSize?: number;
+  percentageTextColor?: string;
+  labelFontSize?: number; // Font size of the label
+  labelTextColor?: string;
+}

package/src/components/RadioButton/RadioButton.scss

@@ -1,106 +1,106 @@
-@use '../../assets/styles/_fonts';
-
-@mixin circle($size, $border: none) {
-  width: $size;
-  height: $size;
-  border-radius: 50%;
-  @if $border != none {
-    border: $border;
-  }
-}
-@mixin transition($properties, $duration: 0.3s) {
-  transition: $properties $duration;
-}
-
-.ff-radio-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  .ff-radio {
-    @extend .fontSm;
-    position: relative;
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    .ff-radio-input {
-      display: none;
-    }
-    .ff-radio-custom {
-      box-sizing: content-box;
-      @include circle(14px, 1px solid var(--radio-button-border)); //todo
-      position: relative;
-      margin-right: 8px;
-      @include transition(border-color, background-color);
-
-      &::before {
-        content: '';
-        @include circle(12px);
-        background: #fbfdff; //todo
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        @include transition(background-color);
-      }
-
-      &::after {
-        content: '';
-        @include circle(16px, 4px solid #f7edff); //todo
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    &:hover .ff-radio-custom {
-      border: 1px solid var(--brand-color);
-      &::before {
-        background-color: var(--drawer-footer-bg);
-      }
-      &::after {
-        opacity: 1;
-        @include transition(opacity);
-      }
-    }
-    .ff-radio-input:checked + .ff-radio-custom {
-      border-color: var(--brand-color);
-
-      &::before {
-        background: var(--brand-color);
-        height: 12px;
-        width: 12px;
-      }
-    }
-    .ff-radio-input:disabled + .ff-radio-custom {
-      border: 1px solid var(--radio-button-border);
-      &::before {
-        background: var(--drawer-footer-bg);
-      }
-
-      &::after {
-        border: 4px solid var(--radio-button-hover);
-        opacity: 0;
-        @include transition(opacity);
-      }
-    }
-
-    .ff-radio-input:checked:disabled + .ff-radio-custom {
-      border-color: var(--brand-color);
-      background-color: var(--drawer-footer-bg);
-      &::before {
-        background: var(--brand-color);
-      }
-    }
-    &--disabled {
-      cursor: default;
-      .ff-radio-custom {
-        opacity: 0.5;
-      }
-    }
-  }
-}
+@use '../../assets/styles/_fonts';
+
+@mixin circle($size, $border: none) {
+  width: $size;
+  height: $size;
+  border-radius: 50%;
+  @if $border != none {
+    border: $border;
+  }
+}
+@mixin transition($properties, $duration: 0.3s) {
+  transition: $properties $duration;
+}
+
+.ff-radio-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  .ff-radio {
+    @extend .fontSm;
+    position: relative;
+    color: var(--text-color);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    .ff-radio-input {
+      display: none;
+    }
+    .ff-radio-custom {
+      box-sizing: content-box;
+      @include circle(14px, 1px solid var(--radio-button-border)); //todo
+      position: relative;
+      margin-right: 8px;
+      @include transition(border-color, background-color);
+
+      &::before {
+        content: '';
+        @include circle(12px);
+        background: #fbfdff; //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        @include transition(background-color);
+      }
+
+      &::after {
+        content: '';
+        @include circle(16px, 4px solid #f7edff); //todo
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        @include transition(opacity);
+      }
+    }
+
+    &:hover .ff-radio-custom {
+      border: 1px solid var(--brand-color);
+      &::before {
+        background-color: var(--drawer-footer-bg);
+      }
+      &::after {
+        opacity: 1;
+        @include transition(opacity);
+      }
+    }
+    .ff-radio-input:checked + .ff-radio-custom {
+      border-color: var(--brand-color);
+
+      &::before {
+        background: var(--brand-color);
+        height: 12px;
+        width: 12px;
+      }
+    }
+    .ff-radio-input:disabled + .ff-radio-custom {
+      border: 1px solid var(--radio-button-border);
+      &::before {
+        background: var(--drawer-footer-bg);
+      }
+
+      &::after {
+        border: 4px solid var(--radio-button-hover);
+        opacity: 0;
+        @include transition(opacity);
+      }
+    }
+
+    .ff-radio-input:checked:disabled + .ff-radio-custom {
+      border-color: var(--brand-color);
+      background-color: var(--drawer-footer-bg);
+      &::before {
+        background: var(--brand-color);
+      }
+    }
+    &--disabled {
+      cursor: default;
+      .ff-radio-custom {
+        opacity: 0.5;
+      }
+    }
+  }
+}

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import RadioButton from './RadioButton';
-
-const meta: Meta<typeof RadioButton> = {
-  title: 'Components/RadioButton',
-  component: RadioButton,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof RadioButton>;
-
-export const Default: Story = {
-  args: {
-    label: 'men',
-  },
-};
-
-export const Checked: Story = {
-  args: {
-    label: 'women',
-    checked: true,
-  },
-};
-export const UncheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-  },
-};
-export const CheckedDisabled: Story = {
-  args: {
-    label: 'women',
-    disabled: true,
-    checked: true,
-  },
-};
-
-export const WithoutLabel: Story = {};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioButton from './RadioButton';
+
+const meta: Meta<typeof RadioButton> = {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof RadioButton>;
+
+export const Default: Story = {
+  args: {
+    label: 'men',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'women',
+    checked: true,
+  },
+};
+export const UncheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+  },
+};
+export const CheckedDisabled: Story = {
+  args: {
+    label: 'women',
+    disabled: true,
+    checked: true,
+  },
+};
+
+export const WithoutLabel: Story = {};
+
+export default meta;

package/src/components/RadioButton/RadioButton.tsx

@@ -1,41 +1,41 @@
-import React from 'react';
-import './RadioButton.scss';
-import classNames from 'classnames';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-import RadioButtonProps from './radioButtonTypes';
-
-const RadioButton: React.FC<RadioButtonProps> = ({
-  label,
-  name,
-  checked,
-  onChange,
-  value,
-  disabled = false,
-  showTooltip = false,
-  tooltipChildren = 'Custom JSX',
-  tooltipTitle = 'Custom JSX',
-}) => {
-  return (
-    <div className="ff-radio-wrapper">
-      <label
-        className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
-      >
-        <input
-          disabled={disabled}
-          type="radio"
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={onChange}
-          className="ff-radio-input"
-        />
-        <span className="ff-radio-custom" />
-        <Typography color="var(--text-color)" children={label} />
-      </label>
-      {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
-    </div>
-  );
-};
-
-export default RadioButton;
+import React from 'react';
+import './RadioButton.scss';
+import classNames from 'classnames';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+import RadioButtonProps from './radioButtonTypes';
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+  label,
+  name,
+  checked,
+  onChange,
+  value,
+  disabled = false,
+  showTooltip = false,
+  tooltipChildren = 'Custom JSX',
+  tooltipTitle = 'Custom JSX',
+}) => {
+  return (
+    <div className="ff-radio-wrapper">
+      <label
+        className={classNames('ff-radio', { 'ff-radio--disabled': disabled })}
+      >
+        <input
+          disabled={disabled}
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={onChange}
+          className="ff-radio-input"
+        />
+        <span className="ff-radio-custom" />
+        <Typography color="var(--text-color)" children={label} />
+      </label>
+      {showTooltip && <Tooltip title={tooltipTitle}>{tooltipChildren}</Tooltip>}
+    </div>
+  );
+};
+
+export default RadioButton;

package/src/components/RadioButton/index.ts

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

package/src/components/RadioButton/radioButtonTypes.tsx

@@ -1,62 +1,62 @@
-import { ReactElement } from 'react';
-
-/**
- * Props for the RadioButton component.
- */
-interface RadioButtonProps {
-  /**
-   * The display label for the radio button.
-   * Optional.
-   */
-  label?: string | ReactElement;
-
-  /**
-   * The name attribute for the radio button, used for grouping.
-   */
-  name: string;
-
-  /**
-   * The unique value of the radio button.
-   * Optional.
-   */
-  value?: string;
-
-  /**
-   * Indicates whether the radio button is checked.
-   * Optional.
-   */
-  checked?: boolean;
-
-  /**
-   * Callback function that is called when the radio button's value changes.
-   * Receives the change event as an argument.
-   * Optional.
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-
-  /**
-   * Indicates whether the radio button is disabled.
-   * Optional.
-   */
-  disabled?: boolean;
-
-  /**
-   * Indicates whether the radio button show the tooltip.
-   * Optional.
-   */
-  showTooltip?: boolean;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipChildren?: React.ReactNode;
-
-  /**
-   * The content of the tooltip.
-   * Optional.
-   */
-  tooltipTitle?: React.ReactNode;
-}
-
-export default RadioButtonProps;
+import { ReactElement } from 'react';
+
+/**
+ * Props for the RadioButton component.
+ */
+interface RadioButtonProps {
+  /**
+   * The display label for the radio button.
+   * Optional.
+   */
+  label?: string | ReactElement;
+
+  /**
+   * The name attribute for the radio button, used for grouping.
+   */
+  name: string;
+
+  /**
+   * The unique value of the radio button.
+   * Optional.
+   */
+  value?: string;
+
+  /**
+   * Indicates whether the radio button is checked.
+   * Optional.
+   */
+  checked?: boolean;
+
+  /**
+   * Callback function that is called when the radio button's value changes.
+   * Receives the change event as an argument.
+   * Optional.
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+
+  /**
+   * Indicates whether the radio button is disabled.
+   * Optional.
+   */
+  disabled?: boolean;
+
+  /**
+   * Indicates whether the radio button show the tooltip.
+   * Optional.
+   */
+  showTooltip?: boolean;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipChildren?: React.ReactNode;
+
+  /**
+   * The content of the tooltip.
+   * Optional.
+   */
+  tooltipTitle?: React.ReactNode;
+}
+
+export default RadioButtonProps;