DSD-1840: Allowing custom image component in Hero

[7emansell]

Fixes JIRA ticket DSD-1840

This PR does the following:

• Reconfigures the imageProps so that a custom image component can be passed into the Hero

How has this been tested?

Locally, release candidates in DC (passing in a Next Image)

Accessibility concerns or updates

Accessibility Checklist

• [x] Checked Storybook's "Accessibility" tab for color contrast and other issues.
• [x] The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
• [x] For hidden text or when aria-live is used, a screenreader was used to verify the text is read.
• [x] For features that involve UI updates and focusing on DOM refs, focus management was reviewed.
• [x] The feature works when the page is zoomed in to 200% and 400%.

Open Questions

• More a note: this one really confused me for a bit because I thought it was intentional for component NOT to be one of the props picked from the ComponentImageProps. But if it is, we can use the already existing functionality in the DS Image that replaces the component. So there ends up being very few code changes, and I'm worried I'm totally missing something..
• Since the Image component is not being used for the background in the "campaign"/"primary" variants, I don't think it makes sense to build a whole new approach to the component that allows you to pass a custom image component for the background, especially because it involves layered styling that would have to be more restrictive if we didn't know what component was being passed in? What do you guys think?

Checklist:

• [x] I have updated the Storybook documentation and changelog accordingly.
• [x] I have added relevant accessibility documentation for this pull request.
• [x] All new and existing tests passed.

Front End Review:

• [ ] Review the Vercel preview deployment once it is ready.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nypl-design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 17, 2024 5:35pm

[bigfishdesign13]

I did not pull this up in the browser when I reviewed and I am just now seeing that the custom image that is being passed in is not showing in the browser. The <image> rendered by the custom Image component is in the DOM, but it is hidden and the image URL is not being passed to the background-image attribute that is being used to display the image. This pattern mirriors what we discussed about the FeaturedContent component.

With that realization, would we gain anything by scraping the image path from the custom component and passing it as the background-image? What was the main need for using the NextJS image?