pixel-react 1.6.6 → 1.6.7

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

package/src/components/RadioGroup/radioGroupTypes.tsx

@@ -1,96 +1,96 @@
-/**
- * Represents a single option in the radio group.
- */
-interface Option {
-  /**
-   * The unique value of the option.
-   */
-  value: string;
-
-  /**
-   * The display label for the option.
-   */
-  label: string;
-
-  /**
-   * Indicates whether the option 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;
-}
-
-/**
- * Props for the RadioGroup component.
- */
-interface RadioGroupProps {
-  /**
-   * An array of options to be rendered in the radio group.
-   */
-  options: Option[];
-
-  /**
-   * The name attribute for the radio inputs, used for grouping.
-   */
-  name: string;
-
-  /**
-   * The currently selected value.
-   * Optional.
-   */
-  selectedValue?: string;
-
-  /**
-   * Callback function that is called when the selected option changes.
-   * It receives the selected option as an argument.
-   * Optional.
-   */
-  onChange?: (option: Option) => void;
-
-   /**
-   * Provides a label at starting position when the string is passed.
-   * Optional.
-   */
-  label?: string,
-
-  /**
-   * if isLabel is true then we can display label if not then extra space is not added.
-   * Optional.
-   */
-  isLabel?: boolean,
-
-  /**
-   * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
-   * Optional. 
-   */
-  isAsteriskRequired?:boolean,
-
-  /**
-   * Additional class names to apply to the radio group for custom styling.
-   * Optional.
-   */
-  className?: string;
-
-  /**
-   * Additional class names to apply to the radio group Label for custom styling.
-   * Optional.
-   */
-  classNameForLabel?:string;
-}
+/**
+ * Represents a single option in the radio group.
+ */
+interface Option {
+  /**
+   * The unique value of the option.
+   */
+  value: string;
+
+  /**
+   * The display label for the option.
+   */
+  label: string;
+
+  /**
+   * Indicates whether the option 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;
+}
+
+/**
+ * Props for the RadioGroup component.
+ */
+interface RadioGroupProps {
+  /**
+   * An array of options to be rendered in the radio group.
+   */
+  options: Option[];
+
+  /**
+   * The name attribute for the radio inputs, used for grouping.
+   */
+  name: string;
+
+  /**
+   * The currently selected value.
+   * Optional.
+   */
+  selectedValue?: string;
+
+  /**
+   * Callback function that is called when the selected option changes.
+   * It receives the selected option as an argument.
+   * Optional.
+   */
+  onChange?: (option: Option) => void;
+
+   /**
+   * Provides a label at starting position when the string is passed.
+   * Optional.
+   */
+  label?: string,
+
+  /**
+   * if isLabel is true then we can display label if not then extra space is not added.
+   * Optional.
+   */
+  isLabel?: boolean,
+
+  /**
+   * if isAsteriskRequired is true then we can display asterisk if not then extra space is not added.
+   * Optional. 
+   */
+  isAsteriskRequired?:boolean,
+
+  /**
+   * Additional class names to apply to the radio group for custom styling.
+   * Optional.
+   */
+  className?: string;
+
+  /**
+   * Additional class names to apply to the radio group Label for custom styling.
+   * Optional.
+   */
+  classNameForLabel?:string;
+}

package/src/components/Search/Search.scss

@@ -1,104 +1,104 @@
-@use '../../assets/styles/fonts';
-
-.ff-search-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .ff-search-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover {
-      background-color: var(--ff-search-field-hover-color);
-    }
-
-    .ff-icon-container {
-      svg {
-        path {
-          fill: var(--brand-color);
-        }
-      }
-    }
-  }
-
-  .ff-search-input {
-    @extend .fontXs;
-    border: none;
-    color: var(--tooltip-bg-color);
-    line-height: 12px;
-    visibility: hidden;
-    transition: width 0.4s ease;
-
-    &:focus {
-      outline: none;
-      border: none;
-    }
-
-    &:hover {
-      border: none;
-    }
-  }
-
-  &.disabled {
-    opacity: 0.5;
-  }
-
-  &.expanded {
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    background-color: var(--ff-search-filed-bg-color);
-
-    .ff-search-icon {
-      &:hover {
-        background-color: var(--ff-search-filed-bg-color);
-      }
-    }
-
-    .ff-vertical-line {
-      height: 8px;
-      width: 1px;
-      border-radius: 1px;
-      background-color: var(--border-color);
-    }
-
-    .ff-search-input {
-      visibility: visible;
-      margin-left: 4px;
-
-      &::placeholder {
-        color: var(--ff-search-filed-placeholder-text);
-      }
-    }
-
-    .ff-search-icon {
-      border: none;
-      cursor: default;
-      margin-right: 4px;
-    }
-
-    .ff-search-clear-button {
-      display: grid;
-      place-items: center;
-      cursor: pointer;
-      width: 22px;
-      padding-top: 1px;
-    }
-
-    .ff-search-close-icon {
-      margin: 4px;
-      cursor: pointer;
-
-      .ff-icon-container {
-        svg {
-          path {
-            fill: var(--ff-search-filed-close-Icon);
-          }
-        }
-      }
-    }
-  }
+@use '../../assets/styles/fonts';
+
+.ff-search-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .ff-search-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    border-radius: 4px;
+
+    &:hover {
+      background-color: var(--ff-search-field-hover-color);
+    }
+
+    .ff-icon-container {
+      svg {
+        path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
+
+  .ff-search-input {
+    @extend .fontXs;
+    border: none;
+    color: var(--tooltip-bg-color);
+    line-height: 12px;
+    visibility: hidden;
+    transition: width 0.4s ease;
+
+    &:focus {
+      outline: none;
+      border: none;
+    }
+
+    &:hover {
+      border: none;
+    }
+  }
+
+  &.disabled {
+    opacity: 0.5;
+  }
+
+  &.expanded {
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    background-color: var(--ff-search-filed-bg-color);
+
+    .ff-search-icon {
+      &:hover {
+        background-color: var(--ff-search-filed-bg-color);
+      }
+    }
+
+    .ff-vertical-line {
+      height: 8px;
+      width: 1px;
+      border-radius: 1px;
+      background-color: var(--border-color);
+    }
+
+    .ff-search-input {
+      visibility: visible;
+      margin-left: 4px;
+
+      &::placeholder {
+        color: var(--ff-search-filed-placeholder-text);
+      }
+    }
+
+    .ff-search-icon {
+      border: none;
+      cursor: default;
+      margin-right: 4px;
+    }
+
+    .ff-search-clear-button {
+      display: grid;
+      place-items: center;
+      cursor: pointer;
+      width: 22px;
+      padding-top: 1px;
+    }
+
+    .ff-search-close-icon {
+      margin: 4px;
+      cursor: pointer;
+
+      .ff-icon-container {
+        svg {
+          path {
+            fill: var(--ff-search-filed-close-Icon);
+          }
+        }
+      }
+    }
+  }
 }

package/src/components/Search/Search.stories.tsx

@@ -1,26 +1,26 @@
-
-import type { Meta, StoryObj } from '@storybook/react';
-import Search from './Search';
-const meta: Meta<typeof Search> = {
-  title: 'Components/Search',
-  component: Search,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Search>;
-const defaultArgs = {
-  placeholder: 'Search',
-  onSearch: (query: string) => alert(`Searching for: ${query}`),
-  disabled: false,
-  width: 200,
-};
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export default meta;
+
+import type { Meta, StoryObj } from '@storybook/react';
+import Search from './Search';
+const meta: Meta<typeof Search> = {
+  title: 'Components/Search',
+  component: Search,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Search>;
+const defaultArgs = {
+  placeholder: 'Search',
+  onSearch: (query: string) => alert(`Searching for: ${query}`),
+  disabled: false,
+  width: 200,
+};
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export default meta;