pixel-react 1.6.7 → 1.6.9

package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx

@@ -1,67 +1,67 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ExpandableMenu from './ExpandableMenu';
-import { useState } from 'react';
-
-const meta: Meta<typeof ExpandableMenu> = {
-  title: 'Components/ExpandableMenu',
-  component: ExpandableMenu,
-  parameters: {
-    layout: 'left',
-  },
-  argTypes: {
-    disable: Boolean,
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof ExpandableMenu>;
-
-const defaultArgs = {
-  label: 'Execution Settings',
-  disable: false,
-};
-
-export const Primary: Story = {
-  args: {
-    ...defaultArgs,
-    subMenus: [
-      'Environment settings',
-      'Run settings',
-      'Report settings',
-      'Additional settings',
-      'Environment settings',
-      'Run settings',
-      'Report settings',
-      'Additional settings',
-      'Environment settings',
-      'Run settings',
-      'Report settings',
-      'Additional settings',
-    ],
-  },
-};
-
-export const Controlled: Story = {
-  render: () => {
-    const [selectedMenu, setSelectedMenu] = useState<string>('');
-    const onSubMenuClick = (chip: string) => {
-      setSelectedMenu(chip);
-    };
-
-    return (
-      <ExpandableMenu
-        {...defaultArgs}
-        subMenus={[
-          'Environment settings',
-          'Run settings',
-          'Report settings',
-          'Additional settings',
-        ]}
-        selectedMenu={selectedMenu}
-        onSubMenuClick={onSubMenuClick}
-      />
-    );
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpandableMenu from './ExpandableMenu';
+import { useState } from 'react';
+
+const meta: Meta<typeof ExpandableMenu> = {
+  title: 'Components/ExpandableMenu',
+  component: ExpandableMenu,
+  parameters: {
+    layout: 'left',
+  },
+  argTypes: {
+    disable: Boolean,
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof ExpandableMenu>;
+
+const defaultArgs = {
+  label: 'Execution Settings',
+  disable: false,
+};
+
+export const Primary: Story = {
+  args: {
+    ...defaultArgs,
+    subMenus: [
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+      'Environment settings',
+      'Run settings',
+      'Report settings',
+      'Additional settings',
+    ],
+  },
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [selectedMenu, setSelectedMenu] = useState<string>('');
+    const onSubMenuClick = (chip: string) => {
+      setSelectedMenu(chip);
+    };
+
+    return (
+      <ExpandableMenu
+        {...defaultArgs}
+        subMenus={[
+          'Environment settings',
+          'Run settings',
+          'Report settings',
+          'Additional settings',
+        ]}
+        selectedMenu={selectedMenu}
+        onSubMenuClick={onSubMenuClick}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/ExpandableMenu/ExpandableMenu.tsx

@@ -1,101 +1,101 @@
-import { useCallback, useState } from 'react';
-import './ExpandableMenu.scss';
-import classNames from 'classnames';
-import { ExpandableMenuProps } from './types';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import Icon from '../Icon';
-import './ExpandableMenu.scss';
-import Typography from '../Typography';
-
-const ExpandableMenu: React.FC<ExpandableMenuProps> = ({
-  label = '',
-  icon = (
-    <Icon
-      name="arrow_right"
-      height={5}
-      width={8}
-      color={'var(--icons-default-color)'}
-    />
-  ),
-  variant = 'primary',
-  size = 'medium',
-  disable = false,
-  subMenus = [],
-  selectedMenu = '',
-  onSubMenuClick = () => {},
-}) => {
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-
-  const toggleExpand = () => {
-    setIsExpanded((prev) => !prev);
-    setIsHovered(false);
-  };
-
-  const handleMouseEnter = useCallback(() => {
-    if (!isExpanded) setIsHovered(true);
-  }, [isExpanded]);
-
-  const handleMouseLeave = useCallback(() => {
-    if (!isExpanded) setIsHovered(false);
-  }, [isExpanded]);
-
-  const handleSelectedMenu = (chip: string) => {
-    if (!disable) {
-      onSubMenuClick(chip);
-      setIsExpanded(true);
-    }
-  };
-
-  const hasExpanded = isExpanded || isHovered;
-
-  return (
-    <div
-      className={classNames(
-        'ff-expandable-chip-menu',
-        `ff-expandable-chip-menu--${variant}`,
-        {
-          'ff-expandable-chip-menu--disabled': disable,
-          expanded: hasExpanded,
-        }
-      )}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      <div
-        className={`ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`}
-        onClick={toggleExpand}
-      >
-        <Typography>{label}</Typography>
-        <span className="arrow-icon">{icon}</span>
-      </div>
-
-      {hasExpanded && !checkEmpty(subMenus) && (
-        <div
-          className={classNames('ff-sub-chips', {
-            expanded: hasExpanded,
-          })}
-        >
-          {subMenus.map((chip, index) => (
-            <div
-              key={index}
-              className={classNames(
-                'ff-sub-chip',
-                `ff-sub-chip--${variant}`,
-                `ff-sub-chip--${size}`,
-                {
-                  selected: selectedMenu === chip,
-                }
-              )}
-              onClick={() => handleSelectedMenu(chip)}
-            >
-              {chip}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default ExpandableMenu;
+import { useCallback, useState } from 'react';
+import './ExpandableMenu.scss';
+import classNames from 'classnames';
+import { ExpandableMenuProps } from './types';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import Icon from '../Icon';
+import './ExpandableMenu.scss';
+import Typography from '../Typography';
+
+const ExpandableMenu: React.FC<ExpandableMenuProps> = ({
+  label = '',
+  icon = (
+    <Icon
+      name="arrow_right"
+      height={5}
+      width={8}
+      color={'var(--icons-default-color)'}
+    />
+  ),
+  variant = 'primary',
+  size = 'medium',
+  disable = false,
+  subMenus = [],
+  selectedMenu = '',
+  onSubMenuClick = () => {},
+}) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded((prev) => !prev);
+    setIsHovered(false);
+  };
+
+  const handleMouseEnter = useCallback(() => {
+    if (!isExpanded) setIsHovered(true);
+  }, [isExpanded]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (!isExpanded) setIsHovered(false);
+  }, [isExpanded]);
+
+  const handleSelectedMenu = (chip: string) => {
+    if (!disable) {
+      onSubMenuClick(chip);
+      setIsExpanded(true);
+    }
+  };
+
+  const hasExpanded = isExpanded || isHovered;
+
+  return (
+    <div
+      className={classNames(
+        'ff-expandable-chip-menu',
+        `ff-expandable-chip-menu--${variant}`,
+        {
+          'ff-expandable-chip-menu--disabled': disable,
+          expanded: hasExpanded,
+        }
+      )}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      <div
+        className={`ff-label-chip ff-label-chip--${variant} ff-expandable-chip-menu--${size}`}
+        onClick={toggleExpand}
+      >
+        <Typography>{label}</Typography>
+        <span className="arrow-icon">{icon}</span>
+      </div>
+
+      {hasExpanded && !checkEmpty(subMenus) && (
+        <div
+          className={classNames('ff-sub-chips', {
+            expanded: hasExpanded,
+          })}
+        >
+          {subMenus.map((chip, index) => (
+            <div
+              key={index}
+              className={classNames(
+                'ff-sub-chip',
+                `ff-sub-chip--${variant}`,
+                `ff-sub-chip--${size}`,
+                {
+                  selected: selectedMenu === chip,
+                }
+              )}
+              onClick={() => handleSelectedMenu(chip)}
+            >
+              {chip}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ExpandableMenu;

package/src/components/ExpandableMenu/index.ts

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

package/src/components/ExpandableMenu/types.ts

@@ -1,34 +1,34 @@
-export interface ExpandableMenuProps {
-  /**
-   * mandatory | label for the expandable menu
-   */
-  label: string;
-  /**
-   * optional | Icon to describe direction of expansion
-   */
-  icon?: React.ReactNode;
-  /**
-   * optional | variant of the menu
-   */
-  variant?: 'primary';
-  /**
-   * optional | size of the expandable menu
-   */
-  size?: 'medium';
-  /**
-   * optional | disable to disable the menu and prevent click events but not hover event
-   */
-  disable?: boolean;
-  /**
-   * Mandatory |  sub menus to be shown inside  expandable menu
-   */
-  subMenus: string[];
-  /**
-   * optional | selected sub menu of the expandable menu
-   */
-  selectedMenu?: string;
-  /**
-   * optional | onSubMenuClick event to perform action on click of sub menu
-   */
-  onSubMenuClick?: (subChip: any) => void;
-}
+export interface ExpandableMenuProps {
+  /**
+   * mandatory | label for the expandable menu
+   */
+  label: string;
+  /**
+   * optional | Icon to describe direction of expansion
+   */
+  icon?: React.ReactNode;
+  /**
+   * optional | variant of the menu
+   */
+  variant?: 'primary';
+  /**
+   * optional | size of the expandable menu
+   */
+  size?: 'medium';
+  /**
+   * optional | disable to disable the menu and prevent click events but not hover event
+   */
+  disable?: boolean;
+  /**
+   * Mandatory |  sub menus to be shown inside  expandable menu
+   */
+  subMenus: string[];
+  /**
+   * optional | selected sub menu of the expandable menu
+   */
+  selectedMenu?: string;
+  /**
+   * optional | onSubMenuClick event to perform action on click of sub menu
+   */
+  onSubMenuClick?: (subChip: any) => void;
+}

package/src/components/FF_Captcha/Recaptcha.scss

@@ -1,11 +1,11 @@
-.ff-recaptcha-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    
-    .ff-recaptcha-error {
-      color: var(--input-error-text-color);
-      font-size: 12px;
-      margin-top: 4px;
-    }
+.ff-recaptcha-wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    
+    .ff-recaptcha-error {
+      color: var(--input-error-text-color);
+      font-size: 12px;
+      margin-top: 4px;
+    }
   }

package/src/components/FF_Captcha/Recaptcha.tsx

@@ -1,41 +1,41 @@
-import { useState, forwardRef } from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-import { RecaptchaProps } from './types';
-import './Recaptcha.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-
-const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
-  ({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
-    const [internalError, setInternalError] = useState<string | null>(null);
-    
-    const handleChange = (token: string | null) => {
-      if (token) {
-        setInternalError(null);
-        onVerify(token);
-      } else {
-        setInternalError('Please complete the CAPTCHA');
-      }
-    };
-
-    const error = externalError || internalError;
-
-    return (
-      <div className={classNames('ff-recaptcha-wrapper', className)}>
-        <ReCAPTCHA
-          ref={ref}
-          sitekey={sitekey}
-          onChange={handleChange}
-          {...props}
-        />
-        {error && (
-          <div className="ff-recaptcha-error">
-            <Typography fontSize={12}>{error}</Typography>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-
+import { useState, forwardRef } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { RecaptchaProps } from './types';
+import './Recaptcha.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+
+const Recaptcha = forwardRef<ReCAPTCHA, RecaptchaProps>(
+  ({ onVerify, className = '', error: externalError, sitekey, ...props }, ref) => {
+    const [internalError, setInternalError] = useState<string | null>(null);
+    
+    const handleChange = (token: string | null) => {
+      if (token) {
+        setInternalError(null);
+        onVerify(token);
+      } else {
+        setInternalError('Please complete the CAPTCHA');
+      }
+    };
+
+    const error = externalError || internalError;
+
+    return (
+      <div className={classNames('ff-recaptcha-wrapper', className)}>
+        <ReCAPTCHA
+          ref={ref}
+          sitekey={sitekey}
+          onChange={handleChange}
+          {...props}
+        />
+        {error && (
+          <div className="ff-recaptcha-error">
+            <Typography fontSize={12}>{error}</Typography>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
 export default Recaptcha;

package/src/components/FF_Captcha/captcha.stories.tsx

@@ -1,40 +1,40 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Recaptcha from './Recaptcha';
-
-const meta: Meta<typeof Recaptcha> = {
-  title: 'Components/Recaptcha',
-  component: Recaptcha,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Recaptcha>;
-
-const defaultArgs = {
-  sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // Test key
-  onVerify: () => {},
-};
-
-export const Default: Story = {
-  args: {
-    ...defaultArgs,
-  },
-};
-
-export const WithError: Story = {
-  args: {
-    ...defaultArgs,
-    error: 'Custom error message',
-  },
-};
-
-export const WithCustomTheme: Story = {
-  args: {
-    ...defaultArgs,
-    theme: 'dark',
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Recaptcha from './Recaptcha';
+
+const meta: Meta<typeof Recaptcha> = {
+  title: 'Components/Recaptcha',
+  component: Recaptcha,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Recaptcha>;
+
+const defaultArgs = {
+  sitekey: '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', // Test key
+  onVerify: () => {},
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    ...defaultArgs,
+    error: 'Custom error message',
+  },
+};
+
+export const WithCustomTheme: Story = {
+  args: {
+    ...defaultArgs,
+    theme: 'dark',
+  },
+};
+
+export default meta;

package/src/components/FF_Captcha/types.ts

@@ -1,22 +1,22 @@
-import { ComponentProps } from 'react';
-import ReCAPTCHA from 'react-google-recaptcha';
-
-export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
-  /**
-   * Callback function that receives the verification token
-   */
-  onVerify: (token: string | null) => void;
-  /**
-   * Optional CSS class name
-   */
-  className?: string;
-  /**
-   * Optional error message to display
-   */
-  error?: string | null;
-  /**
-   * reCAPTCHA site key
-   */
-  sitekey: string;
-}
-
+import { ComponentProps } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+
+export interface RecaptchaProps extends Omit<ComponentProps<typeof ReCAPTCHA>, 'onChange'> {
+  /**
+   * Callback function that receives the verification token
+   */
+  onVerify: (token: string | null) => void;
+  /**
+   * Optional CSS class name
+   */
+  className?: string;
+  /**
+   * Optional error message to display
+   */
+  error?: string | null;
+  /**
+   * reCAPTCHA site key
+   */
+  sitekey: string;
+}
+

package/src/components/FieldSet/FieldSet.scss

@@ -1,10 +1,10 @@
-.ff_fieldSet_container {
-  .ff_fieldSet {
-    border:1px solid var(--ff-select-border-color);
-    border-radius: 5px;
-    .ff_legend_container{
-        display: flex;
-        margin-left: 8px
-    }
-  }
-}
+.ff_fieldSet_container {
+  .ff_fieldSet {
+    border:1px solid var(--ff-select-border-color);
+    border-radius: 5px;
+    .ff_legend_container{
+        display: flex;
+        margin-left: 8px
+    }
+  }
+}