Simplify hosted content header

[cemms1]

What does this change?

• Specifies the header element as the semantic HTML element for the header in the Section parent component for the Hosted content page layouts

HostedContentHeader updates:

• Removes the "About" text
• Sets the width of the logo + advertisement content label as 132px across all breakpoints
• Adds an i icon button to the advertisement content label
• Moves the "hosted by" text to the bottom left of the Guardian Logo and updates the text colour
• Adjusts the CSS for the header and removes wrapper components in favour of keeping the HTML definition closer together
  • Uses the CSS styles as a way to name/annotate the div layers
• Removes extra nested div elements from the DOM tree for HostedContentHeader
• Sets a background colour for the logo container in case the logo is transparent

Note

This does not implement the popover/tooltip component for the information icon hover or onClick action. This will be done in a subsequent PR

Why?

Tweaking the page layouts for the Hosted Content pages to bring them closer to our new, reworked designs for these pages for the migration

Screenshots

	Screenshot
Before (frontend)
Before (DCR)
After (DCR)

[github-actions]

Deploy build 25744 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 25744 of dotcom:rendering-all to CODE
• Deploy parts of build 25744 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[cemms1]

Need to talk to design about this. The designs don't work in practice

[github-actions]

Deploy build 1091 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 1091 of dotcom:ab-testing to CODE
• Deploy parts of build 1091 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @cemms1 8 minutes and 10 seconds ago) Please check your changes!