pixel-react 1.8.1 → 1.8.2

package/src/components/AddResourceButton/AddButton.stories.tsx

@@ -1,126 +1,126 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AddButton from './AddButton';
-import { AddResourceButtonProps } from './type';
-
-const meta: Meta<typeof AddButton> = {
-  title: 'Components/AddResourceButton',
-  component: AddButton,
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-type Story = StoryObj<typeof AddButton>;
-
-export const Default: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module',
-            icon: 'plus',
-            disable: false,
-          },
-        ],
-      },
-    ],
-  } as AddResourceButtonProps,
-};
-
-export const TwoArrowsButtons: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'top',
-        menuOptions: [
-          {
-            label: 'Add Module',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Add Module',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-    ],
-  } as AddResourceButtonProps,
-};
-
-export const ThreeArrowsButton: Story = {
-  args: {
-    directionalArrow: [
-      {
-        direction: 'top',
-        menuOptions: [
-          {
-            label: 'Module',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'right',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-          {
-            label: 'Automation Script',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-          {
-            label: 'Manual Test Case',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-          {
-            label: 'Pre / Post Condition',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-          {
-            label: 'Authorization',
-            value: 'add_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-      {
-        direction: 'down',
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module',
-            icon: 'module_icon',
-            disable: false,
-          },
-        ],
-      },
-    ],
-  } as AddResourceButtonProps,
-};
-
-export default meta;
+import { Meta, StoryObj } from '@storybook/react';
+import AddButton from './AddButton';
+import { AddResourceButtonProps } from './type';
+
+const meta: Meta<typeof AddButton> = {
+  title: 'Components/AddResourceButton',
+  component: AddButton,
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+type Story = StoryObj<typeof AddButton>;
+
+export const Default: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'plus',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const TwoArrowsButtons: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Add Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export const ThreeArrowsButton: Story = {
+  args: {
+    directionalArrow: [
+      {
+        direction: 'top',
+        menuOptions: [
+          {
+            label: 'Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'right',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Automation Script',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Manual Test Case',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Pre / Post Condition',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+          {
+            label: 'Authorization',
+            value: 'add_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+      {
+        direction: 'down',
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: 'module_icon',
+            disable: false,
+          },
+        ],
+      },
+    ],
+  } as AddResourceButtonProps,
+};
+
+export default meta;

package/src/components/AddResourceButton/AddButton.tsx

@@ -1,121 +1,121 @@
-import './AddButton.scss';
-import ArrowsButton from './ArrowsButton/ArrowsButton';
-import Icon from '../Icon';
-import { useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import {
-  AddResourceButtonProps,
-  DirectionalArrow,
-  validateArrows,
-} from './type';
-import usePortalPosition from '../../hooks/usePortalPosition';
-
-const AddButton = ({
-  id = 'AddModule',
-  variant = 'primary',
-  directionalArrow = [
-    {
-      direction: 'right',
-      menuOptions: [
-        { label: 'Sub Module', value: 'sub_module', icon: '', disable: false },
-      ],
-    },
-  ],
-  zIndex = 99,
-}: AddResourceButtonProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const [positionArrowContainer, setPositionArrowContainer] = useState<{
-    left: number;
-    top: number;
-  }>({ left: 0, top: 0 });
-  const [activeArrow, setActiveArrow] = useState<string>('');
-  const arrowContainerRef = useRef<HTMLDivElement>(null);
-  const validArrows = validateArrows(directionalArrow);
-  const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
-
-  const handleHover = () => {
-    if (!activeArrow) {
-      setIsHovered(true);
-    }
-    const { positionX, positionY } = portalPosition(arrowContainerRef);
-    setPositionArrowContainer({ left: positionX, top: positionY });
-  };
-
-  const handleLeave = () => {
-    setIsHovered(false);
-    setActiveArrow('');
-  };
-
-  const handleArrowClick = (direction: string) => {
-    if (activeArrow === direction) {
-      setActiveArrow('');
-      setIsHovered(false);
-    } else {
-      setActiveArrow(direction);
-      setIsHovered(true);
-    }
-  };
-
-  const getArrowButtonClass = () => {
-    const directions = validArrows
-      .map((arrow: { direction: string }) => arrow.direction)
-      .sort()
-      .join('-');
-    return `ff-${directions}`;
-  };
-
-  return (
-    <div
-      className={`ff-add-button-container ${
-        isHovered ? `ff-hovered-add-button--${variant}` : ''
-      }`}
-      id={id}
-      onMouseEnter={handleHover}
-      onMouseLeave={handleLeave}
-      ref={arrowContainerRef}
-    >
-      <span className="ff-add-button">
-        <Icon
-          name="plus_icon"
-          width={16}
-          height={16}
-          className={
-            isHovered
-              ? `ff-hovered-add-icon--${variant}`
-              : `ff-add-icon--${variant}`
-          }
-        />
-      </span>
-
-      {isHovered &&
-        createPortal(
-          <div
-            className={`ff-arrow-buttons-container ${getArrowButtonClass()}`}
-            onMouseEnter={handleHover}
-            onMouseLeave={handleLeave}
-            style={{
-              left: positionArrowContainer.left,
-              top: positionArrowContainer.top,
-              zIndex: zIndex,
-            }}
-          >
-            {directionalArrow.map(
-              ({ direction, menuOptions }: DirectionalArrow, index: number) => (
-                <ArrowsButton
-                key={index}
-                direction={direction as 'top' | 'right' | 'down'}
-                onArrowClick={() => handleArrowClick(direction)}
-                menuOptions={menuOptions}
-                isActive={activeArrow === direction}
-                variant={variant}
-              />
-              )
-            )}
-          </div>,
-          document.body
-        )}
-    </div>
-  );
-};
-
-export default AddButton;
+import './AddButton.scss';
+import ArrowsButton from './ArrowsButton/ArrowsButton';
+import Icon from '../Icon';
+import { useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  AddResourceButtonProps,
+  DirectionalArrow,
+  validateArrows,
+} from './type';
+import usePortalPosition from '../../hooks/usePortalPosition';
+
+const AddButton = ({
+  id = 'AddModule',
+  variant = 'primary',
+  directionalArrow = [
+    {
+      direction: 'right',
+      menuOptions: [
+        { label: 'Sub Module', value: 'sub_module', icon: '', disable: false },
+      ],
+    },
+  ],
+  zIndex = 99,
+}: AddResourceButtonProps) => {
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const [positionArrowContainer, setPositionArrowContainer] = useState<{
+    left: number;
+    top: number;
+  }>({ left: 0, top: 0 });
+  const [activeArrow, setActiveArrow] = useState<string>('');
+  const arrowContainerRef = useRef<HTMLDivElement>(null);
+  const validArrows = validateArrows(directionalArrow);
+  const portalPosition = usePortalPosition(arrowContainerRef, isHovered);
+
+  const handleHover = () => {
+    if (!activeArrow) {
+      setIsHovered(true);
+    }
+    const { positionX, positionY } = portalPosition(arrowContainerRef);
+    setPositionArrowContainer({ left: positionX, top: positionY });
+  };
+
+  const handleLeave = () => {
+    setIsHovered(false);
+    setActiveArrow('');
+  };
+
+  const handleArrowClick = (direction: string) => {
+    if (activeArrow === direction) {
+      setActiveArrow('');
+      setIsHovered(false);
+    } else {
+      setActiveArrow(direction);
+      setIsHovered(true);
+    }
+  };
+
+  const getArrowButtonClass = () => {
+    const directions = validArrows
+      .map((arrow: { direction: string }) => arrow.direction)
+      .sort()
+      .join('-');
+    return `ff-${directions}`;
+  };
+
+  return (
+    <div
+      className={`ff-add-button-container ${
+        isHovered ? `ff-hovered-add-button--${variant}` : ''
+      }`}
+      id={id}
+      onMouseEnter={handleHover}
+      onMouseLeave={handleLeave}
+      ref={arrowContainerRef}
+    >
+      <span className="ff-add-button">
+        <Icon
+          name="plus_icon"
+          width={16}
+          height={16}
+          className={
+            isHovered
+              ? `ff-hovered-add-icon--${variant}`
+              : `ff-add-icon--${variant}`
+          }
+        />
+      </span>
+
+      {isHovered &&
+        createPortal(
+          <div
+            className={`ff-arrow-buttons-container ${getArrowButtonClass()}`}
+            onMouseEnter={handleHover}
+            onMouseLeave={handleLeave}
+            style={{
+              left: positionArrowContainer.left,
+              top: positionArrowContainer.top,
+              zIndex: zIndex,
+            }}
+          >
+            {directionalArrow.map(
+              ({ direction, menuOptions }: DirectionalArrow, index: number) => (
+                <ArrowsButton
+                key={index}
+                direction={direction as 'top' | 'right' | 'down'}
+                onArrowClick={() => handleArrowClick(direction)}
+                menuOptions={menuOptions}
+                isActive={activeArrow === direction}
+                variant={variant}
+              />
+              )
+            )}
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default AddButton;