Merge pull request #2463 from anuradha9712/v4.x

chore: resolve conflicts
innovaccer · Dec 18, 2024 · 4dc5158 · 4dc5158
2 parents cca12fc + 0a61375
commit 4dc5158
Show file tree

Hide file tree

Showing 37 changed files with 129 additions and 101 deletions.
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -15,6 +15,9 @@ jobs:
 
       - name: npm install
         run: npm ci
+
+      - name: lint
+        run: npm run lint:check
 
       - name: test
         run: npm run test

diff --git a/core/components/atoms/actionCard/ActionCard.tsx b/core/components/atoms/actionCard/ActionCard.tsx
@@ -57,7 +57,11 @@ export const ActionCard = (props: ActionCardProps) => {
       {...rest}
     >
       {disabled && (
-        <div style={{ zIndex }} data-test="DesignSystem-ActionCard-Overlay" className={styles['ActionCard-overlay--disabled']} />
+        <div
+          style={{ zIndex }}
+          data-test="DesignSystem-ActionCard-Overlay"
+          className={styles['ActionCard-overlay--disabled']}
+        />
       )}
       {children}
     </div>

diff --git a/core/components/atoms/avatar/Avatar.tsx b/core/components/atoms/avatar/Avatar.tsx
@@ -223,11 +223,7 @@ export const Avatar = (props: AvatarProps) => {
         <span data-test="DesignSystem-Avatar--Presence" className={presenceClassNames} style={borderStyle} />
       )}
       {showStatus && (
-<<<<<<< HEAD
-        <span data-test="DesignSystem-Avatar--Status" className="Avatar-status" style={borderStyle}>
-=======
         <span data-test="DesignSystem-Avatar--Status" className={styles['Avatar-status']} style={borderStyle}>
->>>>>>> 1a6a3c58 (chore: rebase with master branch)
           {status}
         </span>
       )}

diff --git a/core/components/atoms/button/Button.tsx b/core/components/atoms/button/Button.tsx
@@ -124,15 +124,18 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
     ...rest
   } = props;
 
