Repository: department-of-veterans-affairs/next-build
Pull request #1003: VAMS 20162 news release defects
Author: login: brianseek
Created: 2025-04-30T23:24:19Z | Merged: 2025-05-01T18:37:32Z

# Description

This PR address several defects with the <PressRelease> component. See more [detail in the ticket](https://github.com/department-of-veterans-affairs/va.gov-cms/issues/20162).

## Generated description

This pull request introduces updates to the `PhoneNumber` component, refactors the `PressRelease` layout, and enhances test coverage. Key changes include adding optional props, improving testability with `data-testid` attributes, and streamlining the handling of phone numbers and media assets.

### Updates to the `PhoneNumber` Component:
* Added a new optional `testId` prop to the `PhoneNumber` component for improved testability. (`src/templates/common/phoneNumber/index.tsx`, [[1]](diffhunk://#diff-da9888787c5c2162a69df279c2086e7d30cf993198f78b47e29d212cf48548f3R47-R50) [[2]](diffhunk://#diff-da9888787c5c2162a69df279c2086e7d30cf993198f78b47e29d212cf48548f3L76-R85)

### Refactoring of the `PressRelease` Layout:
* Replaced custom button and link elements with `va-button` and `va-link` components for consistency, and added `data-testid` attributes for testing. (`src/templates/layouts/pressRelease/index.tsx`, [[1]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bL39-R101) [[2]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bR114-R122) [[3]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bL135-R132) [[4]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bL146-R146) [[5]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bL157-R160)
* Updated the handling of media contacts to skip rendering when all contact data is null and added a test for this scenario. (`src/templates/layouts/pressRelease/index.tsx`, [[1]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bL39-R101) [[2]](diffhunk://#diff-ae1dc2a62c2fc47ad6a9ce7356419154ac1bd2dd645093e51edb54769af7778bR114-R122) [[3]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL251-R263)

### Improvements to Tests:
* Replaced text-based queries with `data-testid` queries in `PressRelease` tests for more robust test cases. (`src/templates/layouts/pressRelease/index.test.tsx`, [[1]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL108-R109) [[2]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL134-R135) [[3]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL251-R263)
* Adjusted expectations in tests to account for updated phone number formatting and attributes. (`src/templates/layouts/pressRelease/index.test.tsx`, [[1]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL159-R179) [[2]](diffhunk://#diff-966b2ff1bc9fc89a75a2ff1009d389bd0f076ce6c06fda5552f12a1c2617380dL225-R212)

### Type Adjustments:
* Made the `label` property in the `PhoneNumber` type optional to align with the updated component logic. (`src/types/formatted/phoneNumber.ts`, [src/types/formatted/phoneNumber.tsL5-R5](diffhunk://#diff-bf166dc2bee1f4887a057fd15b4431264a91b6e50e1aa713253c4fba920d53dcL5-R5))

## Ticket

<!--
https://docs.github.com/en/issues/tracking-your-work-with-issues/using-issues/linking-a-pull-request-to-an-issue
-->

Closes 20162

## Developer Task

- [x] PR submitted against the `main` branch of `next-build`.
- [x] Link to the issue that this PR addresses (if applicable).
- [x] Define all changes in your PR and note any changes that could potentially be breaking changes.
- [x] PR includes steps to test your changes and links to these changes in the Tugboat preview (if applicable).
- [x] Provided before and after screenshots of your changes (if applicable).
- [x] Alerted the #next-build Slack channel to request a PR review.
- [x] You understand that once approved, you are responsible for merging your changes into `main`. (Note that changes to `main` will move automatically into production.)

## Testing Steps

 - [ ] Visit https://pr1003-nn2vchgzduqq3fgsxyjfcjtdhvrklzfc.tugboat.vfs.va.gov/boston-health-care/news-releases/clinical-study-on-use-of-raman-spectroscopy-device-to-detect-skin-cancer/
 - [ ] verify that the print button and download link match prod and use the DS components, va-button for print and va-link for download
 - [ ] verify that the headings "Media contacts" and "Download media assets" are H2s
 - [ ] Visit https://pr1003-nn2vchgzduqq3fgsxyjfcjtdhvrklzfc.tugboat.vfs.va.gov/providence-health-care/news-releases/providence-va-invests-in-mental-health-services-with-new-facility/
 - [ ] verify that the entire Media contacts section is not rendered

## Screenshots
![localhost_3999_boston-health-care_news-releases_clinical-study-on-use-of-raman-spectroscopy-device-to-detect-skin-cancer_ (1)](https://github.com/user-attachments/assets/97d521fd-724e-4438-bddb-411b1ef22b51)
![localhost_3999_providence-health-care_news-releases_providence-va-invests-in-mental-health-services-with-new-facility_ (1)](https://github.com/user-attachments/assets/efa17acc-1224-4309-9564-44dec422953f)

---

## Reviewer

### Reviewing a PR

This section lists items that need to be checked or updated when making changes to this repository.

## Standard Checks


- [ ] Code Quality: Readabilty, Naming Conventions, Consistency, Reusability
- [ ] Test Coverage: 80% coverage
- [ ] Functionality: Change functions as expected with no additional bugs
- [ ] Performance: Code does not introduce performance issues
- [ ] Documentation: Changes are documented in their respective README.md files
- [ ] Security: Packages have been approved in the TRM


## Merging a Layout

When merging a layout, you must ensure that the content type has been turned on for `next-build` in the [.tugboat.env](../envs/.tugboat.env). This method mocks the CMS flag that must be turned on for a layout to be included in the build.

The layout component and matching resource type should be included in the [slug.tsx](../src/pages/[[...slug]].tsx), so that it can reviewed. Including a component in the slug.tsx does not mean a page will be viewable in production only on the tugboat for the branch.

When a layout is merged to main and approved for deployment, the prod CMS will turn the toggle on for the resource type. 

The status of layouts should be kept up to date inside [templates.md](../READMEs/templates.md). This includes QA progress, development progress, etc. A link should be provided for where testing can occur.


Diff:
diff --git a/src/templates/common/phoneNumber/index.tsx b/src/templates/common/phoneNumber/index.tsx
index 437e809e0..d74910824 100644
--- a/src/templates/common/phoneNumber/index.tsx
+++ b/src/templates/common/phoneNumber/index.tsx
@@ -44,9 +44,10 @@ export const separateExtension = (
 export const PhoneNumber = (
   props: FormattedPhoneNumber & {
     className?: string
+    testId?: string
   }
 ) => {
-  const { className, extension, label, number, phoneType } = props
+  const { className, extension, label, number, phoneType, testId } = props
 
   if (!number) {
     return null
@@ -73,7 +74,7 @@ export const PhoneNumber = (
 
   return (
     <p className={className || undefined} data-testid="phone">
-      <strong>{labelToDisplay}: </strong>
+      <strong>{`${labelToDisplay}: `}</strong>
       <va-telephone
         contact={numberToDisplay.replace?.(/-/g, '')}
         extension={extensionToDisplay || null}
@@ -81,6 +82,7 @@ export const PhoneNumber = (
         not-clickable={fax ? true : undefined}
         sms={sms ? true : undefined}
         tty={tty ? true : undefined}
+        data-testid={testId || undefined}
       />
     </p>
   )
diff --git a/src/templates/layouts/pressRelease/index.test.tsx b/src/templates/layouts/pressRelease/index.test.tsx
index 14181ccff..54fa0b61d 100644
--- a/src/templates/layouts/pressRelease/index.test.tsx
+++ b/src/templates/layouts/pressRelease/index.test.tsx
@@ -105,8 +105,8 @@ describe('<pressRelease> with valid data', () => {
     spy.mockRestore()
   })
   test('renders component', () => {
-    const { container, getByText } = render(<PressRelease {...data} />)
-    const linkElement = getByText(/Download press release \(PDF\)/i)
+    const { container, getByTestId } = render(<PressRelease {...data} />)
+    const linkElement = getByTestId('pdf-version')
 
     expect(
       screen.queryByText(/Wilmington VAMC 2019 Annual Report/)
@@ -131,8 +131,8 @@ describe('<pressRelease> with valid data', () => {
   })
   test('renders component without pdfVersion', () => {
     data.pdfVersion = null
-    const { container } = render(<PressRelease {...data} />)
-    const linkElement = screen.queryByText(/Download press release \(PDF\)/i)
+    render(<PressRelease {...data} />)
+    const linkElement = screen.queryByTestId('pdf-version')
     expect(linkElement).toBeNull()
   })
   test('renders contacts', () => {
@@ -156,40 +156,27 @@ describe('<pressRelease> with valid data', () => {
     const ext = screen.getByTestId('phone-3')
     const fax = screen.getByTestId('phone-4')
     expect(voice).toBeInTheDocument()
-    expect(voice).toHaveAttribute('contact', data.contacts[0].numbers[0].number)
-    expect(voice).not.toHaveAttribute('sms')
-    expect(voice).not.toHaveAttribute('tty')
-    expect(voice).not.toHaveAttribute('extension')
-    expect(voice).toHaveAttribute('message-aria-describedby', 'Phone')
-    expect(screen.getByTestId('phone-label-0')).toHaveTextContent('Phone:')
+    expect(voice).toHaveAttribute(
+      'contact',
+      data.contacts[0].numbers[0].number.replace?.(/-/g, '')
+    )
     expect(sms).toBeInTheDocument()
-    expect(sms).toHaveAttribute('contact', data.contacts[0].numbers[1].number)
-    expect(sms).toHaveAttribute('sms')
-    expect(sms).not.toHaveAttribute('tty')
-    expect(sms).not.toHaveAttribute('extension')
-    expect(sms).toHaveAttribute('message-aria-describedby', 'Phone')
-    expect(screen.getByTestId('phone-label-1')).toHaveTextContent('Phone:')
+    expect(sms).toHaveAttribute(
+      'contact',
+      data.contacts[0].numbers[1].number.replace?.(/-/g, '')
+    )
     expect(tty).toBeInTheDocument()
-    expect(tty).toHaveAttribute('contact', data.contacts[0].numbers[2].number)
-    expect(tty).not.toHaveAttribute('sms')
-    expect(tty).toHaveAttribute('tty')
-    expect(tty).not.toHaveAttribute('extension')
-    expect(tty).toHaveAttribute('message-aria-describedby', 'Phone')
-    expect(screen.getByTestId('phone-label-2')).toHaveTextContent('Phone:')
+    expect(tty).toHaveAttribute(
+      'contact',
+      data.contacts[0].numbers[2].number.replace?.(/-/g, '')
+    )
     expect(ext).toBeInTheDocument()
-    expect(ext).toHaveAttribute('contact', data.contacts[0].numbers[3].number)
-    expect(ext).not.toHaveAttribute('sms')
-    expect(ext).not.toHaveAttribute('tty')
     expect(ext).toHaveAttribute('extension', data.contacts[0].numbers[3].ext)
-    expect(ext).toHaveAttribute('message-aria-describedby', 'Phone')
-    expect(screen.getByTestId('phone-label-3')).toHaveTextContent('Phone:')
     expect(fax).toBeInTheDocument()
-    expect(fax).toHaveAttribute('contact', data.contacts[0].numbers[4].number)
-    expect(fax).not.toHaveAttribute('sms')
-    expect(fax).not.toHaveAttribute('tty')
-    expect(fax).not.toHaveAttribute('extension')
-    expect(fax).toHaveAttribute('message-aria-describedby', 'Fax')
-    expect(screen.getByTestId('phone-label-4')).toHaveTextContent('Fax:')
+    expect(fax).toHaveAttribute(
+      'contact',
+      data.contacts[0].numbers[4].number.replace?.(/-/g, '')
+    )
   })
 
   test('does not render numbers if null', () => {
@@ -222,7 +209,7 @@ describe('<pressRelease> with valid data', () => {
     const document = screen.getByTestId('document')
     const image = screen.getByTestId('image')
     const video = screen.getByTestId('video')
-    expect(document).toHaveAttribute('filetype', 'pdf')
+    expect(document).toHaveAttribute('filetype', 'PDF')
     expect(document).toHaveAttribute('download')
     expect(document).toHaveAttribute('text', downloads[0].name)
     expect(document).toHaveAttribute('href', downloads[0].uri)
@@ -248,8 +235,30 @@ describe('<pressRelease> with valid data', () => {
   window.print = jest.fn()
   test('renders the print button and handles click', () => {
     render(<PressRelease {...data} />)
-    const printButton = screen.getByText('Print')
+    const printButton = screen.getByTestId('print-button')
     fireEvent.click(printButton)
     expect(window.print).toHaveBeenCalled()
   })
+  test('does not render Media contacts section when the contact is archived', () => {
+    // This is the state of data at the component when the author is archived
+    const archivedAuthorContacts = [
+      {
+        id: '96668498-d442-4b55-8b14-7ec90410f418',
+        name: null,
+        description: null,
+        numbers: [
+          {
+            id: null,
+            type: null,
+            number: null,
+            ext: null,
+          },
+        ],
+        email: null,
+      },
+    ]
+    const archivedData = { ...data, contacts: archivedAuthorContacts }
+    render(<PressRelease {...archivedData} />)
+    expect(screen.queryByTestId('media-contacts')).not.toBeInTheDocument()
+  })
 })
diff --git a/src/templates/layouts/pressRelease/index.tsx b/src/templates/layouts/pressRelease/index.tsx
index ab802c027..018ac1ae3 100644
--- a/src/templates/layouts/pressRelease/index.tsx
+++ b/src/templates/layouts/pressRelease/index.tsx
@@ -2,8 +2,8 @@ import { PressRelease as FormattedPressRelease } from '@/types/formatted/pressRe
 import { LovellStaticPropsResource } from '@/lib/drupal/lovell/types'
 import { LovellSwitcher } from '@/templates/components/lovellSwitcher'
 import { formatDate } from '@/lib/utils/helpers'
-import { recordEvent } from '@/lib/analytics/recordEvent'
 import { ContentFooter } from '@/templates/common/contentFooter'
+import { PhoneNumber } from '@/templates/common/phoneNumber'
 
 export const PressRelease = ({
   title,
@@ -36,93 +36,88 @@ export const PressRelease = ({
                   <p className="vads-u-font-weight--bold vads-u-margin-bottom--3 vads-u-margin-top--0">
                     {formatDate(releaseDate)}
                   </p>
-                  <div>
-                    <button
-                      type="button"
-                      className="vads-u-margin-right--4 va-button-link"
+                  <p className="va-flex vads-u-flex-direction--column  mobile:vads-u-flex-direction--row mobile:vads-u-align-items--center mobile:vads-u-padding-bottom--4 ">
+                    <va-button
+                      data-testid="print-button"
                       onClick={() => {
                         window.print()
                         return false
                       }}
-                    >
-                      <i className="fa fa-print vads-u-padding-right--1"></i>
-                      Print
-                    </button>
+                      secondary
+                      text="Print"
+                      class="vads-u-margin-right--2 vads-u-padding-bottom--2 mobile:vads-u-padding-bottom--0"
+                    />
+
                     {pdfVersion && (
-                      <a href={pdfVersion} download>
-                        <i className="fa fa-download vads-u-padding-right--1"></i>
-                        Download press release (PDF)
-                      </a>
+                      <va-link
+                        download
+                        href={pdfVersion}
+                        text="Download press release"
+                        filetype={pdfVersion.split('.').pop().toUpperCase()}
+                        data-testid="pdf-version"
+                      />
                     )}
-                  </div>
+                  </p>
                   <p className="va-introtext vads-u-font-size--lg vads-u-margin-top--3">
                     {`${address.locality}, ${address.administrative_area} - ${introText}`}
                   </p>
                   {/* Body */}
                   <div dangerouslySetInnerHTML={{ __html: fullText }}></div>
                 </section>
-                <section className="vads-u-margin-bottom--6">
-                  {contacts?.length > 0 && (
-                    <div className="vads-u-font-weight--bold">
-                      Media contacts
-                    </div>
-                  )}
-                  {/* Print each media contact */}
-                  {contacts?.map((contact) => {
-                    if (!contact) {
-                      return null
-                    }
-                    return (
-                      <div key={contact?.id}>
-                        <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
-                          {`${contact?.name}${contact?.description ? `, ${contact?.description}` : ''}`}
-                        </p>
-                        {contact?.numbers?.map((phone, index) => {
-                          const label = phone.type === 'fax' ? 'Fax' : 'Phone'
-                          return (
-                            <p
-                              key={phone.id}
-                              className="vads-u-margin-top--1 vads-u-margin-bottom--0"
-                            >
-                              <span
-                                data-testId={`phone-label-${index}`}
-                                className="vads-u-font-weight--bold vads-u-margin-right--0p5"
-                              >
-                                {`${label}:`}
-                              </span>
-                              <va-telephone
-                                tty={phone.type === 'tty' || null}
-                                sms={phone.type === 'sms' || null}
-                                not-clickable={phone.type === 'fax' || null}
-                                contact={phone.number}
+                {/* contacts can have a single object in the array that contains all null values */}
+                {contacts?.length > 0 && contacts[0]?.name && (
+                  <section
+                    className="vads-u-margin-bottom--6"
+                    data-testid="media-contacts"
+                  >
+                    <h2 className="vads-u-font-size--h3">Media contacts</h2>
+                    {/* Print each media contact */}
+                    {contacts.map((contact) => {
+                      return (
+                        <div key={contact.id}>
+                          <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
+                            {`${contact.name}${contact.description ? `, ${contact.description}` : ''}`}
+                          </p>
+                          {contact.numbers?.map((phone, index) => {
+                            // Skip if phone number is empty
+                            if (!phone.number) {
+                              return ''
+                            }
+                            return (
+                              <PhoneNumber
+                                key={phone.id}
+                                id={phone.id}
+                                type="phone"
+                                className="vads-u-margin-top--1 vads-u-margin-bottom--0"
                                 extension={phone.ext || null}
-                                data-testid={`phone-${index}`}
-                                message-aria-describedby={label}
+                                number={phone.number}
+                                phoneType={phone.type}
+                                testId={`phone-${index}`}
+                              />
+                            )
+                          })}
+                          {contact.email && (
+                            <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
+                              <va-link
+                                data-testid="press-email"
+                                href={`mailto:${contact?.email}`}
+                                text={contact?.email}
                               />
                             </p>
-                          )
-                        })}
-                        {contact?.email && (
-                          <p className="vads-u-margin-top--1 vads-u-margin-bottom--0">
-                            <va-link
-                              data-testid="press-email"
-                              href={`mailto:${contact?.email}`}
-                              text={contact?.email}
-                            />
-                          </p>
-                        )}
-                      </div>
-                    )
-                  })}
-                </section>
+                          )}
+                        </div>
+                      )
+                    })}
+                  </section>
+                )}
                 {downloads.length > 0 && (
                   <section
                     className="vads-u-margin-bottom--6"
                     data-testid="downloads"
                   >
-                    <div className="vads-u-font-weight--bold vads-u-margin-bottom--1">
+                    <h2 className="vads-u-margin-bottom--1 vads-u-font-size--h3">
                       Download media assets
-                    </div>
+                    </h2>
                     {/*Print out unorder list links per type*/}
                     <ul className="vads-u-margin-bottom--1 usa-unstyled-list">
                       {downloads?.map((asset) => {
@@ -132,7 +127,7 @@ export const PressRelease = ({
                         let link = (
                           <va-link
                             data-testid="generic-file"
-                            filetype={asset.uri.split('.').pop()}
+                            filetype={asset.uri.split('.').pop().toUpperCase()}
                             href={asset.uri}
                             download
                             text={asset.name}
@@ -143,7 +138,10 @@ export const PressRelease = ({
                             link = (
                               <va-link
                                 data-testid="document"
-                                filetype={asset.uri.split('.').pop()}
+                                filetype={asset.uri
+                                  .split('.')
+                                  .pop()
+                                  .toUpperCase()}
                                 href={asset.uri}
                                 download
                                 text={asset.name}
@@ -154,7 +152,10 @@ export const PressRelease = ({
                             link = (
                               <va-link
                                 data-testid="image"
-                                filetype={asset.uri.split('.').pop()}
+                                filetype={asset.uri
+                                  .split('.')
+                                  .pop()
+                                  .toUpperCase()}
                                 href={asset.uri}
                                 download
                                 text={`Download ${asset.name}`}
diff --git a/src/types/formatted/phoneNumber.ts b/src/types/formatted/phoneNumber.ts
index e8aac4d96..412caa6d7 100644
--- a/src/types/formatted/phoneNumber.ts
+++ b/src/types/formatted/phoneNumber.ts
@@ -2,7 +2,7 @@ import { PublishedParagraph } from '@/types/formatted/publishedEntity'
 
 export type PhoneNumber = PublishedParagraph & {
   extension: string
-  label: string
+  label?: string
   number: string
   phoneType: string
 }


Reviews:
user: login: brianseek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T15:43:51Z
user: login: brianseek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T15:44:23Z
user: login: brianseek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T15:45:27Z
user: login: cvalarida
body: Looks great! Had a few questions, but :shipit: 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T16:09:54Z
user: login: brianseek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T16:14:08Z
user: login: brianseek
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T16:17:38Z
user: login: laflannery
body: Thank you! Approved
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-01T18:36:49Z

Review comments:
diff_hunk: @@ -156,40 +156,27 @@ describe('<pressRelease> with valid data', () => {
     const ext = screen.getByTestId('phone-3')
     const fax = screen.getByTestId('phone-4')
     expect(voice).toBeInTheDocument()
-    expect(voice).toHaveAttribute('contact', data.contacts[0].numbers[0].number)
path: src/templates/layouts/pressRelease/index.test.tsx
user: login: brianseek
body: Since this is switching to the shared component, we no longer need to test all of this logic here.
created_at: 2025-05-01T15:43:51Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2,8 +2,8 @@ import { PressRelease as FormattedPressRelease } from '@/types/formatted/pressRe
 import { LovellStaticPropsResource } from '@/lib/drupal/lovell/types'
 import { LovellSwitcher } from '@/templates/components/lovellSwitcher'
 import { formatDate } from '@/lib/utils/helpers'
-import { recordEvent } from '@/lib/analytics/recordEvent'
path: src/templates/layouts/pressRelease/index.tsx
user: login: brianseek
body: was not being used
created_at: 2025-05-01T15:44:23Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2,7 +2,7 @@ import { PublishedParagraph } from '@/types/formatted/publishedEntity'
 
 export type PhoneNumber = PublishedParagraph & {
   extension: string
-  label: string
+  label?: string
path: src/types/formatted/phoneNumber.ts
user: login: brianseek
body: label is optional since the component can also derive the label from phone type
created_at: 2025-05-01T15:45:27Z
author_association: CONTRIBUTOR
diff_hunk: @@ -73,14 +74,15 @@ export const PhoneNumber = (
 
   return (
     <p className={className || undefined} data-testid="phone">
-      <strong>{labelToDisplay}: </strong>
+      <strong>{`${labelToDisplay}: `}</strong>
path: src/templates/common/phoneNumber/index.tsx
user: login: cvalarida
body: Was this giving you some grief before? 🤔 
created_at: 2025-05-01T16:03:53Z
author_association: CONTRIBUTOR
diff_hunk: @@ -131,8 +131,8 @@ describe('<pressRelease> with valid data', () => {
   })
   test('renders component without pdfVersion', () => {
     data.pdfVersion = null
-    const { container } = render(<PressRelease {...data} />)
-    const linkElement = screen.queryByText(/Download press release \(PDF\)/i)
+    render(<PressRelease {...data} />)
+    const linkElement = screen.queryByTestId('pdf-version')
path: src/templates/layouts/pressRelease/index.test.tsx
user: login: cvalarida
body: Solid improvement. 👍 
created_at: 2025-05-01T16:04:41Z
author_association: CONTRIBUTOR
diff_hunk: @@ -248,8 +235,30 @@ describe('<pressRelease> with valid data', () => {
   window.print = jest.fn()
   test('renders the print button and handles click', () => {
     render(<PressRelease {...data} />)
-    const printButton = screen.getByText('Print')
+    const printButton = screen.getByTestId('print-button')
     fireEvent.click(printButton)
     expect(window.print).toHaveBeenCalled()
   })
+  test('does not render Media contacts section when the contact is archived', () => {
+    // This is the state of data at the component when the author is archived
+    const archivedAuthorContacts = [
+      {
+        id: '96668498-d442-4b55-8b14-7ec90410f418',
+        name: null,
+        description: null,
+        numbers: [
+          {
+            id: null,
+            type: null,
+            number: null,
+            ext: null,
+          },
+        ],
+        email: null,
+      },
+    ]
path: src/templates/layouts/pressRelease/index.test.tsx
user: login: cvalarida
body: So when the author is archived, all the fields are set to `null`? 🤔 Is that just a Drupal thing, or..? How do you know?
created_at: 2025-05-01T16:07:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -2,7 +2,7 @@ import { PublishedParagraph } from '@/types/formatted/publishedEntity'
 
 export type PhoneNumber = PublishedParagraph & {
   extension: string
-  label: string
+  label?: string
path: src/types/formatted/phoneNumber.ts
user: login: cvalarida
body: One of these days, I'd love to switch on strict mode so these optional properties are actually meaningful. 😮‍💨 

Thanks for being deliberate about this, though!
created_at: 2025-05-01T16:09:30Z
author_association: CONTRIBUTOR
diff_hunk: @@ -73,14 +74,15 @@ export const PhoneNumber = (
 
   return (
     <p className={className || undefined} data-testid="phone">
-      <strong>{labelToDisplay}: </strong>
+      <strong>{`${labelToDisplay}: `}</strong>
path: src/templates/common/phoneNumber/index.tsx
user: login: brianseek
body: It was rendering with a line break in html but not on screen which is bad for screen readers and test assertions.
![Screenshot 2025-05-01 at 9 13 54 AM](https://github.com/user-attachments/assets/9f2e2e9b-0ef7-4f7c-a13d-44ff53530f28)

created_at: 2025-05-01T16:14:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -248,8 +235,30 @@ describe('<pressRelease> with valid data', () => {
   window.print = jest.fn()
   test('renders the print button and handles click', () => {
     render(<PressRelease {...data} />)
-    const printButton = screen.getByText('Print')
+    const printButton = screen.getByTestId('print-button')
     fireEvent.click(printButton)
     expect(window.print).toHaveBeenCalled()
   })
+  test('does not render Media contacts section when the contact is archived', () => {
+    // This is the state of data at the component when the author is archived
+    const archivedAuthorContacts = [
+      {
+        id: '96668498-d442-4b55-8b14-7ec90410f418',
+        name: null,
+        description: null,
+        numbers: [
+          {
+            id: null,
+            type: null,
+            number: null,
+            ext: null,
+          },
+        ],
+        email: null,
+      },
+    ]
path: src/templates/layouts/pressRelease/index.test.tsx
user: login: brianseek
body: I am not sure where this is happening to tell you the truth. I don't see where it is happening in next-build at a glance but I also can't imagine Drupal doing it like this. I'll dig around.
created_at: 2025-05-01T16:17:38Z
author_association: CONTRIBUTOR

PR comments:
user: login: laflannery
created_at: 2025-05-01T17:57:47Z
body: @brianseek I wasn't clear on the ACs for the `<h2>` tags for Media and Download - but turns out I changed my mind anyway. I spoke to Michelle just now and can we have the `<h2>` but sized down to match an H3

`<h2 class="vads-u-font-size--h3">`
author_association: CONTRIBUTOR
user: login: brianseek
created_at: 2025-05-01T18:27:50Z
body: > @brianseek I wasn't clear on the ACs for the `<h2>` tags for Media and Download - but turns out I changed my mind anyway. I spoke to Michelle just now and can we have the `<h2>` but sized down to match an H3
> 
> `<h2 class="vads-u-font-size--h3">`

Pushed that update and updated screenshots.
author_association: CONTRIBUTOR