pixel-react 1.5.5 → 1.5.7

package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss

@@ -1,36 +1,96 @@
-.excel-row {
-  height: 42px;
+.ff-excel-toolbar {
+  display: flex;
+  height: 32px;
   align-items: center;
 
-  .excel-toolbar {
+  .ff-excel-toolbar-divider {
+    width: 1px;
+    height: 24px;
+    background-color: var(--excel-toolbar-divider);
+    margin: 0 24px;
+    border-radius: 1px;
+    z-index: 1000;
+  }
+
+  .ff-excel-toolbar-font {
     display: flex;
-    align-items: center;
-    justify-content: start;
-    width: 100%;
-    gap: 10px;
+    gap: 8px;
+    justify-content: space-between;
+    .ff-excel-toolbar-font-family {
+      width: 120px;
+    }
+    .ff-excel-toolbar-font-size {
+      width: 56px;
+    }
   }
 
-  .excel-toolbar-center {
+  .ff-excel-toolbar-text {
+    width: 100px;
+    height: 24px;
     display: flex;
-    align-items: center;
-    justify-content: space-evenly;
-    width: 100%;
-    gap: 10px;
-    .menu-option {
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-underline {
       display: flex;
-      flex-direction: column;
       align-items: center;
-      justify-content: center;
-      cursor: pointer;
     }
   }
 
-  .excel-toolbar-menu {
+  .ff-excel-toolbar-icon {
+    width: 88px;
+    height: 24px;
     display: flex;
-    align-items: center;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-color {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+    }
   }
 
-  .excel-toolbar-hide {
-    display: none;
+  .ff-excel-toolbar-menu {
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 24px;
+    .ff-excel-toolbar-menu-option {
+      display: flex;
+      align-items: center;
+    }
   }
 }

package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx

@@ -6,7 +6,6 @@ import Icon from '../../Icon';
 import Select from '../../Select';
 import { CellBase } from '../ExcelFile/ExcelFileComponents';
 import * as Matrix from '../ExcelFile/ExcelFileComponents/matrix';
-import { Col, Row } from '../../GridLayout/GridLayout';
 import ColorBarSelector from '../ColorBarSelector/ColorBarSelector';
 
 interface ExcelToolBarProps {
@@ -46,17 +45,21 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
   setBorderType,
   setFormatePainter,
 }) => {
-  const [border, setBorder] = useState<string>('border-all-sides');
+  const [border, setBorder] = useState<string>('border-none');
   const [underLine, setUnderLine] = useState<string>('underline');
+  const [selectedFontFamily, setSelectedFontFamily] = useState<{
+    label: string;
+    value: string;
+  }>({
+    label: 'Times New Roman',
+    value: '"Times New Roman"',
+  });
   const [colorContainer, setColorPicker] = useState<ColorContainer>({
     color: 'var(--error-light)',
     backgroundColor: 'var(--error-light)',
     borderColor: 'var(--text-color)',
   });
 
-  const [formatePainterState, setFormatePainterState] =
-    useState<boolean>(false);
-
   const borderTypeIcon = [
     { value: 'border-all-sides', label: 'All Border', icon: 'all_borders' },
     { value: 'border-bottom', label: 'Border Bottom', icon: 'border_bottom' },
@@ -148,194 +151,203 @@ const ExcelToolBar: React.FC<ExcelToolBarProps> = ({
     };
   }, [colorContainer.backgroundColor]);
 
+  let getUnderlineIcon = () => {
+    const selectedIcon = underlineTypeIcon.find((e) => e.value === underLine);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+
+  let getBorderIcon = () => {
+    const selectedIcon = borderTypeIcon.find((e) => e.value === border);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+
   return (
-    <Row className="excel-row" gap="40px">
-      <Col size={3}>
-        <div className="excel-toolbar">
-          <Select
-            className="textType"
-            onChange={(e) => {
-              setFontFamily(data, e.value as string);
-            }}
-            optionsList={fontFamily}
-            selectedOption={{
-              label: 'Times New Roman',
-              value: '"Times New Roman"',
-            }}
-          />
-          <Select
-            className="selectTag"
-            onChange={(e) => {
-              setFontSize(data, e.value as string);
-            }}
-            optionsList={fontSize}
-          />
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
+    <div className="ff-excel-toolbar">
+      <div className="ff-excel-toolbar-font ">
+        <Tooltip placement="top" title={'Font Family'}>
+          <div className="ff-excel-toolbar-font-family">
+            <Select
+              onChange={(e) => {
+                setSelectedFontFamily({ label: e.label, value: e.value });
+                setFontFamily(data, e.label);
+              }}
+              required={false}
+              optionsList={fontFamily}
+              label=""
+              selectedOption={selectedFontFamily}
+            />
+          </div>
+        </Tooltip>
+        <Tooltip placement="top" title={'Font Size'}>
+          <div className="ff-excel-toolbar-font-size">
+            <Select
+              required={false}
+              label=""
+              onChange={(e) => setFontSize(data, e.value)}
+              optionsList={fontSize}
+              selectedOption={{
+                label: '11',
+                value: '11',
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-icon">
+        <Tooltip placement="top" title={'Text Left'}>
           <Icon
             hoverEffect
             disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'left');
-            }}
+            onClick={() => setTextAlign(data, 'left')}
             name="text_align_left"
           />
+        </Tooltip>
+        <Tooltip placement="top" title={'Text Center'}>
           <Icon
             hoverEffect
             disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'center');
-            }}
+            onClick={() => setTextAlign(data, 'center')}
             name="text_align_center"
           />
+        </Tooltip>
+
+        <Tooltip placement="top" title={'Text Right'}>
           <Icon
             hoverEffect
             disabled={toolbar === 'disable'}
-            onClick={() => {
-              setTextAlign(data, 'right');
-            }}
+            onClick={() => setTextAlign(data, 'right')}
             name="text_align_right"
           />
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
-          <Tooltip placement="top" title={'Bold'}>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-text">
+        <Tooltip placement="top" title={'Bold'}>
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => onBold(data)}
+            name="bold"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Italic'}>
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => onItalic(data)}
+            name="italic"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Underline Type'}>
+          <div className="ff-excel-toolbar-icon-underline">
             <Icon
               hoverEffect
               disabled={toolbar === 'disable'}
-              onClick={() => {
-                onBold(data);
+              onClick={() => setUnderlineType(data, underLine, true)}
+              name={getUnderlineIcon()}
+            />
+            <MenuOption
+              iconName="arrow_down"
+              iconSize={12}
+              options={underlineTypeIcon}
+              tooltipPlacement="top"
+              variant="light"
+              onOptionClick={(e) => {
+                let selectedValue = e.value as string;
+                setUnderlineType(data, selectedValue, true);
+                setUnderLine(selectedValue);
               }}
-              name="bold"
             />
-          </Tooltip>
-          <Tooltip placement="top" title={'Italic'}>
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-icon">
+        <Tooltip placement="top" title={'Format Painter'}>
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => {
+              setFormatePainter(data);
+            }}
+            name="formate_painter"
+          />
+        </Tooltip>
+        <Tooltip placement="top" title={'Text Color'}>
+          <div className="ff-excel-toolbar-icon-color">
             <Icon
               hoverEffect
+              width={12}
+              height={12}
               disabled={toolbar === 'disable'}
               onClick={() => {
-                onItalic(data);
+                setColor(data, colorContainer.color);
               }}
-              name="italic"
+              name="text_color"
+            />
+            <ColorBarSelector
+              disabled={toolbar === 'disable'}
+              getColorValue={getTextColor}
             />
-          </Tooltip>
-          <Tooltip placement="top" title={'Underline'}>
-            <div className="excel-toolbar-menu">
-              <Tooltip placement="top" title={'Formate Painter'}>
-                <div
-                  className={
-                    formatePainterState ? 'formate-painter-active' : ''
-                  }
-                >
-                  <Icon
-                    hoverEffect
-                    disabled={toolbar === 'disable'}
-                    onClick={() => {
-                      setUnderlineType(data, underLine, true);
-                    }}
-                    name="underline"
-                  />
-                </div>
-              </Tooltip>
-              <MenuOption
-                iconName="arrow_down"
-                options={underlineTypeIcon}
-                tooltipTitle="Border Type"
-                tooltipPlacement="top"
-                variant="light"
-                onOptionClick={(e) => {
-                  setUnderlineType(data, e.value as string, true);
-                  setUnderLine(e.value as string);
-                }}
-              />
-            </div>
-          </Tooltip>
-        </div>
-      </Col>
-      <Col size={2}>
-        <div className="excel-toolbar-center">
-          <Tooltip placement="top" title={'Formate Painter'}>
-            <div
-              className={formatePainterState ? 'formate-painter-active' : ''}
-            >
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setFormatePainter(data);
-                  setFormatePainterState((prev) => !prev);
-                }}
-                name="formate_painter"
-              />
-            </div>
-          </Tooltip>
-          <div className="menu-option">
-            <Tooltip placement="top" title={'Text Color'}>
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setColor(data, colorContainer.color);
-                }}
-                name="text_color"
-              />
-              <ColorBarSelector
-                disabled={toolbar === 'disable'}
-                getColorValue={getTextColor}
-              />
-            </Tooltip>
           </div>
