From b4309151a369458a1e4831c58313ca4641168c34 Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 28 Feb 2025 15:35:01 -0500 Subject: [PATCH 1/2] #56 Alert component compound pattern --- src/common/components/Alert/Alert.tsx | 76 +++++++--- src/common/components/Alert/AlertContent.tsx | 28 ---- .../components/Alert/AlertDescription.tsx | 27 ---- src/common/components/Alert/AlertHeader.tsx | 28 ---- src/common/components/Alert/AlertTitle.tsx | 27 ---- src/common/components/Alert/ErrorAlert.tsx | 18 +-- .../Alert/__stories__/Alert.stories.tsx | 135 ++++++------------ .../Alert/__tests__/AlertContent.test.tsx | 34 ----- .../Alert/__tests__/AlertDescription.test.tsx | 43 ------ .../Alert/__tests__/AlertHeader.test.tsx | 43 ------ .../Alert/__tests__/AlertTitle.test.tsx | 43 ------ 11 files changed, 101 insertions(+), 401 deletions(-) delete mode 100644 src/common/components/Alert/AlertContent.tsx delete mode 100644 src/common/components/Alert/AlertDescription.tsx delete mode 100644 src/common/components/Alert/AlertHeader.tsx delete mode 100644 src/common/components/Alert/AlertTitle.tsx delete mode 100644 src/common/components/Alert/__tests__/AlertContent.test.tsx delete mode 100644 src/common/components/Alert/__tests__/AlertDescription.test.tsx delete mode 100644 src/common/components/Alert/__tests__/AlertHeader.test.tsx delete mode 100644 src/common/components/Alert/__tests__/AlertTitle.test.tsx diff --git a/src/common/components/Alert/Alert.tsx b/src/common/components/Alert/Alert.tsx index 9995126..550425e 100644 --- a/src/common/components/Alert/Alert.tsx +++ b/src/common/components/Alert/Alert.tsx @@ -3,11 +3,12 @@ import { cva, VariantProps } from 'class-variance-authority'; import { BaseComponentProps } from 'common/utils/types'; import { cn } from 'common/utils/css'; +import FAIcon, { FAIconProps } from '../Icon/FAIcon'; /** - * Define the component base and variant styles. + * Define the `Alert` component base and variant styles. */ -const variants = cva('flex gap-2 rounded-md p-3', { +const alertVariants = cva('relative rounded-md p-3 *:data-icon:absolute [&>svg~*]:ps-8', { variants: { variant: { danger: 'bg-red-800/90 text-white/80', @@ -19,34 +20,27 @@ const variants = cva('flex gap-2 rounded-md p-3', { defaultVariants: { variant: 'info' }, }); -/** - * The variant attributes of the Alert component. - */ -type AlertVariants = VariantProps; - /** * Properties for the `Alert` component. */ -export interface AlertProps extends AlertVariants, PropsWithChildren, BaseComponentProps {} +export interface AlertProps + extends BaseComponentProps, + PropsWithChildren, + VariantProps {} /** * The `Alert` component formats and renders a styled message. Use the * `variant` property to apply predefined styles. * - * Compose an Alert using of combinations of: `FAIcon`, `AlertContent`, - * `AlertHeader`, `AlertTitle`, and `AlertDescription`. + * Compose an Alert using of combinations of: `Icon`, `Title`, and `Description`. * - * *Example:* + * **Example:** * ``` - * - * - * - * - * Unable to create task - * - * {error.message} - * - * + + + Unable to create task + {error.message} + * ``` */ const Alert = ({ @@ -56,10 +50,50 @@ const Alert = ({ testId = 'alert', }: AlertProps): JSX.Element => { return ( -
+
+ {children} +
+ ); +}; + +/** + * The `Title` component renders the styled title text for an `Alert`. + */ +const Title = ({ + children, + className, + testId = 'alert-title', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( +
{children}
); }; +Alert.Title = Title; + +/** + * The `Description` component renders the styled description text for an `Alert`. + */ +const Description = ({ + children, + className, + testId = 'alert-description', +}: BaseComponentProps & PropsWithChildren): JSX.Element => { + return ( +
+ {children} +
+ ); +}; +Alert.Description = Description; + +/** + * The `Icon` component renders the styled icon for an `Alert`. + */ +const Icon = ({ size = 'lg', testId = 'alert-icon', ...props }: FAIconProps): JSX.Element => { + return ; +}; +Alert.Icon = Icon; export default Alert; diff --git a/src/common/components/Alert/AlertContent.tsx b/src/common/components/Alert/AlertContent.tsx deleted file mode 100644 index 0b588f2..0000000 --- a/src/common/components/Alert/AlertContent.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { BaseComponentProps } from 'common/utils/types'; -import { cn } from 'common/utils/css'; - -/** - * Properties for the `AlertContent` component. - */ -export interface AlertContentProps extends BaseComponentProps, PropsWithChildren {} - -/** - * The `AlertContent` component is a container for the main content of an - * `Alert`. AlertContent wraps the AlertHeader and AlertDescription. AlertContent - * is not used outside an `Alert`. - */ -const AlertContent = ({ - children, - className, - testId = 'alert-content', -}: AlertContentProps): JSX.Element => { - return ( -
- {children} -
- ); -}; - -export default AlertContent; diff --git a/src/common/components/Alert/AlertDescription.tsx b/src/common/components/Alert/AlertDescription.tsx deleted file mode 100644 index 1233fd9..0000000 --- a/src/common/components/Alert/AlertDescription.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { cn } from 'common/utils/css'; -import { BaseComponentProps } from 'common/utils/types'; - -/** - * Properties for the `AlertDescription` component. - */ -export interface AlertDescriptionProps extends BaseComponentProps, PropsWithChildren {} - -/** - * The `AlertDescription` component renders the styled description text for an - * `Alert`. - */ -const AlertDescription = ({ - children, - className, - testId = 'alert-description', -}: AlertDescriptionProps): JSX.Element => { - return ( -
- {children} -
- ); -}; - -export default AlertDescription; diff --git a/src/common/components/Alert/AlertHeader.tsx b/src/common/components/Alert/AlertHeader.tsx deleted file mode 100644 index 0536ec1..0000000 --- a/src/common/components/Alert/AlertHeader.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { BaseComponentProps } from 'common/utils/types'; -import { cn } from 'common/utils/css'; - -/** - * Properties for the `AlertHeader` component. - */ -export interface AlertHeaderProps extends BaseComponentProps, PropsWithChildren {} - -/** - * The `AlertHeader` component is a container for the title and, optionally, the - * icon of an `Alert`. AlertHeader is a flex box ensuring the items within are evenly - * spaced and centered. - */ -const AlertHeader = ({ - children, - className, - testId = 'alert-header', -}: AlertHeaderProps): JSX.Element => { - return ( -
- {children} -
- ); -}; - -export default AlertHeader; diff --git a/src/common/components/Alert/AlertTitle.tsx b/src/common/components/Alert/AlertTitle.tsx deleted file mode 100644 index e130d12..0000000 --- a/src/common/components/Alert/AlertTitle.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { PropsWithChildren } from 'react'; - -import { BaseComponentProps } from 'common/utils/types'; -import { cn } from 'common/utils/css'; - -/** - * Properties for the `AlertTitle` component. - */ -export interface AlertTitleProps extends BaseComponentProps, PropsWithChildren {} - -/** - * The `AlertTitle` component renders the styled title text for an `Alert`. - * AlertTitle is always within an `AlertHeader`. - */ -const AlertTitle = ({ - children, - className, - testId = 'alert-title', -}: AlertTitleProps): JSX.Element => { - return ( -
- {children} -
- ); -}; - -export default AlertTitle; diff --git a/src/common/components/Alert/ErrorAlert.tsx b/src/common/components/Alert/ErrorAlert.tsx index d7d6e58..5f1cfe3 100644 --- a/src/common/components/Alert/ErrorAlert.tsx +++ b/src/common/components/Alert/ErrorAlert.tsx @@ -1,10 +1,6 @@ import { cn } from 'common/utils/css'; -import FAIcon, { FAIconProps } from '../Icon/FAIcon'; +import { FAIconProps } from '../Icon/FAIcon'; import Alert, { AlertProps } from './Alert'; -import AlertContent from './AlertContent'; -import AlertDescription from './AlertDescription'; -import AlertHeader from './AlertHeader'; -import AlertTitle from './AlertTitle'; /** * Properties for the `ErrorAlert` component. @@ -30,15 +26,9 @@ const ErrorAlert = ({ }: ErrorAlertProps): JSX.Element => { return ( - - - {!!title && ( - - {title} - - )} - {description} - + + {title && {title}} + {description} ); }; diff --git a/src/common/components/Alert/__stories__/Alert.stories.tsx b/src/common/components/Alert/__stories__/Alert.stories.tsx index b3f5731..c61b545 100644 --- a/src/common/components/Alert/__stories__/Alert.stories.tsx +++ b/src/common/components/Alert/__stories__/Alert.stories.tsx @@ -1,11 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; import Alert from '../Alert'; -import FAIcon from '../../Icon/FAIcon'; -import AlertContent from '../AlertContent'; -import AlertHeader from '../AlertHeader'; -import AlertTitle from '../AlertTitle'; -import AlertDescription from '../AlertDescription'; const meta = { title: 'Common/Alert/Alert', @@ -27,43 +22,17 @@ export default meta; type Story = StoryObj; -export const IconOnLeft: Story = { +export const WithIcon: Story = { render: (args) => ( - - - - Something unexpected has happened! - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - - - ), - args: { - variant: 'danger', - }, -}; - -export const IconInHeader: Story = { - render: (args) => ( - - - - - Something unexpected has happened! - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - + + Something unexpected has happened! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. + Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. + ), args: { @@ -74,17 +43,13 @@ export const IconInHeader: Story = { export const NoIcon: Story = { render: (args) => ( - - - Something unexpected has happened! - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - + Something unexpected has happened! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. + Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. + ), args: { @@ -95,12 +60,12 @@ export const NoIcon: Story = { export const DescriptionOnly: Story = { render: (args) => ( - + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - + ), args: { @@ -108,15 +73,11 @@ export const DescriptionOnly: Story = { }, }; -export const HeaderOnly: Story = { +export const TitleOnly: Story = { render: (args) => ( - - - - Something unexpected has happened! - - + + Something unexpected has happened! ), args: { @@ -127,17 +88,13 @@ export const HeaderOnly: Story = { export const Info: Story = { render: (args) => ( - - - Something you should know... - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - + Something you should know... + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. + Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. + ), args: { @@ -148,17 +105,13 @@ export const Info: Story = { export const Warning: Story = { render: (args) => ( - - - Proceed with caution! - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - + Proceed with caution! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. + Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. + ), args: { @@ -169,17 +122,13 @@ export const Warning: Story = { export const Success: Story = { render: (args) => ( - - - You did it! - - - Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero - exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum - exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. - Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. - - + You did it! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit qui. + Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque incididunt. + ), args: { diff --git a/src/common/components/Alert/__tests__/AlertContent.test.tsx b/src/common/components/Alert/__tests__/AlertContent.test.tsx deleted file mode 100644 index fc4fe30..0000000 --- a/src/common/components/Alert/__tests__/AlertContent.test.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { describe, expect, it } from 'vitest'; - -import { render, screen } from 'test/test-utils'; - -import AlertContent from '../AlertContent'; - -describe('AlertContent', () => { - it('should render successfully', async () => { - // ARRANGE - render(); - await screen.findByTestId('alert-content'); - - // ASSERT - expect(screen.getByTestId('alert-content')).toBeDefined(); - }); - - it('should use testId', async () => { - // ARRANGE - render(); - await screen.findByTestId('component'); - - // ASSERT - expect(screen.getByTestId('component')).toBeDefined(); - }); - - it('should use className', async () => { - // ARRANGE - render(); - await screen.findByTestId('alert-content'); - - // ASSERT - expect(screen.getByTestId('alert-content')).toHaveClass('class-name'); - }); -}); diff --git a/src/common/components/Alert/__tests__/AlertDescription.test.tsx b/src/common/components/Alert/__tests__/AlertDescription.test.tsx deleted file mode 100644 index 631cbba..0000000 --- a/src/common/components/Alert/__tests__/AlertDescription.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { describe, expect, it } from 'vitest'; - -import { render, screen } from 'test/test-utils'; - -import AlertDescription from '../AlertDescription'; - -describe('AlertDescription', () => { - it('should render successfully', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-description'); - - // ASSERT - expect(screen.getByTestId('alert-description')).toBeDefined(); - }); - - it('should use testId', async () => { - // ARRANGE - render(children); - await screen.findByTestId('component'); - - // ASSERT - expect(screen.getByTestId('component')).toBeDefined(); - }); - - it('should use className', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-description'); - - // ASSERT - expect(screen.getByTestId('alert-description')).toHaveClass('class-name'); - }); - - it('should render children', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-description'); - - // ASSERT - expect(screen.getByTestId('alert-description')).toHaveTextContent('children'); - }); -}); diff --git a/src/common/components/Alert/__tests__/AlertHeader.test.tsx b/src/common/components/Alert/__tests__/AlertHeader.test.tsx deleted file mode 100644 index 15bc3f2..0000000 --- a/src/common/components/Alert/__tests__/AlertHeader.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { describe, expect, it } from 'vitest'; - -import { render, screen } from 'test/test-utils'; - -import AlertHeader from '../AlertHeader'; - -describe('AlertHeader', () => { - it('should render successfully', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-header'); - - // ASSERT - expect(screen.getByTestId('alert-header')).toBeDefined(); - }); - - it('should use testId', async () => { - // ARRANGE - render(children); - await screen.findByTestId('component'); - - // ASSERT - expect(screen.getByTestId('component')).toBeDefined(); - }); - - it('should use className', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-header'); - - // ASSERT - expect(screen.getByTestId('alert-header')).toHaveClass('class-name'); - }); - - it('should render children', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-header'); - - // ASSERT - expect(screen.getByTestId('alert-header')).toHaveTextContent('children'); - }); -}); diff --git a/src/common/components/Alert/__tests__/AlertTitle.test.tsx b/src/common/components/Alert/__tests__/AlertTitle.test.tsx deleted file mode 100644 index 9fda0da..0000000 --- a/src/common/components/Alert/__tests__/AlertTitle.test.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { describe, expect, it } from 'vitest'; - -import { render, screen } from 'test/test-utils'; - -import AlertTitle from '../AlertTitle'; - -describe('AlertTitle', () => { - it('should render successfully', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-title'); - - // ASSERT - expect(screen.getByTestId('alert-title')).toBeDefined(); - }); - - it('should use testId', async () => { - // ARRANGE - render(children); - await screen.findByTestId('component'); - - // ASSERT - expect(screen.getByTestId('component')).toBeDefined(); - }); - - it('should use className', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-title'); - - // ASSERT - expect(screen.getByTestId('alert-title')).toHaveClass('class-name'); - }); - - it('should render children', async () => { - // ARRANGE - render(children); - await screen.findByTestId('alert-title'); - - // ASSERT - expect(screen.getByTestId('alert-title')).toHaveTextContent('children'); - }); -}); From 51b955a87e2a8f9933ce8daea3636844e7534a0b Mon Sep 17 00:00:00 2001 From: Matthew Warman Date: Fri, 28 Feb 2025 15:53:44 -0500 Subject: [PATCH 2/2] #56 AlertComponents page --- src/common/components/Router/Router.tsx | 7 +- src/pages/Components/ComponentsPage.tsx | 3 + .../Components/components/AlertComponents.tsx | 181 ++++++++++++++++++ .../__tests__/AlertComponents.test.tsx | 16 ++ 4 files changed, 206 insertions(+), 1 deletion(-) create mode 100644 src/pages/Components/components/AlertComponents.tsx create mode 100644 src/pages/Components/components/__tests__/AlertComponents.test.tsx diff --git a/src/common/components/Router/Router.tsx b/src/common/components/Router/Router.tsx index dc7077a..ab23907 100644 --- a/src/common/components/Router/Router.tsx +++ b/src/common/components/Router/Router.tsx @@ -15,6 +15,7 @@ import AppearanceSettings from 'pages/Settings/components/AppearanceSettings'; // Components Page Family import ComponentsPage from 'pages/Components/ComponentsPage'; +import AlertComponents from 'pages/Components/components/AlertComponents'; import AvatarComponents from 'pages/Components/components/AvatarComponents'; import BadgeComponents from 'pages/Components/components/BadgeComponents'; import ButtonComponents from 'pages/Components/components/ButtonComponents'; @@ -84,7 +85,11 @@ export const routes: RouteObject[] = [ children: [ { index: true, - element: , + element: , + }, + { + path: 'alert', + element: , }, { path: 'avatar', diff --git a/src/pages/Components/ComponentsPage.tsx b/src/pages/Components/ComponentsPage.tsx index 531a0c8..be6d611 100644 --- a/src/pages/Components/ComponentsPage.tsx +++ b/src/pages/Components/ComponentsPage.tsx @@ -20,6 +20,9 @@ const ComponentsPage = (): JSX.Element => {
+ + Alert + Avatar diff --git a/src/pages/Components/components/AlertComponents.tsx b/src/pages/Components/components/AlertComponents.tsx new file mode 100644 index 0000000..ca39c45 --- /dev/null +++ b/src/pages/Components/components/AlertComponents.tsx @@ -0,0 +1,181 @@ +import { createColumnHelper } from '@tanstack/react-table'; + +import { BaseComponentProps } from 'common/utils/types'; +import { ComponentProperty } from '../model/components'; +import Table from 'common/components/Table/Table'; +import CodeSnippet from 'common/components/Text/CodeSnippet'; +import Heading from 'common/components/Text/Heading'; +import Alert from 'common/components/Alert/Alert'; + +/** + * The `AlertComponents` React component renders a set of examples illustrating + * the use of the `Alert` component. + */ +const AlertComponents = ({ + className, + testId = 'components-alert', +}: BaseComponentProps): JSX.Element => { + const data: ComponentProperty[] = [ + { + name: 'children', + description: 'The content to be displayed.', + }, + { + name: 'className', + description: 'Optional. Additional CSS class names.', + }, + { + name: 'testId', + description: 'Optional. Identifier for testing.', + }, + { + name: 'variant', + description: 'Optional. Style variant. Default: info', + }, + ]; + const columnHelper = createColumnHelper(); + const columns = [ + columnHelper.accessor('name', { + cell: (info) => ( + {info.getValue()} + ), + header: () => 'Name', + }), + columnHelper.accessor('description', { + cell: (info) => info.renderValue(), + header: () => 'Description', + }), + ]; + + return ( +
+ + Alert Component + + +
+ The Alert component displays a styled message + block. Alerts are a callout to get the user's attention. Compose an Alert using combinations + of: Icon, Title, and Description. +
+ +
+ + Properties + + data={data} columns={columns} /> +
+ + Examples +
+
+ + + Uh oh! + + Something unexpected has occurred. Please excuse our mess. + + +
+ + + Uh oh! + + Something unexpected has occurred. Please excuse our mess. + +`} + /> +
+ +
+
+ + + Something you should know... + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + + +
+ + + Something you should know... + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + +`} + /> +
+ +
+
+ + Proceed with caution! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + + +
+ + Proceed with caution! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + +`} + /> +
+ +
+
+ + You did it! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + + +
+ + You did it! + + Mollit proident aliqua vel pariatur dolor cupidatat sunt. Tempus quis elit officia ero + exercitation labore a. Nisi commodo nunc id et. Labore facilisis do nibh fermentum + exercitation voluptate. Aute et ut est justo veniam. Ut do convallis reprehenderit + qui. Consectetur nibh nibh est pariatur tempor. Qos laoreet qui labore a neque + incididunt. + +`} + /> +
+
+ ); +}; + +export default AlertComponents; diff --git a/src/pages/Components/components/__tests__/AlertComponents.test.tsx b/src/pages/Components/components/__tests__/AlertComponents.test.tsx new file mode 100644 index 0000000..3bbd56d --- /dev/null +++ b/src/pages/Components/components/__tests__/AlertComponents.test.tsx @@ -0,0 +1,16 @@ +import { describe, expect, it } from 'vitest'; + +import { render, screen } from 'test/test-utils'; + +import AlertComponents from '../AlertComponents'; + +describe('AlertComponents', () => { + it('should render successfully', async () => { + // ARRANGE + render(); + await screen.findByTestId('components-alert'); + + // ASSERT + expect(screen.getByTestId('components-alert')).toBeDefined(); + }); +});