pixel-react 1.6.9 → 1.7.0

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss

@@ -1,161 +1,161 @@
-.ff-arrow-buttons-container {
-  position: absolute;
-  transition: opacity 0.3s ease;
-  pointer-events: none;
-
-  &.ff-down-right-top,
-  &.ff-down-top {
-    height: 80px;
-    width: 52px;
-    transform: translateY(calc(-50% + 12px));
-
-    .ff-arrow-button--right {
-      top: 28px;
-      right: 2px;
-      animation: slideRight 0.4s ease-out;
-    }
-
-    .ff-arrow-button--top {
-      top: 2px;
-      animation: slideTop 0.4s ease-out;
-    }
-
-    .ff-arrow-button--down {
-      bottom: 2px;
-      animation: slideDown 0.4s ease-out;
-    }
-  }
-
-  &.ff-right-top {
-    height: 52px;
-    width: 52px;
-    transform: translateY(calc(-54%));
-
-    .ff-arrow-button--right {
-      top: 28px;
-      right: 2px;
-      animation: slideRight 0.4s ease-out;
-    }
-
-    .ff-arrow-button--top {
-      top: 2px;
-      animation: slideTop 0.4s ease-out;
-    }
-  }
-
-  &.ff-down-right {
-    height: 52px;
-    width: 52px;
-
-    .ff-arrow-button--right {
-      top: 0px;
-      right: 2px;
-      animation: slideRight 0.4s ease-out;
-    }
-
-    .ff-arrow-button--down {
-      bottom: 2px;
-      animation: slideDown 0.4s ease-out;
-    }
-  }
-
-  &.ff-top {
-    height: 52px;
-    width: 24px;
-    transform: translateY(calc(-54%));
-
-    .ff-arrow-button--top {
-      top: 2px;
-      animation: slideTop 0.4s ease-out;
-    }
-  }
-
-  &.ff-right {
-    height: 24px;
-    width: 52px;
-
-    .ff-arrow-button--right {
-      right: 2px;
-      animation: slideRight 0.4s ease-out;
-    }
-  }
-
-  &.ff-down {
-    height: 52px;
-    width: 24px;
-
-    .ff-arrow-button--down {
-      bottom: 2px;
-      animation: slideDown 0.4s ease-out;
-    }
-  }
-  .ff-arrow-button {
-    background: var(--arrow-button-bg-color);
-    border: 0.5px solid var(--arrows-button-border-color);
-    padding: 0;
-    cursor: pointer;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    border-radius: 4px;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.3s ease;
-    position: absolute;
-
-    &--top {
-      top: 0px;
-      left: 0;
-    }
-
-    &--down {
-      bottom: 0px;
-      left: 0;
-    }
-  }
-
-  @keyframes slideTop {
-    from {
-      transform: translateY(20px);
-      opacity: 0;
-    }
-    50% {
-      transform: translateY(-10px);
-      opacity: 0.5;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slideRight {
-    from {
-      transform: translateX(-20px);
-      opacity: 0;
-    }
-    50% {
-      transform: translateX(10px);
-      opacity: 0.5;
-    }
-    to {
-      transform: translateX(0);
-      opacity: 1;
-    }
-  }
-
-  @keyframes slideDown {
-    from {
-      transform: translateY(-20px);
-      opacity: 0;
-    }
-    50% {
-      transform: translateY(10px);
-      opacity: 0.5;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-}
+.ff-arrow-buttons-container {
+  position: absolute;
+  transition: opacity 0.3s ease;
+  pointer-events: none;
+
+  &.ff-down-right-top,
+  &.ff-down-top {
+    height: 80px;
+    width: 52px;
+    transform: translateY(calc(-50% + 12px));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-right-top {
+    height: 52px;
+    width: 52px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--right {
+      top: 28px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-down-right {
+    height: 52px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      top: 0px;
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+
+  &.ff-top {
+    height: 52px;
+    width: 24px;
+    transform: translateY(calc(-54%));
+
+    .ff-arrow-button--top {
+      top: 2px;
+      animation: slideTop 0.4s ease-out;
+    }
+  }
+
+  &.ff-right {
+    height: 24px;
+    width: 52px;
+
+    .ff-arrow-button--right {
+      right: 2px;
+      animation: slideRight 0.4s ease-out;
+    }
+  }
+
+  &.ff-down {
+    height: 52px;
+    width: 24px;
+
+    .ff-arrow-button--down {
+      bottom: 2px;
+      animation: slideDown 0.4s ease-out;
+    }
+  }
+  .ff-arrow-button {
+    background: var(--arrow-button-bg-color);
+    border: 0.5px solid var(--arrows-button-border-color);
+    padding: 0;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s ease;
+    position: absolute;
+
+    &--top {
+      top: 0px;
+      left: 0;
+    }
+
+    &--down {
+      bottom: 0px;
+      left: 0;
+    }
+  }
+
+  @keyframes slideTop {
+    from {
+      transform: translateY(20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(-10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideRight {
+    from {
+      transform: translateX(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateX(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideDown {
+    from {
+      transform: translateY(-20px);
+      opacity: 0;
+    }
+    50% {
+      transform: translateY(10px);
+      opacity: 0.5;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}

package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx

@@ -1,38 +1,38 @@
-import classNames from 'classnames';
-import './ArrowsButton.scss';
-import { DirectionalArrowButtonProps } from '../type';
-import MenuOption from '../../MenuOption/MenuOption';
-
-const ArrowsButton = ({
-  direction,
-  menuOptions,
-  onArrowClick,
-}: DirectionalArrowButtonProps & { isActive: boolean }) => {
-  const getIconName = () => {
-    return `arrows_${direction}_icon`;
-  };
-
-  return (
-    <div>
-      <button
-        className={classNames(
-          'ff-arrow-button',
-          `ff-arrow-button--${direction}`
-        )}
-        onClick={onArrowClick}
-      >
-        <MenuOption
-          iconName={getIconName()}
-          options={menuOptions}
-          dropdownPlacement={direction}
-          iconSize={12}
-          iconButtonSize={24}
-          iconButtonBorderRadius={3}
-          onOptionClick={() => {}} 
-        />
-      </button>
-    </div>
-  );
-};
-
-export default ArrowsButton;
+import classNames from 'classnames';
+import './ArrowsButton.scss';
+import { DirectionalArrowButtonProps } from '../type';
+import MenuOption from '../../MenuOption/MenuOption';
+
+const ArrowsButton = ({
+  direction,
+  menuOptions,
+  onArrowClick,
+}: DirectionalArrowButtonProps & { isActive: boolean }) => {
+  const getIconName = () => {
+    return `arrows_${direction}_icon`;
+  };
+
+  return (
+    <div>
+      <button
+        className={classNames(
+          'ff-arrow-button',
+          `ff-arrow-button--${direction}`
+        )}
+        onClick={onArrowClick}
+      >
+        <MenuOption
+          iconName={getIconName()}
+          options={menuOptions}
+          dropdownPlacement={direction}
+          iconSize={12}
+          iconButtonSize={24}
+          iconButtonBorderRadius={3}
+          onOptionClick={() => {}} 
+        />
+      </button>
+    </div>
+  );
+};
+
+export default ArrowsButton;

package/src/components/AddResourceButton/index.ts

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

package/src/components/AddResourceButton/type.ts

@@ -1,92 +1,92 @@
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-
-/**
- * Describes the directional arrow used in the Add Resource Button component.
- * The arrow specifies its direction (top, right, down) and associated menu options.
- *
- * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
- * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
- * If null, no menu options will be shown.
- */
-export interface DirectionalArrow {
-  direction: string | 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-}
-
-/**
- * Props for the Add Resource Button component.
- *
- * @property {string} [id] - An optional unique identifier for the Add Resource Button.
- * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
- * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
- * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
- */
-export interface AddResourceButtonProps {
-  id?: string;
-  variant?: 'primary' | 'secondary';
-  directionalArrow: {
-    /**
-     * direction option: 'top' | 'right' | 'down'
-     */
-    direction: string;
-    menuOptions: {
-      label: string;
-      value: string | string[];
-      icon?: string;
-      disable?: boolean;
-    }[];
-  }[];
-  zIndex?: number;
-}
-
-/**
- * Props for individual directional arrow buttons.
- *
- * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
- * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
- * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
- * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
- */
-export interface DirectionalArrowButtonProps {
-  direction: 'top' | 'right' | 'down';
-  menuOptions: {
-    label: string;
-    value: string | string[];
-    icon?: string;
-    disable?: boolean;
-  }[];
-  onArrowClick: () => void;
-  isActive: boolean;
-  variant?: 'primary' | 'secondary';
-}
-
-/**
- * Utility function to validate an array of directional arrows.
- * Ensures there is at least one valid arrow in the array.
- * If the array is empty, it returns a default arrow object.
- */
-export const validateArrows = (
-  arrows: DirectionalArrow[]
-): DirectionalArrow[] => {
-  if (checkEmpty(arrows)) {
-    return [
-      {
-        direction: null as any,
-        menuOptions: [
-          {
-            label: 'Sub Module',
-            value: 'sub_module',
-            icon: '',
-            disable: false,
-          },
-        ],
-      },
-    ];
-  }
-  return arrows;
-};
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+
+/**
+ * Describes the directional arrow used in the Add Resource Button component.
+ * The arrow specifies its direction (top, right, down) and associated menu options.
+ *
+ * @property {('top' | 'right' | 'down')} direction - Specifies the direction of the arrow.
+ * @property {(Object | null)[]} menuOptions - The list of menu options displayed when the arrow button is active.
+ * If null, no menu options will be shown.
+ */
+export interface DirectionalArrow {
+  direction: string | 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon?: string;
+    disable?: boolean;
+  }[];
+}
+
+/**
+ * Props for the Add Resource Button component.
+ *
+ * @property {string} [id] - An optional unique identifier for the Add Resource Button.
+ * @property {('primary' | 'secondary')} [variant] - Optional button style variant.
+ * @property {DirectionalArrow[]} directionalArrow - An array of directional arrows, each specifying the direction and associated menu options. Default values will be provided if not passed.
+ * @property {number} [zIndex] - An optional z-index value for positioning, defaults to 99.
+ */
+export interface AddResourceButtonProps {
+  id?: string;
+  variant?: 'primary' | 'secondary';
+  directionalArrow: {
+    /**
+     * direction option: 'top' | 'right' | 'down'
+     */
+    direction: string;
+    menuOptions: {
+      label: string;
+      value: string | string[];
+      icon?: string;
+      disable?: boolean;
+    }[];
+  }[];
+  zIndex?: number;
+}
+
+/**
+ * Props for individual directional arrow buttons.
+ *
+ * @property {('top' | 'right' | 'down')} direction - The direction of the arrow button (top, right, or down).
+ * @property {(Object | any)} menuOptions - The list of menu options or a generic value for dynamic content.
+ * @property {() => void} onArrowClick - Callback function triggered when the arrow button is clicked.
+ * @property {boolean} isActive - Specifies if the button is in an active state (highlighted when selected).
+ */
+export interface DirectionalArrowButtonProps {
+  direction: 'top' | 'right' | 'down';
+  menuOptions: {
+    label: string;
+    value: string | string[];
+    icon?: string;
+    disable?: boolean;
+  }[];
+  onArrowClick: () => void;
+  isActive: boolean;
+  variant?: 'primary' | 'secondary';
+}
+
+/**
+ * Utility function to validate an array of directional arrows.
+ * Ensures there is at least one valid arrow in the array.
+ * If the array is empty, it returns a default arrow object.
+ */
+export const validateArrows = (
+  arrows: DirectionalArrow[]
+): DirectionalArrow[] => {
+  if (checkEmpty(arrows)) {
+    return [
+      {
+        direction: null as any,
+        menuOptions: [
+          {
+            label: 'Sub Module',
+            value: 'sub_module',
+            icon: '',
+            disable: false,
+          },
+        ],
+      },
+    ];
+  }
+  return arrows;
+};