fix(alert): no wrapper class when no message provided (#389)

Currently when there's no message but has children (explanations), then
a `m-notification_explanation` applied which makes it not possible to
achieve designs like these (unbolded, aligned text):

<img width="1143" alt="Screenshot 2024-11-19 at 4 13 26 PM"
src="https://github.com/user-attachments/assets/e78ff4a4-6c08-4df8-9455-4e6648a57701">

<img width="648" alt="Screenshot 2024-11-19 at 4 16 46 PM"
src="https://github.com/user-attachments/assets/6f053344-afef-4b12-a8fe-4efcf264cc8c">


## Changes

- if there is no message, but still has children then do not apply
`m-notification_explanation` to allow alert flexibility

## How to test this PR

1. Do the tests pass?
2. How do the examples look?
3. Try modifying the package.json to point the DSR to this commit and
see how the alerts are affected.

## Screenshots
<img width="1346" alt="Screenshot 2024-11-19 at 4 21 12 PM"
src="https://github.com/user-attachments/assets/add6b874-260f-4e77-b6a8-6ddbeb5ecfbb">

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.'
   }
 };
 

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,17 @@ 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>
+    );
+    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');

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}