Fix circular dependency in paragraph renderer (#1890)

Author: pwolfert

src/app/layout.tsx

@@ -5,6 +5,7 @@ import '@/assets/styles/globals.css'
 import { ClientMetrics } from './ClientMetrics'
 import { CustomElements } from './CustomElements'
 import { PolyfillsScript } from './PolyfillsScript'
+import { ParagraphRendererProvider } from '@/components/paragraph/ParagraphRendererProvider'
 
 const ASSETS_URL = process.env.NEXT_PUBLIC_ASSETS_URL || '/generated/'
 const nonce = '**CSP_NONCE**'
@@ -119,7 +120,9 @@ export default function RootLayout({
           />
         </noscript>
         <CustomElements />
-        <ClientMetrics>{children}</ClientMetrics>
+        <ParagraphRendererProvider>
+          <ClientMetrics>{children}</ClientMetrics>
+        </ParagraphRendererProvider>
       </body>
     </html>
   )

src/assets/styles/globals.css

@@ -81,8 +81,8 @@ va-button#mdFormButton::part(button) {
   max-width: 40px !important;
 }
 
-/* Alert block styles */
-.alert-with-additional-info {
+/* Alert block: tighten margins for expandable body inside va-alert */
+va-alert va-additional-info {
   *:first-child,
   *:last-child {
     margin-bottom: 0 !important;

src/components/alert/AlertShell.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import type { AlertType } from '@/components/alert/formatted-type'
+
+export type AlertShellProps = {
+  status: AlertType
+  id?: string
+  dataTemplate?: string
+  dataParagraphType?: string
+  dataEntityId?: string | number | null
+  headline: React.ReactNode
+  headlineClassName?: string
+  headlineId?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Shared `va-alert` chrome for inline alerts and reusable alert blocks.
+ */
+export function AlertShell({
+  status,
+  id,
+  dataTemplate,
+  dataParagraphType,
+  dataEntityId,
+  headline,
+  headlineClassName = 'vads-u-font-size--h3',
+  headlineId,
+  children,
+}: AlertShellProps) {
+  return (
+    <va-alert
+      {...(id ? { id } : {})}
+      {...(dataTemplate ? { 'data-template': dataTemplate } : {})}
+      {...(dataParagraphType
+        ? { 'data-paragraph-type': dataParagraphType }
+        : {})}
+      {...(dataEntityId != null && dataEntityId !== ''
+        ? { 'data-entity-id': String(dataEntityId) }
+        : {})}
+      status={status}
+      class="vads-u-margin-top--3"
+      uswds
+    >
+      <h2
+        slot="headline"
+        className={headlineClassName}
+        {...(headlineId ? { id: headlineId } : {})}
+      >
+        {headline}
+      </h2>
+      {children}
+    </va-alert>
+  )
+}

src/components/alert/InlineAlert.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import type { AlertType } from '@/components/alert/formatted-type'
+import { AlertShell } from '@/components/alert/AlertShell'
+
+export type InlineAlertProps = {
+  entityId?: string | number | null
+  alertType: AlertType
+  heading: string
+  children?: React.ReactNode
+}
+
+/**
+ * Inline alert body (`paragraph--alert` or non-reusable `alert_single` / `non_reusable_alert` UI).
+ * Nested paragraph entities are passed as `children`.
+ */
+export function InlineAlert({
+  entityId,
+  alertType,
+  heading,
+  children,
+}: InlineAlertProps) {
+  return (
+    <AlertShell
+      status={alertType}
+      dataTemplate="paragraphs/alert"
+      dataParagraphType="paragraph--alert"
+      dataEntityId={entityId}
+      headline={heading}
+    >
+      {children}
+    </AlertShell>
+  )
+}

src/components/alert/template.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { render, screen } from '@testing-library/react'
 import { axe } from '@/test-utils'
 import { Alert } from './template'
@@ -6,6 +7,7 @@ import { Alert as FormattedAlert } from '@/components/alert/formatted-type'
 import { AlertType } from '@/components/alert/formatted-type'
 import { AccordionItem as FormattedAccordion } from '@/components/accordion/formatted-type'
 import { Wysiwyg } from '@/components/wysiwyg/formatted-type'
+import { ParagraphRendererProvider } from '@/components/paragraph/ParagraphRendererProvider'
 
 const mockParagraphs: FormattedParagraph[] = [
   {
@@ -32,6 +34,9 @@ const mockAlert: FormattedAlert = {
 }
 
 describe('<Alert> Component', () => {
+  const renderWithParagraphProvider = (ui: React.ReactElement) =>
+    render(<ParagraphRendererProvider>{ui}</ParagraphRendererProvider>)
+
   it('renders AlertBlock when blockReference is provided', async () => {
     const mockAlertWithBlockReference = {
       ...mockAlert,
@@ -42,7 +47,9 @@ describe('<Alert> Component', () => {
         content: wysiwyg,
       },
     }
-    const { container } = render(<Alert {...mockAlertWithBlockReference} />)
+    const { container } = renderWithParagraphProvider(
+      <Alert {...mockAlertWithBlockReference} />
+    )
     const alertBlock = container.querySelector('va-alert')
     expect(alertBlock).toBeInTheDocument()
     expect(screen.getByText('Block Reference Title')).toBeInTheDocument()
@@ -52,7 +59,7 @@ describe('<Alert> Component', () => {
   })
 
   it('renders custom alert with paragraphs when blockReference is not provided', async () => {
-    const { container } = render(<Alert {...mockAlert} />)
+    const { container } = renderWithParagraphProvider(<Alert {...mockAlert} />)
     const customAlert = container.querySelector('va-alert')
     expect(customAlert).toHaveAttribute(
       'data-paragraph-type',

src/components/alert/template.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import { Alert as FormattedAlert } from '@/components/alert/formatted-type'
 import { ParagraphComponent } from '@/components/paragraph/formatted-type'
 import { AlertBlock } from '@/components/alertBlock/template'
-import { Paragraph } from '@/components/paragraph/template'
+import { InlineAlert } from '@/components/alert/InlineAlert'
+import { useRenderParagraphs } from '@/components/paragraph/ParagraphRenderContext'
 
 export function Alert(alert: ParagraphComponent<FormattedAlert>) {
+  const renderParagraphs = useRenderParagraphs()
+
   // Checking for empty object because this component expects spread props like
   // <Alert {...alert} /> so the `alert` param will always be at least `{}`.
   if (!alert || !Object.keys(alert).length) {
@@ -18,22 +21,9 @@ export function Alert(alert: ParagraphComponent<FormattedAlert>) {
   }
 
   return (
-    <va-alert
-      data-template="paragraphs/alert"
-      data-paragraph-type="paragraph--alert"
-      data-entity-id={entityId}
-      status={alertType}
-      class="vads-u-margin-top--3"
-      uswds
-    >
-      <h2 slot="headline" className="vads-u-font-size--h3">
-        {heading}
-      </h2>
-
-      {paragraphs?.map((paragraph) => (
-        <Paragraph key={paragraph.id || paragraph.entityId} {...paragraph} />
-      ))}
-    </va-alert>
+    <InlineAlert entityId={entityId} alertType={alertType} heading={heading}>
+      {renderParagraphs(paragraphs)}
+    </InlineAlert>
   )
 }
 

src/components/alertBlock/template.test.tsx

@@ -4,6 +4,7 @@ import { AlertBlock } from './template'
 import { AlertBlock as FormattedAlertBlock } from '@/components/alert/formatted-type'
 import { ExpandableText } from '@/components/expandableText/formatted-type'
 import { Wysiwyg } from '@/components/wysiwyg/formatted-type'
+import { ParagraphRendererProvider } from '@/components/paragraph/ParagraphRendererProvider'
 
 const expandableText: ExpandableText = {
   id: 'et-1',
@@ -31,8 +32,15 @@ describe('<Alert> with valid data and with expandable text', () => {
     content: expandableText,
   }
 
+  const renderAlertBlock = (props: FormattedAlertBlock) =>
+    render(
+      <ParagraphRendererProvider>
+        <AlertBlock {...props} />
+      </ParagraphRendererProvider>
+    )
+
   test('renders info <Alert> component', async () => {
-    const { container } = render(<AlertBlock {...blockContentExpandable} />)
+    const { container } = renderAlertBlock(blockContentExpandable)
 
     const vaAdditionalInfo = container.querySelector('va-additional-info')
     expect(vaAdditionalInfo).toHaveAttribute('trigger', 'Learn how to sign in')
@@ -53,7 +61,7 @@ describe('<Alert> with valid data and with expandable text', () => {
 
   test('renders warning <Alert> component', async () => {
     blockContentExpandable.alertType = 'warning'
-    const { container } = render(<AlertBlock {...blockContentExpandable} />)
+    const { container } = renderAlertBlock(blockContentExpandable)
 
     const vaAdditionalInfo = container.querySelector('va-additional-info')
     expect(vaAdditionalInfo).toHaveAttribute('trigger', 'Learn how to sign in')
@@ -79,8 +87,15 @@ describe('<Alert> with valid data and wysiwyg', () => {
     content: wysiwyg,
   }
 
+  const renderAlertBlock = (props: FormattedAlertBlock) =>
+    render(
+      <ParagraphRendererProvider>
+        <AlertBlock {...props} />
+      </ParagraphRendererProvider>
+    )
+
   test('renders info <Alert> component', async () => {
-    const { container } = render(<AlertBlock {...blockContentWysiwyg} />)
+    const { container } = renderAlertBlock(blockContentWysiwyg)
 
     expect(
       container.querySelector('va-additional-info')
@@ -99,7 +114,7 @@ describe('<Alert> with valid data and wysiwyg', () => {
 
   test('renders warning <Alert> component', async () => {
     blockContentWysiwyg.alertType = 'warning'
-    const { container } = render(<AlertBlock {...blockContentWysiwyg} />)
+    const { container } = renderAlertBlock(blockContentWysiwyg)
 
     expect(
       container.querySelector('va-additional-info')

src/components/alertBlock/template.tsx

@@ -1,45 +1,26 @@
-import { VaAlert } from '@department-of-veterans-affairs/component-library/dist/react-bindings'
+'use client'
+
 import { AlertBlock as FormattedAlertBlock } from '@/components/alert/formatted-type'
-import { PARAGRAPH_RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
-import { Wysiwyg } from '@/components/wysiwyg/template'
 import { slugifyString } from '@/lib/utils/slug'
+import { AlertShell } from '@/components/alert/AlertShell'
+import { useRenderParagraph } from '@/components/paragraph/ParagraphRenderContext'
 
 export function AlertBlock(alertBlock: FormattedAlertBlock) {
+  const renderParagraph = useRenderParagraph()
+
   if (!alertBlock || !Object.keys(alertBlock).length) {
     return null
   }
 
   const { alertType, id, title, content } = alertBlock
   return (
-    <VaAlert id={id} status={alertType} class="vads-u-margin-top--3" uswds>
-      <h2
-        slot="headline"
-        className="vads-u-font-size--h3"
-        id={slugifyString(title)}
-      >
-        {title}
-      </h2>
-
-      {content.type === PARAGRAPH_RESOURCE_TYPES.WYSIWYG && (
-        <Wysiwyg {...content} />
-      )}
-
-      {content.type === PARAGRAPH_RESOURCE_TYPES.EXPANDABLE_TEXT && (
-        <va-additional-info
-          id={`alert-with-additional-info-${id}`}
-          trigger={content.header}
-          disable-border="true"
-          className="alert-with-additional-info"
-        >
-          {content.text && (
-            <div
-              dangerouslySetInnerHTML={{
-                __html: content.text,
-              }}
-            />
-          )}
-        </va-additional-info>
-      )}
-    </VaAlert>
+    <AlertShell
+      id={id}
+      status={alertType}
+      headline={title}
+      headlineId={slugifyString(title)}
+    >
+      {renderParagraph(content)}
+    </AlertShell>
   )
 }