-  const buttonClass = classNames({
-    [styles['Button']]: true,
-    [styles['Button--expanded']]: expanded,
-    [styles[`Button--${size}`]]: size,
-    [styles[`Button--${size}Square`]]: !children,
-    [styles[`Button--${appearance}`]]: appearance,
-    [styles['Button--selected']]: selected && (appearance === 'basic' || appearance === 'transparent'),
-    [styles[`Button--iconAlign-${iconAlign}`]]: children && iconAlign,
-  }, className);
+  const buttonClass = classNames(
+    {
+      [styles['Button']]: true,
+      [styles['Button--expanded']]: expanded,
+      [styles[`Button--${size}`]]: size,
+      [styles[`Button--${size}Square`]]: !children,
+      [styles[`Button--${appearance}`]]: appearance,
+      [styles['Button--selected']]: selected && (appearance === 'basic' || appearance === 'transparent'),
+      [styles[`Button--iconAlign-${iconAlign}`]]: children && iconAlign,
+    },
+    className
+  );
 
   const iconClass = classNames({
     [styles['Button-icon']]: true,
@@ -142,7 +145,7 @@ const ButtonElement = React.forwardRef<HTMLButtonElement, ButtonProps>((props, r
 
   const buttonTextClass = classNames({
     [styles['Button-text']]: true,
-    [styles['Button-text--hidden']]: true
+    [styles['Button-text--hidden']]: true,
   });
 
   const spinnerSize = size === 'large' && children ? 'small' : 'xsmall';

diff --git a/core/components/atoms/card/Card.tsx b/core/components/atoms/card/Card.tsx
@@ -18,10 +18,13 @@ export interface CardProps extends BaseProps, BaseHtmlProps<HTMLDivElement> {
 export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const { shadow = 'shadow10', children, className, ...rest } = props;
 
-  const classes = classNames({
-    [styles.Card]: true,
-    [styles[`Card--${shadow}`]]: shadow,
-  }, className);
+  const classes = classNames(
+    {
+      [styles.Card]: true,
+      [styles[`Card--${shadow}`]]: shadow,
+    },
+    className
+  );
 
   return (
     <div data-test="DesignSystem-Card" ref={ref} {...rest} className={classes}>

diff --git a/core/components/atoms/column/Column.tsx b/core/components/atoms/column/Column.tsx
@@ -60,15 +60,18 @@ export interface ColumnProps extends BaseProps, BaseHtmlProps<HTMLDivElement> {
 export const Column = React.forwardRef<HTMLDivElement, ColumnProps>((props, ref) => {
   const { size, sizeXS, sizeS, sizeM, sizeL, sizeXL, className, children, ...rest } = props;
 
-  const classes = classNames({
-    [styles['Col']]: true,
-    [styles[`Col--${size}`]]: size,
-    [styles[`Col--xs-${sizeXS}`]]: sizeXS,
-    [styles[`Col--s-${sizeS}`]]: sizeS,
-    [styles[`Col--m-${sizeM}`]]: sizeM,
-    [styles[`Col--l-${sizeL}`]]: sizeL,
-    [styles[`Col--xl-${sizeXL}`]]: sizeXL,
-  }, className);
+  const classes = classNames(
+    {
+      [styles['Col']]: true,
+      [styles[`Col--${size}`]]: size,
+      [styles[`Col--xs-${sizeXS}`]]: sizeXS,
+      [styles[`Col--s-${sizeS}`]]: sizeS,
+      [styles[`Col--m-${sizeM}`]]: sizeM,
+      [styles[`Col--l-${sizeL}`]]: sizeL,
+      [styles[`Col--xl-${sizeXL}`]]: sizeXL,
+    },
+    className
+  );
 
   return (
     <div ref={ref} data-test="DesignSystem-Column" {...rest} className={classes}>

diff --git a/core/components/atoms/dropdown/ErrorTemplate.tsx b/core/components/atoms/dropdown/ErrorTemplate.tsx
@@ -23,7 +23,6 @@ const errorDescription: Record<string, string> = {
 };
 
 export const ErrorTemplate: React.FC<ErrorTemplateProps> = ({ dropdownStyle, errorType, updateOptions }) => {
-
   const classes = classNames({
     [styles['Dropdown-wrapper']]: true,
     'px-7': true,

diff --git a/core/components/atoms/row/Row.tsx b/core/components/atoms/row/Row.tsx
@@ -8,9 +8,12 @@ export type RowProps = BaseProps & BaseHtmlProps<HTMLDivElement>;
 export const Row = React.forwardRef<HTMLDivElement, RowProps>((props, ref) => {
   const { className, children, ...rest } = props;
 
-  const classes = classNames({
-    [styles.Row]: true,
-  }, className);
+  const classes = classNames(
+    {
+      [styles.Row]: true,
+    },
+    className
+  );
 
   return (
     <div data-test="DesignSystem-Row" ref={ref} {...rest} className={classes}>

diff --git a/core/components/molecules/editableDropdown/EditableDropdown.tsx b/core/components/molecules/editableDropdown/EditableDropdown.tsx
@@ -6,7 +6,7 @@ import { DropdownProps } from '@/index.type';
 import { BaseProps, extractBaseProps, MakeOptional } from '@/utils/types';
 import styles from '@css/components/editableDropdown.module.css';
 
-type DropdownOptions = MakeOptional<DropdownProps, keyof typeof Dropdown['defaultProps']>;
+type DropdownOptions = MakeOptional<DropdownProps, keyof (typeof Dropdown)['defaultProps']>;
 
 export interface EditableDropdownProps extends BaseProps {
   /**

diff --git a/core/components/molecules/fileList/FileListItem.tsx b/core/components/molecules/fileList/FileListItem.tsx
@@ -83,21 +83,21 @@ export const FileListItem = (props: FileListItemProps) => {
     // TODO(a11y)
     //  eslint-disable-next-line
     <div {...baseProps} className={FileItemClass} onClick={onClickHandler} data-test="DesignSystem-FileListItem">
-      <div className={styles["FileItem-file"]}>
-        <div className={styles["FileItem-fileContent"]}>
+      <div className={styles['FileItem-file']}>
+        <div className={styles['FileItem-fileContent']}>
           <FileIcon file={file} status={status} progress={progress} />
           <Text
             data-test="DesignSystem-FileListItem--Name"
-            className={styles["FileItem-text"]}
+            className={styles['FileItem-text']}
             appearance={status === 'completed' ? 'default' : 'subtle'}
             weight="medium"
           >
             {name}
           </Text>
         </div>
-        <div className={styles["FileItem-actions"]}>
+        <div className={styles['FileItem-actions']}>
           <Text
-            className={styles["FileItem-size"]}
+            className={styles['FileItem-size']}
             size="small"
             appearance={'subtle'}
             data-test="DesignSystem-FileListItem--Size"
@@ -108,7 +108,12 @@ export const FileListItem = (props: FileListItemProps) => {
         </div>
       </div>
       {status === 'error' && (
-        <InlineMessage size="small" appearance="alert" description={errorMessage} className={styles['FileItem-error']} />
+        <InlineMessage
+          size="small"
+          appearance="alert"
+          description={errorMessage}
+          className={styles['FileItem-error']}
+        />
       )}
     </div>
   );

diff --git a/core/components/molecules/fileUploader/FileUploaderButton.tsx b/core/components/molecules/fileUploader/FileUploaderButton.tsx
@@ -61,7 +61,7 @@ export const FileUploaderButton = (props: FileUploaderButtonProps) => {
         disabled={disabled}
         type="file"
         tabIndex={-1}
-        className={styles["FileUploaderButton-input"]}
+        className={styles['FileUploaderButton-input']}
         onChange={(event) => {
           const fileList = event.target.files ? Array.from(event.target.files) : [];
           if (onChange) onChange(fileList, event);

diff --git a/core/components/molecules/fileUploader/FileUploaderItem.tsx b/core/components/molecules/fileUploader/FileUploaderItem.tsx
@@ -62,8 +62,8 @@ export const FileUploaderItem = (props: FileUploaderItemProps) => {
       className={FileItemClass}
       onClick={() => onClick && onClick(file, id)}
     >
-      <div className={styles["FileUploaderItem-file"]}>
-        <Text className={styles["FileUploaderItem-text"]} appearance={status === 'completed' ? 'default' : 'subtle'}>
+      <div className={styles['FileUploaderItem-file']}>
+        <Text className={styles['FileUploaderItem-text']} appearance={status === 'completed' ? 'default' : 'subtle'}>
           {name}
         </Text>
         <div className="d-flex align-items-center">

diff --git a/core/components/molecules/fullscreenModal/FullscreenModal.tsx b/core/components/molecules/fullscreenModal/FullscreenModal.tsx
@@ -238,7 +238,7 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
         <div data-test="DesignSystem-FullscreenModal" {...baseProps} className={classes} ref={this.modalRef}>
           <Row className="justify-content-center">
             <Column {...sizeMap[dimension]}>
-              <Row className={styles["FullscreenModal-header"]}>
+              <Row className={styles['FullscreenModal-header']}>
                 <Column>
                   {!header && <OverlayHeader data-test="DesignSystem-FullscreenModal--header" {...headerOptions} />}
 
@@ -257,15 +257,15 @@ class FullscreenModal extends React.Component<FullscreenModalProps, ModalState>
                   </Tooltip>
                 </Column>
               </Row>
-              <OverlayBody data-test="DesignSystem-FullscreenModal--Body" className={styles["FullscreenModal-body"]}>
+              <OverlayBody data-test="DesignSystem-FullscreenModal--Body" className={styles['FullscreenModal-body']}>
                 {children}
               </OverlayBody>
               {(!!footer || !!footerOptions) && (
                 <OverlayFooter
                   data-test="DesignSystem-FullscreenModal--footer"
                   {...footerOptions}
                   open={open}
-                  className={styles["FullscreenModal-footer"]}
+                  className={styles['FullscreenModal-footer']}
                 >
                   {footer}
                 </OverlayFooter>

diff --git a/core/components/molecules/overlayFooter/OverlayFooter.tsx b/core/components/molecules/overlayFooter/OverlayFooter.tsx
@@ -4,7 +4,7 @@ import { Button } from '@/index';
 import { ButtonProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import styles from '@css/components/overlay.module.css';
-import buttonStyles from '@css/components/overlay.module.css';
+import buttonStyles from '@css/components/button.module.css';
 
 export interface OverlayFooterProps extends BaseProps {
   open?: boolean;

diff --git a/core/components/molecules/overlayHeader/OverlayHeader.tsx b/core/components/molecules/overlayHeader/OverlayHeader.tsx
@@ -62,7 +62,7 @@ export const OverlayHeader = (props: OverlayHeaderProps) => {
 
   return (
     <div data-test="DesignSystem-OverlayHeader" {...baseProps} className={classes}>
-      <div className={styles["OverlayHeader-headerWrapper"]}>
+      <div className={styles['OverlayHeader-headerWrapper']}>
         {(backButton || backIcon) && (
           <Button
             data-test="DesignSystem-OverlayHeader--Button"

diff --git a/core/components/molecules/pagination/Pagination.tsx b/core/components/molecules/pagination/Pagination.tsx
@@ -140,10 +140,10 @@ export const Pagination = (props: PaginationProps) => {
         />
       </div>
       {type === 'jump' && (
-        <div className={styles["Pagination-pageIndex"]}>
+        <div className={styles['Pagination-pageIndex']}>
           <MetricInput
             name="page"
-            className={styles["Pagination-MetricInput"]}
+            className={styles['Pagination-MetricInput']}
             onChange={inputChangeHandler}
             value={`${isNaturalNumber(page) ? page : ''}`}
             data-test="DesignSystem-Pagination--Input"

diff --git a/core/components/molecules/popover/Popover.tsx b/core/components/molecules/popover/Popover.tsx
@@ -24,7 +24,7 @@ const propsList = [
   'offset',
   'closeOnScroll',
 ] as const;
-type PopperProps = typeof propsList[number];
+type PopperProps = (typeof propsList)[number];
 
 export interface PopoverProps extends Pick<PopperWrapperProps, PopperProps>, BaseProps {
   /**

diff --git a/core/components/molecules/tooltip/Tooltip.tsx b/core/components/molecules/tooltip/Tooltip.tsx
@@ -30,7 +30,7 @@ const positionValue = {
   right: 'right',
 };
 
-type TooltipPopperProps = typeof tooltipPropsList[number];
+type TooltipPopperProps = (typeof tooltipPropsList)[number];
 
 export interface TooltipProps extends Omit<PopoverProps, TooltipPopperProps>, BaseProps {
   /**
@@ -105,8 +105,8 @@ export const Tooltip = (props: TooltipProps) => {
   }
 
   const tooltipWrapper = (
-    <div className={styles["Tooltip"]}>
-      <Text className={styles["Tooltip-text"]} appearance="white">
+    <div className={styles['Tooltip']}>
+      <Text className={styles['Tooltip-text']} appearance="white">
         {tooltip}
       </Text>
     </div>

diff --git a/core/components/molecules/verificationCodeInput/VerificationCodeInput.tsx b/core/components/molecules/verificationCodeInput/VerificationCodeInput.tsx
@@ -214,7 +214,7 @@ const VerificationCodeInput = (props: VerificationCodeInputProps) => {
     );
 
   return (
-    <div data-test="DesignSystem-VerificationCodeInput" className={styles["VerificationCodeInput"]}>
+    <div data-test="DesignSystem-VerificationCodeInput" className={styles['VerificationCodeInput']}>
       {values.map((val: string, index: number) => (
         <Input
           key={index}

diff --git a/core/components/organisms/calendar/Calendar.tsx b/core/components/organisms/calendar/Calendar.tsx
@@ -687,7 +687,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const noOfRows = Math.ceil(yearBlockRange / yearsInRow);
 
     return Array.from({ length: noOfRows }, (_y, row) => (
-      <div key={row} className={styles["Calendar-valueRow"]}>
+      <div key={row} className={styles['Calendar-valueRow']}>
         {Array.from({ length: yearsInRow }, (_x, col) => {
           const offset = yearsInRow * row + col;
           if (offset === yearBlockNav) return undefined;
@@ -725,10 +725,12 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
             //  TODO(a11y)
             //  eslint-disable-next-line
             <div
+              //  eslint-disable-next-line
               key={`${row}-${col}`}
               data-test="DesignSystem-Calendar--yearValue"
               className={valueClass}
               onClick={this.selectYear(year)}
+              //  eslint-disable-next-line
               onMouseOver={this.yearMouseOverHandler.bind(this, year, isCurrentYear(), disabled)}
             >
               <Text size={size === 'small' ? 'small' : 'regular'} color={getTextColor} className={textClass}>
@@ -751,7 +753,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
     const noOfRows = Math.ceil(monthBlock / monthsInRow);
 
     return Array.from({ length: noOfRows }, (_y, row) => (
-      <div key={row} className={styles["Calendar-valueRow"]}>
+      <div key={row} className={styles['Calendar-valueRow']}>
         {Array.from({ length: monthsInRow }, (_x, col) => {
           const month = monthsInRow * row + col;
           const disabled =
@@ -790,6 +792,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
               data-test="DesignSystem-Calendar--monthValue"
               className={valueClass}
               onClick={this.selectMonth(month)}
+              //  eslint-disable-next-line
               onMouseOver={this.monthMouseOverHandler.bind(this, month, isCurrentMonth(), disabled)}
             >
               <Text size={size === 'small' ? 'small' : 'regular'} color={getTextColor} className={textClass}>
@@ -821,7 +824,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
     return (
       <>
-        <div className={styles["Calendar-dayValues"]}>
+        <div className={styles['Calendar-dayValues']}>
           {Array.from({ length: 7 }, (_x, day) => {
             const valueClass = classNames({
               [styles['Calendar-valueWrapper']]: true,
@@ -835,7 +838,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
             );
           })}
         </div>
-        <div className={styles["Calendar-dateValues"]} onMouseLeave={this.onDateRowMouseLeaveHandler}>
+        <div className={styles['Calendar-dateValues']} onMouseLeave={this.onDateRowMouseLeaveHandler}>
           {this.renderDateValues(index)}
         </div>
       </>
@@ -939,7 +942,7 @@ export class Calendar extends React.Component<CalendarProps, CalendarState> {
 
     return Array.from({ length: noOfRows }, (_y, row) => {
       return (
-        <div key={row} className={styles["Calendar-valueRow"]}>
+        <div key={row} className={styles['Calendar-valueRow']}>
           {Array.from({ length: daysInRow }, (_x, col) => {
             const date = daysInRow * row + col - dummyDays + 1;
             const dummy = date <= 0 || date > dayRange;

diff --git a/core/components/organisms/combobox/trigger/MultiselectTrigger.tsx b/core/components/organisms/combobox/trigger/MultiselectTrigger.tsx
@@ -309,7 +309,7 @@ export const MultiSelectTrigger = React.forwardRef<HTMLElement, MultiSelectTrigg
             data-test="DesignSystem-MultiSelectTrigger--Icon"
             name="close"
             appearance={disabled ? 'disabled' : 'subtle'}
-            className={styles["ChipInput-icon"]}
+            className={styles['ChipInput-icon']}
             onClick={onDeleteAllHandler}
             tabIndex={disabled ? -1 : 0}
           />