feat: text components

[peterslany]

Adding text components to component library: Strong, Em, P, H1, H2, H3, H4, H5, H6. Each component accepts optional color property to allow control over the text color.

This PR is quite big because it contains some boilerplate - to render stories, also the heading components are very similar. I added 3 story variations for primary, secondary and tertiary color. These can be removed if needed. Is there a story count limitation on Chromatic @tomjeatt?

Note: the heading sizes are subject to change - they are set accordingly to sizes defined in the theme and will be updated once we have the final values :)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
interbtc-ui-interlay	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 0:16AM (UTC)
interbtc-ui-interlay-testnet	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 0:16AM (UTC)
interbtc-ui-kintsugi	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 0:16AM (UTC)
interbtc-ui-kintsugi-testnet	✅ Ready (Inspect)	Visit Preview	Jul 13, 2022 at 0:16AM (UTC)

[tomjeatt]

Adding text components to component library: Strong, Em, P, H1, H2, H3, H4, H5, H6. Each component accepts optional color property to allow control over the text color.

This PR is quite big because it contains some boilerplate - to render stories, also the heading components are very similar. I added 3 story variations for primary, secondary and tertiary color. These can be removed if needed. Is there a story count limitation on Chromatic @tomjeatt?

Note: the heading sizes are subject to change - they are set accordingly to sizes defined in the theme and will be updated once we have the final values :)

No, no story count limit but we do have a snapshot limit which is affected by the number of stories we have. We don't need to worry about that now though, as we don't seem to be hitting it. If we do there are things we can do to limit the number of times snapshots are run :)

[github-actions]

Running Lighthouse audit...

[tomjeatt]

Hi @peterslany I think this looks really nice. The only question I have is about the repetition of the colour prop. It occurred to me that we could have a <Color> component – probably with a better name! – that we use when we want to modify the colour of a text element. I don't know if this is necessarily a better solution though. Also, the repetition isn't an issue because once it's done it's done :) but it also depends on other use cases, e.g. if we had a label which also used colour for emphasis.

No changes now though - this is just something to keep in the back of our minds over the next couple of sprints.

[peterslany]

Hi @peterslany I think this looks really nice. The only question I have is about the repetition of the colour prop. It occurred to me that we could have a <Color> component – probably with a better name! – that we use when we want to modify the colour of a text element. I don't know if this is necessarily a better solution though. Also, the repetition isn't an issue because once it's done it's done :) but it also depends on other use cases, e.g. if we had a label which also used colour for emphasis.

No changes now though - this is just something to keep in the back of our minds over the next couple of sprints.

Thanks for the review @tomjeatt! That's a good point, specifically because that component might have been useful also outside of the scope of text components as you said :) My main motivation for handling color with component property was to avoid wrapping unnecessary html elements around the text components only to set the color.