Created Alert component aligned with design system (#2895)

Implemented a reusable Alert component that meets the design system standards. This component will be used throughout the application to maintain consistency in alert styles, behavior, and accessibility.

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

@@ -0,0 +1,121 @@
+@use '~scss/utilities' as *;
+
+.#{$prefix}alert {
+  --#{$prefix}alert-padding-x: #{get-var('space-2')};
+  --#{$prefix}alert-padding-y: #{get-var('space-1-5')};
+  --#{$prefix}alert-inner-gap: #{get-var('space-0')};
+  --#{$prefix}alert-font-size: #{get-var('font-size-sm')};
+  --#{$prefix}alert-font-weight: #{get-var('font-weight-regular')};
+  --#{$prefix}alert-line-height: #{get-var('line-height-md')};
+  --#{$prefix}alert-border-width: #{get-var('border-width-xs')};
+  --#{$prefix}alert-border-radius: #{get-var('border-radius-xs')};
+  --#{$prefix}alert-shadow: #{get-var('box-shadow-xs')};
+  --#{$prefix}alert-color: #{get-var('blue-gray-800')};
+
+  position: relative;
+  padding: get-var('alert-padding-y') get-var('alert-padding-x');
+  font-size: get-var('alert-font-size');
+  line-height: get-var('alert-line-height');
+  font-weight: get-var('alert-font-weight');
+  border-width: get-var('alert-border-width');
+  border-radius: get-var('alert-border-radius');
+  box-shadow: get-var('alert-shadow');
+  gap: get-var('alert-inner-gap');
+  color: get-var('alert-color');
+
+  & .MuiAlertTitle-root {
+    font-weight: $font-weight-medium;
+    font-size: $font-size-md;
+    line-height: $line-height-lg;
+  }
+
+  &.MuiAlert-filled {
+    color: $neutral-0;
+
+    .s2s-alert-close-button {
+      color: $blue-gray-50;
+    }
+  }
+
+  &.MuiAlert-outlined {
+    color: $neutral-0;
+
+    .s2s-alert-close-button {
+      color: $blue-gray-800;
+    }
+  }
+
+  &.MuiAlert-colorError {
+    border-color: $red-500;
+  }
+
+  &.MuiAlert-colorError.MuiAlert-filled {
+    color: $red-50;
+    background-color: $red-500;
+  }
+
+  &.MuiAlert-colorError.MuiAlert-outlined {
+    color: $red-800;
+    background-color: $red-50;
+  }
+
+  &.MuiAlert-colorWarning {
+    border-color: $yellow-500;
+  }
+
+  &.MuiAlert-colorWarning.MuiAlert-filled {
+    background-color: $yellow-500;
+  }
+
+  &.MuiAlert-colorWarning.MuiAlert-outlined {
+    color: $yellow-800;
+    background-color: $yellow-100;
+  }
+
+  &.MuiAlert-colorInfo {
+    border-color: $blue-500;
+  }
+
+  &.MuiAlert-colorInfo.MuiAlert-filled {
+    background-color: $blue-500;
+  }
+
+  &.MuiAlert-colorInfo.MuiAlert-outlined {
+    color: $blue-800;
+    background-color: $blue-100;
+  }
+
+  &.MuiAlert-colorSuccess {
+    border-color: $green-600;
+  }
+
+  &.MuiAlert-colorSuccess.MuiAlert-filled {
+    background-color: $green-600;
+  }
+
+  &.MuiAlert-colorSuccess.MuiAlert-outlined {
+    color: $green-800;
+    background-color: $green-100;
+  }
+
+  & .s2s-alert-close-button {
+    background: transparent;
+    border: none;
+    border-radius: $border-radius-md;
+    font-weight: $font-weight-medium;
+    font-size: $font-size-sm;
+    line-height: $line-height-sm;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  & .s2s-alert-close-button-label {
+    margin: 0 0.5rem;
+    height: auto;
+  }
+}

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

@@ -0,0 +1,87 @@
+import { SyntheticEvent, forwardRef, ButtonHTMLAttributes } from 'react'
+import {
+  Alert as MuiAlert,
+  AlertProps as MuiAlertProps,
+  AlertTitle as MuiAlertTitle,
+  AlertTitleProps
+} from '@mui/material'
+import {
+  ErrorOutline,
+  WarningAmberOutlined,
+  InfoOutlined,
+  CheckCircleOutline,
+  CloseRounded
+} from '@mui/icons-material'
+
+import { cn } from '~/utils/cn'
+
+import '~scss-components/alert/Alert.scss'
+
+export const AlertTitle = ({ children, ...props }: AlertTitleProps) => {
+  return <MuiAlertTitle {...props}>{children}</MuiAlertTitle>
+}
+
+AlertTitle.displayName = 'AlertTitle'
+
+interface CloseButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  label?: string
+}
+
+const CloseButton = ({ label }: CloseButtonProps) => {
+  return (
+    <button aria-label='Close alert' className='s2s-alert-close-button'>
+      {label && <span className='s2s-alert-close-button-label'>{label}</span>}
+      <CloseRounded />
+    </button>
+  )
+}
+
+CloseButton.displayName = 'CloseButton'
+
+const iconMapping = {
+  error: <ErrorOutline fontSize='inherit' />,
+  warning: <WarningAmberOutlined fontSize='inherit' />,
+  info: <InfoOutlined fontSize='inherit' />,
+  success: <CheckCircleOutline fontSize='inherit' />
+}
+
+interface AlertProps extends MuiAlertProps {
+  title?: string
+  description?: string
+  label?: string
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>(
+  (
+    { title, label, description, children, icon, onClose, className, ...props },
+    ref
+  ) => {
+    const handleClose = (event: SyntheticEvent) => {
+      if (onClose) {
+        onClose(event)
+      }
+    }
+
+    return (
+      <MuiAlert
+        className={cn('s2s-alert', className)}
+        icon={icon}
+        iconMapping={iconMapping}
+        onClose={handleClose}
+        ref={ref}
+        slots={{
+          closeButton: () => <CloseButton label={label} />
+        }}
+        {...props}
+      >
+        {title && <AlertTitle>{title}</AlertTitle>}
+        {description && <p>{description}</p>}
+        {children}
+      </MuiAlert>
+    )
+  }
+)
+
+Alert.displayName = 'Alert'
+
+export default Alert