feat(universal-banner): Image resizing and design updates

[andy-blum]

Related Ticket(s)

Closes #8811

Description

This PR updates the universal banner component's styles to adhere to the functional specs and updates the component's rendered shadow dom to make the entire banenr a link at smaller screen sizes

Changelog

Changed

• refactored styles in accordance with functional specs
• fixed an issue in which images would distort on resize
• render entire banner as a link at sm and md breakpoints

[ibmdotcom-bot]

Deploy preview created for package NextJS Test Application:
https://ibmdotcom-nextjs-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8947/index.html

Built with commit: 3c58fd065dd8bc7357b43bf4b82d8d53ae37afe0

[ibmdotcom-bot]

Deploy preview created for package Web Components HTML Test Application:
https://ibmdotcom-web-components-html-test-upstream.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8947/index.html

Built with commit: 3c58fd065dd8bc7357b43bf4b82d8d53ae37afe0

[ibmdotcom-bot]

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/8947/index.html

Built with commit: 3c58fd065dd8bc7357b43bf4b82d8d53ae37afe0

[ibmdotcom-bot]

Deploy preview created for package Web Components (React wrapper):
https://ibmdotcom-web-components-react.s3-web.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8947/index.html

Built with commit: 3c58fd065dd8bc7357b43bf4b82d8d53ae37afe0

[ibmdotcom-bot]

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/8947/index.html

Built with commit: 3c58fd065dd8bc7357b43bf4b82d8d53ae37afe0

[RichKummer]

@andy-blum You fixed a lot of the issues for Universal banner, yay! I am seeing a few things that stick out

1. Looks like there's an extra bit of space between the left side of the window and the start of the image. Image should be flush with the left edge when the image appears until the screen is beyond @max. The image frame should align with the grid, but can't tell with the extra spacing.

2. In Focus state, the Focus border looks fine at the bottom of the banner, but looks cut off on the top, left, and right. Same with Active state.

3. On @md and @sm, the icon should be 18px from the top of the banner. Currently, it looks like it's set to 16px.

4. On @md, the heading and body text area look like they are smaller than the specs.

Specs

Build

5. For @sm, the heading and body text area should end 16px from the icon.

Specs

Build

6. The @max button alignment looks fixed. For @xlg, looks like it should be updated to match the specs - the button's right edge should be just at the left edge of the last column

Specs

[proeung]

Looks good! I like the usage of @carbon/layout to get the matching breakpoint so that you can alter the shadow root based on the treatment of the CTA link. However, I have some comments/concerns about the display of the CTA icon for when the Content Author decides to use the CTA type outside of local.

[andy-blum]

@proeung the latest changes should address your feedback, and will now dynamically set the icon used by the header. [type="external"] ctas will also get target="_blank" applied

[RichKummer]

Took a look through and looks good on the design side - seeing that the e2e test for WC seems to be failing

[RichKummer]

LGTM! Thanks for sticking this one out @andy-blum 🚀🚀🚀

[proeung]

LGTM!

[proeung]

Looks like we can add "Ready to merge" label to this PR since it received two approval (from Rich and myself), but before we do that @kennylam or @annawen1 can you give a review so that we have code approval from the DPO dev side?

[kennylam]

Thanks @andy-blum!