diff --git a/src/constants/index.ts b/src/constants/index.ts index 8eb96bb25..573c92020 100644 --- a/src/constants/index.ts +++ b/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' diff --git a/src/containers/layout/app-snackbar/AppSnackbar.styles.ts b/src/containers/layout/app-snackbar/AppSnackbar.styles.ts index db1911ea2..50e63e22c 100644 --- a/src/containers/layout/app-snackbar/AppSnackbar.styles.ts +++ b/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' } } diff --git a/src/containers/layout/app-snackbar/AppSnackbar.tsx b/src/containers/layout/app-snackbar/AppSnackbar.tsx index d72bf172e..a45e5d846 100644 --- a/src/containers/layout/app-snackbar/AppSnackbar.tsx +++ b/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> ) } diff --git a/src/design-system/components/alert/Alert.scss b/src/design-system/components/alert/Alert.scss index 55c4bb01b..09402e820 100644 --- a/src/design-system/components/alert/Alert.scss +++ b/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; + } } diff --git a/src/design-system/components/alert/Alert.tsx b/src/design-system/components/alert/Alert.tsx index 87ad71ff3..84e43d3b1 100644 --- a/src/design-system/components/alert/Alert.tsx +++ b/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> ) } diff --git a/src/design-system/stories/Alert.stories.tsx b/src/design-system/stories/Alert.stories.tsx index b53a58557..b0cca1e47 100644 --- a/src/design-system/stories/Alert.stories.tsx +++ b/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.' } } } diff --git a/src/redux/features/snackbarSlice.ts b/src/redux/features/snackbarSlice.ts index b83988a79..d31f3af10 100644 --- a/src/redux/features/snackbarSlice.ts +++ b/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> diff --git a/tests/unit/design-system/components/Alert/Alert.spec.jsx b/tests/unit/design-system/components/Alert/Alert.spec.jsx index 2037d7ed9..fca5f3fdb 100644 --- a/tests/unit/design-system/components/Alert/Alert.spec.jsx +++ b/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' />} />)