feat(BoemlyAlert): Add loading status

treely · Feb 12, 2024 · d258eff · d258eff
1 parent fd10253
commit d258eff
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/src/components/BoemlyAlert/BoemlyAlert.stories.tsx b/src/components/BoemlyAlert/BoemlyAlert.stories.tsx
@@ -15,6 +15,12 @@ export default {
 
 const Template: StoryFn<typeof BoemlyAlert> = (args) => <BoemlyAlert {...args} />;
 
+export const Loading = Template.bind({});
+Loading.args = {
+  status: 'loading',
+  text: 'Is loading...',
+};
+
 export const Info = Template.bind({});
 Info.args = {
   text: 'Info',

diff --git a/src/components/BoemlyAlert/BoemlyAlert.test.tsx b/src/components/BoemlyAlert/BoemlyAlert.test.tsx
@@ -47,6 +47,13 @@ describe('The BoemlyAlert component', () => {
     expect(screen.getByTestId('success-icon')).toBeInTheDocument();
   });
 
+  it('displays the text in a loading alert', () => {
+    setup({ status: 'loading' });
+
+    expect(screen.getByText('Text')).toBeInTheDocument();
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
   it('displays the title if there is a title given', () => {
     setup({ title: 'Title' });
 

diff --git a/src/components/BoemlyAlert/BoemlyAlert.tsx b/src/components/BoemlyAlert/BoemlyAlert.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode } from 'react';
-import { Alert, CloseButton, Flex, Text, useToken } from '@chakra-ui/react';
+import { Alert, CloseButton, Flex, Spinner, Text, useToken } from '@chakra-ui/react';
 import { CheckCircle, Info, WarningCircle, WarningOctagon } from '@phosphor-icons/react';
 
 export interface BoemlyAlertProps {
-  status?: 'success' | 'error' | 'warning' | 'info';
+  status?: 'success' | 'error' | 'warning' | 'info' | 'loading';
   title?: ReactNode;
   text: ReactNode;
   isClosable?: boolean;
@@ -27,6 +27,8 @@ export const BoemlyAlert: React.FC<BoemlyAlertProps> = ({
 
   const renderIcon = () => {
     switch (status) {
+      case 'loading':
+        return <Spinner size="sm" color={blue500} />;
       case 'success':
         return (
           <CheckCircle