Update Section Heading component

[ArinzeJeffrey-droid]

Fixes #783

📸 Looks like

Small screens

Large screens

Changes

• On smaller screens items stack top to bottom from the left to right.
• When an item is attached to the title text (i.e. a badge or counter) it sticks/aligns to the top line of text when the text breaks to multiple lines.
• All Section Headings have a 2px border underline.
• The border underline fills the container width (minus padding)

How to QA

• git fetch
• git checkout <pr-branch-name>
• yarn
• yarn storybook
• navigate to Section heading

Check:

• The appearance matches the design in Zeplin
• The Zeplin component is correctly linked in storybook
• The documentation for this component is correct, understandable, and up-to-date.

👾 Code changes

Check:

• The documentation for this component is correct, understandable, and up-to-date.
• The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
• Everything that should be a variable, is.

[planktonic]

How does this look on smaller screens? e.g. when there’s a long title plus a badge, does the badge align to the top of the title text? It would be great to add a story that show that :) (we might not need to create stories for each zeplin component/variant, but they’re a good guide e.g. https://zpl.io/9qv8l3A)

[ArinzeJeffrey-droid]

How does this look on smaller screens? e.g. when there’s a long title plus a badge, does the badge align to the top of the title text? It would be great to add a story that show that :) (we might not need to create stories for each zeplin component/variant, but they’re a good guide e.g. https://zpl.io/9qv8l3A)

This is how it looks on smaller screens

Do you have a moment? I'd have some questions about the spacings.

[planktonic]

Do you have a moment? I'd have some questions about the spacings.

@ArinzeJeffrey-droid sorry, I missed this — yes let’s take a look together

[planktonic]

@ArinzeJeffrey-droid what’s the status of the alignment question? (I think you got in touch with Ed to discuss how to handle label next to a long title text when on small screens? (see other comments)

[ArinzeJeffrey-droid]

@ArinzeJeffrey-droid what’s the status of the alignment question? (I think you got in touch with Ed to discuss how to handle label next to a long title text when on small screens? (see other comments)

I was able use zeplin to improve the spacing and text on smaller screens.

[planktonic]

I just rebased and simplified some of the layout, and I’d already made these suggestions while reviewing — I’ll merge these too, then this is good to go! 🎉

[bluemoonecho]

All great! I added just one comment about storybook.