bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-10 21:33:27 +00:00
Code Issues Releases Wiki Activity

Storybook docs (#5552)

Browse Source 
* updated sort order

* Update preview.tsx

* Create avatar.mdx

Added avatar documentation based on Figma docs

* Added badge docs

* fixed typos

* added breadcrumb docs

* Added callout docs

* added color password docs

* Added dialog docs

* fixed typo

* Updated Dialogs docs

Added a dialogs.mdx page for general docs that apply to both main Dialogs and Simple Dialogs.

Updated the sub-docs pages

* Update simple-dialog.mdx

* Added documentation from Figma to Forms docs

* Create icon-button.mdx

* added link docs

* Added menu docs

* Added progress indicator docs

* Updated table docs

* Added tab docs

* Added toggle group docs

* Revert "Update preview.tsx"

This reverts commit 4671d9726a.

* added docs for appA11yTitle

* Fixed typos

* Update libs/components/src/link/link.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/components/src/menu/menu.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback

* Addressed feedback on callout, menu, and progress

* moved stories mdx files to proper location

* Addressed feedback on dialogs.mdx

* Update libs/components/src/tabs/tabs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Addressed feedback on Tabs

* ran prettier

* Fixed title formatting

* ran prettier

* Update libs/components/src/dialog/dialogs.mdx

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* ran prettier

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
Danielle Flinn
2023-06-27 12:46:44 -07:00
committed by GitHub
parent 683b7fea77
commit 6ef6140b29
21 changed files with 936 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
libs/components/src/breadcrumbs/breadcrumbs.mdx Normal file
View File

@@ -0,0 +1,54 @@
import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
import * as stories from "./breadcrumbs.stories";
<Meta of={stories} />
# Breadcrumbs
Breadcrumbs are used to help users understand where they are in a products navigation. Typically
Bitwarden uses this component to indicate the user's current location in a set of data organized in
containers (Collections, Folders, or Projects).
<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.
<Story 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.
<Story 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.
<Story 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