feat: Add children prop to <Banner> component to pass extra content

[engfragui]

Short description

Background

The current <Banner> can accept title, description, action..., but no "extra content".

This PR

This PR a new children prop to our existing <Banner> component.

Usage:

<Banner
    type="neutral"
    title="title"
    description="description"
    // other props...
>
    <div>Extra content here as children</div>
</Banner>

Usage without children still supported of course (children prop is optional):

<Banner
    type="neutral"
    title="title"
    description="description"
    // other props...
/>

Reason

This is needed to support the new "upgrade banner" (with upgrade icon, a primary CTA and a list of enticing features) that we'll have to show in todoist-web in the Pro Legacy subscription tab:

and in the free subscription tab as well:

Reference

• Figma
• Figma

Test Plan

• Storybook > Banner > Content section

Demo

Before	After

[gnapse]

The only reason you need this class is for:

    .topContent {
        flex-direction: column;
        align-items: stretch;
    }

The first one, you can pass as a Box prop. The 2nd one, we do not support stretch yet on the alignItems prop. But maybe we should. Could you consider sneaking that change in this very PR, and then take advantage of it?

Then you'd be able to remove that topContent css class name, and do this here instead:

 <Box
-    className={styles.topContent}
+    flexDirection="column"
+    alignItems="stretch"

If now, I can do it later in a new PR.

[engfragui]

These styles that you're referring to need to be applied only if @container banner (width < 235px) (very very small view ports):

@container banner (width < 235px) {
    // ....

    .topContent {
        flex-direction: column;
        align-items: stretch;
    }

    // ....
}

to ensure that things "look good" even in that case:

If I were to apply flexDirection and alignItems to the <Box> regardless of the view port width (which I think it's what you're saying), then it would look weird when the view port is regular/wide:

[gnapse]

Oh, I missed that. In that case, forget what I said.