Task/internal 28 update page header component 782

[bluemoonecho]

Issue #782

Zeplin link: https://zpl.io/qyBk38Z

📸 Looks like

📱	🖥️

[planktonic]

@bluemoonecho yes the designs in zeplin should be complete, and that’s our target appearance for every component :) If there’s anything that seems out of place or somehow inconsistent in the designs though, shout out so we can update them.

The layout improvements here look good, I’d add the following points (some of these apply to all the upcoming tickets — perhaps we can get together to do some ticket grooming, to make them clearer, wdyt?)

• We’ll eventually upgrade to storybook 7, where we need all the html stories taken out of mdx files, and instead specify them in js (then import them into the mdx to render them in the docs). Let’s make that change here already
• At the same time, I’d suggest adding a PageHeader js component to use in the stories, like the Badge or Button components we already have.
• The page-header component would be a great candidate to make into a CSS component (e.g. .o-page-header) so that we do not need all these utility classes in the template
• The zeplin designs show several slots inside the page-header (in zeplin these are named top-left, bottom-right etc, but probably it would be good to use semantic names here, to avoid them being based on visual layout). Perhaps make each of those a prop on the js component, that accepts some HTML and renders it in place
• Let’s use CSS grid to create the layout, using named grid areas for each of the slots

That’s a lot, and I’m sorry it wasn’t on the ticket in the first place! Does it make sense? Give me a shout so we can take a look together — this will be the most complex component we’ve built so far using the new format, so there’ll be some experimentation involved

[planktonic]

@bluemoonecho there’s feedback still to cover here — unless you have time to take a look before, let’s plan for this next meeting? :)

[bluemoonecho]

@planktonic - should be ready for another review!