[PM-2136] Change banner button to use bitLink (#5378)

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

@@ -3,6 +3,7 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 import { IconButtonModule } from "../icon-button";
+import { LinkModule } from "../link";
 import { SharedModule } from "../shared/shared.module";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -13,7 +14,7 @@ export default {
   component: BannerComponent,
   decorators: [
     moduleMetadata({
-      imports: [SharedModule, IconButtonModule],
+      imports: [SharedModule, IconButtonModule, LinkModule],
       providers: [
         {
           provide: I18nService,
@@ -45,7 +46,7 @@ const Template: Story<BannerComponent> = (args: BannerComponent) => ({
   template: `
     <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
-        <button>Button</button>
+        <button bitLink linkType="contrast">Button</button>
     </bit-banner>
   `,
 });

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

@@ -4,15 +4,16 @@ import { Meta, Story } from "@storybook/addon-docs";
 
 # 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.
+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
-- 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.
+navigates to.
-
-- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
 
+- 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 supports buttons and anchors using [bitLink](?path=/story/component-library-link--anchors).
-- Banners support a button link (text button).
 
 ## Types
 
@@ -46,4 +47,5 @@ Rarely used, but may be used to alert users over critical messages or very outda
 
 ## Accessibility
 
-Include `role="status" aria-live="polite"` attributes to ensure screen readers announce the content prior to the test of the page.
+Dialogs sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers announce the content
+prior to the test of the page. This behaviour can be disabled by setting `[useAlertRole]="false"`.