pixel-react 1.2.6 → 1.2.8

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

@@ -7,6 +7,9 @@ import Typography from '../Typography';
 import './Form.scss';
 import Checkbox from '../Checkbox';
 import TextArea from '../TextArea';
+import Drawer from '../Drawer';
+import { useState } from 'react';
+import { Container } from '../GridLayout/GridLayout';
 
 type FormValues = {
   username: string;
@@ -31,6 +34,7 @@ type Story = StoryObj<typeof Forms>;
 
 export const WithDefaultValues: Story = {
   render: () => {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(true);
     const initialFormState: FormValues = {
       username: '',
       email: '',
@@ -45,238 +49,273 @@ export const WithDefaultValues: Story = {
       alert('Form submitted with: ' + JSON.stringify(data));
     };
 
+    const pageDrawerPrimaryButton = {
+      label: 'Select',
+      disabled: false,
+      size: 'medium',
+      type: 'submit' as 'submit',
+      form: 'element',
+    };
+
+    const pageDrawerSecondaryButton = {
+      label: 'Cancel',
+      variant: 'secondary',
+      size: 'medium',
+      disabled: false,
+    };
+
     return (
-      <Forms<FormValues> onSubmit={onSubmit} defaultValues={initialFormState}>
-        {({
-          register,
-          formState: { errors },
-          setValue,
-          watch,
-          reset,
-          trigger,
-        }) => {
-          return (
-            <div className="ff-main">
-              {/* Username Field */}
-              <div>
-                <Typography as="label">username</Typography>
-                <Input
-                  type="text"
-                  disabled={false}
-                  {...register('username', {
-                    required: {
-                      value: true,
-                      message: 'Username is required',
-                    },
-                    minLength: {
-                      value: 3,
-                      message: 'Username must be at least 3 characters',
-                    },
-                    maxLength: {
-                      value: 15,
-                      message: 'Username must not exceed 15 characters',
-                    },
-                  })}
-                  error={!!errors.username?.message}
-                  helperText={errors.username?.message}
-                  value={watch('username')}
-                  onChange={(e) =>
-                    setValue('username', e.target.value, {
-                      shouldValidate: true,
-                    })
-                  }
-                  onBlur={() => {
-                    trigger('username');
-                  }}
-                />
-              </div>
+      <Drawer
+        overlay
+        isOpen={isDrawerOpen}
+        title="Select Page"
+        onClose={() => setIsDrawerOpen(false)}
+        primaryButtonProps={pageDrawerPrimaryButton}
+        secondaryButtonProps={pageDrawerSecondaryButton}
+      >
+        <Container fluid className='ff-forms-container'>
+          <Forms<FormValues>
+            onSubmit={onSubmit}
+            id="element"
+            defaultValues={initialFormState}
+          >
+            {({
+              register,
+              formState: { errors },
+              setValue,
+              watch,
+              reset,
+              trigger,
+            }) => {
+              return (
+                <div className="ff-main">
+                  {/* Username Field */}
+                  <div>
+                    <Typography as="label">username</Typography>
+                    <Input
+                      type="text"
+                      disabled={false}
+                      {...register('username', {
+                        required: {
+                          value: true,
+                          message: 'Username is required',
+                        },
+                        minLength: {
+                          value: 3,
+                          message: 'Username must be at least 3 characters',
+                        },
+                        maxLength: {
+                          value: 15,
+                          message: 'Username must not exceed 15 characters',
+                        },
+                      })}
+                      error={!!errors.username?.message}
+                      helperText={errors.username?.message}
+                      value={watch('username')}
+                      onChange={(e) =>
+                        setValue('username', e.target.value, {
+                          shouldValidate: true,
+                        })
+                      }
+                      onBlur={() => {
+                        trigger('username');
+                      }}
+                    />
+                  </div>
 
-              {/* Email Field */}
-              <div>
-                <Typography as="label">Email</Typography>
+                  {/* Email Field */}
+                  <div>
+                    <Typography as="label">Email</Typography>
 
-                <Input
-                  type="email"
-                  disabled={false}
-                  {...register('email', {
-                    required: { value: true, message: 'Email is required' },
-                    pattern: {
-                      value: /^\S+@\S+\.\S+$/,
-                      message: 'Please enter a valid email',
-                    },
-                  })}
-                  error={!!errors.email?.message}
-                  helperText={errors.email?.message}
-                  value={watch('email')}
-                  onChange={(e) =>
-                    setValue('email', e.target.value, { shouldValidate: true })
-                  }
-                  onBlur={() => {
-                    trigger('email');
-                  }}
-                />
-              </div>
+                    <Input
+                      type="email"
+                      disabled={false}
+                      {...register('email', {
+                        required: { value: true, message: 'Email is required' },
+                        pattern: {
+                          value: /^\S+@\S+\.\S+$/,
+                          message: 'Please enter a valid email',
+                        },
+                      })}
+                      error={!!errors.email?.message}
+                      helperText={errors.email?.message}
+                      value={watch('email')}
+                      onChange={(e) =>
+                        setValue('email', e.target.value, {
+                          shouldValidate: true,
+                        })
+                      }
+                      onBlur={() => {
+                        trigger('email');
+                      }}
+                    />
+                  </div>
 
-              {/* Password Field */}
-              <div>
-                <Typography as="label">Password</Typography>
-                <Input
-                  disabled={false}
-                  type="password"
-                  {...register('password', {
-                    required: {
-                      value: true,
-                      message: 'Password is required',
-                    },
-                    minLength: {
-                      value: 6,
-                      message: 'Password must be at least 6 characters',
-                    },
-                  })}
-                  error={!!errors.password?.message}
-                  helperText={errors.password?.message}
-                  value={watch('password')}
-                  onChange={(e) =>
-                    setValue('password', e.target.value, {
-                      shouldValidate: true,
-                    })
-                  }
-                  onBlur={() => {
-                    trigger('password');
-                  }}
-                />
-              </div>
+                  {/* Password Field */}
+                  <div>
+                    <Typography as="label">Password</Typography>
+                    <Input
+                      disabled={false}
+                      type="password"
+                      {...register('password', {
+                        required: {
+                          value: true,
+                          message: 'Password is required',
+                        },
+                        minLength: {
+                          value: 6,
+                          message: 'Password must be at least 6 characters',
+                        },
+                      })}
+                      error={!!errors.password?.message}
+                      helperText={errors.password?.message}
+                      value={watch('password')}
+                      onChange={(e) =>
+                        setValue('password', e.target.value, {
+                          shouldValidate: true,
+                        })
+                      }
+                      onBlur={() => {
+                        trigger('password');
+                      }}
+                    />
+                  </div>
 
-              {/* Gender Field */}
-              <div className="ff-radio">
-                <Typography as="label">Gender</Typography>
-                <RadioGroup
-                  options={[
-                    {
-                      label: 'Male',
-                      value: 'male',
-                    },
-                    {
-                      label: 'Female',
-                      value: 'female',
-                    },
-                    {
-                      label: 'Other',
-                      value: 'other',
-                    },
-                  ]}
-                  {...register('gender', {
-                    required: {
-                      value: true,
-                      message: 'select the Gender',
-                    },
-                  })}
-                  selectedValue={watch('gender')}
-                  onChange={(option) => {
-                    setValue('gender', option.value, {
-                      shouldValidate: true,
-                    });
-                  }}
-                />
-                {errors?.gender && (
-                  <Typography className="ff-error">
-                    {errors.gender.message}
-                  </Typography>
-                )}
-              </div>
+                  {/* Gender Field */}
+                  <div className="ff-radio">
+                    <Typography as="label">Gender</Typography>
+                    <RadioGroup
+                      options={[
+                        {
+                          label: 'Male',
+                          value: 'male',
+                        },
+                        {
+                          label: 'Female',
+                          value: 'female',
+                        },
+                        {
+                          label: 'Other',
+                          value: 'other',
+                        },
+                      ]}
+                      {...register('gender', {
+                        required: {
+                          value: true,
+                          message: 'select the Gender',
+                        },
+                      })}
+                      selectedValue={watch('gender')}
+                      onChange={(option) => {
+                        setValue('gender', option.value, {
+                          shouldValidate: true,
+                        });
+                      }}
+                    />
+                    {errors?.gender && (
+                      <Typography className="ff-error">
+                        {errors.gender.message}
+                      </Typography>
+                    )}
+                  </div>
 
-              {/* Language Field */}
-              <div className="ff-select">
-                <Typography as="label">Programming Language</Typography>
-                <Select
-                  optionsList={[
-                    { label: 'Java', value: 'Java' },
-                    { label: 'Rust', value: 'Rust' },
-                    { label: 'Dart', value: 'Dart' },
-                  ]}
-                  selectedOption={{
-                    label: watch('language') || 'Select a language',
-                    value: watch('language') || '',
-                  }}
-                  {...register('language', {
-                    required: {
-                      value: true,
-                      message: 'language is required',
-                    },
-                  })}
-                  onChange={(option) =>
-                    setValue('language', option.value, { shouldValidate: true })
-                  }
-                />
-                {errors?.gender && (
-                  <Typography className="ff-error">
-                    {errors?.language?.message}
-                  </Typography>
-                )}
-              </div>
+                  {/* Language Field */}
+                  <div className="ff-select">
+                    <Typography as="label">Programming Language</Typography>
+                    <Select
+                      optionZIndex={9999999}
+                      optionsList={[
+                        { label: 'Java', value: 'Java' },
+                        { label: 'Rust', value: 'Rust' },
+                        { label: 'Dart', value: 'Dart' },
+                      ]}
+                      selectedOption={{
+                        label: watch('language') || 'Select a language',
+                        value: watch('language') || '',
+                      }}
+                      {...register('language', {
+                        required: {
+                          value: true,
+                          message: 'language is required',
+                        },
+                      })}
+                      onChange={(option) =>
+                        setValue('language', option.value, {
+                          shouldValidate: true,
+                        })
+                      }
+                    />
+                    {errors?.gender && (
+                      <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>
-                <button
-                  type="button"
-                  onClick={() => {
-                    reset(initialFormState);
-                  }}
-                >
-                  Reset
-                </button>
-              </div>
-            </div>
-          );
-        }}
-      </Forms>
+                  {/* 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}
+                      checked={watch('check')}
+                      {...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="button"
+                      onClick={() => {
+                        reset(initialFormState);
+                      }}
+                    >
+                      Reset
+                    </button>
+                  </div>
+                </div>
+              );
+            }}
+          </Forms>
+        </Container>
+      </Drawer>
     );
   },
 };

package/src/components/Form/Forms.tsx

@@ -17,7 +17,11 @@ const Forms = <T extends Form.FieldValues>({
 
   const { handleSubmit } = methods;
 
-  return <form onSubmit={handleSubmit(onSubmit)}>{children(methods)}</form>;
+  return (
+    <form id={id} onSubmit={handleSubmit(onSubmit)}>
+      {children(methods)}
+    </form>
+  );
 };
 
 export default Forms;

package/src/components/Icon/iconList.ts

@@ -143,6 +143,7 @@ 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';
+import MaximizeIcon from '../../assets/icons/maximize_icon.svg?react';
 
 Components['delete_info'] = DeleteInfoIcon;
 Components['success'] = ToastSuccessIcon;
@@ -285,6 +286,6 @@ Components['linux'] = LinuxIcon;
 Components['opera'] = OperaIcon;
 Components['safari_icon'] = SafariIcon;
 Components['maximize_script'] = MaximizeScript;
-
+Components['maximize_icon'] = MaximizeIcon;
 
 export default Components;

package/src/components/Input/Input.tsx

@@ -74,7 +74,6 @@ const Input = ({
         onChange={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
-        required={required}
         autoComplete={autoComplete}
         min={minValue}
         max={maxValue}

package/src/components/MenuOption/MenuOption.scss

@@ -52,7 +52,6 @@
     margin: 2px;
     min-height: 32px;
     min-width: 111px;
-    z-index: 100000;
     white-space: nowrap;
 
     .ff-options {

package/src/components/MenuOption/MenuOption.stories.tsx

@@ -28,6 +28,7 @@ export const DefaultMenuOption: Story = {
         icon: 'success',
       },
     ],
+    zIndex:1000000,
   },
 };
 
@@ -139,6 +140,7 @@ export const MenuOptionWithDisabledHoverEffect: Story = {
         icon: 'success',
       },
     ];
+    const zIndex=1000000;
     return (
       <MenuOption
         iconName="more"
@@ -146,6 +148,7 @@ export const MenuOptionWithDisabledHoverEffect: Story = {
         tooltipPlacement="top"
         dropdownPlacement="right"
         options={options}
+        zIndex={zIndex}
       />
     );
   },

package/src/components/MenuOption/MenuOption.tsx

@@ -52,6 +52,7 @@ const MenuOption = ({
   iconButtonBorderRadius = 7,
   iconSize = 16,
   variant = 'light',
+  zIndex=1000,
 }: MenuOptionProps) => {
   const [isClicked, setIsClicked] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -71,14 +72,14 @@ const MenuOption = ({
   const dropdownPositionStyles = () => {
     switch (dropdownPlacement) {
       case 'top':
-        return { bottom: '100%', left: -2 };
+        return { bottom: '100%', left: -2 ,zIndex};
       case 'left':
-        return { top: -2, right: '100%' };
+        return { top: -2, right: '100%' ,zIndex};
       case 'right':
-        return { top: -2, left: '100%' };
+        return { top: -2, left: '100%' ,zIndex};
       case 'down':
       default:
-        return { top: '100%', left: -2 };
+        return { top: '100%', left: -2 ,zIndex};
     }
   };
 

package/src/components/MenuOption/types.ts

@@ -149,6 +149,10 @@ interface MenuOptionProps {
    * @default 7
    */
   iconButtonBorderRadius?: number;
+  /**
+   * Providing z-index for the options card.
+   */
+  zIndex?: number;
 }
 
 interface OptionProps {

package/src/components/ModulesChip/ModuleChip.scss

@@ -1,7 +1,7 @@
 @use '../../assets/styles/fonts';
 @use '../../assets/styles/mixins';
 
-.ff-expandable-chip-menu {
+.ff-Module-chip {
   width: 75px;
   height: 32px;
   border: 0.5px solid;
@@ -9,7 +9,7 @@
   color: var(--brand-color);
   cursor: pointer;
   @include mixins.center-content();
-  .ff-label-chip {
+  .ff-Module-label-chip {
     &--active {
       color: var(--ff-header-text-color);
     }