From 4f371dc5c91bbbc62319915ec5e286f547431cd0 Mon Sep 17 00:00:00 2001
From: Bill Himmelsbach <whimmels@gmail.com>
Date: Tue, 19 Nov 2024 04:33:24 -0800
Subject: [PATCH 1/2] fix(alert): no wrapper class when no message provided

---
 src/components/Alert/Alert.stories.tsx | 15 ++++++++++++---
 src/components/Alert/Alert.test.tsx    | 13 +++++++++++++
 src/components/Alert/Alert.tsx         |  5 ++++-
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
index e44e2a2a..21f35f3a 100644
--- a/src/components/Alert/Alert.stories.tsx
+++ b/src/components/Alert/Alert.stories.tsx
@@ -22,12 +22,21 @@ export const Information: Story = {
   args: { status: 'info', message: 'A Notification' }
 };
 
-export const InformationWithExplanation: Story = {
+export const InformationWithMessageAndExplanation: Story = {
   ...Information,
-  name: 'Information with explanation',
+  name: 'Information with a message and an explanation',
   args: {
     ...Information.args,
-    children: 'You can also add an explanation to the notification.'
+    message: 'Here is the message of the notification.',
+    children: 'Here is the explanation of the notification.'
+  }
+};
+
+export const InformationWithOnlyExplanation: Story = {
+  ...Information,
+  name: 'Information with only an explanation',
+  args: {
+    children: 'You can also only have an explanation in the notification.'
   }
 };
 
diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index 91f3e239..0e4c541a 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, screen, within } from '@testing-library/react';
+import Paragraph from '../Paragraph/Paragraph';
 import { Alert, AlertType } from './Alert';
 import { AlertFieldLevel } from './AlertFieldLevel';
 
@@ -45,6 +46,18 @@ describe('<Alert />', () => {
     expect(explanation).toBeInTheDocument();
   });
 
+  it('does not include an explanation wrapper class when there is no message but children are provided', async () => {
+    render(
+      <Alert status='info'>
+        <Paragraph>Test component</Paragraph>
+      </Alert>
+    );
+    // Icon is displayed: External link
+    const explanation = screen.queryByTestId('explanation');
+    expect(explanation).toBeInTheDocument();
+    expect(explanation).not.toHaveClass('m-notification_explanation');
+  });
+
   it('displays links when provided', async () => {
     render(<Alert status='info' />);
     const noLinks = screen.queryAllByRole('listitem');
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
index c108121a..48e14830 100644
--- a/src/components/Alert/Alert.tsx
+++ b/src/components/Alert/Alert.tsx
@@ -83,7 +83,10 @@ export const Alert = ({
           </p>
         ) : null}
         {children ? (
-          <div className='m-notification_explanation' data-testid='explanation'>
+          <div
+            className={`${message ? 'm-notification_explanation' : ''}`}
+            data-testid='explanation'
+          >
             {children}
           </div>
         ) : null}

From bc219060b59af4328caabdc80104d28bdc3d1f7d Mon Sep 17 00:00:00 2001
From: Bill Himmelsbach <whimmels@gmail.com>
Date: Tue, 19 Nov 2024 16:43:11 -0500
Subject: [PATCH 2/2] Update src/components/Alert/Alert.test.tsx

Co-authored-by: Meis <meissadia@gmail.com>
---
 src/components/Alert/Alert.test.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Alert/Alert.test.tsx b/src/components/Alert/Alert.test.tsx
index 0e4c541a..7aabf540 100644
--- a/src/components/Alert/Alert.test.tsx
+++ b/src/components/Alert/Alert.test.tsx
@@ -52,7 +52,6 @@ describe('<Alert />', () => {
         <Paragraph>Test component</Paragraph>
       </Alert>
     );
-    // Icon is displayed: External link
     const explanation = screen.queryByTestId('explanation');
     expect(explanation).toBeInTheDocument();
     expect(explanation).not.toHaveClass('m-notification_explanation');