AV-4529 Alert refresh variant

lob · Dec 19, 2023 · 8bb1931 · 8bb1931
1 parent 900de22
commit 8bb1931
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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', () => {