pixel-react 1.1.4 → 1.1.5

package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx

@@ -1,79 +1,49 @@
 import { useState } from 'react';
 import Icon from '../Icon';
 import Typography from '../Typography';
-import { ffid } from '../../utils/ffID/ffid';
 import { truncateText } from '../../utils/truncateText/truncateText';
 import './AllProjectsDropdown.scss';
 import classNames from 'classnames';
+import { AllProjectsDropdownProps, optionsType } from './types';
 
-const AllProjectsDropdown = () => {
-  const [showOptions, setShowOptions] = useState(false);
-  const [selectedOptions, setSelectedOptions] = useState({
+const AllProjectsDropdown = ({
+  onClick = () => {},
+  options,
+  selectedOption = {
     label: 'All Projects',
     value: 'All Projects',
     iconName: 'all_projects',
-  });
+  },
+}: AllProjectsDropdownProps) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [selectedOptions, setSelectedOptions] = useState(selectedOption);
   const [search, setSearch] = useState(true);
 
-  let options = [
-    {
-      label: 'All Projects',
-      value: 'All Projects',
-      iconName: 'all_projects',
-    },
-    {
-      label: 'Pantaloon Project',
-      value: 'Pantaloon Web Project',
-      iconName: 'web_icon',
-    },
-    {
-      label: 'Mobile Project',
-      value: 'Mobile Project',
-      iconName: 'mobile_icon',
-    },
-    {
-      label: 'Web & Mobile Project',
-      value: 'Web & Mobile Project',
-      iconName: 'web&mobile_icon',
-    },
-    {
-      label: 'Sales Force',
-      value: 'Sales Force',
-      iconName: 'sales_force',
-    },
-    {
-      label: 'MS Dynamic',
-      value: 'MS Dynamic',
-      iconName: 'ms_dynamic',
-    },
-    {
-      label: 'Web Service',
-      value: 'Web Service',
-      iconName: '',
-    },
-  ];
-
-  const handleSelect = () => {
+  const handleShowOption = () => {
     setShowOptions(!showOptions);
   };
 
-  const handleSelectOption = (option: {
-    label: string;
-    value: string;
-    iconName: string;
-  }) => {
+  const handleSelectOption = (option: optionsType) => {
     setSelectedOptions(option);
     setShowOptions(false);
+    () => onClick(option);
   };
 
   const handleInput = () => {
     setSearch(false);
   };
 
+  const handleSearchEnter = () => {
+    setSearch(false);
+  };
+  const handleSearchLeave = () => {
+    setSearch(true);
+  };
+
   return (
     <div className={classNames('ff-all-project')}>
       <div
-        onClick={handleSelect}
+        onClick={handleShowOption}
         className={classNames('ff-all-project-dropdown')}
       >
         <Typography
@@ -83,7 +53,7 @@ const AllProjectsDropdown = () => {
           fontWeight={'regular'}
           className={classNames('projects-label')}
         >
-          {truncateText(selectedOptions.label, 12)}
+          {truncateText(selectedOptions?.label, 12)}
         </Typography>
         <div className={classNames('label-icon')}>
           <Icon
@@ -96,11 +66,15 @@ const AllProjectsDropdown = () => {
       </div>
       {showOptions && (
         <div className={classNames('ff-dropdown')}>
-          <div className={classNames('ff-search')}>
+          <div
+            className={classNames('ff-search')}
+            onMouseEnter={() => handleSearchEnter()}
+            onMouseLeave={() => handleSearchLeave()}
+          >
             {search && <Icon name="search" height={8} width={8} />}
             <input
               type="text"
-              placeholder="Search Project"
+              placeholder={`${search ? 'Search Project' : ''}`}
               onClick={() => handleInput()}
             />
           </div>
@@ -110,9 +84,9 @@ const AllProjectsDropdown = () => {
               `${options.length > 4 ? 'scroll' : ''}`
             )}
           >
-            {options.map((option) => (
+            {options.map((option, index) => (
               <div
-                key={ffid()}
+                key={index}
                 onClick={() => handleSelectOption(option)}
                 className={classNames(
                   'projects-options',
@@ -133,7 +107,7 @@ const AllProjectsDropdown = () => {
                     }
                   />
                 </div>
-                <Typography key={ffid()} as={'div'} lineHeight={'30px'}>
+                <Typography key={index} as={'div'} lineHeight={'30px'}>
                   {option.label}
                 </Typography>
               </div>

package/src/components/AllProjectsDropdown/types.ts

@@ -0,0 +1,10 @@
+export interface optionsType {
+  label: string;
+  value: string;
+  iconName: string;
+}
+export interface AllProjectsDropdownProps {
+  options: optionsType[];
+  onClick: (option: optionsType) => void;
+  selectedOption: optionsType;
+}

package/src/components/Button/Button.scss

@@ -92,6 +92,10 @@
       background: $delete-button-hover;
     }
   }
+  &--warning {
+    background: var(--warning-button-color);
+    border: var(--warning-button-border);
+  }
 
   &--secondary {
     &:before {

package/src/components/Button/Button.stories.tsx

@@ -45,6 +45,13 @@ export const Delete: Story = {
     variant: 'delete',
   },
 };
+export const Warning: Story = {
+  args: {
+    ...defaultArgs,
+    label: 'Warning',
+    variant: 'warning',
+  },
+};
 export const PrimaryWithIcon: Story = {
   args: {
     ...defaultArgs,

package/src/components/Button/types.ts

@@ -4,7 +4,7 @@ export interface ButtonProps {
   /**
    * Variant of the button
    */
-  variant: 'primary' | 'secondary' | 'tertiary' | 'delete';
+  variant: 'primary' | 'secondary' | 'tertiary' | 'delete'| 'warning';
   /**
    * What background color to use
    */
@@ -61,5 +61,5 @@ export interface ButtonProps {
    * Give icon name availble in storybook that to be on left side of button
    */
   iconPosition?: 'left' | 'right';
-  transparentBackground?:boolean;
+  transparentBackground?: boolean;
 }

package/src/components/Drawer/Drawer.scss

@@ -9,10 +9,9 @@
   }
 
   .ff-drawer {
-    height: 100vh;
     position: fixed;
     right: 0;
-    top: 0;
+    top: 80px;
     bottom: 0;
     min-width: 450px;
     background-color: var(--primary-button-text-color);
@@ -42,14 +41,14 @@
     &--x-large {
       transition: all 0.4s ease-in-out;
       border-radius: 5px;
-      border: 2px solid var(--border-color);
+      border: 1px solid var(--border-color);
     }
 
     .ff-drawer-header {
-      padding: 10px 8px 10px 8px;
+      padding: 4px 8px 4px 8px;
       display: flex;
       gap: 10px;
-      border-bottom: 2px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
 
       .ff-drawer-title {
         @extend .fontSm;
@@ -59,6 +58,15 @@
         align-items: center;
         gap: 12px;
       }
+      .ff-close-icon {
+        height: 16px;
+        width: 16px;
+        background-color: var(--button-bg-color);
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
 
       .ff-drawer-action-section {
         width: 100%;
@@ -66,14 +74,17 @@
         align-items: center;
         justify-content: space-between;
         gap: 12px;
+        height: 24px;
 
         .ff-action-button {
           display: flex;
           align-items: center;
-          gap: 12px;
+          gap: 5px;
 
           .ff-expand-collapse-button {
             cursor: pointer;
+            height: 24px;
+            width: 24px;
             background-color: var(--button-bg-color);
             outline: none;
             border: none;
@@ -82,8 +93,7 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            border-radius: 6px;
-            padding: 6px;
+            border-radius: 8px;
           }
         }
       }
@@ -100,19 +110,20 @@
     }
 
     .ff-drawer-footer {
+      height: 24px;
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
-      padding: 5px 16px 5px 16px;
+      padding: 4px 8px 4px 8px;
       display: flex;
       justify-content: space-between;
-      border-top: 2px solid var(--drawer-footer-border);
+      border-top: 1px solid var(--drawer-footer-border);
 
       .button-container {
         display: flex;
         justify-content: flex-end;
-        gap: 16px;
+        gap: 10px;
       }
     }
   }

package/src/components/Drawer/Drawer.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import Drawer from './Drawer';
 import { useState } from 'react';
 import Button from '../Button';
+import Icon from '../Icon';
 
 const meta: Meta<typeof Drawer> = {
   title: 'Components/Drawer',
@@ -20,6 +21,7 @@ const defaultArgs = {
   title: 'Drawer Title',
   showEditButton: false,
   _isExpanded: false,
+  showHeader: true,
   onClose: () => {},
   primaryButtonProps: {
     label: 'Create',
@@ -49,12 +51,51 @@ const defaultArgs = {
   overlay: false,
   isFooterRequired: true,
   footerContent: null,
+  backButtonIcon: <Icon name="error" height={16} width={16} />,
+  onCloseIconClick: () => alert('Close icon clicked!'),
 };
 
 export const Default: Story = {
   args: {
     ...defaultArgs,
     size: 'medium',
+    showHeader: true,
+  },
+};
+export const WithoutHeader: Story = {
+  args: {
+    ...defaultArgs,
+    showHeader: false,
+    size: 'medium',
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomHeader: Story = {
+  args: {
+    ...defaultArgs,
+    customHeader: (
+      <div>
+        <h3>My Custom Header</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
+  },
+};
+export const WithCustomFooter: Story = {
+  args: {
+    ...defaultArgs,
+    customFooter: (
+      <div>
+        <h3>My Custom Footer</h3>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: { disable: true },
   },
 };
 

package/src/components/Drawer/Drawer.tsx

@@ -25,6 +25,11 @@ const Drawer: FC<DrawerProps> = ({
   _isExpanded = false,
   isBackButtonVisible = false,
   _isCloseModalButtonVisible = true,
+  showHeader = true,
+  backButtonIcon,
+  onCloseIconClick,
+  customHeader,
+  customFooter,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
 
@@ -68,45 +73,69 @@ const Drawer: FC<DrawerProps> = ({
           'ff-drawer--open': isOpen,
         })}
       >
-        <div className="ff-drawer-header">
-          <div className="ff-drawer-action-section">
-            <div className="ff-action-button">
-              {showEditButton && (
-                <button className="ff-expand-collapse-button" onClick={onEdit}>
-                  {/* icons are not provided yet so using dummy icons */}
-                  <Icon name="logo" height={16} width={16} />
-                  Edit
-                </button>
-              )}
-              {_isExpanded && (
-                <button
-                  className="ff-expand-collapse-button"
-                  onClick={toggleExpand}
-                >
-                  <Icon
-                    name={isExpanded ? 'logo' : 'logo'}
-                    height={16}
-                    width={16}
-                  />
-                </button>
-              )}
-              {isBackButtonVisible && (
-                <button className="ff-expand-collapse-button" onClick={onClose}>
-                  <Icon
-                    name="error"
-                    height={16}
-                    width={16}
-                    hoverEffect={false}
-                  />
-                </button>
-              )}
-              <div className="ff-drawer-title">{title}</div>
-            </div>
-            {_isCloseModalButtonVisible && (
-              <Icon name="close" hoverEffect={false} onClick={onClose} />
+        {showHeader && (
+          <div className="ff-drawer-header">
+            {customHeader ? (
+              customHeader
+            ) : (
+              <div className="ff-drawer-action-section">
+                <div className="ff-action-button">
+                  {showEditButton && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onEdit}
+                    >
+                      <Icon name="logo" height={16} width={16} />
+                      Edit
+                    </button>
+                  )}
+                  {_isExpanded && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={toggleExpand}
+                    >
+                      <Icon
+                        name={isExpanded ? 'logo' : 'logo'}
+                        height={16}
+                        width={16}
+                      />
+                    </button>
+                  )}
+                  {isBackButtonVisible && (
+                    <button
+                      className="ff-expand-collapse-button"
+                      onClick={onClose}
+                    >
+                      {backButtonIcon ? (
+                        backButtonIcon
+                      ) : (
+                        <Icon
+                          name="error"
+                          height={16}
+                          width={16}
+                          hoverEffect={false}
+                        />
+                      )}
+                    </button>
+                  )}
+                  {title && <div className="ff-drawer-title">{title}</div>}
+                </div>
+                {_isCloseModalButtonVisible && (
+                  <div className="ff-close-icon">
+                    <Icon
+                      name="close"
+                      hoverEffect={false}
+                      onClick={onCloseIconClick || onClose}
+                      height={6}
+                      width={6}
+                      color="var(--tabs-label-active-color)"
+                    />
+                  </div>
+                )}
+              </div>
             )}
           </div>
-        </div>
+        )}
 
         <div
           className={classNames('ff-drawer-body', {
@@ -118,9 +147,7 @@ const Drawer: FC<DrawerProps> = ({
 
         {isFooterRequired && (
           <div className="ff-drawer-footer">
-            {footerContent ? (
-              footerContent
-            ) : (
+            {customFooter || footerContent || (
               <>
                 <div className="button-container">
                   {leftSecondaryButtonProps.label && (

package/src/components/Drawer/Types.ts

@@ -48,7 +48,7 @@ export interface DrawerProps {
   /**
    * Header title for the drawer
    */
-  title: string | ReactNode;
+  title?: string | ReactNode;
   /**
    * To show the edit button on the header
    */
@@ -85,4 +85,28 @@ export interface DrawerProps {
    * footer Content
    */
   footerContent?: ReactNode;
+  /**
+   * To show or hide the header
+   */
+  showHeader?: boolean;
+  /**
+   *  Custom back button icon
+   * The icon to display for the back button.
+   * If not provided, a default icon will be used.
+   */
+  backButtonIcon?: ReactNode; 
+  /**
+   * Callback function when the close icon is clicked
+   */
+  onCloseIconClick?: () => void;
+   /**
+   * Custom header for the drawer, replacing the default header.
+   * If provided, this will render in place of the default header.
+   */
+   customHeader?: ReactNode;
+   /**
+   * Custom footer for the drawer, replacing the default footer.
+   * If provided, this will render in place of the default footer.
+   */
+  customFooter?: ReactNode;
 }

package/src/components/GridLayout/GridLayout.scss

@@ -1,5 +1,3 @@
-
-
 /* Container */
 .ff-container {
   margin-right: auto;

package/src/components/GridLayout/GridLayout.tsx

@@ -1,32 +1,39 @@
-
 import React from 'react';
 import './GridLayout.scss';
 import { ContainerProps, RowProps, ColProps } from './types';
-import cx from 'classnames'
+import cx from 'classnames';
 
 export const Container: React.FC<ContainerProps> = ({
   children,
   fluid = false,
   gap = '0px',
-  className=''
+  className = '',
 }) => {
   const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return (
-    <div className={cx(containerClassName,className)} style={{ gap }}>
+    <div className={cx(containerClassName, className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Row: React.FC<RowProps> = ({ children, gap = '0px',className='' }) => {
+export const Row: React.FC<RowProps> = ({
+  children,
+  gap = '0px',
+  className = '',
+}) => {
   return (
-    <div className={cx("ff-row",className)} style={{ gap }}>
+    <div className={cx('ff-row', className)} style={{ gap }}>
       {children}
     </div>
   );
 };
 
-export const Col: React.FC<ColProps> = ({ children, size = 12,className='' }) => {
+export const Col: React.FC<ColProps> = ({
+  children,
+  size = 12,
+  className = '',
+}) => {
   const colClassName = `ff-col-${size}`;
-  return <div className={cx(colClassName,className)}>{children}</div>;
+  return <div className={cx(colClassName, className)}>{children}</div>;
 };

package/src/components/Icon/Icon.tsx

@@ -1,43 +1,49 @@
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import Components from './iconList';
 import './Icons.scss';
 import { IconProps } from './types';
 
-const Icon = ({
-  name,
-  height,
-  width,
-  onClick = () => {},
-  color = '#808080',
-  hoverEffect = false,
-  className = '',
-  disabled = false,
-  ...props
-}: IconProps) => {
-  const IconComponent = Components[name];
+const Icon = forwardRef<HTMLSpanElement, IconProps>(
+  (
+    {
+      name,
+      height,
+      width,
+      onClick = () => {},
+      color = 'var(--brand-color)', // Default color
+      hoverEffect = false,
+      className = '',
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
+    const IconComponent = Components[name];
 
-  const iconHeight = height ? height : 16;
-  const iconWidth = width ? width : 16;
-
-  if (!IconComponent) {
-    return null;
-  }
+    const iconHeight = height || 16;
+    const iconWidth = width || 16;
 
+    if (!IconComponent) {
+      return null;
+    }
 
-  return (
-    <span
-      onClick={disabled ? () => {} : onClick}
-      style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
-      className={classNames('ff-icon-container', {
-        'ff-icon-click': !!hoverEffect,
-        'ff-icon-disabled': disabled,
-        [className]: !!className,
-      })}
-      {...props}
-    >
-      <IconComponent height="100%" width="100%" style={{ color: color }} />
-    </span>
-  );
-};
+    return (
+      <span
+        ref={ref}
+        onClick={disabled ? () => {} : onClick}
+        style={{ height: `${iconHeight}px`, width: `${iconWidth}px` }}
+        className={classNames('ff-icon-container', {
+          'ff-icon-click': !!hoverEffect,
+          'ff-icon-disabled': disabled,
+          [className]: !!className,
+        })}
+        {...props}
+      >
+        <IconComponent height="100%" width="100%" style={{ color: color }} />
+      </span>
+    );
+  }
+);
 
 export default Icon;