SHS 5130 Use <hr> when there is no color band text

[mndonx]

READY FOR REVIEW

Summary

This PR checks the Color Band component for text, and, if there is no text, prints an

---

tag instead of an empty heading tag.

Urgency

medium

Steps to Test

1. Edit a page
2. Add a new page component, and choose Color Band
3. Do not add text to the text field and save
4. Ensure that if the color band has no text, an <hr> tag prints inside the color band.
5. Ensure that color bands with text still print the same as before.

PR Checklist

• PR Checklist
• Humsci Basic PR Checklist

[cienvaras]

@mndonx Please see the code comments. Also, please check styles. In Chrome, the hr has an inset border. Make sure that the hr styles match the empty h2.

[cienvaras]

Why not just add the html tag directly?

<hr class="hb-color-band--text" />

I might be missing something, but I see no need to print it as a twig string.

[mndonx]

I have no idea why I did this!

[mndonx]

Thanks @cienvaras, ready for re-review.

[cienvaras]

@mndonx We're almost there, just a little extra thing to fix. The top and bottom margin is different in the hr. There are not explicit rules in the theme for that, but the browser is adding some default styles. I checked in multiple browsers and it's consistent, so it should be fixed adding this to the hr styles:

margin-block-start: 0.83em;
margin-block-end: 0.83em;
font-size: 3.6rem;

[mndonx]

@cienvaras Good eye, thank you! I also found another instance where the logic needed to be applied (in the original pattern.) Let me know if you spot anything else. Thank you!

[cienvaras]

Works great, thanks 🚀