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

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

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}