Support responsive size values for Headline

[nlopin]

What:

Change the size of the headline depending on the viewport size.

You can pass a responsive value to the size prop of the Headline component and it will change the size depending on the viewport. For example, <Headline size={{_: 's', m: 'xl'}}>headline`.
​
Why:

Closes #189
​

How:

• Used system function from the styled-system to define the list of possible values for headline CSS properties line-height and font-size
• Pass the size prop to the style function returned by system to get responsive styles
  ​

Media:

https://www.loom.com/share/62e01f42c7d1449e9adbf1a7eb227db6

Checklist:

• Ready to be merged

[rafael-sepeda]

@nlopin I have a proposal: since the behavior of the headline, in this case, will depend on the viewport maybe we should call the attribute viewport, instead of size? I think size is a bit confusing because we already use it to define the actual size in the code:

    /**
     * Set the style of the headline
     */
    size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
....
    switch (size) {
        case 'xxl':
            return h1Styles;
        case 'xl':
            return css`
                font-size: ${get('fontSizes.5')};
                line-height: 2.5rem;
            `;
        case 'l':
            return css`
                font-size: ${get('fontSizes.4')};
                line-height: 2rem;
            `;

so use something like <Headline viewport={{_: 's', m: 'xl'}}>?
And then we can use the same logic for the Text component, in the future for spacers and other things that might depend on the viewport. Or I understand something wrong?

[nlopin]

I'd like us to look at the component in isolation, without thinking about the UI the headline will be placed to. When using a component in the code, we describe the properties the component has. In that perspective current API provides clarity:

• as which tag to use
• size how big is the headline

If we replace size with viewport it doesn't provide any intuition, because it describes something outside of the component itself.

This is the approach we follow through the whole design system (for margins, paddings, etc). A developer can set different values to a prop depending on the screen size, but it is not mandatory. This viewport thing is an optional trick they can use, but it is opt-out by default:

<Headline size='l' mb={2}>Big title</Headline> // size for all the screens with margin-bottom fixed
<Headline size={{_: 'm', medium: 'xl'}} mb={{_: 0, medium: 2}}>Big title</Headline> // size and margin depends on the screen

If we use viewport instead of size, it loses the readability, especially in the default case (and we loose margin):

<Headline viewport='l'>Big title</Headline> // size for all the screens
<Headline viewport={{_: 'm', medium: 'xl'}}>Big title</Headline> // depends on the screen

In my opinion, the size should stay, because we set size depending on the viewport, but not the other way around.

[github-actions]

🎉 This PR is included in version 1.17.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 3.0.0-next.1 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