pixel-react 1.5.3 → 1.5.4

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,31 +1,31 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Accordion from './Accordion';
-import Icon from '../Icon';
-
-const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
-  component: Accordion,
-  parameters: {
-    layout: 'padded',
-  },
-  tags: ['autodocs'],
-};
-
-type Story = StoryObj<typeof Accordion>;
-const defaultArgs = {
-  headerTitle: 'Accordion',
-};
-
-export const SampleAccordion: Story = {
-  args: {
-    ...defaultArgs,
-    headerTitle: (
-      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-        <Icon name="accordion_header_icon" />
-        <span>Home and Web</span>
-      </div>
-    ),
-  },
-};
-
-export default meta;
+import type { Meta, StoryObj } from '@storybook/react';
+import Accordion from './Accordion';
+import Icon from '../Icon';
+
+const meta: Meta<typeof Accordion> = {
+  title: 'Components/Accordion',
+  component: Accordion,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof Accordion>;
+const defaultArgs = {
+  headerTitle: 'Accordion',
+};
+
+export const SampleAccordion: Story = {
+  args: {
+    ...defaultArgs,
+    headerTitle: (
+      <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <Icon name="accordion_header_icon" />
+        <span>Home and Web</span>
+      </div>
+    ),
+  },
+};
+
+export default meta;

package/src/components/Accordion/Accordion.tsx

@@ -1,62 +1,62 @@
-import { useState } from 'react';
-import './Accordion.scss';
-import Icon from '../Icon';
-import '../../../index.scss';
-import { AccordionProps } from './types';
-import Tooltip from '../Tooltip';
-import Typography from '../Typography';
-
-/**
- * Accordion UI component
- */
-const Accordion = ({
-  headerTitle = '',
-  color,
-  minHeight = '32px', // Default min-height for accordion content
-  accordionContent = <>This is accordion content</>,
-  disable = false,
-  disableInfoMessage = '',
-}: AccordionProps) => {
-  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
-
-  const onAccordionClick = () => {
-    setIsAccordionExpanded(!isAccordionExpanded);
-  };
-  return (
-    <div className="ff-accordion">
-      <Tooltip title={disableInfoMessage}>
-        <div
-          className={`accordion-header ${disable && 'ff-disabled'} ${
-            isAccordionExpanded && 'expanded'
-          }`}
-          style={{ color: color || '--tooltip-bg-color' }}
-        >
-          <Typography
-            as="div"
-            className="header-title"
-            fontWeight="semi-bold"
-            lineHeight="18px"
-          >
-            {headerTitle}
-          </Typography>
-
-          <Icon
-            name={'arrow_up'}
-            hoverEffect={false}
-            className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
-            onClick={() => {
-              !disable && onAccordionClick();
-            }}
-          />
-        </div>
-      </Tooltip>
-      {!disable && isAccordionExpanded && (
-        <div style={{ minHeight }} className="accordion-content">
-          {accordionContent}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Accordion;
+import { useState } from 'react';
+import './Accordion.scss';
+import Icon from '../Icon';
+import '../../../index.scss';
+import { AccordionProps } from './types';
+import Tooltip from '../Tooltip';
+import Typography from '../Typography';
+
+/**
+ * Accordion UI component
+ */
+const Accordion = ({
+  headerTitle = '',
+  color,
+  minHeight = '32px', // Default min-height for accordion content
+  accordionContent = <>This is accordion content</>,
+  disable = false,
+  disableInfoMessage = '',
+}: AccordionProps) => {
+  const [isAccordionExpanded, setIsAccordionExpanded] = useState(true);
+
+  const onAccordionClick = () => {
+    setIsAccordionExpanded(!isAccordionExpanded);
+  };
+  return (
+    <div className="ff-accordion">
+      <Tooltip title={disableInfoMessage}>
+        <div
+          className={`accordion-header ${disable && 'ff-disabled'} ${
+            isAccordionExpanded && 'expanded'
+          }`}
+          style={{ color: color || '--tooltip-bg-color' }}
+        >
+          <Typography
+            as="div"
+            className="header-title"
+            fontWeight="semi-bold"
+            lineHeight="18px"
+          >
+            {headerTitle}
+          </Typography>
+
+          <Icon
+            name={'arrow_up'}
+            hoverEffect={false}
+            className={`accordion-arrow  ${isAccordionExpanded && 'expanded'}`}
+            onClick={() => {
+              !disable && onAccordionClick();
+            }}
+          />
+        </div>
+      </Tooltip>
+      {!disable && isAccordionExpanded && (
+        <div style={{ minHeight }} className="accordion-content">
+          {accordionContent}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Accordion;

package/src/components/Accordion/index.ts

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

package/src/components/Accordion/types.ts

@@ -1,28 +1,28 @@
-import { ReactNode } from 'react';
-
-export interface AccordionProps {
-  /**
-   * Accordion Header Title
-   */
-  headerTitle: string | JSX.Element;
-  /**
-   * Content that to be shown while Accordion is expanded
-   */
-  accordionContent: ReactNode;
-  /**
-   * Custom color for the Accordion header
-   */
-  color?: string;
-  /**
-   * Minimum height for the Accordion
-   */
-  minHeight?: string;
-  /**
-   * Property to disable accordion
-   */
-  disable?: boolean;
-  /**
-   * Info message to user for disabling accordion
-   */
-  disableInfoMessage?: string;
-}
+import { ReactNode } from 'react';
+
+export interface AccordionProps {
+  /**
+   * Accordion Header Title
+   */
+  headerTitle: string | JSX.Element;
+  /**
+   * Content that to be shown while Accordion is expanded
+   */
+  accordionContent: ReactNode;
+  /**
+   * Custom color for the Accordion header
+   */
+  color?: string;
+  /**
+   * Minimum height for the Accordion
+   */
+  minHeight?: string;
+  /**
+   * Property to disable accordion
+   */
+  disable?: boolean;
+  /**
+   * Info message to user for disabling accordion
+   */
+  disableInfoMessage?: string;
+}

package/src/components/AddResourceButton/AddButton.scss

@@ -1,36 +1,36 @@
-.ff-add-button-container {
-  position: relative;
-  border: none;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  background-color: transparent;
-  &.ff-hovered-add-button--primary {
-    background-color: var(--hover-color);
-  }
-  .ff-hovered-add-icon--primary {
-    svg {
-      path {
-        fill: var(--add-icon-hover-color);
-      }
-    }
-  }
-  .ff-add-icon--primary {
-    svg {
-      path {
-        fill: var(--brand-color);
-      }
-    }
-  }
-  .ff-add-button {
-    position: absolute;
-    border: none;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 4px;
-    background: none;
-  }
-}
+.ff-add-button-container {
+  position: relative;
+  border: none;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  background-color: transparent;
+  &.ff-hovered-add-button--primary {
+    background-color: var(--hover-color);
+  }
+  .ff-hovered-add-icon--primary {
+    svg {
+      path {
+        fill: var(--add-icon-hover-color);
+      }
+    }
+  }
+  .ff-add-icon--primary {
+    svg {
+      path {
+        fill: var(--brand-color);
+      }
+    }
+  }
+  .ff-add-button {
+    position: absolute;
+    border: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 4px;
+    background: none;
+  }
+}

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;