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} );