From 3cd70f95d04eab23e3ad6b1f31634d3b507b3692 Mon Sep 17 00:00:00 2001
From: Kyle Hill <83614364+kylehilltruss@users.noreply.github.com>
Date: Wed, 8 Sep 2021 16:21:25 -0400
Subject: [PATCH] SiteAlert enhancement (#1215)

Co-authored-by: haworku <haworku@users.noreply.github.com>
---
 .../SiteAlert/SiteAlert.stories.tsx           | 12 +++++
 src/components/SiteAlert/SiteAlert.test.tsx   | 47 +++++++++++++++++++
 src/components/SiteAlert/SiteAlert.tsx        | 10 +++-
 3 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/components/SiteAlert/SiteAlert.stories.tsx b/src/components/SiteAlert/SiteAlert.stories.tsx
index 321fe85006..58b9bd63c8 100644
--- a/src/components/SiteAlert/SiteAlert.stories.tsx
+++ b/src/components/SiteAlert/SiteAlert.stories.tsx
@@ -155,3 +155,15 @@ export const alertWithCustomControls = (
     {shortAlertContent}
   </SiteAlert>
 )
+
+export const alertWithStringContent = (): React.ReactElement => (
+  <SiteAlert variant="info">Short alert content</SiteAlert>
+)
+
+export const alertWithMultipleChildContent = (): React.ReactElement => (
+  <SiteAlert variant="info">
+    <p className="usa-alert__text">Alert content</p>
+    <em>which includes</em> <strong>formatting tags</strong> and{' '}
+    <Link href="#">links</Link>.
+  </SiteAlert>
+)
diff --git a/src/components/SiteAlert/SiteAlert.test.tsx b/src/components/SiteAlert/SiteAlert.test.tsx
index 4bc9fc2d45..37e7e36d41 100644
--- a/src/components/SiteAlert/SiteAlert.test.tsx
+++ b/src/components/SiteAlert/SiteAlert.test.tsx
@@ -121,4 +121,51 @@ describe('SiteAlert component', () => {
       'usa-site-alert--no-heading'
     )
   })
+
+  it('wraps a child string in a <p> tag', () => {
+    const { getByText } = render(
+      <SiteAlert variant="info">Test alert text</SiteAlert>
+    )
+
+    expect(getByText('Test alert text')).toHaveClass('usa-alert__text')
+    expect(getByText('Test alert text').tagName).toEqual('P')
+  })
+
+  it('does not wrap a single child element', () => {
+    const { getByText } = render(
+      <SiteAlert variant="info">
+        <strong className="test-element-class-name">Test alert text</strong>
+      </SiteAlert>
+    )
+
+    const childElement = getByText('Test alert text')
+    const parentElement = childElement.parentElement
+
+    expect(childElement).not.toHaveClass('usa-alert__text')
+    expect(childElement).toHaveClass('test-element-class-name')
+    expect(parentElement).not.toHaveClass('usa-alert__text')
+    expect(parentElement).toHaveClass('usa-alert__body')
+  })
+
+  it('renders, but does not wrap, multiple child elements', () => {
+    const { getByText } = render(
+      <SiteAlert variant="info">
+        {[
+          <strong key={0} className="test-main-class-name">
+            Test alert text
+          </strong>,
+          <em key={1} className="test-subtext-class-name">
+            Test alert subtext
+          </em>,
+        ]}
+      </SiteAlert>
+    )
+
+    const childElement = getByText('Test alert subtext')
+    const parentElement = childElement.parentElement
+
+    expect(childElement).not.toHaveClass('usa-alert__text')
+    expect(parentElement?.childNodes.length).toEqual(2)
+    expect(parentElement).not.toHaveClass('usa-alert__text')
+  })
 })
diff --git a/src/components/SiteAlert/SiteAlert.tsx b/src/components/SiteAlert/SiteAlert.tsx
index 67639a75b6..9ba2a329eb 100644
--- a/src/components/SiteAlert/SiteAlert.tsx
+++ b/src/components/SiteAlert/SiteAlert.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 interface SiteAlertProps {
   variant: 'info' | 'emergency'
-  children: React.ReactNode
+  children: string | React.ReactNode | React.ReactNode[]
   heading?: string
   showIcon?: boolean
   slim?: boolean
@@ -30,6 +30,12 @@ export const SiteAlert = ({
     },
     className
   )
+
+  let content = children
+  if (typeof children === 'string') {
+    content = <p className="usa-alert__text">{children}</p>
+  }
+
   return (
     <section
       data-testid="siteAlert"
@@ -39,7 +45,7 @@ export const SiteAlert = ({
       <div className="usa-alert">
         <div className="usa-alert__body">
           {heading && <h3 className="usa-alert__heading">{heading}</h3>}
-          {children}
+          {content}
         </div>
       </div>
     </section>