pixel-react 1.6.5 → 1.6.6

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;

package/src/components/RadioGroup/RadioGroup.scss

@@ -1,12 +1,12 @@
-.ff-radio-group {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-}
-.ff-radio-label-wrapper {
-  position: relative;
-  top: 2px;
-}
-.ff-required-asterisk {
-  color: var(--input-error-text-color);
+.ff-radio-group {
+  display: flex;
+  flex-direction: row;
+  gap: 12px;
+}
+.ff-radio-label-wrapper {
+  position: relative;
+  top: 2px;
+}
+.ff-required-asterisk {
+  color: var(--input-error-text-color);
 }

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,150 +1,150 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import RadioGroup from './RadioGroup';
-import { useState } from 'react';
-import Icon from '../Icon';
-import React from 'react';
-import { Option } from '../MultiSelect/MultiSelectTypes';
-
-const meta: Meta<typeof RadioGroup> = {
-  title: 'Components/RadioGroup',
-  component: RadioGroup,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof RadioGroup>;
-
-export const Controlled: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men' },
-      { value: 'women', label: 'Women' }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('option2');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="option"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithDisabledOption: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men', disabled: true },
-      { value: 'women', label: 'Women' }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="option"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const DisabledSelected: Story = {
-  render: () => {
-    const radioOptions = [
-      { value: 'men', label: 'Men' },
-      { value: 'women', label: 'Women', disabled: true }, // Disabled option
-      { value: 'other', label: 'Other' },
-    ];
-    const [selectedOption, setSelectedOption] = useState('women');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="gender"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithToolTipIcon: Story = {
-  render: () => {
-    const radioOptions = [
-      {
-        value: 'men',
-        label: 'Men',
-        showTooltip: true,
-        tooltipChildren: <Icon name="info" />,
-        tooltipTitle: 'Info',
-      },
-      {
-        value: 'women',
-        label: 'Women',
-        showTooltip: true,
-        disabled: true,
-      },
-      {
-        value: 'other',
-        label: 'Other',
-        showTooltip: true,
-        tooltipChildren: <Icon name="info" />,
-        tooltipTitle: 'Info',
-      },
-    ];
-    const [selectedOption, setSelectedOption] = useState('women');
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="gender"
-        selectedValue={selectedOption}
-      />
-    );
-  },
-};
-
-export const WithLabelled: Story = {
-  render: () => {
-    const [selectedOption, setSelectedOption] = useState('restApi');
-    const radioOptions = [
-      { value: 'restApi', label: 'RestAPI' },
-      { value: 'snippets', label: 'Snippet' },
-      { value: 'history', label: 'History' },
-    ];
-    const handleOptionChange = (option: Option) => {
-      setSelectedOption(option.value);
-    };
-    return (
-      <RadioGroup
-        options={radioOptions}
-        onChange={handleOptionChange}
-        name="option"
-        selectedValue={selectedOption}
-        isAsteriskRequired
-        isLabel
-        label={'Web Services'}
-        classNameForLabel='ff-radio-label-wrapper'
-      />
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import RadioGroup from './RadioGroup';
+import { useState } from 'react';
+import Icon from '../Icon';
+import React from 'react';
+import { Option } from '../MultiSelect/MultiSelectTypes';
+
+const meta: Meta<typeof RadioGroup> = {
+  title: 'Components/RadioGroup',
+  component: RadioGroup,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const Controlled: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men' },
+      { value: 'women', label: 'Women' }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('option2');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithDisabledOption: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men', disabled: true },
+      { value: 'women', label: 'Women' }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const DisabledSelected: Story = {
+  render: () => {
+    const radioOptions = [
+      { value: 'men', label: 'Men' },
+      { value: 'women', label: 'Women', disabled: true }, // Disabled option
+      { value: 'other', label: 'Other' },
+    ];
+    const [selectedOption, setSelectedOption] = useState('women');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="gender"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithToolTipIcon: Story = {
+  render: () => {
+    const radioOptions = [
+      {
+        value: 'men',
+        label: 'Men',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+      {
+        value: 'women',
+        label: 'Women',
+        showTooltip: true,
+        disabled: true,
+      },
+      {
+        value: 'other',
+        label: 'Other',
+        showTooltip: true,
+        tooltipChildren: <Icon name="info" />,
+        tooltipTitle: 'Info',
+      },
+    ];
+    const [selectedOption, setSelectedOption] = useState('women');
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="gender"
+        selectedValue={selectedOption}
+      />
+    );
+  },
+};
+
+export const WithLabelled: Story = {
+  render: () => {
+    const [selectedOption, setSelectedOption] = useState('restApi');
+    const radioOptions = [
+      { value: 'restApi', label: 'RestAPI' },
+      { value: 'snippets', label: 'Snippet' },
+      { value: 'history', label: 'History' },
+    ];
+    const handleOptionChange = (option: Option) => {
+      setSelectedOption(option.value);
+    };
+    return (
+      <RadioGroup
+        options={radioOptions}
+        onChange={handleOptionChange}
+        name="option"
+        selectedValue={selectedOption}
+        isAsteriskRequired
+        isLabel
+        label={'Web Services'}
+        classNameForLabel='ff-radio-label-wrapper'
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/RadioGroup/RadioGroup.tsx

@@ -1,49 +1,49 @@
-import React from 'react';
-import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
-import './RadioGroup.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-
-const RadioGroup: React.FC<RadioGroupProps> = ({
-  options,
-  name,
-  selectedValue,
-  onChange,
-  label,
-  isLabel = false,
-  isAsteriskRequired = false,
-  className,
-  classNameForLabel,
-}) => {
-  return (
-    <div className={classNames('ff-radio-group', className)}>
-      {isLabel && (
-        <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
-          {' '}
-          {isAsteriskRequired && (
-            <Typography className={classNames('ff-required-asterisk')}>
-              *{' '}
-            </Typography>
-          )}
-          {label}{' '}
-        </Typography>
-      )}
-      {options.map((option) => (
-        <RadioButton
-          key={option.value}
-          label={option.label}
-          showTooltip={option?.showTooltip}
-          tooltipChildren={option?.tooltipChildren}
-          tooltipTitle={option?.tooltipTitle}
-          name={name}
-          value={option.value}
-          checked={selectedValue === option.value}
-          onChange={() => onChange?.(option)}
-          disabled={option.disabled}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default RadioGroup;
+import React from 'react';
+import RadioButton from '../RadioButton/RadioButton'; // Adjust the import path as necessary
+import './RadioGroup.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const RadioGroup: React.FC<RadioGroupProps> = ({
+  options,
+  name,
+  selectedValue,
+  onChange,
+  label,
+  isLabel = false,
+  isAsteriskRequired = false,
+  className,
+  classNameForLabel,
+}) => {
+  return (
+    <div className={classNames('ff-radio-group', className)}>
+      {isLabel && (
+        <Typography fontWeight='semi-bold' className={classNames(classNameForLabel)}>
+          {' '}
+          {isAsteriskRequired && (
+            <Typography className={classNames('ff-required-asterisk')}>
+              *{' '}
+            </Typography>
+          )}
+          {label}{' '}
+        </Typography>
+      )}
+      {options.map((option) => (
+        <RadioButton
+          key={option.value}
+          label={option.label}
+          showTooltip={option?.showTooltip}
+          tooltipChildren={option?.tooltipChildren}
+          tooltipTitle={option?.tooltipTitle}
+          name={name}
+          value={option.value}
+          checked={selectedValue === option.value}
+          onChange={() => onChange?.(option)}
+          disabled={option.disabled}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default RadioGroup;

package/src/components/RadioGroup/index.ts

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