chore: InfoBlockVariant type separate out

Author: shivani170

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

@@ -24,11 +24,11 @@ import {
     SIZE_TO_ICON_CLASS_MAP,
     VARIANT_TO_ICON_MAP,
 } from './constants'
-import { InfoBlockProps } from './types'
+import { InfoBlockProps, InfoBlockVariant } from './types'
 
 const InfoBlock = ({
     layout = 'row',
-    variant = 'information',
+    variant = InfoBlockVariant.INFORMATION,
     size = ComponentSizeType.large,
     customIcon,
     buttonProps,

src/Shared/Components/InfoBlock/constants.tsx

@@ -18,15 +18,15 @@ import { ComponentSizeType } from '@Shared/constants'
 
 import { ButtonProps } from '../Button'
 import { Icon } from '../Icon'
-import { InfoBlockProps } from './types'
+import { InfoBlockProps, InfoBlockVariant } from './types'
 
-export const VARIANT_TO_ICON_MAP: Record<InfoBlockProps['variant'], InfoBlockProps['customIcon']> = {
-    error: <Icon name="ic-error" color="R500" />,
-    help: <Icon name="ic-help-outline" color="V500" />,
-    information: <Icon name="ic-info-filled" color="B500" />,
-    success: <Icon name="ic-success" color="G500" />,
-    warning: <Icon name="ic-warning" color="Y500" />,
-    neutral: <Icon name="ic-info-filled" color={null} />,
+export const VARIANT_TO_ICON_MAP: Record<InfoBlockVariant, InfoBlockProps['customIcon']> = {
+    [InfoBlockVariant.ERROR]: <Icon name="ic-error" color="R500" />,
+    [InfoBlockVariant.HELP]: <Icon name="ic-help-outline" color="V500" />,
+    [InfoBlockVariant.INFORMATION]: <Icon name="ic-info-filled" color="B500" />,
+    [InfoBlockVariant.SUCCESS]: <Icon name="ic-success" color="G500" />,
+    [InfoBlockVariant.WARNING]: <Icon name="ic-warning" color="Y500" />,
+    [InfoBlockVariant.NEUTRAL]: <Icon name="ic-info-filled" color={null} />,
 }
 
 export const CONTAINER_SIZE_TO_CLASS_MAP: Record<InfoBlockProps['size'], string> = {

src/Shared/Components/InfoBlock/types.ts

@@ -21,6 +21,14 @@ import { BorderConfigType, ComponentLayoutType } from '@Shared/types'
 
 import { ButtonComponentType, ButtonProps } from '../Button'
 
+export enum InfoBlockVariant {
+    ERROR = 'error',
+    HELP = 'help',
+    INFORMATION = 'information',
+    SUCCESS = 'success',
+    WARNING = 'warning',
+    NEUTRAL = 'neutral',
+}
 export type InfoBlockProps = {
     /**
      * @default 'row'
@@ -29,7 +37,7 @@ export type InfoBlockProps = {
     /**
      * @default 'information'
      */
-    variant?: 'error' | 'help' | 'information' | 'success' | 'warning' | 'neutral'
+    variant?: InfoBlockVariant
     /**
      * @default ComponentSizeType.large
      */

src/Shared/constants.tsx

@@ -16,7 +16,7 @@
 
 import { OptionType } from '@Common/Types'
 
-import { InfoBlockProps } from './Components'
+import { InfoBlockVariant } from './Components'
 import { CDMaterialSidebarType, ConfigKeysWithLockType, ConfigurationType, IconBaseColorType } from './types'
 
 export const ARTIFACT_STATUS = {
@@ -555,29 +555,29 @@ export const ENTERPRISE_SUPPORT_LINK = 'enterprise@devtron.ai'
 
 export const INVALID_LICENSE_KEY = 'inValid'
 
-export const VARIANT_TO_BG_MAP: Record<InfoBlockProps['variant'], string> = {
-    error: 'bcr-1',
-    help: 'bcv-1',
-    information: 'bcb-1',
-    success: 'bcg-1',
-    warning: 'bcy-1',
-    neutral: 'bcn-1',
+export const VARIANT_TO_BG_MAP: Record<InfoBlockVariant, string> = {
+    [InfoBlockVariant.ERROR]: 'bcr-1',
+    [InfoBlockVariant.HELP]: 'bcv-1',
+    [InfoBlockVariant.INFORMATION]: 'bcb-1',
+    [InfoBlockVariant.SUCCESS]: 'bcg-1',
+    [InfoBlockVariant.WARNING]: 'bcy-1',
+    [InfoBlockVariant.NEUTRAL]: 'bcn-1',
 }
 
-export const VARIANT_TO_ICON_COLOR_MAP: Record<InfoBlockProps['variant'], IconBaseColorType> = {
-    error: 'R500',
-    help: 'V500',
-    information: 'B500',
-    success: 'G500',
-    warning: 'Y700',
-    neutral: 'N500',
+export const VARIANT_TO_ICON_COLOR_MAP: Record<InfoBlockVariant, IconBaseColorType> = {
+    [InfoBlockVariant.ERROR]: 'R500',
+    [InfoBlockVariant.HELP]: 'V500',
+    [InfoBlockVariant.INFORMATION]: 'B500',
+    [InfoBlockVariant.SUCCESS]: 'G500',
+    [InfoBlockVariant.WARNING]: 'Y700',
+    [InfoBlockVariant.NEUTRAL]: 'N500',
 }
 
-export const VARIANT_TO_BORDER_MAP: Record<InfoBlockProps['variant'], string> = {
-    error: 'er-2',
-    help: 'ev-2',
-    information: 'eb-2',
-    success: 'eg-2',
-    warning: 'ey-2',
-    neutral: 'en-2',
+export const VARIANT_TO_BORDER_MAP: Record<InfoBlockVariant, string> = {
+    [InfoBlockVariant.ERROR]: 'er-2',
+    [InfoBlockVariant.HELP]: 'ev-2',
+    [InfoBlockVariant.INFORMATION]: 'eb-2',
+    [InfoBlockVariant.SUCCESS]: 'eg-2',
+    [InfoBlockVariant.WARNING]: 'ey-2',
+    [InfoBlockVariant.NEUTRAL]: 'en-2',
 }