feat(trial): Reusable banner components

[tristandubbeld]

Created MessageStripe and Banner components. I've also updated some components to be more flexible and to make sure we don't have to use the same css prop with the same values everytime.

Message Stripe Trial

Message Stripe Warning

Message Stripe without action

Message Stripe with space between

Banner
Note: Everett font does not work in Storybook

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

• Application (fast)
• Application home (fast)

[linear]

XTD-354 Create reusable banner(s) components

Thin banner with CTA (MessageStripe) and bigger banner for dashboard pages with more details

[lbogdan]

Build for latest commit 9b6a71d is at https://pr7106.build.csb.dev/s/new.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9b6a71d:

Sandbox	Source
Notifications Test	Configuration

[alexnm]

💯

[alexnm]

is this a styled-component or a styled-system feature? I thought it only works with the css() function

[tristandubbeld]

Styled System! It does only work with the css() function, yes. The Element component uses it to generate the component, so we can pass it with the css prop:

export const Element = styled.div<IElementProps>(props =>
  css({
    // stuff
    ...(props.css || {}),
  })
);