pixel-react 1.5.2 → 1.5.4

package/src/components/AppHeader/AppHeader.tsx

@@ -1,179 +1,179 @@
-import { AppHeaderProps } from './types';
-import Icon from '../Icon';
-import './AppHeader.scss';
-import classNames from 'classnames';
-import Typography from '../Typography';
-import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
-import AllProjectsDropdown from '../AllProjectsDropdown';
-import MenuOption from '../MenuOption';
-import Tooltip from '../Tooltip';
-
-const AppHeader: React.FC<AppHeaderProps> = ({
-  logoIconName = 'fireflink_icon',
-  leftContent,
-  rightContent,
-  projectsList,
-  appHeaderMenuItems,
-  appHeaderHiddenMenuItems,
-  selectedMenu,
-  selectedSubMenu,
-  selectedQuickMenu,
-  selectedProject = { label: '', value: '', iconName: '' },
-  onMenuClick = () => {},
-  onSubMenuClick = () => {},
-  onQuickMenuClick = () => {},
-  onProjectMenuClick = () => {},
-  onProjectDropdownLabelClick = () => {},
-  onMoreMenuOptionClick = () => {},
-}) => {
-  return (
-    <div className="ff-app-header-main">
-    <div className="ff-app-header">
-      <div className="ff-app-header-left-container">
-        <div className="ff-app-header-logo-icon">
-          <Icon color="" name={logoIconName} height={24} width={21} />
-        </div>
-        {leftContent && (
-          <div className="ff-app-header-left-content">{leftContent}</div>
-        )}
-      </div>
-      {!checkEmpty(appHeaderMenuItems) && (
-        <div className="ff-app-header-nav-bar">
-          {projectsList && !checkEmpty(projectsList) && (
-            <div>
-              {
-                <AllProjectsDropdown
-                  onClick={onProjectMenuClick}
-                  options={projectsList}
-                  selectedOption={selectedProject}
-                  onMenuClick={onProjectDropdownLabelClick}
-                  selected={selectedMenu === 'Projects'}
-                />
-              }
-            </div>
-          )}
-          <div className="ff-app-header-nav-bar-items fontSm">
-            {appHeaderMenuItems.map((menuItem) => {
-              return (
-                <div
-                  className={classNames('ff-app-header-nav-bar-item', {
-                    ['ff-app-header-nav-bar-item--selected']:
-                      menuItem.label === selectedMenu,
-                  })}
-                  key={menuItem.label}
-                >
-                  <Typography
-                    as="div"
-                    className="ff-app-header-nav-bar-item-label"
-                    lineHeight="18px"
-                    onClick={() => onMenuClick(menuItem)}
-                  >
-                    {menuItem.label}
-                  </Typography>
-                  {menuItem.label === selectedMenu &&
-                    menuItem?.subMenuItems && (
-                      <>
-                        {menuItem.subMenuItems.map((subMenuItem) => {
-                          return (
-                            <div
-                              key={subMenuItem.label}
-                              className="ff-app-header-submenu-container"
-                            >
-                              <Typography
-                                as="div"
-                                className={classNames(
-                                  'ff-app-header-nav-bar-submenu-item',
-                                  {
-                                    ['ff-app-header-nav-bar-submenu-item--selected']:
-                                      subMenuItem.label === selectedSubMenu,
-                                  }
-                                )}
-                                lineHeight="18px"
-                                onClick={() => onSubMenuClick(subMenuItem)}
-                              >
-                                {subMenuItem.label}
-                              </Typography>
-                            </div>
-                          );
-                        })}
-                        {menuItem.subMenuItems.map((subMenuItem) => {
-                          return (
-                            <div
-                              key={subMenuItem.label}
-                              className="ff-app-header-submenu-container"
-                            >
-                              {subMenuItem.label === selectedSubMenu &&
-                                subMenuItem?.quickMenuItems && (
-                                  <div className="ff-app-header-quickmenu-container">
-                                    <div>
-                                      <Icon name="vertical_separator" />
-                                    </div>
-                                    {subMenuItem.quickMenuItems.map(
-                                      (quickMenuItem) => {
-                                        return (
-                                          <>
-                                            <div
-                                              key={quickMenuItem.iconName}
-                                              onClick={() =>
-                                                onQuickMenuClick(quickMenuItem)
-                                              }
-                                              className={classNames(
-                                                'ff-app-header-nav-bar-quickmenu-item',
-                                                {
-                                                  ['ff-app-header-nav-bar-quickmenu-item--selected']:
-                                                    quickMenuItem.iconName ===
-                                                    selectedQuickMenu,
-                                                }
-                                              )}
-                                            >
-                                              <Tooltip
-                                                title={quickMenuItem?.label}
-                                              >
-                                                <Icon
-                                                  name={quickMenuItem.iconName}
-                                                  height={16}
-                                                  width={16}
-                                                  hoverEffect={true}
-                                                />
-                                              </Tooltip>
-                                            </div>
-                                          </>
-                                        );
-                                      }
-                                    )}
-                                  </div>
-                                )}
-                            </div>
-                          );
-                        })}
-                      </>
-                    )}
-                </div>
-              );
-            })}
-          </div>
-          {appHeaderHiddenMenuItems &&
-            !checkEmpty(appHeaderHiddenMenuItems) && (
-              <div className="more-menu">
-                <MenuOption
-                  iconName="more"
-                  options={appHeaderHiddenMenuItems}
-                  onOptionClick={onMoreMenuOptionClick}
-                  variant="dark"
-                  dropdownPlacement="down"
-                  zIndex={1001}
-                  tooltipTitle="More"
-                  optionCardVariant="primary"
-                />
-              </div>
-            )}
-        </div>
-      )}
-      {rightContent && (
-        <div className="ff-app-header-right-content">{rightContent}</div>
-      )}
-    </div>
-    </div>
-  );
-};
-export default AppHeader;
+import { AppHeaderProps } from './types';
+import Icon from '../Icon';
+import './AppHeader.scss';
+import classNames from 'classnames';
+import Typography from '../Typography';
+import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
+import AllProjectsDropdown from '../AllProjectsDropdown';
+import MenuOption from '../MenuOption';
+import Tooltip from '../Tooltip';
+
+const AppHeader: React.FC<AppHeaderProps> = ({
+  logoIconName = 'fireflink_icon',
+  leftContent,
+  rightContent,
+  projectsList,
+  appHeaderMenuItems,
+  appHeaderHiddenMenuItems,
+  selectedMenu,
+  selectedSubMenu,
+  selectedQuickMenu,
+  selectedProject = { label: '', value: '', iconName: '' },
+  onMenuClick = () => {},
+  onSubMenuClick = () => {},
+  onQuickMenuClick = () => {},
+  onProjectMenuClick = () => {},
+  onProjectDropdownLabelClick = () => {},
+  onMoreMenuOptionClick = () => {},
+}) => {
+  return (
+    <div className="ff-app-header-main">
+    <div className="ff-app-header">
+      <div className="ff-app-header-left-container">
+        <div className="ff-app-header-logo-icon">
+          <Icon color="" name={logoIconName} height={24} width={21} />
+        </div>
+        {leftContent && (
+          <div className="ff-app-header-left-content">{leftContent}</div>
+        )}
+      </div>
+      {!checkEmpty(appHeaderMenuItems) && (
+        <div className="ff-app-header-nav-bar">
+          {projectsList && !checkEmpty(projectsList) && (
+            <div>
+              {
+                <AllProjectsDropdown
+                  onClick={onProjectMenuClick}
+                  options={projectsList}
+                  selectedOption={selectedProject}
+                  onMenuClick={onProjectDropdownLabelClick}
+                  selected={selectedMenu === 'Projects'}
+                />
+              }
+            </div>
+          )}
+          <div className="ff-app-header-nav-bar-items fontSm">
+            {appHeaderMenuItems.map((menuItem) => {
+              return (
+                <div
+                  className={classNames('ff-app-header-nav-bar-item', {
+                    ['ff-app-header-nav-bar-item--selected']:
+                      menuItem.label === selectedMenu,
+                  })}
+                  key={menuItem.label}
+                >
+                  <Typography
+                    as="div"
+                    className="ff-app-header-nav-bar-item-label"
+                    lineHeight="18px"
+                    onClick={() => onMenuClick(menuItem)}
+                  >
+                    {menuItem.label}
+                  </Typography>
+                  {menuItem.label === selectedMenu &&
+                    menuItem?.subMenuItems && (
+                      <>
+                        {menuItem.subMenuItems.map((subMenuItem) => {
+                          return (
+                            <div
+                              key={subMenuItem.label}
+                              className="ff-app-header-submenu-container"
+                            >
+                              <Typography
+                                as="div"
+                                className={classNames(
+                                  'ff-app-header-nav-bar-submenu-item',
+                                  {
+                                    ['ff-app-header-nav-bar-submenu-item--selected']:
+                                      subMenuItem.label === selectedSubMenu,
+                                  }
+                                )}
+                                lineHeight="18px"
+                                onClick={() => onSubMenuClick(subMenuItem)}
+                              >
+                                {subMenuItem.label}
+                              </Typography>
+                            </div>
+                          );
+                        })}
+                        {menuItem.subMenuItems.map((subMenuItem) => {
+                          return (
+                            <div
+                              key={subMenuItem.label}
+                              className="ff-app-header-submenu-container"
+                            >
+                              {subMenuItem.label === selectedSubMenu &&
+                                subMenuItem?.quickMenuItems && (
+                                  <div className="ff-app-header-quickmenu-container">
+                                    <div>
+                                      <Icon name="vertical_separator" />
+                                    </div>
+                                    {subMenuItem.quickMenuItems.map(
+                                      (quickMenuItem) => {
+                                        return (
+                                          <>
+                                            <div
+                                              key={quickMenuItem.iconName}
+                                              onClick={() =>
+                                                onQuickMenuClick(quickMenuItem)
+                                              }
+                                              className={classNames(
+                                                'ff-app-header-nav-bar-quickmenu-item',
+                                                {
+                                                  ['ff-app-header-nav-bar-quickmenu-item--selected']:
+                                                    quickMenuItem.iconName ===
+                                                    selectedQuickMenu,
+                                                }
+                                              )}
+                                            >
+                                              <Tooltip
+                                                title={quickMenuItem?.label}
+                                              >
+                                                <Icon
+                                                  name={quickMenuItem.iconName}
+                                                  height={16}
+                                                  width={16}
+                                                  hoverEffect={true}
+                                                />
+                                              </Tooltip>
+                                            </div>
+                                          </>
+                                        );
+                                      }
+                                    )}
+                                  </div>
+                                )}
+                            </div>
+                          );
+                        })}
+                      </>
+                    )}
+                </div>
+              );
+            })}
+          </div>
+          {appHeaderHiddenMenuItems &&
+            !checkEmpty(appHeaderHiddenMenuItems) && (
+              <div className="more-menu">
+                <MenuOption
+                  iconName="more"
+                  options={appHeaderHiddenMenuItems}
+                  onOptionClick={onMoreMenuOptionClick}
+                  variant="dark"
+                  dropdownPlacement="down"
+                  zIndex={1001}
+                  tooltipTitle="More"
+                  optionCardVariant="primary"
+                />
+              </div>
+            )}
+        </div>
+      )}
+      {rightContent && (
+        <div className="ff-app-header-right-content">{rightContent}</div>
+      )}
+    </div>
+    </div>
+  );
+};
+export default AppHeader;

