Banner and Notification components update

[ollips]

Link: preview

Component:

• http://localhost:1111/components/banner.html
• http://localhost:1111/components/notification.html

Pattern:

• http://localhost:1111/patterns/banner.html
• http://localhost:1111/patterns/notification.html

Updating banner and notification components to match Fluent and creating pattern pages for them to showcase a few non-standard use cases.

Key points:

• Banner has semantic colors.
• Banner has restricted content width.
• Both banner and notification content's font size is 14px, action buttons are 12px. Fluent has content 12px as well but it looks too small next to the default 16px used everywhere on Learn.
• Both components can contain action buttons. pattern pages were created to showcase how it can be achieved in conjunction with other atomics.

Testing

0. git checkout olga/banner-notification-update; npm start
1. Visit all links attached above.
2. Try different sizes, try to modify text within component to make it longer and ensure it wraps correctly.
3. Ensure it matches the Fluent's "Message bar" component

Contributor checklist

• Did you update the description of this pull request with a review link and test steps?
• Did you submit a changeset? Changesets are required for all code changes.
• Does your pull request implement complex UI logic (js/ts)? Consider adding an integration test to test your user flow.
• Does your pull request add a new page to the documentation site? Add your new page for automated accessibility testing in /integration/tests/accessibility.
• Does your pull request change any transforms? Did you test they work on right to left?

[changeset-bot]

🦋 Changeset detected

Latest commit: 3d7c9a9

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

This PR includes changesets to release 4 packages

Name	Type
@microsoft/atlas-site	Minor
@microsoft/atlas-css	Major
@microsoft/parcel-transformer-markdown-html	Patch
atlas-design-system-tools	Patch

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