From 8bb19315b55faa184ab01067abe34b088153f92f Mon Sep 17 00:00:00 2001
From: Michael Morgan <michael.morgan@lob.com>
Date: Tue, 19 Dec 2023 15:44:17 -0800
Subject: [PATCH] AV-4529 Alert refresh variant

---
 src/components/Alert/Alert.vue               |  4 ++++
 src/components/Alert/__tests__/Alert.spec.js | 10 +++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
index 6b370a9f3..64642e281 100644
--- a/src/components/Alert/Alert.vue
+++ b/src/components/Alert/Alert.vue
@@ -148,6 +148,7 @@ export default {
         { variant: 'info', icon: 'CircleInfo', color: 'text-blue-700', bgColor: 'bg-blue-50' },
         { variant: 'success', icon: 'CircleCheck', color: 'text-green-700', bgColor: 'bg-green-50' },
         { variant: 'warning', icon: 'TriangleExclamation', color: 'text-orange-600', bgColor: 'bg-orange-50' },
+        { variant: 'refresh', icon: 'ArrowsRotate', color: 'text-purple-600', bgColor: 'bg-purple-50' },
         { variant: 'error', icon: 'CircleExclamation', color: 'text-red-600', bgColor: 'bg-red-50' }
       ] };
   },
@@ -161,6 +162,9 @@ export default {
     warning () {
       return this.variant === 'warning';
     },
+    refresh () {
+      return this.variant === 'refresh';
+    },
     error () {
       return this.variant === 'error';
     },
diff --git a/src/components/Alert/__tests__/Alert.spec.js b/src/components/Alert/__tests__/Alert.spec.js
index c306acb76..30f733918 100644
--- a/src/components/Alert/__tests__/Alert.spec.js
+++ b/src/components/Alert/__tests__/Alert.spec.js
@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 
 const renderComponent = (options) => render(Alert, { ...options });
 
-describe('Alert', () => {
+describe.only('Alert', () => {
 
   describe('alert content', () => {
 
@@ -75,6 +75,14 @@ describe('Alert', () => {
       expect(alertContent).toBeInTheDocument().toHaveClass('text-orange-600 bg-orange-50');
     });
 
+    it('renders the refresh colors with the refresh variant prop', () => {
+      const slots = { default: 'Hello, this is an alert.' };
+      const { getByTestId } = renderComponent({ slots, props: { variant: 'refresh' } });
+
+      const alertContent = getByTestId('alert');
+      expect(alertContent).toBeInTheDocument().toHaveClass('text-purple-600 bg-purple-50');
+    });
+
   });
 
   describe('alert icons', () => {