diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts index 55477314f7..e636124fe0 100644 --- a/libs/components/src/banner/banner.stories.ts +++ b/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 = (args: BannerComponent) => ({ template: ` Content Really Long Text Lorem Ipsum Ipsum Ipsum - + `, }); diff --git a/libs/components/src/stories/banner-docs.stories.mdx b/libs/components/src/stories/banner-docs.stories.mdx index 7459a5ddf3..bee0da8bd6 100644 --- a/libs/components/src/stories/banner-docs.stories.mdx +++ b/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. - -- 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. +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). +- Banners supports buttons and anchors using [bitLink](?path=/story/component-library-link--anchors). ## 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"`.