Replaced Alert throughout the project (#2951)

Replaced Alert with the reusable component from a design system.
Also, I've changed the import order in related files to match our coding convention.

src/constants/index.ts

@@ -1,4 +1,4 @@
-import { AlertColor } from '@mui/material/Alert'
+import { type AlertColor } from '~/design-system/components/alert/Alert'
 
 export const s2s = 's2s'
 

src/containers/layout/app-snackbar/AppSnackbar.styles.ts

@@ -1,13 +1,6 @@
 export const styles = {
-  alert: {
-    color: 'basic.white'
-  },
   action: {
     p: '4px 8px 0 30px',
     cursor: 'pointer'
-  },
-  secondMessage: {
-    fontSize: '12px',
-    fontWeight: '300'
   }
 }

src/containers/layout/app-snackbar/AppSnackbar.tsx

@@ -1,11 +1,14 @@
-import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
 import Snackbar from '@mui/material/Snackbar'
-import Alert from '@mui/material/Alert'
 import Box from '@mui/material/Box'
 
+import { useAppDispatch, useAppSelector } from '~/hooks/use-redux'
 import { closeAlert, snackbarSelector } from '~/redux/features/snackbarSlice'
-import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
+
+import Alert from '~/design-system/components/alert/Alert'
+
 import { styles } from '~/containers/layout/app-snackbar/AppSnackbar.styles'
 
 const AppSnackbar = () => {
@@ -21,10 +24,6 @@ const AppSnackbar = () => {
   const translatedMessage =
     typeof message === 'string' ? t(message) : t(message.text, message.options)
 
-  const actionBody = translatedMessage
-    .split(', ')
-    .map((line) => <Box key={line}>{line}</Box>)
-
   const handleButtonClick = () => {
     navigate(route!)
     handleClose()
@@ -36,14 +35,9 @@ const AppSnackbar = () => {
     </Box>
   )
 
-  const [firstMessage, secondMessage] = translatedMessage.split(';')
-
-  const extendedBody = (
-    <>
-      <Box>{firstMessage}</Box>
-      <Box sx={styles.secondMessage}>{secondMessage}</Box>
-    </>
-  )
+  const [firstMessage, secondMessage] = isExtended
+    ? translatedMessage.split(';')
+    : translatedMessage.split(', ')
 
   return (
     <Snackbar
@@ -54,12 +48,11 @@ const AppSnackbar = () => {
     >
       <Alert
         action={isExtended && actionButton}
+        description={secondMessage}
         severity={severity}
-        sx={styles.alert}
+        title={firstMessage}
         variant='filled'
-      >
-        {isExtended ? extendedBody : actionBody}
-      </Alert>
+      />
     </Snackbar>
   )
 }

src/design-system/components/alert/Alert.scss

@@ -118,4 +118,14 @@
     margin: 0 0.5rem;
     height: auto;
   }
+
+  & .s2s-alert-description {
+    margin: 0;
+  }
+
+  & .MuiAlert-action {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+  }
 }

src/design-system/components/alert/Alert.tsx

@@ -17,6 +17,8 @@ import { cn } from '~/utils/cn'
 
 import '~scss-components/alert/Alert.scss'
 
+export type AlertColor = 'success' | 'info' | 'warning' | 'error'
+
 export const AlertTitle = ({ children, ...props }: AlertTitleProps) => {
   return <MuiAlertTitle {...props}>{children}</MuiAlertTitle>
 }
@@ -52,10 +54,7 @@ interface AlertProps extends MuiAlertProps {
 }
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  (
-    { title, label, description, children, icon, onClose, className, ...props },
-    ref
-  ) => {
+  ({ title, label, description, icon, onClose, className, ...props }, ref) => {
     const handleClose = (event: SyntheticEvent) => {
       if (onClose) {
         onClose(event)
@@ -75,8 +74,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
         {...props}
       >
         {title && <AlertTitle>{title}</AlertTitle>}
-        {description && <p>{description}</p>}
-        {children}
+        {description && <p className='s2s-alert-description'>{description}</p>}
       </MuiAlert>
     )
   }

src/design-system/stories/Alert.stories.tsx

@@ -48,9 +48,6 @@ const meta: Meta<typeof Alert> = {
     icon: {
       description:
         'Override the icon displayed before the children. Unless provided, the icon is mapped to the value of the severity prop.'
-    },
-    children: {
-      description: 'The content of the alert.'
     }
   }
 }

src/redux/features/snackbarSlice.ts

@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction, Draft } from '@reduxjs/toolkit'
-import { AlertColor } from '@mui/material/Alert'
 import { sliceNames } from '~/redux/redux.constants'
 import { RootState } from '~/redux/store'
 import { TOptions } from 'i18next/typescript/options'
 
+import { type AlertColor } from '~/design-system/components/alert/Alert'
+
 interface ExtendedSnackbarMessage {
   text: string
   options: Draft<TOptions>

tests/unit/design-system/components/Alert/Alert.spec.jsx

@@ -11,16 +11,6 @@ describe('Alert Component', () => {
     expect(screen.getByText('Test Description')).toBeInTheDocument()
   })
 
-  test('renders children content', () => {
-    render(
-      <Alert>
-        <span>Child Content</span>
-      </Alert>
-    )
-
-    expect(screen.getByText('Child Content')).toBeInTheDocument()
-  })
-
   test('renders the icon provided via the icon prop', () => {
     render(<Alert icon={<InfoOutlined data-testid='custom-icon' />} />)