package/src/components/AppHeader/index.ts

@@ -1 +1 @@
-export { default } from "./AppHeader";
+export { default } from "./AppHeader";

package/src/components/AppHeader/types.ts

@@ -1,40 +1,40 @@
-import { ReactNode } from 'react';
-import { optionsType } from '../AllProjectsDropdown/types';
-export interface AppHeaderProps {
-  logoIconName: string;
-  leftContent?: ReactNode;
-  rightContent?: ReactNode;
-  projectsList?: optionsType[];
-  appHeaderMenuItems: appHeaderMenuItemProps[];
-  appHeaderHiddenMenuItems?: {
-    label: string;
-    value: string | string[];
-    icon: string;
-    disable?: boolean;
-  }[];
-  selectedMenu: string;
-  selectedSubMenu?: string;
-  selectedQuickMenu?: string;
-  selectedProject?: optionsType;
-  onMenuClick?: (text: any) => void;
-  onSubMenuClick?: (text: any) => void;
-  onQuickMenuClick?: (text: any) => void;
-  onProjectMenuClick?: (text: any) => void;
-  onProjectDropdownLabelClick?: () => void;
-  onMoreMenuOptionClick?: (text: any) => void;
-}
-export interface appHeaderMenuItemProps {
-  label: string;
-  path?: string;
-  subMenuItems?: appHeaderSubMenuItemProps[];
-}
-export interface appHeaderSubMenuItemProps {
-  label: string;
-  path?: string;
-  quickMenuItems?: appHeaderQuickMenuItemProps[];
-}
-export interface appHeaderQuickMenuItemProps {
-  label?: string;
-  path?: string;
-  iconName: string;
-}
+import { ReactNode } from 'react';
+import { optionsType } from '../AllProjectsDropdown/types';
+export interface AppHeaderProps {
+  logoIconName: string;
+  leftContent?: ReactNode;
+  rightContent?: ReactNode;
+  projectsList?: optionsType[];
+  appHeaderMenuItems: appHeaderMenuItemProps[];
+  appHeaderHiddenMenuItems?: {
+    label: string;
+    value: string | string[];
+    icon: string;
+    disable?: boolean;
+  }[];
+  selectedMenu: string;
+  selectedSubMenu?: string;
+  selectedQuickMenu?: string;
+  selectedProject?: optionsType;
+  onMenuClick?: (text: any) => void;
+  onSubMenuClick?: (text: any) => void;
+  onQuickMenuClick?: (text: any) => void;
+  onProjectMenuClick?: (text: any) => void;
+  onProjectDropdownLabelClick?: () => void;
+  onMoreMenuOptionClick?: (text: any) => void;
+}
+export interface appHeaderMenuItemProps {
+  label: string;
+  path?: string;
+  subMenuItems?: appHeaderSubMenuItemProps[];
+}
+export interface appHeaderSubMenuItemProps {
+  label: string;
+  path?: string;
+  quickMenuItems?: appHeaderQuickMenuItemProps[];
+}
+export interface appHeaderQuickMenuItemProps {
+  label?: string;
+  path?: string;
+  iconName: string;
+}

