feat: refactor InfoBlock component to use size-based class mappings for container and icon

Author: AbhishekA1509

src/Shared/Components/InfoBlock/InfoBlock.component.tsx

@@ -1,8 +1,12 @@
 import { ComponentSizeType } from '@Shared/constants'
-import { cloneElement } from 'react'
 import { deriveBorderClassFromConfig, deriveBorderRadiusClassFromConfig } from '@Shared/Helpers'
 import { InfoBlockProps } from './types'
-import { VARIANT_TO_BG_MAP, VARIANT_TO_ICON_MAP } from './constants'
+import {
+    CONTAINER_SIZE_TO_CLASS_MAP,
+    SIZE_TO_ICON_CLASS_MAP,
+    VARIANT_TO_BG_MAP,
+    VARIANT_TO_ICON_MAP,
+} from './constants'
 import { Button } from '../Button'
 
 const InfoBlock = ({
@@ -15,15 +19,12 @@ const InfoBlock = ({
     description,
     borderRadiusConfig,
     borderConfig,
-    fullWidth = true,
 }: InfoBlockProps) => {
-    const baseContainerClass = `${size === ComponentSizeType.large ? 'px-12' : 'px-8'} ${VARIANT_TO_BG_MAP[variant]} ${deriveBorderRadiusClassFromConfig(borderRadiusConfig)} ${deriveBorderClassFromConfig(borderConfig)} ${fullWidth ? 'w-100' : ''} py-8 br-4 bw-1`
-    const Icon = customIcon ?? VARIANT_TO_ICON_MAP[variant]
+    const baseContainerClass = `${CONTAINER_SIZE_TO_CLASS_MAP[size]} ${VARIANT_TO_BG_MAP[variant]} ${deriveBorderRadiusClassFromConfig(borderRadiusConfig)} ${deriveBorderClassFromConfig(borderConfig)} w-100 py-8 br-4 bw-1`
+    const iconClass = `dc__no-shrink flex dc__fill-available-space ${SIZE_TO_ICON_CLASS_MAP[size]}`
+    const icon = customIcon ?? VARIANT_TO_ICON_MAP[variant]
 
-    const renderIcon = () =>
-        cloneElement(Icon, {
-            className: `${Icon.props?.className ?? ''} ${size === ComponentSizeType.large ? 'icon-dim-20' : 'icon-dim-18'} dc__no-shrink`,
-        })
+    const renderIcon = () => <span className={iconClass}>{icon}</span>
 
     const renderHeading = () => {
         if (!heading) {

src/Shared/Components/InfoBlock/constants.tsx

@@ -3,6 +3,7 @@ import { ReactComponent as ICError } from '@Icons/ic-error.svg'
 import { ReactComponent as ICSuccess } from '@Icons/ic-success.svg'
 import { ReactComponent as ICWarningY5 } from '@Icons/ic-warning-y5.svg'
 import { ReactComponent as ICHelp } from '@Icons/ic-help.svg'
+import { ComponentSizeType } from '@Shared/constants'
 import { InfoBlockProps } from './types'
 
 export const VARIANT_TO_BG_MAP: Record<InfoBlockProps['variant'], string> = {
@@ -20,3 +21,13 @@ export const VARIANT_TO_ICON_MAP: Record<InfoBlockProps['variant'], InfoBlockPro
     success: <ICSuccess />,
     warning: <ICWarningY5 />,
 }
+
+export const CONTAINER_SIZE_TO_CLASS_MAP: Record<InfoBlockProps['size'], string> = {
+    [ComponentSizeType.large]: 'px-12',
+    [ComponentSizeType.medium]: 'px-8',
+}
+
+export const SIZE_TO_ICON_CLASS_MAP: Record<InfoBlockProps['size'], string> = {
+    [ComponentSizeType.large]: 'icon-dim-20',
+    [ComponentSizeType.medium]: 'icon-dim-18',
+}

src/Shared/Components/InfoBlock/types.ts

@@ -23,10 +23,6 @@ export type InfoBlockProps = {
     buttonProps?: ButtonProps
     borderConfig?: BorderConfigType
     borderRadiusConfig?: BorderConfigType
-    /**
-     * @default true
-     */
-    fullWidth?: boolean
 } & (
     | {
           /**