diff --git a/src/components/BoemlyAlert/BoemlyAlert.stories.tsx b/src/components/BoemlyAlert/BoemlyAlert.stories.tsx index fd9c5ca..3c1c839 100644 --- a/src/components/BoemlyAlert/BoemlyAlert.stories.tsx +++ b/src/components/BoemlyAlert/BoemlyAlert.stories.tsx @@ -15,6 +15,12 @@ export default { const Template: StoryFn = (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 index 8b2320d..d99c901 100644 --- 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 index bd5c153..017f891 100644 --- 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 = ({ const renderIcon = () => { switch (status) { + case 'loading': + return ; case 'success': return (