From 6bc5b39b5d7abc34ae8a9b9ee60d221e99b7c010 Mon Sep 17 00:00:00 2001
From: Danielle Lindblom <114356705+Danielle254@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:19:36 -0600
Subject: [PATCH] Danielle/482 notifications needs a way to exit the modal
 (#609)

Before
![before
PR](https://github.com/user-attachments/assets/d33b5fce-7076-45a9-8645-603fa07920ab)


- Changed background color to `muted` for better contrast
- Added button to manually close the alert before it expires
- Button is styled with `ghost` and standard `icon` size
- Close button is accessible by keyboard and labeled

![10_11
screen](https://github.com/user-attachments/assets/20ee4af1-08ec-43ca-a246-21d45e607c0d)
---
 components/Alert/Alert.tsx                    |  8 ++--
 .../AlertNotification.test.tsx                | 38 +++++++++++++++++--
 .../AlertNotification/AlertNotification.tsx   | 19 ++++++++--
 3 files changed, 53 insertions(+), 12 deletions(-)

diff --git a/components/Alert/Alert.tsx b/components/Alert/Alert.tsx
index 80fc809f..fff2d4b8 100644
--- a/components/Alert/Alert.tsx
+++ b/components/Alert/Alert.tsx
@@ -9,13 +9,13 @@ const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-background text-foreground',
+        default: 'bg-muted text-muted-foreground',
         error:
-          'bg-background text-error [&>svg]:text-error text-error border-error',
+          'bg-muted text-error [&>svg]:text-error text-error border-error',
         warning:
-          'bg-background text-warning [&>svg]:text-warning text-warning border-warning',
+          'bg-muted text-warning [&>svg]:text-warning text-warning border-warning',
         success:
-          'bg-background text-success [&>svg]:text-success text-success border-success',
+          'bg-muted text-success [&>svg]:text-success text-success border-success',
       },
     },
     defaultVariants: {
diff --git a/components/AlertNotification/AlertNotification.test.tsx b/components/AlertNotification/AlertNotification.test.tsx
index 0d307594..39555f5e 100644
--- a/components/AlertNotification/AlertNotification.test.tsx
+++ b/components/AlertNotification/AlertNotification.test.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import Alert from './AlertNotification';
 import { AlertVariants } from './Alerts.enum';
 import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
+import React from 'react';
+import { render, screen, fireEvent} from '@testing-library/react';
+import toast from 'react-hot-toast';
 
 const variantTestCases = {
   [AlertVariants.Success]: {
@@ -30,7 +31,36 @@ const variantTestCases = {
 describe('AlertNotification', () => {
   for (const [key, value] of Object.entries(variantTestCases)) {
     it(`renders the correct variant ${key}`, () => {
-      render(<Alert variant={AlertVariants[key]} message={value.message} />);
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+    });
+
+    it('should render the dismiss button on each alert type', () => {
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+      const dismissButton = screen.getByTestId('dismiss-alert-btn');
+      expect(dismissButton).toBeInTheDocument();
+    });
+
+    it('should fire the toast.remove() function when dismiss button is clicked', async () => {
+      const spyToast = jest.spyOn(toast, 'remove');
+      render(
+        <Alert
+          variant={AlertVariants[key as keyof typeof AlertVariants]}
+          message={value.message}
+        />,
+      );
+      const dismissButton = screen.getByTestId('dismiss-alert-btn');      
+      fireEvent.click(dismissButton);      
+      expect(spyToast).toHaveBeenCalled();
     });
-  }
+  };
 });
diff --git a/components/AlertNotification/AlertNotification.tsx b/components/AlertNotification/AlertNotification.tsx
index fb07b49b..95020f32 100644
--- a/components/AlertNotification/AlertNotification.tsx
+++ b/components/AlertNotification/AlertNotification.tsx
@@ -2,12 +2,14 @@
 // Licensed under the MIT License.
 
 import { Alert as AlertDefault } from '../Alert/Alert';
-import { AlertTitle } from '../AlertTItle/AlertTitle';
 import { AlertDescription } from '../AlertDescription/AlertDescription';
-import { JSX } from 'react';
-import { CheckCircle, XCircle, Info, AlertTriangle } from 'lucide-react';
-import { IAlertNotification } from './AlertNotification.interface';
+import { AlertTitle } from '../AlertTItle/AlertTitle';
 import { AlertVariants } from './Alerts.enum';
+import { Button } from '../Button/Button';
+import { CheckCircle, XCircle, Info, AlertTriangle, X } from 'lucide-react';
+import { IAlertNotification } from './AlertNotification.interface';
+import { JSX } from 'react';
+import toast from 'react-hot-toast';
 
 const variantConfig = {
   success: {
@@ -46,6 +48,15 @@ const Alert = ({
       <Icon className="h-4 w-4" data-testid="alert-icon" />
       <AlertTitle title={title} data-testid="alert-title" />
       <AlertDescription message={message} data-testid="alert-message" />
+      <Button
+        variant='ghost'
+        size="icon"
+        className="absolute right-4 top-2 hover:bg-transparent hover:text-current hover:opacity-50"
+        data-testid="dismiss-alert-btn"
+        onClick={() => toast.remove()}
+        aria-label='dismiss notification'
+        label={<X className='pl-0'/>}
+      />
     </AlertDefault>
   );
 };