mirror of
https://github.com/bitwarden/browser
synced 2026-02-08 12:40:26 +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
51 lines
1.5 KiB
Plaintext
51 lines
1.5 KiB
Plaintext
import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./progress.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { ProgressModule } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Labels
|
|
|
|
Always display a label to provide a text based description of what the indicator is measuring. This
|
|
allows those who may not be familiar with the pattern to be able to read and digest the information.
|
|
It also allows assistive technology to accurately describe the indicator to those who may be unable
|
|
to see part or all of the indicator.
|
|
|
|
<Canvas of={stories.Full} />
|
|
|
|
## Text label
|
|
|
|
When measuring something other than progress, such as password strength, update the label to fit the
|
|
context of the implementation.
|
|
|
|
<Canvas of={stories.CustomText} />
|
|
|
|
### Strength indicator styles
|
|
|
|
For a strength indicator use the following styles for fill:
|
|
|
|
- **Weak:** `danger-600`
|
|
- **Weak2:** `warning-600`
|
|
- **Good:** `primary-600`
|
|
- **Strong:** `success-600`
|
|
|
|
## Accessibility
|
|
|
|
Be sure to include the proper `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes. An
|
|
a`ria-valuetext` should also be configurable to include the text a screen reader should read to the
|
|
user.
|
|
|
|
In the case of a password strength indicator; `aria-describedby` is used on the password field and
|
|
points to the `id` of the progress bar. This results in the screen reader reading the password
|
|
strength to the user after they finish typing.
|