[Alert] Width restriction; Icon positioning and coloring (#388)

Close #386
Close #387 

## TODO
- [x] Verify all existing tests pass


## Changes

- feature: Restrict width of Alert explanation text to 670px
- fix: Allow icons within field-level Alert content (i.e. external
links) to display inline and color-matched
- stories: Better align Story content of DSR with DS examples, while
also demonstrating the unique capabilities of DSR

## How to test
Review the [preview
deployment](https://deploy-preview-388--cfpb-design-system-react.netlify.app/?path=/docs/components-draft-alerts--overview)

## Screenshots

![alert_width-and-icon](https://github.com/user-attachments/assets/ed31b411-2383-43ac-a6ca-1ff5ad2149fd)

src/components/Alert/Alert.css

@@ -1,15 +1,29 @@
 /* stylelint-disable selector-class-pattern */
 
+/* Allow icons in the alert body text to remain inline and properly colored */
+.a-form-alert .a-form-alert_text .cf-icon-svg {
+  float: none;
+  color: inherit;
+}
+
+/* Restrict alert text to 670px wide */
+.a-form-alert .a-form-alert_text,
+.m-notification .m-notification_explanation {
+  max-width: 41.875rem;
+}
+
 /* Adjustments for the workaround (wrapper) to get SVG icons working */
-.m-notification .cf-icon-svg-wrapper {
+.m-notification > .cf-icon-svg-wrapper {
   position: absolute;
 }
 
-.m-notification:not(.m-notification__error, .m-notification__success, .m-notification__warning) .cf-icon-svg {
+.m-notification:not(.m-notification__error, .m-notification__success, .m-notification__warning)
+  > .cf-icon-svg-wrapper
+  .cf-icon-svg {
   fill: #5a5d61;
 }
 
-.cf-icon-svg-wrapper+.m-notification_content {
+.cf-icon-svg-wrapper + .m-notification_content {
   padding-left: 1.5625em;
 }
 
@@ -20,4 +34,4 @@
 
 .m-notification .m-list .cf-icon-svg-wrapper .cf-icon-svg {
   fill: currentcolor;
-}
+}

src/components/Alert/Alert.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Alert, AlertFieldLevel, TextInput } from '~/src/index';
+import { ReactNode } from 'react';
+import { Alert, AlertFieldLevel, Icon, Link, TextInput } from '~/src/index';
 import type { TextInputStatusType } from '../TextInput/TextInputStatus';
 
 type AlertStatusType = TextInputStatusType & ['loading'];
@@ -17,6 +18,25 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const FieldLevelAlertMessage = ({ status = 'a warning' }): ReactNode => (
+  <>
+    This is a field-level alert with {status} status.{' '}
+    <Link hasIcon href={window.location.host}>
+      Link to more info <Icon name='external-link' />
+    </Link>
+    .
+  </>
+);
+
+const alertExplanation = (type: string): string =>
+  `This is an optional explanation of the ${type} message.`;
+
+const externalLinkProperties = {
+  href: '/',
+  label: 'This is an external link',
+  isExternal: true
+};
+
 export const Information: Story = {
   render: arguments_ => <Alert {...arguments_} />,
   args: { status: 'info', message: 'A Notification' }
@@ -28,7 +48,8 @@ export const InformationWithMessageAndExplanation: Story = {
   args: {
     ...Information.args,
     message: 'Here is the message of the notification.',
-    children: 'Here is the explanation of the notification.'
+    children:
+      'This is a longer explanation to demonstrate how text wrapping is applied to more extensive alert content.'
   }
 };
 
@@ -51,28 +72,42 @@ export const InformationWithLinks: Story = {
         href: '/',
         label: 'This is a link below the explanation'
       },
-      {
-        href: '/',
-        label: 'This is an external link',
-        isExternal: true
-      }
+      externalLinkProperties
     ]
   }
 };
 
 export const Success: Story = {
   ...Information,
-  args: { ...Information.args, status: 'success', message: '11 results' }
+  args: {
+    ...Information.args,
+    status: 'success',
+    message: '11 results',
+    links: [externalLinkProperties],
+    children: <>{alertExplanation('success')}</>
+  }
 };
 
 export const Warning: Story = {
   ...Information,
-  args: { ...Information.args, status: 'warning', message: 'No results found.' }
+  args: {
+    ...Information.args,
+    status: 'warning',
+    message: 'No results found.',
+    links: [externalLinkProperties],
+    children: <>{alertExplanation('warning')}</>
+  }
 };
 
 export const Error: Story = {
   ...Information,
-  args: { ...Information.args, status: 'error', message: 'Page not found.' }
+  args: {
+    ...Information.args,
+    status: 'error',
+    message: 'Page not found.',
+    links: [externalLinkProperties],
+    children: <>{alertExplanation('error')}</>
+  }
 };
 
 export const InProgress: Story = {
@@ -101,7 +136,7 @@ export const SuccessFieldLevel: Story = {
   name: 'Success (field-level)',
   args: {
     status: 'success',
-    message: 'This is a field-level alert with a success status.'
+    message: <FieldLevelAlertMessage status='a success' />
   }
 };
 
@@ -121,7 +156,7 @@ export const WarningFieldLevel: Story = {
   name: 'Warning (field-level)',
   args: {
     status: 'warning',
-    message: 'This is a field-level alert with a warning status.'
+    message: <FieldLevelAlertMessage status='a warning' />
   }
 };
 
@@ -141,6 +176,6 @@ export const ErrorFieldLevel: Story = {
   name: 'Error (field-level)',
   args: {
     status: 'error',
-    message: 'This is a field-level alert with an error status.'
+    message: <FieldLevelAlertMessage status='an error' />
   }
 };