diff --git a/package.json b/package.json
index 56137343b9..ca3b2186b2 100644
--- a/package.json
+++ b/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"
diff --git a/src/components/Alert/alert-link.tsx b/src/components/Alert/alert-link.tsx
deleted file mode 100644
index c4f7e68275..0000000000
--- a/src/components/Alert/alert-link.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { JSX } from 'react';
-import { ListLink } from '../Link/link';
-
-export interface AlertLinkProperties {
- href: string;
- label: string;
- isExternal?: boolean;
-}
-
-export const AlertLink = ({
- href,
- label,
- isExternal,
-}: AlertLinkProperties): JSX.Element => (
-
-);
diff --git a/src/components/Alert/alert.stories.tsx b/src/components/Alert/alert.stories.tsx
index d1f834ec37..6e5862de18 100644
--- a/src/components/Alert/alert.stories.tsx
+++ b/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 = {
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 = (
+
+);
export const Information: Story = {
render: (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,
+ ,
+ 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')}>,
},
};
diff --git a/src/components/Alert/alert.test.tsx b/src/components/Alert/alert.test.tsx
index 54856353ea..c1809963ae 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 { ListLink } from '../Link/link';
import Paragraph from '../Paragraph/paragraph';
import { Alert, AlertType } from './alert';
import { AlertFieldLevel } from './alert-field-level';
@@ -70,8 +71,8 @@ describe('', () => {
expect(noLinks.length).toBe(0);
const linkItems = [
- { href: '/1', label: 'one' },
- { href: '/2', label: 'two', isExternal: true },
+ ,
+ ,
];
render();
@@ -79,10 +80,10 @@ describe('', () => {
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
diff --git a/src/components/Alert/alert.tsx b/src/components/Alert/alert.tsx
index d995b5b8e8..93a441b806 100644
--- a/src/components/Alert/alert.tsx
+++ b/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 = {
@@ -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}
) : null}
- {links && links.length > 0 ? (
-
- {links.map((link) => (
-
- ))}
-
- ) : null}
+ {links && links.length > 0 ? {links}
: null}
);