Alerts w/ links update

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfpb/design-system-react",
   "license": "MIT",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/cfpb/design-system-react.git"

src/components/Alert/alert.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import type { ReactNode } from 'react';
-import { Alert, AlertFieldLevel, TextInput } from '~/src/index';
+import { Alert, AlertFieldLevel, ListLink, TextInput } from '~/src/index';
 
 const meta: Meta<typeof Alert> = {
   title: 'Components (Draft)/Alerts',
@@ -23,11 +23,14 @@ const FieldLevelAlertMessage = ({ status = 'a warning' }): ReactNode => (
 const alertExplanation = (type: string): string =>
   `This is an optional explanation of the ${type}.`;
 
-const externalLinkProperties = {
-  href: '/',
-  label: 'This is an external link',
-  isExternal: true,
-};
+const externalLink = (
+  <ListLink
+    href='/'
+    key='external'
+    label='This is an external link'
+    iconRight='external-link'
+  />
+);
 
 export const Information: Story = {
   render: (arguments_) => <Alert {...arguments_} />,
@@ -58,11 +61,12 @@ export const InformationWithLinks: Story = {
     ...Information.args,
     children: 'This is the explanation of the alert.',
     links: [
-      {
-        href: '/',
-        label: 'This is a link below the explanation',
-      },
-      externalLinkProperties,
+      <ListLink
+        href='/'
+        key='internal'
+        label='This is a link below the explanation'
+      />,
+      externalLink,
     ],
   },
 };
@@ -73,7 +77,7 @@ export const Success: Story = {
     ...Information.args,
     status: 'success',
     message: '11 results',
-    links: [externalLinkProperties],
+    links: [externalLink],
     children: <>{alertExplanation('success message')}</>,
   },
 };
@@ -84,7 +88,7 @@ export const Warning: Story = {
     ...Information.args,
     status: 'warning',
     message: 'No results found',
-    links: [externalLinkProperties],
+    links: [externalLink],
     children: <>{alertExplanation('warning')}</>,
   },
 };
@@ -95,7 +99,7 @@ export const Error: Story = {
     ...Information.args,
     status: 'error',
     message: 'Page not found',
-    links: [externalLinkProperties],
+    links: [externalLink],
     children: <>{alertExplanation('error')}</>,
   },
 };

src/components/Alert/alert.test.tsx

@@ -1,5 +1,6 @@
 import '@testing-library/jest-dom';
 import { render, screen, within } from '@testing-library/react';
+import { ListLink } from '../Link/link';
 import Paragraph from '../Paragraph/paragraph';
 import { Alert, AlertType } from './alert';
 import { AlertFieldLevel } from './alert-field-level';
@@ -70,19 +71,19 @@
     expect(noLinks.length).toBe(0);
 
     const linkItems = [
-      { href: '/1', label: 'one' },
-      { href: '/2', label: 'two', isExternal: true },
+      <ListLink href='/1' key='one' label='one' />,
+      <ListLink href='/2' key='two' label='two' iconRight='external-link' />,
     ];
 
     render(<Alert status='info' links={linkItems} />);
     const links = screen.queryAllByRole('listitem');
     expect(links.length).toBe(2);
 
     // Link attributes are correctly propagated
-    const linkOne = screen.getByRole('link', { name: linkItems[0].label });
+    const linkOne = screen.getByRole('link', { name: 'one' });
     expect(linkOne).toHaveAttribute('href', '/1');
 
-    const linkTwo = screen.getByRole('link', { name: linkItems[1].label });
+    const linkTwo = screen.getByRole('link', { name: 'two' });
     expect(linkTwo).toHaveAttribute('href', '/2');
 
     // Icon is displayed: External link
@@ -173,7 +174,7 @@
 
   it('renders field-level info alert without status modifier', () => {
     render(<AlertFieldLevel status='info' message='Details before submit' />);
     const element = screen.getByTestId('message').parentElement;
     expect(element).toHaveClass('a-form-alert');
     expect(element).not.toHaveClass('a-form-alert--info');
   });

src/components/Alert/alert.tsx

@@ -1,13 +1,11 @@
 import classNames from 'classnames';
-import type { HTMLAttributes, ReactNode } from 'react';
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
 import type { HeadingLevel } from '../../types/heading-level';
 import type { JSXElement } from '../../types/jsx-element';
 import { Icon } from '../Icon/icon';
 import List from '../List/list';
 import type { AlertFieldLevelType } from './alert-field-level';
 import { AlertFieldLevel } from './alert-field-level';
-import type { AlertLinkProperties } from './alert-link';
-import { AlertLink } from './alert-link';
 import './alert.scss';
 
 export const iconByType: Record<string, { name: string; withBg: boolean }> = {
@@ -25,7 +23,7 @@ interface AlertProperties {
   message?: ReactNode;
   headingLevel?: HeadingLevel;
   children?: ReactNode;
-  links?: AlertLinkProperties[];
+  links?: JSX.Element[];
   isVisible?: boolean;
   isFieldLevel?: boolean;
   showIcon?: boolean;
@@ -89,13 +87,7 @@ export const Alert = ({
             {children}
           </div>
         ) : null}
-        {links && links.length > 0 ? (
-          <List isLinks>
-            {links.map((link) => (
-              <AlertLink {...link} key={link.href} />
-            ))}
-          </List>
-        ) : null}
+        {links && links.length > 0 ? <List isLinks>{links}</List> : null}
       </div>
     </div>
   );