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
56 lines
1.6 KiB
Plaintext
56 lines
1.6 KiB
Plaintext
import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./breadcrumbs.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
```ts
|
|
import { BreadcrumbsModule } from "@bitwarden/components";
|
|
```
|
|
|
|
<Title />
|
|
<Description />
|
|
|
|
<Primary />
|
|
<Controls />
|
|
|
|
## Display
|
|
|
|
Breadcrumbs display above the page title. The current page should not appear as a breadcrumb link.
|
|
See [Header with Breadcrumbs](?path=/story/web-header--with-breadcrumbs).
|
|
|
|
### Top Level
|
|
|
|
When a user is 1 level deep into a tree, the top level is displayed as a single link above the page
|
|
title.
|
|
|
|
<Canvas of={stories.TopLevel} />
|
|
|
|
### Second Level
|
|
|
|
When a user is 2 or more levels deep into a tree, the top level is displayed followed by an
|
|
|
|
<i class="bwi bwi-angle-right"></i> icon, and the following pages.
|
|
|
|
<Canvas of={stories.SecondLevel} />
|
|
|
|
### Overflow
|
|
|
|
When a user is several levels deep into a tree, the top level or 2 are displayed followed by an
|
|
|
|
<i class="bwi bwi-ellipsis-h"> </i> icon button, and then the page directly above the current page.
|
|
|
|
When the user selects the <i class="bwi bwi-ellipsis-h"></i> icon button, a menu opens displaying
|
|
the pages between the top level and the previous page.
|
|
|
|
<Canvas of={stories.Overflow} />
|
|
|
|
### Small screens
|
|
|
|
If a screen's width is not large enough to display the full breadcrumb path, display a link to the
|
|
previous page and an <i class="bwi bwi-angle-right"></i> icon to take the user back to the previous
|
|
page.
|
|
|
|
`TODO:` [Jira add stories](https://bitwarden.atlassian.net/browse/CL-102) for responsive screen
|
|
width/small screens
|