-          <div className="menu-option">
-            <Tooltip placement="top" title={'Background Color'}>
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setBackgroundColor(data, colorContainer.backgroundColor);
-                }}
-                name="fill_color"
-              />
-            </Tooltip>
+        </Tooltip>
+        <Tooltip placement="top" title={'Background Color'}>
+          <div className="ff-excel-toolbar-icon-color">
+            <Icon
+              hoverEffect
+              width={12}
+              height={12}
+              disabled={toolbar === 'disable'}
+              onClick={() =>
+                setBackgroundColor(data, colorContainer.backgroundColor)
+              }
+              name="fill_color"
+            />
             <ColorBarSelector
               disabled={toolbar === 'disable'}
               getColorValue={getBackgroundColor}
             />
           </div>
-        </div>
-      </Col>
-      <Col size={1}>
-        <div className="excel-toolbar-menu">
-          <Tooltip placement="top" title={'Formate Painter'}>
-            <div
-              className={formatePainterState ? 'formate-painter-active' : ''}
-            >
-              <Icon
-                hoverEffect
-                disabled={toolbar === 'disable'}
-                onClick={() => {
-                  setBorderType(data, border, 'black');
-                }}
-                name="all_borders"
-              />
-            </div>
-          </Tooltip>
-          <MenuOption
-            iconName="arrow_down"
-            options={borderTypeIcon}
-            tooltipTitle="Border Type"
-            tooltipPlacement="top"
-            variant="light"
-            onOptionClick={(e) => {
-              setBorder(e.value as string);
-              setBorderType(data, e.value as string, 'black');
-            }}
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-menu">
+        <Tooltip placement="top" title={'Border Type'}>
+          <div className="ff-excel-toolbar-menu-option">
+            <Icon
+              hoverEffect
+              disabled={toolbar === 'disable'}
+              onClick={() => setBorderType(data, border, 'black')}
+              name={getBorderIcon()}
+            />
+            <MenuOption
+              iconName="arrow_down"
+              iconSize={12}
+              options={borderTypeIcon}
+              tooltipPlacement="top"
+              variant="light"
+              onOptionClick={(e) => {
+                let selectedValue = e.value as string;
+                setBorderType(data, selectedValue, 'black');
+                setBorder(selectedValue);
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div className="ff-excel-toolbar-divider"></div>
+      <div className="ff-excel-toolbar-menu">
+        <Tooltip placement="top" title={'Formula'}>
+          <Icon
+            hoverEffect
+            disabled={toolbar === 'disable'}
+            onClick={() => setBorderType(data, border, 'black')}
+            name="formula_icon"
           />
-        </div>
-      </Col>
-    </Row>
+        </Tooltip>
+      </div>
+    </div>
   );
 };
 

