feat: display hero image in news carousel

[gidjin]

SC-1394

Proposed changes

Articles can have hero images. Those are displayed when viewing an article on the single article page. This PR updates it so that the internal news carousel uses the hero image if it is available. If it is missing the current placeholder that uses the USSF logo will still be displayed.

Reviewer notes

The hero image has a max height of 534px to match the height of the design in Figma.

Setup

Start up storybook yarn storybook and view the NewsCarouselItem with Hero component

Start up the servers

yarn services:up
cd ../ussf-portal-cms
yarn dev
cd -
yarn dev

Create two internal articles in the cms one with a hero image and one without. Be sure to select InternalNews as the category. View the carousel on the news page one should have the default hero image and one should have the custom one. See screenshots below.

---

Code review steps

As the original developer, I have

• Met the acceptance criteria, or will meet them in subsequent PRs or stories
  • ...
• Created new stories in Storybook if applicable
  • Checked that all Storybook accessibility checks are passing
• Created/modified automated unit tests in Jest
  • Including jest-axe checks when UI changes
• Created/modified automated E2E tests in Cypress
  • Including cypress-axe checks when UI changes
  • Checked that the E2E test build is not failing
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)
• Requested a design review for user-facing changes
• For any new migrations/schema changes:
  • Followed guidelines for zero-downtime deploys

As code reviewer(s), I have

• Pulled this branch locally and tested it
• Reviewed this code and left comments
• Checked that all code is adequately covered by tests
  • Checked that the E2E test build is not failing
• Made it clear which comments need to be addressed before this work is merged
• Considered marking this as accepted even if there are small changes needed
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a designer reviewer, I have

• Checked in the design translated visually
• Checked behavior
• Checked different states (empty, one, some, error)
• Checked for landmarks, page heading structure, and links
• Tried to break the intended flow
• Performed a11y testing:
  • Checked responsiveness in mobile, tablet, and desktop
  • Checked keyboard navigability
  • Tested with VoiceOver in Safari
  • Checked VO's rotor menu for landmarks, page heading structure and links
  • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a test user, I have

• Run through the Test Script:
  • On commercial internet in IE11
  • On commercial internet in Firefox
  • On commercial internet in Chrome
  • On commercial internet in Safari
  • On NIPR in IE11
  • On NIPR in Firefox
  • On NIPR in Chrome
  • On NIPR in Safari
  • On a mobile device in Firefox
  • On a mobile device in Chrome
  • On a mobile device in Safari
• Added any anomalous behavior to this PR

---

Screenshots

app with hero image

app without hero image

storybook

[shortcut-integration]

This pull request has been linked to Shortcut Story #1394: Display uploaded images for carousel thumbnail.

[shkeating]

looks good to me 🚀

[jcbcapps]

Looks great!

[abbyoung]

LGTM! Works as expected 🎉