pixel-react 1.8.4 → 1.8.5

package/src/components/Drawer/Types.ts

@@ -1,161 +1,165 @@
-import { ReactNode } from 'react';
-
-export interface BtnPropsCommon {
-  /**
-   * Label for the button
-   */
-  label?: string;
-  /**
-   * Boolean value to disable the button
-   */
-  disabled?: boolean;
-  /**
-   * Onclick function for button
-   */
-  onClick?: () => void;
-  /**
-   * Button type
-   * @default 'button'
-   * @example 'submit'
-   * @example 'button'
-   */
-  type?: 'button' | 'submit';
-  /**
-   *  form to accept id of form in string format
-   */
-  form?: string;
-}
-export interface DrawerProps {
-  /**
-   * To Open the Drawer
-   */
-  isOpen: boolean;
-  /**
-   * To Expand the Drawer
-   */
-  _isExpanded?: boolean;
-  /**
-   * To show and  hide the back button of the Drawer
-   */
-  isBackButtonVisible?: boolean;
-  /**
-   * To show and  hide the close button of the Drawer
-   */
-  _isCloseModalButtonVisible?: boolean;
-  /**
-   * Function to close the drawer
-   */
-
-  onClose?: () => void;
-  /**
-   * Size of the drawer medium = 550px large = 850px
-   */
-  size?: 'small' | 'medium' | 'large' | 'x-large';
-
-  /**
-   * Body Content of the drawer
-   */
-  children: ReactNode;
-  /**
-   * Header title for the drawer
-   */
-  title?: string | ReactNode;
-  /**
-   * To show the edit button on the header
-   */
-  showEditButton?: boolean;
-  /**
-   * Primary | Success button props
-   */
-  primaryButtonProps?: BtnPropsCommon;
-  /**
-   * Secondary | Cancel button props
-   */
-  secondaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Primary Button | Cancel button props
-   */
-  leftPrimaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Secondary | Cancel button props
-   */
-  leftSecondaryButtonProps?: BtnPropsCommon;
-  /**
-   * Left side Tertiary Button | Help button props
-   */
-  leftTertiaryButtonProps?: BtnPropsCommon;
-
-  /**
-   * Right side Tertiary Button | More Info button props
-   */
-  rightTertiaryButtonProps?: BtnPropsCommon;
-  /**
-   * Onclick function for edit button
-   */
-  onEdit?: () => void;
-  /**
-   * Background overlay for the drawer
-   */
-  overlay?: boolean;
-  /**
-   * displays footer if its true, default true
-   */
-  isFooterRequired?: boolean;
-  /**
-   * footer Content
-   */
-  footerContent?: ReactNode;
-  /**
-   * To show or hide the header
-   */
-  showHeader?: boolean;
-  /**
-   *  Custom back button icon
-   * The icon to display for the back button.
-   * If not provided, a default icon will be used.
-   */
-  backButtonIcon?: ReactNode;
-  /**
-   * Callback function when the close icon is clicked
-   */
-  onCloseIconClick?: () => void;
-  /**
-   * Custom header for the drawer, replacing the default header.
-   * If provided, this will render in place of the default header.
-   */
-  customHeader?: ReactNode;
-  /**
-   * Custom footer for the drawer, replacing the default footer.
-   * If provided, this will render in place of the default footer.
-   */
-  customFooter?: ReactNode;
-  /**
-   * Custom z-index for the drawer
-   */
-  zIndex?: number;
-  /**
-   * Custom z-index for the secondary drawer
-   */
-  secondLayerZIndex?: boolean;
-  /**
-   * Custom top for the drawer
-   */
-  top?: string;
-  /**
-   * Height of the drawer
-   */
-  height?: string;
-  /**
-   *
-   * width of the drawer
-   */
-  width?: string;
-  /**
-   * Position from right
-   */
-  right?: string | number;
-  /**
-   * Custom overflow for the drawer
-   */
-  overflow?: string;
-}
+import { ReactNode } from 'react';
+
+export interface BtnPropsCommon {
+  /**
+   * Label for the button
+   */
+  label?: string;
+  /**
+   * Boolean value to disable the button
+   */
+  disabled?: boolean;
+  /**
+   * Onclick function for button
+   */
+  onClick?: () => void;
+  /**
+   * Button type
+   * @default 'button'
+   * @example 'submit'
+   * @example 'button'
+   */
+  type?: 'button' | 'submit';
+  /**
+   *  form to accept id of form in string format
+   */
+  form?: string;
+}
+export interface DrawerProps {
+  /**
+   * To Open the Drawer
+   */
+  isOpen: boolean;
+  /**
+   * To Expand the Drawer
+   */
+  _isExpanded?: boolean;
+  /**
+   * To show and  hide the back button of the Drawer
+   */
+  isBackButtonVisible?: boolean;
+  /**
+   * To show and  hide the close button of the Drawer
+   */
+  _isCloseModalButtonVisible?: boolean;
+  /**
+   * Function to close the drawer
+   */
+
+  onClose?: () => void;
+  /**
+   * Size of the drawer medium = 550px large = 850px
+   */
+  size?: 'small' | 'medium' | 'large' | 'x-large';
+
+  /**
+   * Body Content of the drawer
+   */
+  children: ReactNode;
+  /**
+   * Header title for the drawer
+   */
+  title?: string | ReactNode;
+  /**
+   * To show the edit button on the header
+   */
+  showEditButton?: boolean;
+  /**
+   * Primary | Success button props
+   */
+  primaryButtonProps?: BtnPropsCommon;
+  /**
+   * Secondary | Cancel button props
+   */
+  secondaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Primary Button | Cancel button props
+   */
+  leftPrimaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Secondary | Cancel button props
+   */
+  leftSecondaryButtonProps?: BtnPropsCommon;
+  /**
+   * Left side Tertiary Button | Help button props
+   */
+  leftTertiaryButtonProps?: BtnPropsCommon;
+
+  /**
+   * Right side Tertiary Button | More Info button props
+   */
+  rightTertiaryButtonProps?: BtnPropsCommon;
+  /**
+   * Onclick function for edit button
+   */
+  onEdit?: () => void;
+  /**
+   * Background overlay for the drawer
+   */
+  overlay?: boolean;
+  /**
+   * displays footer if its true, default true
+   */
+  isFooterRequired?: boolean;
+  /**
+   * footer Content
+   */
+  footerContent?: ReactNode;
+  /**
+   * To show or hide the header
+   */
+  showHeader?: boolean;
+  /**
+   *  Custom back button icon
+   * The icon to display for the back button.
+   * If not provided, a default icon will be used.
+   */
+  backButtonIcon?: ReactNode;
+  /**
+   * Callback function when the close icon is clicked
+   */
+  onCloseIconClick?: () => void;
+  /**
+   * Custom header for the drawer, replacing the default header.
+   * If provided, this will render in place of the default header.
+   */
+  customHeader?: ReactNode;
+  /**
+   * Custom footer for the drawer, replacing the default footer.
+   * If provided, this will render in place of the default footer.
+   */
+  customFooter?: ReactNode;
+  /**
+   * Custom z-index for the drawer
+   */
+  zIndex?: number;
+  /**
+   * Custom z-index for the secondary drawer
+   */
+  secondLayerZIndex?: boolean;
+  /**
+   * Custom top for the drawer
+   */
+  top?: string;
+  /**
+   * Height of the drawer
+   */
+  height?: string;
+  /**
+   *
+   * width of the drawer
+   */
+  width?: string;
+  /**
+   * Position from right
+   */
+  right?: string | number;
+  /**
+   * Custom overflow for the drawer
+   */
+  overflow?: string;
+  /**
+   * Callback function returns a boolean value when the drawer is collapsed.
+   */
+  onCollapse?: (value: boolean) => void;
+}