package/src/components/FileDropzone/Dropzone.tsx

@@ -13,6 +13,7 @@ const Dropzone: FC<DroppableProps> = ({
   getRootProps,
   getInputProps,
   isDragActive = false,
+  height = 188,
 }) => {
   return (
     <div
@@ -20,6 +21,7 @@ const Dropzone: FC<DroppableProps> = ({
       className={classNames('ff-file-dropzone', {
         'ff-file-dropzone--active': isDragActive,
       })}
+      style={{height: height}}
     >
       <div className="ff-file-dropzone-content__icon">{icon}</div>
       <div className="ff-file-dropzone-content__labels">

package/src/components/FileDropzone/FileDropzone.scss

@@ -16,10 +16,9 @@
 
 .ff-file-dropzone-wrapper {
   @include column-flex-gap(10px);
+  
 
   .ff-file-dropzone {
-    width: 640px;
-    height: 188px;
     padding: 16px 0;
     border-radius: 8px;
     background: var(--file-dropzone-default-color);

package/src/components/FileDropzone/FileDropzone.stories.tsx

@@ -2,6 +2,7 @@ import { StoryObj, Meta } from '@storybook/react';
 import FileDropzone from './FileDropzone';
 import Toaster from '../Toast';
 import { useState } from 'react';
+import React from 'react';
 
 const meta: Meta<typeof FileDropzone> = {
   title: 'Components/FileDropzone',
@@ -22,6 +23,8 @@ const defaultArgs = {
   maxSizeErrorMessage: 'Max file size limit of 5MB exceeded',
   invalidFileMessage: 'Invalid file format',
   fileExistMessage: 'File already exist with same name and type',
+  width: 700,
+  height: 350,
 };
 
 export const Primary: Story = {

package/src/components/FileDropzone/FileDropzone.tsx

@@ -8,7 +8,9 @@ import Dropzone from './Dropzone';
 import FilePreview from './FilePreview';
 
 const FileDropzone: React.FC<FileDropzoneProps> = ({
-  icon = <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />,
+  icon = (
+    <Icon name="dropzone_icon" height={80} width={80} hoverEffect={false} />
+  ),
   primaryLabel = 'Drag & drop your file to upload',
   secondaryLabel = 'Or',
   buttonLabel = 'Choose File to upload',
@@ -21,6 +23,8 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   invalidFileMessage = '',
   fileExistMessage = '',
   validateMIMEType = false,
+  width = 640,
+  height = 188,
 }) => {
   const {
     getRootProps,
@@ -71,7 +75,7 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
   );
 
   return (
-    <div className="ff-file-dropzone-wrapper">
+    <div className="ff-file-dropzone-wrapper" style={{ width: `${width}px` }}>
       <Dropzone
         icon={icon}
         primaryLabel={primaryLabel}
@@ -80,9 +84,13 @@ const FileDropzone: React.FC<FileDropzoneProps> = ({
         getRootProps={getRootProps}
         getInputProps={getInputProps}
         isDragActive={isDragActive}
+        height={`${height}px`}
       />
 
-      <div className={'ff-file-details-wrapper'}>
+      <div
+        className={'ff-file-details-wrapper'}
+        style={{ width: `${width}px` }}
+      >
         {!checkEmpty(acceptedFiles) && (
           <div className="ff-file-details">{acceptedFilesList}</div>
         )}

package/src/components/FileDropzone/types.ts

@@ -53,6 +53,10 @@ export interface FileDropzoneProps {
    *  To validate file type based on MIME type but mandatorily need to pass MIME type in accept props
    **/
   validateMIMEType?: boolean;
+
+  width?: number | string;
+
+  height?: number | string;
 }
 export interface FileState {
   accepted: File[];
@@ -103,6 +107,7 @@ export interface DroppableProps {
   getRootProps: () => any;
   getInputProps: () => any;
   isDragActive: boolean;
+  height: number | string;
 }
 
 export interface FilePreviewProps {

package/src/components/Icon/Icon.stories.tsx

@@ -45,11 +45,14 @@ export const DarkVariantIcons: Story = {
     name: 'hamburger_menu',
     color: 'var(--ff-icon-color-dark-variant)',
     variant: 'dark',
-    hoverEffect: true, 
+    hoverEffect: true,
   },
   render: (args) => {
     const backgroundColor = args.variant === 'dark' ? '#000' : '#fff';
-    const iconColor = args.variant === 'dark' ? 'var(--ff-icon-color-dark-variant)' : 'var(--brand-color)';
+    const iconColor =
+      args.variant === 'dark'
+        ? 'var(--ff-icon-color-dark-variant)'
+        : 'var(--brand-color)';
 
     return (
       <div style={{ backgroundColor, padding: '20px' }}>
@@ -59,6 +62,4 @@ export const DarkVariantIcons: Story = {
   },
 };
 
-
-
 export default meta;

package/src/components/Icon/iconList.ts

@@ -219,6 +219,8 @@ import NoData from '../../assets/icons/no_data.svg?react';
 import AddUser from '../../assets/icons/add_user.svg?react';
 import RemoveUser from '../../assets/icons/remove_user.svg?react';
 import AddToArchive from '../../assets/icons/add_archive.svg?react';
+import DashboardIcon from '../../assets/icons/dashboard_icon.svg?react'; //TODO:this is temporary icon
+import InfoUser from '../../assets/icons/info_user.svg?react';
 
 Components['success'] = ToastSuccessIcon;
 Components['alert'] = Alert;
@@ -434,5 +436,7 @@ Components['no_data'] = NoData;
 Components['add_user'] = AddUser;
 Components['add_to_archive'] = AddToArchive;
 Components['remove_user'] = RemoveUser;
+Components['dashboard_icon'] = DashboardIcon;//TODO:this is temporary icon
+Components['info_user'] = InfoUser;
 
 export default Components;