Create banner.stories.mdx (#3695)

* Create banner.stories.mdx

Added documentation for Banner component in Common

* Update banner.stories.mdx

Added comment to test verification

* Update banner.stories.mdx

Removing test comment

* Trying our referencing stories in banner mdx

* fix: build errors

* Added stories for banner info, warning, danger

* Formatting update libs/components/src/banner/banner.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update banner.stories.mdx

Added list formatting to text for readability, added section for Accessibility

* Update libs/components/src/stories/banner.stories.mdx

Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>

* Update libs/components/src/stories/banner.stories.mdx

Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>

* Updated banner.stories.mdx

Added section for Accessibility, improvements to text formatting for readability

Co-authored-by: Andreas Coroiu <andreas.coroiu@gmail.com>
Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
Co-authored-by: Andreas Coroiu <acoroiu@bitwarden.com>

libs/components/src/banner/banner.stories.ts

@@ -37,7 +37,10 @@ export default {
 const Template: Story<BannerComponent> = (args: BannerComponent) => ({
   props: args,
   template: `
-    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">Content Really Long Text Lorem Ipsum Ipsum Ipsum <button>Button</button></bit-banner>
+    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
+        Content Really Long Text Lorem Ipsum Ipsum Ipsum 
+        <button>Button</button>
+    </bit-banner>
   `,
 });
 

libs/components/src/stories/banner.stories.mdx

@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Common/Banner" />
+
+# Banner
+
+Banners are used for important communication with the user that needs to be seen right away, but has little effect on the experience. Banners appear at the top of the user's screen on page load and persist across all pages a user navigates to.
+
+- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.
+
+- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
+
+- Avoid stacking multiple banners.
+
+- Banners support a button link (text button).
+
+## Types
+
+Icons should remain consistent across these types. Do not change the icon without consulting designers.
+
+Use the following guidelines to help choose the correct type of banner.
+
+### Premium
+
+<Story id="component-library-banner--premium" />
+
+Used primarily to encourage user to upgrade to premium.
+
+### Info
+
+<Story id="component-library-banner--info" />
+
+Used to communicate release notes, server maintenance or other informative event.
+
+### Warning
+
+<Story id="component-library-banner--warning" />
+
+Used to alert the user of outdated info or versions.
+
+### Danger
+
+<Story id="component-library-banner--danger" />
+
+Rarely used, but may be used to alert users over critical messages or very outdated versions.
+
+## Accessibility
+
+Include `role="status" aria-live="polite"` attributes to ensure screen readers announce the content prior to the test of the page.