Typography

[niklasmh]

This builds on #32 and #112. The idea behind this PR is to create a bulletproof typography system that can be used on all content. The main purpose is to make articles and event descriptions look nice, but it should be general enough to be used everywhere else too. The system is greatly inspired by this article: https://uxplanet.org/common-webpage-design-mistakes-59eed9831bd7.

What has been done:

• Create <Heading>, <Heading2>, <Heading3> (same as <h1>, <h2>, <h3>).
• Create <Paragraph> (same as <p>)
• Create <Quote> (same as <blockquote>, thus can provide by="..." attribute referring to the source of the quote)
• Create <Ingress> (same as italic <p>. Spesifically made for articles)
• Create <Info> (same as a small <p>. Again, spesifically made for articles)
• Create <Markdown> component that renders markdown using our components.
• Create a md template literal, such that you can parse markdown like md`# Title`;.
• Scale text with screen size. Make it comfortable to read across all devices.

What may need to be done:

• Add more markdown support (This may belong to another PR as this can be huge and off-topic)

Current look (also see the chromatic build to review UI changes):

Stories generated:

Fixes #112

[oleast]

This looks great to have!

Could we somehow make this work with markdown and have all our text properly formatted?

[niklasmh]

@oleast Funny you mentioned it! I am actually working on the markdown at the moment.

I have used a markdown-to-jsx library that makes it possible to tweak the ground elements in the markdown parser. It seems to work smooth using headings, quotes, paragraphs and code - which is the main area of this PR. Thus, supporting all kinds of markdown may be relevant in the future.

Screenshot of markdown:

I also got inspired of your md string literal (https://github.com/dotkom/onlineweb-frontend/blob/master/src/common/components/Markdown/index.tsx), so I made that as an option as well.

[niklasmh]

@oleast:

When it comes to headings I think it would still be nice to have headings all the way down to h6, as we may still need them even though they are not used often.

Another note to that comment is that as markdown supports H1-H6, so we should support that as well. We cannot control what the authors write in markdown, but we can encourage them to stick to H1-H3. H4-H6 is probably most ideal for long texts that really need the hierarchical structure.

When it comes to their sizes we have to work with changing they sizes in some use-cases because of a11y.

Yup, good point! I haven't looked at that yet, but the articles should be easily readable on the phone.

[niklasmh]

By using chromatic we can now see that my changes affected two other stories: Tabs, Media Query Breakpoints. Just see the details in the chromatic build check.