pixel-react 1.2.7 → 1.2.9

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/Icon/Icons.scss

@@ -4,6 +4,10 @@
   align-items: center;
   padding: 4px;
   box-sizing: content-box;
+  &:hover {
+    border-radius: 4px;
+    background-color: var(--icon-hover-color);
+  }
   &.ff-icon-dark {
     background-color: var(--brand-color);
     &.ff-icon-click {

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/InputWithDropdown/InputWithDropdown.scss

@@ -10,6 +10,18 @@
     border-radius: 4px;
     padding: 0;
     position: relative;
+    .ff-input-with-dropdown--left {
+      display: flex;
+      flex-direction: row-reverse;
+    }
+
+    .ff-input-with-dropdown--right {
+      display: flex;
+      flex-direction: row;
+    }
+    .ff-floating-input--left-dropdown{
+      width: 698px;
+    }
 
     .ff-floating-label-input-container {
       .ff-floating-label {
@@ -61,6 +73,11 @@
         &--error {
           border-color: var(--input-error-text-color);
         }
+        &--left-dropdown {
+          &::placeholder {
+            opacity: 1;
+          }
+        }
       }
     }
 
@@ -80,10 +97,22 @@
       border: none;
       outline: none;
       margin: 0;
+
       &:disabled {
         cursor: not-allowed;
       }
     }
+
+    .ff-floating-dropdown--left {
+      min-width: 94px; 
+    }
+    .seperatorline {
+      height: 26px;
+      margin-top: 3px;
+      border-right: 0.5px solid var(--brand-color);
+      flex-shrink: 0;
+      border-radius: 2px;
+    }
   }
   &:hover {
     .ff-input-with-dropdown {
@@ -98,7 +127,7 @@
       &--error {
         border-color: var(--input-error-text-color);
       }
-      .ff-floating-label {
+      &--left .ff-floating-label {
         color: var(--input-hover-border-color);
         &--filled {
           color: var(--input-default-border-color);