Merge pull request #2452 from anuradha9712/v4.x

feat: migrate molecules to module css
innovaccer · Dec 10, 2024 · 31969fc · 31969fc
2 parents d7e116e + a5f30fc
commit 31969fc
Show file tree

Hide file tree

Showing 38 changed files with 230 additions and 180 deletions.
diff --git a/core/components/molecules/chatMessage/Box.tsx b/core/components/molecules/chatMessage/Box.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { SharedProps } from './ChatMessage';
+import styles from '@css/components/chat.module.css';
 
 export interface BoxProps extends BaseProps {
   /**
@@ -24,11 +25,11 @@ export const Box = (props: InternalBoxProps) => {
 
   const MessageClass = classNames(
     {
-      ['Box']: true,
-      [`Box--${type}`]: type,
-      ['Box--typing']: isTyping,
-      ['Box--urgent']: statusType === 'urgent',
-      [`Box-${type}--withStatus`]: withStatus || isTyping,
+      [styles['Box']]: true,
+      [styles[`Box--${type}`]]: type,
+      [styles['Box--typing']]: isTyping,
+      [styles['Box--urgent']]: statusType === 'urgent',
+      [styles[`Box-${type}--withStatus`]]: withStatus || isTyping,
     },
     className
   );

diff --git a/core/components/molecules/chatMessage/Status.tsx b/core/components/molecules/chatMessage/Status.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { Text, Icon, MetaList } from '@/index';
+import styles from '@css/components/chat.module.css';
 
 export type StatusType = 'failed' | 'sending' | 'sent' | 'read' | 'urgent';
 
@@ -27,7 +28,7 @@ export const Status = (props: StatusProps) => {
 
   const TextClass = classNames(
     {
-      ['ChatMessage-status']: true,
+      [styles['ChatMessage-status']]: true,
     },
     className
   );

diff --git a/core/components/molecules/chipInput/ChipInput.tsx b/core/components/molecules/chipInput/ChipInput.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { Chip, Icon } from '@/index';
 import { ChipProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import styles from '@css/components/chipInput.module.css';
 
 const keyCodes = {
   BACKSPACE: 'Backspace',
@@ -113,16 +114,16 @@ export const ChipInput = (props: ChipInputProps) => {
   }, [inputValue]);
 
   const ChipInputBorderClass = classNames({
-    ['ChipInput-border']: true,
-    ['ChipInput-border--error']: error,
+    [styles['ChipInput-border']]: true,
+    [styles['ChipInput-border--error']]: error,
   });
 
   const ChipInputClass = classNames(
     {
-      ChipInput: true,
-      ['ChipInput--disabled']: disabled,
-      ['ChipInput--withChips']: chips && chips.length > 0,
-      ['ChipInput--error']: error,
+      [styles.ChipInput]: true,
+      [styles['ChipInput--disabled']]: disabled,
+      [styles['ChipInput--withChips']]: chips && chips.length > 0,
+      [styles['ChipInput--error']]: error,
     },
     className
   );
@@ -241,12 +242,12 @@ export const ChipInput = (props: ChipInputProps) => {
         onClick={onClickHandler}
         tabIndex={disabled ? -1 : 0}
       >
-        <div className="ChipInput-wrapper" ref={customRef}>
+        <div className={styles['ChipInput-wrapper']} ref={customRef}>
           {chips && chips.length > 0 && chipComponents}
           <input
             data-test="DesignSystem-ChipInput--Input"
             ref={inputRef}
-            className="ChipInput-input"
+            className={styles['ChipInput-input']}
             autoFocus={autoFocus}
             placeholder={chips && chips.length > 0 ? '' : placeholder}
             disabled={disabled}
@@ -263,7 +264,7 @@ export const ChipInput = (props: ChipInputProps) => {
             data-test="DesignSystem-ChipInput--Icon"
             name="close"
             appearance={disabled ? 'disabled' : 'subtle'}
-            className="ChipInput-icon"
+            className={styles['ChipInput-icon']}
             onClick={onDeleteAllHandler}
             tabIndex={disabled ? -1 : 0}
           />

diff --git a/core/components/molecules/dropzone/Dropzone.tsx b/core/components/molecules/dropzone/Dropzone.tsx
@@ -8,6 +8,7 @@ import { BaseProps, extractBaseProps } from '@/utils/types';
 import { fileErrorMessages } from './FileErrors';
 import { useAccessibilityProps } from '@/accessibility/utils';
 import DropzoneIcon from './DropzoneIcon';
+import styles from '@css/components/dropzone.module.css';
 
 export type DropZoneType = 'standard' | 'compressed' | 'tight';
 
@@ -39,23 +40,23 @@ export const Dropzone = (props: DropzoneProps) => {
 
   const DropzoneClass = classNames(
     {
-      ['Dropzone']: true,
-      [`Dropzone--${type}`]: type,
-      ['Dropzone--disabled']: disabled,
-      ['Dropzone--active']: isDragActive,
-      ['Dropzone--error']: isDragReject,
-      ['Dropzone-animation']: true,
-      ['Dropzone-animation--default']: !isDragActive && type !== 'standard',
-      ['Dropzone-animation--active']: isDragActive && !isDragReject && type !== 'standard',
-      ['Dropzone-standard--default']: !isDragActive && type === 'standard',
-      ['Dropzone-standard--active']: isDragActive && !isDragReject && type === 'standard',
+      [styles['Dropzone']]: true,
+      [styles[`Dropzone--${type}`]]: type,
+      [styles['Dropzone--disabled']]: disabled,
+      [styles['Dropzone--active']]: isDragActive,
+      [styles['Dropzone--error']]: isDragReject,
+      [styles['Dropzone-animation']]: true,
+      [styles['Dropzone-animation--default']]: !isDragActive && type !== 'standard',
+      [styles['Dropzone-animation--active']]: isDragActive && !isDragReject && type !== 'standard',
+      [styles['Dropzone-standard--default']]: !isDragActive && type === 'standard',
+      [styles['Dropzone-standard--active']]: isDragActive && !isDragReject && type === 'standard',
     },
     className
   );
 
   const WrapperClass = classNames({
-    ['DropzoneWrapper']: true,
-    [`DropzoneWrapper--${type}`]: true,
+    [styles['DropzoneWrapper']]: true,
+    [styles[`DropzoneWrapper--${type}`]]: true,
   });
 
   const renderDropzone = () => {

diff --git a/core/components/molecules/dropzone/DropzoneIcon.tsx b/core/components/molecules/dropzone/DropzoneIcon.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import styles from '@css/components/dropzone.module.css';
 
 type SVGIconProps = {
   /**
@@ -33,14 +34,14 @@ const DropzoneIcon = (props: SVGIconProps) => {
   return (
     <svg
       style={IconStyle}
-      className={`Dropzone-icon--${props.type}`}
+      className={styles[`Dropzone-icon--${props.type}`]}
       viewBox="0 0 64 64"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d={svgCode[props.name]}
-        className={props.disabled ? 'Dropzone-icon--disabled' : `Dropzone-icon--${props.name}`}
+        className={props.disabled ? styles['Dropzone-icon--disabled'] : styles[`Dropzone-icon--${props.name}`]}
       />
     </svg>
   );

diff --git a/core/components/molecules/editableChipInput/EditableChipInput.tsx b/core/components/molecules/editableChipInput/EditableChipInput.tsx
@@ -4,6 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { ChipInput, Button, Chip, Text } from '@/index';
 import { BaseProps, extractBaseProps } from '@/utils/types';
 import { ChipInputProps } from '@/index.type';
+import styles from '@css/components/editableChipInput.module.css';
 
 export interface EditableChipInputProps extends BaseProps {
   /**
@@ -51,22 +52,22 @@ export const EditableChipInput = (props: EditableChipInputProps) => {
 
   const classes = classNames(
     {
-      ['EditableChipInput']: true,
+      [styles['EditableChipInput']]: true,
     },
     className
   );
 
   const actionClass = classNames({
-    ['EditableChipInput-actions']: true,
+    [styles['EditableChipInput-actions']]: true,
   });
 
   const defaultClasses = classNames({
-    ['EditableChipInput-default']: !isWithChips,
-    ['EditableChipInput-defaultWithChips']: isWithChips,
+    [styles['EditableChipInput-default']]: !isWithChips,
+    [styles['EditableChipInput-defaultWithChips']]: isWithChips,
   });
 
   const inputClass = classNames({
-    ['EditableChipInput-chipInput']: true,
+    [styles['EditableChipInput-chipInput']]: true,
   });
 
   const onChipInputChangeHandler = (val: string[]) => {

diff --git a/core/components/molecules/editableDropdown/EditableDropdown.tsx b/core/components/molecules/editableDropdown/EditableDropdown.tsx
@@ -4,6 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { Dropdown } from '@/index';
 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']>;
 
@@ -33,13 +34,13 @@ export const EditableDropdown = (props: EditableDropdownProps) => {
 
   const CompClass = classNames(
     {
-      ['EditableDropdown']: true,
+      [styles['EditableDropdown']]: true,
     },
     className
   );
 
   const DefaultCompClass = classNames({
-    ['EditableDropdown-default']: true,
+    [styles['EditableDropdown-default']]: true,
     ['d-none']: showComponent,
   });
 

diff --git a/core/components/molecules/editableInput/EditableInput.tsx b/core/components/molecules/editableInput/EditableInput.tsx
@@ -4,6 +4,7 @@ import Editable from '@/components/atoms/editable';
 import { Input, Button, Popover, InlineMessage } from '@/index';
 import { InputProps } from '@/index.type';
 import { BaseProps, extractBaseProps } from '@/utils/types';
+import styles from '@css/components/editableInput.module.css';
 
 export interface EditableInputProps extends BaseProps {
   /**
@@ -60,23 +61,23 @@ export const EditableInput = (props: EditableInputProps) => {
 
   const EditableInputClass = classNames(
     {
-      ['EditableInput']: true,
+      [styles['EditableInput']]: true,
     },
     className
   );
 
   const EditableDefaultClass = classNames({
-    ['EditableInput-default']: true,
-    [`EditableInput-default--${size}`]: size,
+    [styles['EditableInput-default']]: true,
+    [styles[`EditableInput-default--${size}`]]: size,
   });
 
   const InputClass = classNames({
-    ['EditableInput-Input--tiny']: size === 'tiny',
+    [styles['EditableInput-Input--tiny']]: size === 'tiny',
   });
 
   const ActionClass = classNames({
-    ['EditableInput-actions']: true,
-    [`EditableInput-actions--${size}`]: size,
+    [styles['EditableInput-actions']]: true,
+    [styles[`EditableInput-actions--${size}`]]: size,
   });
 
   const setDefaultComponent = (updatedValue?: string) => {

diff --git a/core/components/molecules/emptyState/EmptyState.tsx b/core/components/molecules/emptyState/EmptyState.tsx
@@ -9,6 +9,7 @@ import EmptyStateTitle from './EmptyStateTitle';
 import EmptyStateDescription from './EmptyStateDescription';
 import EmptyStateActions from './EmptyStateActions';
 import { TEmptyStateSize } from '@/common.type';
+import styles from '@css/components/emptyState.module.css';
 
 export interface EmptyStateProps extends BaseProps {
   /** @ignore */
@@ -106,21 +107,21 @@ export const EmptyState = (props: EmptyStateProps) => {
 
   const wrapperClasses = classNames(
     {
-      ['EmptyState']: true,
+      [styles['EmptyState']]: true,
     },
     className
   );
 
-  const emptyStateWrapper = classNames({ ['EmptyState-Wrapper']: true }, className);
+  const emptyStateWrapper = classNames({ [styles['EmptyState-Wrapper']]: true }, className);
 
   const headingClasses = classNames({
-    ['EmptyState-title']: true,
-    [`EmptyState-title--${templateSize}`]: true,
+    [styles['EmptyState-title']]: true,
+    [styles[`EmptyState-title--${templateSize}`]]: true,
   });
 
   const textClasses = classNames({
-    ['EmptyState-description']: true,
-    [`EmptyState-description--${templateSize}`]: children !== undefined,
+    [styles['EmptyState-description']]: true,
+    [styles[`EmptyState-description--${templateSize}`]]: children !== undefined,
   });
 
   if (title || description) {

diff --git a/core/components/molecules/emptyState/EmptyStateActions.tsx b/core/components/molecules/emptyState/EmptyStateActions.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { BaseProps } from '@/utils/types';
 import EmptyStateContext from './EmptyStateContext';
+import styles from '@css/components/emptyState.module.css';
 
 export interface EmptyActionProps extends BaseProps {
   /**
@@ -19,8 +20,8 @@ const EmptyStateActions = (props: EmptyActionProps) => {
 
   const actionWrapperClasses = classNames(
     {
-      [`EmptyState-actions--${size}`]: true,
-      ['EmptyState-actions']: true,
+      [styles[`EmptyState-actions--${size}`]]: true,
+      [styles['EmptyState-actions']]: true,
     },
     className
   );

diff --git a/core/components/molecules/emptyState/EmptyStateDescription.tsx b/core/components/molecules/emptyState/EmptyStateDescription.tsx
@@ -4,6 +4,7 @@ import { BaseProps } from '@/utils/types';
 import { Text } from '@/index';
 import { TextSize } from 'types';
 import EmptyStateContext from './EmptyStateContext';
+import styles from '@css/components/emptyState.module.css';
 
 export interface EmptyDescriptionProps extends BaseProps {
   /**
@@ -27,7 +28,7 @@ const EmptyStateDescription = (props: EmptyDescriptionProps) => {
 
   const descriptionClasses = classNames(
     {
-      [`EmptyState-text`]: true,
+      [styles[`EmptyState-text`]]: true,
       ['mt-3']: true,
     },
     className

diff --git a/core/components/molecules/emptyState/EmptyStateImage.tsx b/core/components/molecules/emptyState/EmptyStateImage.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { BaseProps } from '@/utils/types';
 import EmptyStateContext from './EmptyStateContext';
 import classNames from 'classnames';
+import styles from '@css/components/emptyState.module.css';
 
 export interface EmptyImageProps extends BaseProps, React.ImgHTMLAttributes<HTMLImageElement> {
   /**
@@ -56,7 +57,7 @@ const EmptyStateImage = (props: EmptyImageProps) => {
 
   const imageClasses = classNames(
     {
-      ['EmptyState-image']: true,
+      [styles['EmptyState-image']]: true,
     },
     className
   );

diff --git a/core/components/molecules/emptyState/EmptyStateTitle.tsx b/core/components/molecules/emptyState/EmptyStateTitle.tsx
@@ -4,6 +4,7 @@ import { BaseProps } from '@/utils/types';
 import { Heading, Text } from '@/index';
 import EmptyStateContext from './EmptyStateContext';
 import { textSize } from './EmptyState';
+import styles from '@css/components/emptyState.module.css';
 
 export interface EmptyDescriptionProps extends BaseProps {
   /**
@@ -21,8 +22,8 @@ const EmptyStateTitle = (props: EmptyDescriptionProps) => {
 
   const headingClass = classNames(
     {
-      [`EmptyState-text`]: true,
-      [`EmptyState-title--${size}`]: true,
+      [styles[`EmptyState-text`]]: true,
+      [styles[`EmptyState-title--${size}`]]: true,
     },
     className
   );

diff --git a/core/components/molecules/fileList/FileIcon.tsx b/core/components/molecules/fileList/FileIcon.tsx
@@ -3,6 +3,7 @@ import { ProgressRing, Icon } from '@/index';
 import { FileListItemProps } from './FileListItem';
 import classNames from 'classnames';
 const { useEffect, useState } = React;
+import styles from '@css/components/fileList.module.css';
 
 const IconMapping: { [key: string]: string } = {
   audio: 'audiotrack',
@@ -26,14 +27,14 @@ export const FileIcon = (props: FileIconProps) => {
   const fileType = IconMapping[type] ? type : 'others';
 
   const iconClass = classNames({
-    ['FileIcon']: true,
-    ['FileIcon--animate']: animate,
-    [`FileIcon--${fileType}`]: true,
+    [styles['FileIcon']]: true,
+    [styles['FileIcon--animate']]: animate,
+    [styles[`FileIcon--${fileType}`]]: true,
   });
 
   const uploadingIconClass = classNames({
-    ['FileIcon']: true,
-    ['FileIcon--uploading']: true,
+    [styles['FileIcon']]: true,
+    [styles['FileIcon--uploading']]: true,
   });
 
   useEffect(() => {