pixel-react 1.1.9 → 1.2.1

package/src/components/Drawer/Drawer.tsx

@@ -30,6 +30,8 @@ const Drawer: FC<DrawerProps> = ({
   onCloseIconClick,
   customHeader,
   customFooter,
+  tertiaryButtonProps = { left: {}, right: {} },
+  zIndex = 999,
 }: DrawerProps) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
 
@@ -72,11 +74,16 @@ const Drawer: FC<DrawerProps> = ({
         className={classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
           'ff-drawer--open': isOpen,
         })}
+        style={{ zIndex }}
       >
         {showHeader && (
-          <div className="ff-drawer-header">
+          <div
+            className={classNames('ff-drawer-header', {
+              'ff-custom-header': customHeader,
+            })}
+          >
             {customHeader ? (
-              customHeader
+              <div className="ff-custom-header">{customHeader}</div>
             ) : (
               <div className="ff-drawer-action-section">
                 <div className="ff-action-button">
@@ -106,9 +113,7 @@ const Drawer: FC<DrawerProps> = ({
                       className="ff-expand-collapse-button"
                       onClick={onClose}
                     >
-                      {backButtonIcon ? (
-                        backButtonIcon
-                      ) : (
+                      {backButtonIcon || (
                         <Icon
                           name="error"
                           height={16}
@@ -124,7 +129,7 @@ const Drawer: FC<DrawerProps> = ({
                   <div className="ff-close-icon">
                     <Icon
                       name="close"
-                      hoverEffect={false}
+                      hoverEffect={true}
                       onClick={onCloseIconClick || onClose}
                       height={6}
                       width={6}
@@ -146,7 +151,11 @@ const Drawer: FC<DrawerProps> = ({
         </div>
 
         {isFooterRequired && (
-          <div className="ff-drawer-footer">
+          <div
+            className={classNames('ff-drawer-footer', {
+              'ff-custom-footer': customFooter,
+            })}
+          >
             {customFooter || footerContent || (
               <>
                 <div className="button-container">
@@ -166,8 +175,22 @@ const Drawer: FC<DrawerProps> = ({
                       transparentBackground={true}
                     />
                   )}
+                  {tertiaryButtonProps.left?.label && (
+                    <Button
+                      {...tertiaryButtonProps.left}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                 </div>
                 <div className="button-container">
+                  {tertiaryButtonProps.right?.label && (
+                    <Button
+                      {...tertiaryButtonProps.right}
+                      variant="tertiary"
+                      transparentBackground={true}
+                    />
+                  )}
                   {secondaryButtonProps.label && (
                     <Button
                       {...secondaryButtonProps}

package/src/components/Drawer/Types.ts

@@ -109,4 +109,15 @@ export interface DrawerProps {
    * If provided, this will render in place of the default footer.
    */
   customFooter?: ReactNode;
+  /**
+   * Tertiary button properties (optional)
+   */
+  tertiaryButtonProps?: {
+    left?: BtnPropsCommon;   
+    right?: BtnPropsCommon;
+  };
+  /**
+   * Custom z-index for the drawer
+   */
+  zIndex?: number;
 }

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

@@ -6,6 +6,12 @@ const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
   component: Icon,
   tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'select' },
+      options: ['light', 'dark'],
+    },
+  },
 };
 
 type Story = StoryObj<typeof Icon>;
@@ -34,4 +40,25 @@ export const AllIcons: Story = {
   },
 };
 
+export const DarkVariantIcons: Story = {
+  args: {
+    name: 'hamburger_menu',
+    color: 'var(--ff-icon-color-dark-variant)',
+    variant: 'dark',
+    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)';
+
+    return (
+      <div style={{ backgroundColor, padding: '20px' }}>
+        <Icon {...args} color={iconColor} height={16} width={16} />
+      </div>
+    );
+  },
+};
+
+
+
 export default meta;

package/src/components/Icon/Icon.tsx

@@ -15,6 +15,7 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       hoverEffect = false,
       className = '',
       disabled = false,
+      variant = "light",
       ...props
     },
     ref
@@ -28,6 +29,8 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
       return null;
     }
 
+    const iconColor = variant === "dark" ? 'var(--ff-icon-color-dark-variant)'  : color;
+
     return (
       <span
         ref={ref}
@@ -36,11 +39,12 @@ const Icon = forwardRef<HTMLSpanElement, IconProps>(
         className={classNames('ff-icon-container', {
           'ff-icon-click': !!hoverEffect,
           'ff-icon-disabled': disabled,
+          'ff-icon-dark': variant === "dark",
           [className]: !!className,
         })}
         {...props}
       >
-        <IconComponent height="100%" width="100%" style={{ color: color }} />
+        <IconComponent height="100%" width="100%" style={{ color: iconColor }} />
       </span>
     );
   }

package/src/components/Icon/Icons.scss

@@ -1,13 +1,25 @@
-
 .ff-icon-container {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 4px;
+  box-sizing: content-box;
+  &.ff-icon-dark {
+    background-color: var(--brand-color);
+    &.ff-icon-click {
+      &:hover {
+        border-radius: 4px;
+        background-color: white;
+        svg path {
+          fill: var(--brand-color);
+        }
+      }
+    }
+  }
 }
 
 .ff-icon-click {
   cursor: pointer;
-  padding: 4px;
   box-sizing: content-box;
   &:hover {
     border-radius: 4px;

package/src/components/Icon/iconList.ts

@@ -113,6 +113,7 @@ import NotificationIcon from '../../assets/icons/notification_icon.svg?react';
 import NLPHelpIcon from '../../assets/icons/nlp_help_icon.svg?react';
 import UpdateIcon from '../../assets/icons/update_icon.svg?react';
 import AddFile from '../../assets/icons/add_file.svg?react';
+import EyeClosed from '../../assets/icons/eye_closed.svg?react';
 
 import CloneIcon from '../../assets/icons/clone_icon.svg?react';
 import MoveIcon from '../../assets/icons/move_icon.svg?react';
@@ -236,5 +237,6 @@ Components['linked_defects'] = LinkedDefects;
 Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
+Components['eye_closed'] = EyeClosed;
 
 export default Components;

package/src/components/Icon/types.ts

@@ -7,4 +7,5 @@ export interface IconProps {
   onClick?: (data?: any) => void;
   hoverEffect?: boolean;
   disabled?: boolean;
+  variant?: "dark" | "light";
 }

package/src/components/InputWithDropdown/types.ts

@@ -74,7 +74,7 @@ export interface InputWithDropdownProps {
   /**
    * onChange handler for dropdown changes
    */
-  onDropdownChangeHandler?: (option: Option) => void;
+  onDropdownChangeHandler?: (option: any) => void;
 
   /**
    * onInputBlurHandler action for input field

package/src/components/LabelEditTextField/LabelEditTextField.scss

@@ -0,0 +1,85 @@
+@use '../../assets/styles/fonts' as *;
+
+.ff-label-edit-text-field {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  .ff-label-text-field {
+    display: flex;
+    gap: 10px;
+  }
+  .ff-label-text-field-with-dropdown,
+  .ff-label-text-field-without-dropdown {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  .ff-label {
+    position: absolute;
+    top: 0;
+    left: 10px;
+    transform: translateY(-50%);
+    transition: all 0.2s ease;
+    color: var(--label-edit-text-label-color);
+    background: var(--label-edit-text-background-color);
+    padding: 0 4px;
+    @extend .font-size-8;
+  }
+  .ff-textfield-label {
+    @extend .ff-label;
+    top: 5px;
+  }
+
+  .display-text {
+    padding: 4px;
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .ff-text-field,
+  .dropdown {
+    border: 1px solid var(--label-edit-text-label-color);
+    outline: none;
+    width: fit-content;
+    @extend .fontSm;
+  }
+  .ff-text-field {
+    padding: 0 4px;
+    border-radius: 4px;
+  }
+  .ff-text-dropdown-field {
+    flex: 2;
+    border: 1px solid var(--label-edit-text-label-color);
+    border-radius: 4px 0 0 4px;
+    border-right: none;
+    border-width: thin;
+    padding-left: 5px;
+    @extend .fontSm;
+    &:focus-visible {
+      outline: none;
+    }
+  }
+  .dropdown {
+    border-radius: 0 4px 4px 0;
+    flex: 1;
+    height: inherit;
+  }
+
+  .ff-icon-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    .confirm-icon,
+    .cancel-icon {
+      cursor: pointer;
+    }
+  }
+
+  .error-text {
+    margin: 0;
+    color: var(--label-edit-error-text);
+  }
+}

package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import LabelEditTextField from './LabelEditTextField';
+import '../../assets/styles/_colors.scss';
+import './LabelEditTextField.scss';
+
+const meta: Meta<typeof LabelEditTextField> = {
+  title: 'Components/LabelEditTextField',
+  component: LabelEditTextField,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+type Story = StoryObj<typeof LabelEditTextField>;
+export const textField: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log('Confirmed input value:', inputValue);
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithOutLabel: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log('Confirmed input value:', inputValue);
+    };
+    return (
+      <LabelEditTextField
+        text="Verify The Function Of Categories For" //it might be state
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithDropdown: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+      console.log(
+        'Confirmed input value and dropdown value:',
+        inputValue,
+        dropdownValue
+      );
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For"
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        variant="textFieldWithDropdown"
+        dropdownData={[
+          { id: 1, value: 'web', label: 'Web & Mobile' },
+          { id: 2, value: 'desktop', label: 'Desktop' },
+        ]}
+        width="300px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+export const textFieldWithHighlight: Story = {
+  render: () => {
+    const handleConfirmAction = (inputValue: string, dropdownValue: string) => {
+      //DEMO: we are getting that value from LabelEditTextField
+
+      console.log(
+        'Confirmed input value and dropdown value:',
+        inputValue,
+        dropdownValue
+      );
+    };
+    return (
+      <LabelEditTextField
+        label="Add Module"
+        text="Verify The Function Of Categories For"
+        highlightText="The Function"
+        confirmIcon={{
+          name: 'update_icon',
+          onClick: () => {},
+        }}
+        cancelIcon={{
+          name: 'close',
+          onClick: () => {},
+        }}
+        variant="textFieldWithDropdown"
+        dropdownData={[
+          { id: 1, value: 'web', label: 'Web & Mobile' },
+          { id: 2, value: 'desktop', label: 'Desktop' },
+        ]}
+        width="400px"
+        height="22px"
+        confirmAction={handleConfirmAction}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/components/LabelEditTextField/LabelEditTextField.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useRef, useEffect, FC } from 'react';
+import './LabelEditTextField.scss';
+import { LabelEditTextFieldTypes } from './types';
+import Typography from '../Typography';
+import HighlightText from '../HighlightText';
+import Icon from '../Icon';
+
+const getErrorMessage = (
+  inputValue: string,
+  text: string,
+  customError?: string
+): string => {
+  if (inputValue === text) {
+    return 'No changes were made.';
+  } else if (!inputValue) {
+    return 'Text is required';
+  } else if (inputValue.length < 3) {
+    return 'Please enter at least 3 characters.';
+  } else if (customError) {
+    return customError;
+  }
+  return '';
+};
+const LabelEditTextField: FC<LabelEditTextFieldTypes> = ({
+  label,
+  text,
+  highlightText,
+  customError,
+  confirmIcon,
+  cancelIcon,
+  variant = 'textField',
+  dropdownData = [],
+  width = '300px',
+  height = '22px',
+  confirmAction,
+}) => {
+  const [isEditing, setIsEditing] = useState(false);
+  const [inputValue, setInputValue] = useState(text);
+  const [dropdownValue, setDropdownValue] = useState(
+    dropdownData[0]?.value ?? ''
+  );
+  const [showError, setShowError] = useState('');
+  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
+  const [isDropdownModified, setIsDropdownModified] = useState(false);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const cancelRef = useRef<HTMLDivElement | null>(null); // New ref for cancel icon
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setShowError('');
+  };
+
+  const handleConfirm = () => {
+    const errorMessage = getErrorMessage(inputValue, text, customError);
+
+    if (errorMessage && isEditing) {
+      setShowError(errorMessage);
+    } else {
+      setIsEditing(false);
+      setShowError('');
+      if (confirmAction) confirmAction(inputValue, dropdownValue);
+    }
+  };
+
+  const handleCancel = () => {
+    setInputValue(text);
+    setDropdownValue(dropdownData[0]?.value ?? '');
+    setIsEditing(false);
+    setShowError('');
+    setIsTextFieldModified(false);
+    setIsDropdownModified(false);
+  };
+
+  const handleTextFieldChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
+    setIsTextFieldModified(true);
+    setShowError('');
+  };
+
+  const handleDropdownChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setDropdownValue(e.target.value);
+    setIsDropdownModified(true);
+    setShowError('');
+  };
+
+  const handleBlur = (e: MouseEvent) => {
+    if (
+      containerRef.current &&
+      !containerRef.current.contains(e.target as Node) &&
+      cancelRef.current !== e.target // Exclude clicks on cancel icon
+    ) {
+      const errorMessage = getErrorMessage(inputValue, text, customError);
+
+      if (errorMessage && isEditing) {
+        setShowError(errorMessage);
+      } else {
+        setIsEditing(false);
+        setShowError('');
+      }
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleBlur);
+    return () => {
+      document.removeEventListener('click', handleBlur);
+    };
+  }, [inputValue]);
+
+  return (
+    <div
+      className="ff-label-edit-text-field"
+      ref={containerRef}
+      style={{ width }}
+    >
+      {isEditing ? (
+        <div className="ff-label-text-field">
+          {variant === 'textFieldWithDropdown' ? (
+            <div
+              className={`ff-label-text-field-with-dropdown ${
+                isEditing ? 'open' : ''
+              }`}
+              style={{ height }}
+            >
+              <input
+                type="text"
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`ff-text-dropdown-field ${
+                  isTextFieldModified ? 'modified' : ''
+                }`}
+                placeholder=" "
+                style={{
+                  width,
+                }}
+              />
+              {label && <label className="ff-label">{label}</label>}
+              <select
+                value={dropdownValue}
+                onChange={handleDropdownChange}
+                className={`dropdown ${isDropdownModified ? 'modified' : ''}`}
+              >
+                {dropdownData.map((item) => (
+                  <option key={item.id} value={item.value}>
+                    {item.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          ) : (
+            <div className="ff-label-text-field-without-dropdown">
+              <input
+                type="text"
+                value={inputValue}
+                onChange={handleTextFieldChange}
+                className={`ff-text-field ${
+                  isTextFieldModified ? 'modified' : ''
+                }`}
+                placeholder=" "
+                style={{ width, height }}
+              />
+              <label className="ff-textfield-label">{label}</label>
+            </div>
+          )}
+          <div className="ff-icon-container">
+            {confirmIcon && (
+              <Icon
+                color="var(--label-edit-confirm-icon)"
+                height={20}
+                width={20}
+                name={confirmIcon.name}
+                className="confirm-icon"
+                onClick={handleConfirm}
+              />
+            )}
+            {cancelIcon && (
+              <Icon
+                color="var(--label-edit-cancel-icon)"
+                height={12}
+                width={20}
+                name={cancelIcon.name}
+                className="cancel-icon"
+                onClick={handleCancel}
+                ref={cancelRef}
+              />
+            )}
+          </div>
+        </div>
+      ) : (
+        <span
+          className="display-text"
+          onDoubleClick={handleDoubleClick}
+          role="button"
+        >
+          <HighlightText text={inputValue} highlight={highlightText} />
+        </span>
+      )}
+      {showError && isEditing && (
+        <Typography as="p" fontSize={8} className="error-text">
+          {showError}
+        </Typography>
+      )}
+    </div>
+  );
+};
+
+export default LabelEditTextField;

package/src/components/LabelEditTextField/index.ts

@@ -0,0 +1 @@
+export { default } from './LabelEditTextField';

package/src/components/LabelEditTextField/types.ts

@@ -0,0 +1,38 @@
+export interface IconProps {
+  /** Name of the icon to be displayed. */
+  name: string;
+  /** Optional click handler function for the icon. */
+  onClick?: () => void;
+}
+export interface DropdownOption {
+  /** Unique identifier for the dropdown option. */
+  id: number;
+  /** Value associated with the dropdown option. */
+  value: string;
+  /** Label displayed for the dropdown option. */
+  label: string;
+}
+export interface LabelEditTextFieldTypes {
+  /** Label text displayed above the input field. */
+  label?: string;
+  /** Initial text displayed in the input field. */
+  text: string;
+  /** Text to be highlighted within the displayed text, if provided. */
+  highlightText?: string;
+  /** Custom error message to be displayed, if applicable. */
+  customError?: string;
+  /** Confirm icon properties including icon name and click handler. */
+  confirmIcon?: IconProps;
+  /** Cancel icon properties including icon name and click handler. */
+  cancelIcon?: IconProps;
+  /** Type of input field - standard text field or text field with a dropdown. */
+  variant?: 'textFieldWithDropdown' | 'textField';
+  /** Array of dropdown options used if the dropdown variant is selected. */
+  dropdownData?: DropdownOption[];
+  /** Width of the input field component. */
+  width?: string;
+  /** Height of the input field component. */
+  height?: string;
+  /** Function called when confirming input changes, with input and dropdown values as arguments. */
+  confirmAction?: (inputValue: string, dropdownValue: string) => void;
+}