package/src/components/AttachImage/AttachImage.scss

@@ -1,73 +1,76 @@
-.ff-attach-image-container {
-  position: relative;
-  display: inline-block;
-
-  .ff-image-wrapper {
-    position: relative;
-    width: 79px;
-    height: 75px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    .ff-hover-icons {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      opacity: 0;
-      transition: opacity 0.3s;
-
-      .ff-top-icons {
-        position: absolute;
-        top: 0;
-        right: 0;
-        display: flex;
-        gap: 4px;
-
-        .ff-icon-container {
-          width: 16px;
-          height: 16px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          cursor: pointer;
-          border-radius: 4px;
-          transition: background-color 0.3s;
-
-          &:hover {
-            background-color: var(--ff-icon-hover-bg-color);
-            border-radius: 4px;
-          }
-        }
-      }
-
-      .ff-expand-icon-container {
-        width: 24px;
-        height: 24px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-        border-radius: 4px;
-        transition: background-color 0.3s;
-
-        &:hover {
-          background-color: var(--ff-icon-hover-bg-color);
-          border-radius: 4px;
-        }
-      }
-    }
-
-    &:hover .ff-hover-icons {
-      opacity: 1;
-    }
-  }
-}
+.ff-attach-image-container {
+  position: relative;
+  display: inline-block;
+
+  .ff-image-wrapper {
+    position: relative;
+    width: 79px;
+    height: 75px;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .ff-hover-icons {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      opacity: 0;
+      background-color: rgba(0, 0, 0, 0.7);
+      transition: opacity 0.4s ease;
+
+      .ff-top-icons {
+        position: absolute;
+        top: 1px;
+        right: 1px;
+        display: flex;
+        gap: 4px;
+
+        .ff-icon-container {
+          width: 8px;
+          height: 8px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          border-radius: 4px;
+          background-color: transparent;
+          transition: background-color 0.3s ease;
+        }
+      }
+
+      .ff-expand-icon-container {
+        width: 24px;
+        height: 24px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        border-radius: 4px;
+        background-color: transparent;
+        transition: background-color 0.3s ease;
+      }
+    }
+
+    &:hover .ff-hover-icons {
+      opacity: 1;
+    }
+
+    &:hover .ff-icon-container,
+    &:hover .ff-top-icons .ff-icon-container {
+      border-radius: 4px;
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+
+    &:hover .ff-expand-icon-container {
+      background-color: var(--ff-icon-hover-bg-color);
+    }
+  }
+}

package/src/components/AttachImage/AttachImage.stories.tsx

@@ -1,22 +1,22 @@
-import { Meta, StoryObj } from '@storybook/react';
-import AttachImage from './AttachImage';
-import { AttachImageProps } from './types';
-
-const meta: Meta<typeof AttachImage> = {
-  title: 'Components/AttachImage',
-  component: AttachImage,
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-type Story = StoryObj<AttachImageProps>;
-
-export const Default: Story = {
-  args: {
-    imageSrc: 'src/assets/images/photo.png',
-    onExpandClick: () => alert('Expand clicked'),
-    onDeleteClick: () => alert('Delete clicked'),
-    onDownloadClick: () => alert('Download clicked'),
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import AttachImage from './AttachImage';
+import { AttachImageProps } from './types';
+
+const meta: Meta<typeof AttachImage> = {
+  title: 'Components/AttachImage',
+  component: AttachImage,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<AttachImageProps>;
+
+export const Default: Story = {
+  args: {
+    imageSrc: 'src/assets/images/photo.png',
+    onExpandClick: () => alert('Expand clicked'),
+    onDeleteClick: () => alert('Delete clicked'),
+    onDownloadClick: () => alert('Download clicked'),
+  },
+};