mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
5eb8d7b181
* rearrange button docs * Enhance avatar docs * Enhance badge docs * Enhance banner docs * add util to format args for snippets * update banner snippets * WIP * bind boolean args so they work correctly in Storybook * simplify button stories * Update callout docs * use title component for checkbox docs * use title and description component for chip select docs * update color password story docs * update disclosure docs * add import to icon docs * updated icon-button docs * update link docs * Update prgress docs * updated search field docs * remove html type definitions * add import for progress * updated toast docs * remove example from docs. format args for snippet * Update badges docs * handle array arg values correctly * Update badges list docs * fix dupe key error from taost story * remove unnecessary typeof check * remove banner usage example * add breadcrumbs import statement and jsdoc * add color password import statement * fixing type mismaches * fix typos * Add missing generics to format function * fix typo * update callout icon spacing to match Figma * add back max width container
52 lines
1.1 KiB
Plaintext
52 lines
1.1 KiB
Plaintext
import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./banner.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { BannerModule } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## 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
|
|
|
|
<Canvas of={stories.Premium} />
|
|
|
|
Used primarily to encourage user to upgrade to premium.
|
|
|
|
### Info
|
|
|
|
<Canvas of={stories.Info} />
|
|
|
|
Used to communicate release notes, server maintenance or other informative event.
|
|
|
|
### Warning
|
|
|
|
<Canvas of={stories.Warning} />
|
|
|
|
Used to alert the user of outdated info or versions.
|
|
|
|
### Danger
|
|
|
|
<Canvas of={stories.Danger} />
|
|
|
|
Rarely used, but may be used to alert users over critical messages or very outdated versions.
|
|
|
|
## Accessibility
|
|
|
|
Banners sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers
|
|
announce the content prior to the test of the page. This behavior can be disabled by setting
|
|
`[useAlertRole]="false"`.
|