pixel-react 1.2.2 → 1.2.4

package/src/components/Form/Form.stories.tsx

@@ -5,6 +5,8 @@ import Select from '../Select';
 import { Meta, StoryObj } from '@storybook/react/*';
 import Typography from '../Typography';
 import './Form.scss';
+import Checkbox from '../Checkbox';
+import TextArea from '../TextArea';
 
 type FormValues = {
   username: string;
@@ -12,6 +14,8 @@ type FormValues = {
   password: string;
   gender: string;
   language: string;
+  check: boolean;
+  description: string;
 };
 
 const meta: Meta<typeof Forms> = {
@@ -33,6 +37,8 @@ export const WithDefaultValues: Story = {
       password: '',
       gender: '',
       language: '',
+      check: false,
+      description: '',
     };
 
     const onSubmit = (data: FormValues) => {
@@ -56,8 +62,12 @@ export const WithDefaultValues: Story = {
                 <Typography as="label">username</Typography>
                 <Input
                   type="text"
+                  disabled={false}
                   {...register('username', {
-                    required: 'Username is required',
+                    required: {
+                      value: true,
+                      message: 'Username is required',
+                    },
                     minLength: {
                       value: 3,
                       message: 'Username must be at least 3 characters',
@@ -72,7 +82,7 @@ export const WithDefaultValues: Story = {
                   value={watch('username')}
                   onChange={(e) =>
                     setValue('username', e.target.value, {
-                      shouldValidate: false,
+                      shouldValidate: true,
                     })
                   }
                   onBlur={() => {
@@ -87,8 +97,9 @@ export const WithDefaultValues: Story = {
 
                 <Input
                   type="email"
+                  disabled={false}
                   {...register('email', {
-                    required: 'Email is required',
+                    required: { value: true, message: 'Email is required' },
                     pattern: {
                       value: /^\S+@\S+\.\S+$/,
                       message: 'Please enter a valid email',
@@ -98,7 +109,7 @@ export const WithDefaultValues: Story = {
                   helperText={errors.email?.message}
                   value={watch('email')}
                   onChange={(e) =>
-                    setValue('email', e.target.value, { shouldValidate: false })
+                    setValue('email', e.target.value, { shouldValidate: true })
                   }
                   onBlur={() => {
                     trigger('email');
@@ -109,11 +120,14 @@ export const WithDefaultValues: Story = {
               {/* Password Field */}
               <div>
                 <Typography as="label">Password</Typography>
-
                 <Input
+                  disabled={false}
                   type="password"
                   {...register('password', {
-                    required: 'Password is required',
+                    required: {
+                      value: true,
+                      message: 'Password is required',
+                    },
                     minLength: {
                       value: 6,
                       message: 'Password must be at least 6 characters',
@@ -134,9 +148,8 @@ export const WithDefaultValues: Story = {
               </div>
 
               {/* Gender Field */}
-              <div>
+              <div className="ff-radio">
                 <Typography as="label">Gender</Typography>
-
                 <RadioGroup
                   options={[
                     {
@@ -152,14 +165,23 @@ export const WithDefaultValues: Story = {
                       value: 'other',
                     },
                   ]}
+                  {...register('gender', {
+                    required: {
+                      value: true,
+                      message: 'select the Gender',
+                    },
+                  })}
                   selectedValue={watch('gender')}
                   onChange={(option) => {
-                    setValue('gender', option.value);
+                    setValue('gender', option.value, {
+                      shouldValidate: true,
+                    });
                   }}
-                  name="gender"
                 />
                 {errors?.gender && (
-                  <span className="ff-error">{errors.gender.message}</span>
+                  <Typography className="ff-error">
+                    {errors.gender.message}
+                  </Typography>
                 )}
               </div>
 
@@ -177,17 +199,68 @@ export const WithDefaultValues: Story = {
                     value: watch('language') || '',
                   }}
                   {...register('language', {
-                    required: 'Programming language is required',
+                    required: {
+                      value: true,
+                      message: 'language is required',
+                    },
                   })}
                   onChange={(option) =>
                     setValue('language', option.value, { shouldValidate: true })
                   }
                 />
                 {errors?.gender && (
-                  <span className="ff-error">{errors?.language?.message}</span>
+                  <Typography className="ff-error">
+                    {errors?.language?.message}
+                  </Typography>
                 )}
               </div>
 
+              {/* TextArea Field */}
+              <div className="ff-textarea">
+                <TextArea
+                  label="Description"
+                  value={watch('description')}
+                  {...register('description', {
+                    required: 'Description is required',
+                    maxLength: {
+                      value: 30,
+                      message: 'Maximum length is 200 characters',
+                    },
+                  })}
+                  error={!!errors?.description?.message}
+                  onChange={(e) => {
+                    setValue('description', e.target.value, {
+                      shouldValidate: true,
+                    });
+                  }}
+                  onBlur={() => {
+                    trigger('description');
+                  }}
+                />
+              </div>
+              {/* check box Field */}
+              <div className="ff-check">
+                <Checkbox
+                  label="terms condition"
+                  disabled={false}
+                  {...register('check', {
+                    required: {
+                      value: true,
+                      message: 'Please select the checkbox',
+                    },
+                  })}
+                  onChange={(e) => {
+                    setValue('check', e.target.checked, {
+                      shouldValidate: true,
+                    });
+                  }}
+                />
+                {errors?.check && (
+                  <Typography className="ff-error">
+                    {errors.check.message}
+                  </Typography>
+                )}
+              </div>
               {/* Buttons */}
               <div className="ff-button-layout">
                 <button type="submit">Submit</button>

package/src/components/Form/Forms.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Form from './Form';
 
 interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
+  id?:'string',
   onSubmit: Form.SubmitHandler<T>;
   children: (methods: ReturnType<typeof Form.useForm<T>>) => React.ReactNode;
 }
@@ -9,6 +10,7 @@ interface FormProps<T extends Form.FieldValues> extends Form.UseFormProps<T> {
 const Forms = <T extends Form.FieldValues>({
   onSubmit,
   children,
+  id,
   ...rest
 }: FormProps<T>) => {
   const methods = Form.useForm<T>(rest);

package/src/components/Icon/iconList.ts

@@ -114,6 +114,9 @@ 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 AttachmentIcon from '../../assets/icons/attachment_icon.svg?react';
+import VariableIcon from '../../assets/icons/variable_icon.svg?react';
+import AuthorizationIcon from '../../assets/icons/authorization_icon.svg?react';
 
 import CloneIcon from '../../assets/icons/clone_icon.svg?react';
 import MoveIcon from '../../assets/icons/move_icon.svg?react';
@@ -122,8 +125,24 @@ import HistoryIcon from '../../assets//icons/history_icon.svg?react';
 import LinkedDefects from '../../assets//icons/linked_defects.svg?react';
 import FireflinkPlatform from '../../assets//icons/fireflink_platform.svg?react';
 import FireflinkFinder from '../../assets//icons/fireflink_finder_logo.svg?react';
-import ClientProfile from '../../assets//icons/client_profile.svg?react'
+import ClientProfile from '../../assets//icons/client_profile.svg?react';
 import LicenseExpired from '../../assets//icons/license_expired.svg?react';
+import AddTestCaseIcon from '../../assets/icons/add_testcase.svg?react';
+import AutomationTestCaseIcon from '../../assets/icons/automation_testcase.svg?react';
+import ManualTestCaseIcon from '../../assets/icons/manual_testcase.svg?react';
+import BackIcon from '../../assets/icons/back_icon.svg?react';
+
+import SauseLabIcon from '../../assets/icons/sause_lab.svg?react';
+import LocalIcon from '../../assets/icons/local.svg?react';
+import InternetExplorerIcon from '../../assets/icons/internet_explorer.svg?react';
+import BrowserstackIcon from '../../assets/icons/browserstack_icon.svg?react';
+import EdgeIcon from '../../assets/icons/edge.svg?react';
+import FirefoxIcon from '../../assets/icons/fire_fox.svg?react';
+import LambdaIcon from '../../assets/icons/lambda_icon.svg?react';
+import LinuxIcon from '../../assets/icons/linux.svg?react';
+import OperaIcon from '../../assets/icons/opera.svg?react';
+import SafariIcon from '../../assets/icons/safari_icon.svg?react';
+import MaximizeScript from '../../assets/icons/maximize_script.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -242,9 +261,30 @@ Components['no_access_icon'] = NoAccessIcon;
 Components['full_access_icon'] = FullAccessIcon;
 Components['view_access_icon'] = ViewAccessIcon;
 Components['eye_closed'] = EyeClosed;
+Components['attachment_icon'] = AttachmentIcon;
+Components['variable_icon'] = VariableIcon;
+Components['authorization_icon'] = AuthorizationIcon;
+
 Components['fireflink_platform_logo'] = FireflinkPlatform;
 Components['fireflink_finder_logo'] = FireflinkFinder;
 Components['client_profile'] = ClientProfile;
 Components['license_expired'] = LicenseExpired;
+Components['add_testcase'] = AddTestCaseIcon;
+Components['automation_testcase'] = AutomationTestCaseIcon;
+Components['manual_testcass'] = ManualTestCaseIcon;
+Components['back_icon'] = BackIcon;
+
+Components['sause_lab'] = SauseLabIcon;
+Components['local'] = LocalIcon;
+Components['internet_explorer'] = InternetExplorerIcon;
+Components['browserstack_icon'] = BrowserstackIcon;
+Components['edge'] = EdgeIcon;
+Components['fire_fox'] = FirefoxIcon;
+Components['lambda_icon'] = LambdaIcon;
+Components['linux'] = LinuxIcon;
+Components['opera'] = OperaIcon;
+Components['safari_icon'] = SafariIcon;
+Components['maximize_script'] = MaximizeScript;
+
 
 export default Components;

package/src/components/Icon/types.ts

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

package/src/components/IconButton/IconButton.scss

@@ -33,7 +33,7 @@
     border: 1px solid var(--secondary-icon-color);
     background-color: var(--hover-color);
     .icon-name {
-      font-weight: 400;
+      font-weight: 600;
       color: var(--secondary-icon-color);
       @include mixins.center-content();
     }

package/src/components/IconButton/IconButton.tsx

@@ -13,14 +13,19 @@ const IconButton: React.FC<IconButtonProps> = ({
   return (
     <button onClick={onClick} className={classNames('ff-plus-icon')}>
       <div className={classNames('button-icon')}>
-      <Icon
-        height={12}
-        width={12}
-        name={iconName}
-        className={'ff-icon-color'}
-      />
+        <Icon
+          height={12}
+          width={12}
+          name={iconName}
+          className={'ff-icon-color'}
+        />
       </div>
-      <Typography as="div" textAlign="center" className="icon-name">
+      <Typography
+        as="div"
+        textAlign="center"
+        className="icon-name"
+        fontWeight="semi-bold"
+      >
         {label}
       </Typography>
     </button>

package/src/components/Input/Input.scss

@@ -79,7 +79,7 @@
       }
     }
     .ff-input {
-      border-color: var(--input-hover-border-color);
+      border-color: var(--brand-color);
       &--no-hover {
         border-color: var(--input-default-border-color);
       }

package/src/components/MenuOption/MenuOption.tsx

@@ -19,7 +19,7 @@ const Option = ({ option, onClick }: OptionProps) => (
     })}
     onClick={() => !option.disable && onClick(option)}
   >
-    <Icon name={option.icon} height={16} width={16} />
+    {option.icon && <Icon name={option.icon} height={16} width={16} />}
     <Typography
       as="label"
       color={option.icon === 'delete' ? 'var(--delete-text-color)' : ''}
@@ -88,28 +88,30 @@ const MenuOption = ({
     <div className="ff-menu-option-container" ref={menuRef}>
       <Tooltip title={tooltipTitle} placement={tooltipPlacement}>
         <div className="ff-icon-label">
-          <div
-            className={classNames('ff-menuicon-container', {
-              'ff-menuicon-container-clicked': isClicked,
-              dark: variant === 'dark',
-            })}
-            onClick={onIconClickHandler}
-            style={{
-              width: `${iconButtonSize}px`,
-              height: `${iconButtonSize}px`,
-              borderRadius: `${iconButtonBorderRadius}px`,
-            }}
-          >
-            <Icon
-              height={iconSize}
-              width={iconSize}
-              name={iconName}
-              color={
-                isClicked === (variant === 'dark')
-                ? 'var(--menu-option-icon-clicked)'
-                : 'var(--menu-option-icon-color)'
-              }
-            />
+            <div
+              className={classNames('ff-menuicon-container', {
+                'ff-menuicon-container-clicked': isClicked,
+                dark: variant === 'dark',
+              })}
+              onClick={onIconClickHandler}
+              style={{
+                width: `${iconButtonSize}px`,
+                height: `${iconButtonSize}px`,
+                borderRadius: `${iconButtonBorderRadius}px`,
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Icon
+                height={iconSize}
+                width={iconSize}
+                name={iconName}
+                color={
+                  isClicked === (variant === 'dark')
+                    ? 'var(--menu-option-icon-clicked)'
+                    : 'var(--menu-option-icon-color)'
+                }
+              />
           </div>
           {labelName && <Typography as="label">{labelName} </Typography>}
         </div>

package/src/components/MenuOption/types.ts

@@ -20,7 +20,7 @@ interface OptionType extends OptionClick {
    * @type {string}
    * @required
    */
-  icon: string;
+  icon?: string;
 
   /**
    * Indicates whether the option is disabled.

package/src/components/MiniModal/MiniModal.scss

@@ -168,3 +168,8 @@
 .ff-mini-modal-gap-10 {
   gap: 10px;
 }
+.ff-mini-edit-model-icon {
+  color: var(--ff-mini-modal-box-shadow);
+  border: 2px solid var(--ff-mini-modal-box-shadow);
+  border-radius: 4px;
+}

package/src/components/MiniModal/MiniModal.stories.tsx

@@ -4,6 +4,7 @@ import MiniModal from './MiniModal';
 import Button from '../Button/Button';
 import './MiniModal.scss';
 import Typography from '../Typography';
+import Icon from '../Icon';
 
 const meta: Meta<typeof MiniModal> = {
   title: 'Components/MiniModal',
@@ -595,5 +596,99 @@ export const CustomModalWithWrapper = () => {
     </div>
   );
 };
+export const normalModalFollowedByIcon = () => {
+  const iconRef1 = useRef<HTMLButtonElement>(null);
+  const iconRef2 = useRef<HTMLButtonElement>(null);
+  const iconRef3 = useRef<HTMLButtonElement>(null);
+  const { currentModal, openModal } = useModal();
+
+  return (
+    <div className="ff-mini-modal-buttons-flex ff-mini-modal-gap-10">
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(1)}
+        ref={iconRef1}
+        name="user_profile"
+      />
+
+      {currentModal === 1 && (
+        <MiniModal
+          anchorRef={iconRef1}
+          modalProperties={{ width: 168, height: 108 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the first modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef1}
+          anchorLeftDistanceForWrapper={0}
+          extraTopSpace={{ normalModal: 5 }}
+        />
+      )}
+
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(2)}
+        ref={iconRef2}
+        name="user_profile"
+      />
+
+      {currentModal === 2 && (
+        <MiniModal
+          anchorRef={iconRef2}
+          modalProperties={{ width: 193, height: 128 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the Second modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef2}
+          anchorLeftDistanceForWrapper={20}
+          extraTopSpace={{ normalModal: 15 }}
+        />
+      )}
+
+      <Icon
+        className="ff-mini-edit-model-icon"
+        width={16}
+        height={16}
+        onClick={() => openModal(3)}
+        ref={iconRef3}
+        name="user_profile"
+      />
+
+      {currentModal === 3 && (
+        <MiniModal
+          anchorRef={iconRef3}
+          modalProperties={{ width: 168, height: 108 }}
+          childContent={
+            <>
+              <Typography as="p">
+                This is some content inside the third modal.
+              </Typography>
+            </>
+          }
+          isIconModel={true}
+          isAnimated={true}
+          firstAnchorRef={iconRef3}
+          anchorLeftDistanceForWrapper={10}
+          extraTopSpace={{ normalModal: 10 }}
+        />
+      )}
+    </div>
+  );
+};
 
 export default meta;

package/src/components/MiniModal/MiniModal.tsx

@@ -14,8 +14,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       anchorRef,
       headerProps,
       childContent,
-      cancelButtonProps,
-      proceedButtonProps,
+      cancelButtonProps = () => {},
+      proceedButtonProps = () => {},
       footerContent,
       isWrapped = false,
       isAnimated = false,
@@ -29,6 +29,7 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
       extraTopSpace,
       extraRightSpace,
       extraLeftSpace,
+      isIconModel,
     },
     ref
   ) => {
@@ -144,8 +145,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
     //specifying the modal's escape and enter functionality
     const handleEsc = useEscapeKey('Escape');
     const handleEnter = useEscapeKey('Enter');
-    handleEsc(cancelButtonProps.onClick);
-    handleEnter(proceedButtonProps.onClick);
+    handleEsc(cancelButtonProps?.onClick);
+    handleEnter(proceedButtonProps?.onClick);
     useClickOutside(modalRef, cancelButtonProps.onClick);
 
     //calculate the modal position
@@ -227,6 +228,8 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
         >
           {headerProps ? (
             <Typography as="div">{headerProps}</Typography>
+          ) : isIconModel ? (
+            <></>
           ) : (
             <Typography as="header">
               <Typography as="h2">Header text</Typography>
@@ -236,13 +239,15 @@ const MiniModal = forwardRef<HTMLDivElement, MiniEditModalProps>(
           <div className="modal-content">{childContent}</div>
           {footerContent ? (
             <Typography as="footer">{footerContent}</Typography>
+          ) : isIconModel ? (
+            <></>
           ) : (
             <footer className="modal-footer">
               <Button
                 variant="primary"
                 className="btn-cancel"
-                onClick={cancelButtonProps.onClick}
-                label={cancelButtonProps.text}
+                onClick={cancelButtonProps?.onClick}
+                label={cancelButtonProps?.text}
               />
               <Button
                 variant="secondary"

package/src/components/MiniModal/types.ts

@@ -1,8 +1,4 @@
 import { ReactNode, RefObject } from 'react';
-interface ButtonProps {
-  text: string;
-  onClick: () => void;
-}
 interface ModalDimensions {
   width?: number;
   height?: number;
@@ -23,11 +19,11 @@ export interface MiniEditModalProps {
   /**
    * Props for the cancel button inside the modal
    */
-  cancelButtonProps: ButtonProps;
+  cancelButtonProps?: any;
   /**
    * Props for the proceed button inside the modal.
    */
-  proceedButtonProps: ButtonProps;
+  proceedButtonProps?: any;
   /**
    * Optional content for the footer of the modal.
    */
@@ -44,6 +40,10 @@ export interface MiniEditModalProps {
    * Specifies if the modal should behave as a popover with an arrow.
    */
   isPopOver?: boolean;
+  /**
+   * Specifies if the modal should behave as a popover with an arrow.
+   */
+  isIconModel?: boolean;
   /**
    * Sets the position of the modal relative to its anchor.
    * bottom: The modal appears below the anchor.

package/src/components/Search/Search.tsx

@@ -5,6 +5,7 @@ import Icon from '../Icon';
 import { SearchProps } from './types';
 import { checkEmpty } from '../../utils/checkEmpty/checkEmpty';
 import Typography from '../Typography';
+import Tooltip from '../Tooltip';
 
 const Search = ({
   placeholder = 'Search',
@@ -45,9 +46,11 @@ const Search = ({
         disabled: disabled,
       })}
     >
-      <div className="ff-search-icon" onClick={handleIconClick}>
-        <Icon name="search" height={14} width={14} />
-      </div>
+      <Tooltip placement="top" title="Search">
+        <div className="ff-search-icon" onClick={handleIconClick}>
+          <Icon name="search" height={14} width={14} />
+        </div>
+      </Tooltip>
       <div
         className={classNames('ff-vertical-line', {
           expanded: isExpanded,

package/src/components/Table/Table.scss

@@ -28,7 +28,6 @@
       }
       th:first-child {
         div {
-          display: flex;
           align-items: center;
           .ff-table-checkbox {
             padding-right: 8px;

package/src/index.ts

@@ -23,7 +23,7 @@ import LazyLoad from './components/LazyLoad/LazyLoad';
 import ThemeProvider from './components/ThemeProvider';
 import Typography from './components/Typography';
 import useTheme from './hooks/useTheme';
-import Forms from './components/Form/Forms';
+import Form from './components/Form/Forms';
 import InputWithDropdown from './components/InputWithDropdown';
 import RadioButton from './components/RadioButton';
 import RadioGroup from './components/RadioGroup';
@@ -98,7 +98,7 @@ export {
   Table,
   RadioButton,
   RadioGroup,
-  Forms,
+  Form,
   MiniModal,
   Container,
   Row,