feat(Banner): add banner component

[joshblack]

Closes https://github.com/github/primer/issues/3200

Add support for the Banner component to Primer React.

Changelog

New

• A new Banner component is available under experimental/drafts
• Supporting stories, tests, and docs for Banner

Changed

Removed

Rollout strategy

• Minor release

Testing & Reviewing

• Verify implementation matches API design in API Document
• What do you think of the API design? Is it flexible enough for us to iterate on? Does it have any gaps or are there opportunities we should consider?
• Verify responsive behavior for buttons
• Verify that all the limitations for banner are incorporated here and tested, for example when custom icons are allowed or when banners are allowed to be dismissible

[changeset-bot]

🦋 Changeset detected

Latest commit: fe5b3ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	88 KB (0%)
packages/react/dist/browser.umd.js	88.25 KB (0%)

[lukasoppermann]

Another thing, whenever a title is present, the actions (not close button) should be moved below the text.

[lukasoppermann]

Hey @joshblack,

this is really great already. Do you think we could add the in sidebar example to the playground as well?
https://primer-65defb5e3c-13348165.drafts.github.io/storybook/?path=/story/drafts-components-banner--playground

E.g. like this:

[lukasoppermann]

When the title is disabled, there is a larger space below the actions in the banner than above.

[joshblack]

Thanks @lukasoppermann! I believe I addressed the following:

• When the title is disabled, there is a larger space below the actions in the banner than above.
• Do you think we could add the in sidebar example to the playground as well?
• Another thing, whenever a title is present, the actions (not close button) should be moved below the text.
• It is 6px to short (in figma there is an inner padding in the action container when the buttons are below the content).

[lukasoppermann]

@joshblack we should add a test to make sure svgs work to avoid this issue: #3020

[joshblack]

@lukasoppermann we should be good to go thankfully! What we have right now will only be behind the .BannerIcon class name so should completely avoid the problem 🤞