Style section highlights headers as h2/h3

[RoyEJohnson]

DISCO-43
I made the Popup Header an h1 so that we have the correct sequence of headers.
It made no sense to me that it was an h3 previously. It is a major, separate section. If we think it should be h3, then the section headers need to become h4 and h5.

[jivey]

This is a good change. I'm wondering about the awkwardness of the h3Style on the h1. Maybe we should update the heading style names to be more abstract like large/medium/small? Or add aliases?

[RoyEJohnson]

I'm conflicted on whether it's good to have the association between h1 and a particular size. We do tend to think that way. It makes some sense to say "this will be styled like we normally style an h3 even though it's structurally an h1".
In the Typography/headings file there are five sizes spelled out: h1-h4, plus h4-mobile (also h3-mobile, which is the same as h4-mobile). H1 and H2 are only defined on styled h1 and h2.
They could be largest, large, medium, small, and smallest. Would that help with decision making about which to use? Would we mentally convert to h-something anyway?

[jivey]

Yeah we could totally make a case for either way... I think I mentally tend to separate the style from the markup (though hopefully they match in relative scale) because I'm used making small tweaks in different areas anyway. But with REX I don't have a good sense of how these are used, so I think this is a good way to handle it. And in the future we might replace some of these with typography helpers from ui-components.

[RoyEJohnson]

@jivey I added a commit here to pull the put-away X out of the popup header. Thought you might want to look it over. I had to change Header to be a div and then put the h1 tags explicitly around the heading text.

[jivey]

That's a nice idea for handling the h1 in Header 👍