package/src/components/EditTextField/EditTextField.scss

@@ -1,97 +1,97 @@
-@use '../../assets/styles/fonts' as *;
-
-.ff-label-edit-text-field {
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  width: 100%;
-
-  .display-text-container {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-
-    .edit-button {
-      padding: 4px 8px;
-      background-color: var(--button-background-color);
-      color: var(--button-text-color);
-      border: 1px solid var(--button-border-color);
-      border-radius: 4px;
-      cursor: pointer;
-      font-size: 12px;
-
-      &:hover {
-        background-color: var(--button-hover-background-color);
-      }
-    }
-  }
-
-  .ff-label-text-field {
-    display: flex;
-  }
-  .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 {
-    border-radius: 4px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-  }
-
-  .ff-text-field {
-    outline: none;
-    width: fit-content;
-    @extend .fontSm;
-  }
-  .ff-text-field-error-border {
-    border: 1px solid var(--label-edit-error-text);
-  }
-  .ff-text-field-border {
-    border: 1px solid var(--label-edit-text-label-color);
-  }
-  .ff-text-field-error-text {
-    color: var(--label-edit-error-text);
-  }
-  .ff-text-field-text {
-    color: var(--label-edit-text-label-color);
-  }
-  .ff-text-field {
-    padding: 0 4px;
-    border-radius: 4px;
-  }
-
-  .ff-icon-container {
-    display: flex;
-    gap: 8px;
-    align-items: center;
-    .confirm-icon,
-    .cancel-icon {
-      cursor: pointer;
-    }
-  }
-
-  .error-text {
-    color: var(--label-edit-error-text);
-    margin: 0;
-  }
-}
+@use '../../assets/styles/fonts' as *;
+
+.ff-label-edit-text-field {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+
+  .display-text-container {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+
+    .edit-button {
+      padding: 4px 8px;
+      background-color: var(--button-background-color);
+      color: var(--button-text-color);
+      border: 1px solid var(--button-border-color);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+
+      &:hover {
+        background-color: var(--button-hover-background-color);
+      }
+    }
+  }
+
+  .ff-label-text-field {
+    display: flex;
+  }
+  .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 {
+    border-radius: 4px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .ff-text-field {
+    outline: none;
+    width: fit-content;
+    @extend .fontSm;
+  }
+  .ff-text-field-error-border {
+    border: 1px solid var(--label-edit-error-text);
+  }
+  .ff-text-field-border {
+    border: 1px solid var(--label-edit-text-label-color);
+  }
+  .ff-text-field-error-text {
+    color: var(--label-edit-error-text);
+  }
+  .ff-text-field-text {
+    color: var(--label-edit-text-label-color);
+  }
+  .ff-text-field {
+    padding: 0 4px;
+    border-radius: 4px;
+  }
+
+  .ff-icon-container {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    .confirm-icon,
+    .cancel-icon {
+      cursor: pointer;
+    }
+  }
+
+  .error-text {
+    color: var(--label-edit-error-text);
+    margin: 0;
+  }
+}