bitcrowd
Update Section Heading component
Fixes #783
📸 Looks like
Small screens
Large screens
Changes
- [x] On smaller screens items stack top to bottom from the left to right.
- [x] 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.
- [x] All Section Headings have a 2px border underline.
- [x] The border underline fills the container width (minus padding)
How to QA
git fetchgit checkout <pr-branch-name>yarnyarn storybook- navigate to
Section heading
Check:
- [x] The appearance matches the design in Zeplin
- [x] The Zeplin component is correctly linked in storybook
- [x] The documentation for this component is correct, understandable, and up-to-date.
👾 Code changes
Check:
- [x] The documentation for this component is correct, understandable, and up-to-date.
- [x] The component makes good use of CSS custom properties to simplify creating variants (or doesn’t have variants).
- [x] Everything that should be a variable, is.
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.
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
@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.
