Storybook docs (#5552)

* 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>

libs/components/src/dialog/dialog/dialog.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./dialog.stories";
+
+<Meta of={stories} />
+
+# Dialog
+
+Dialogs are used throughout the app to help the user focus on a specific action. Use this dialog
+component when content exceeds 384px width or there are a high number of interactive elements
+needed. **Example:** The web app's edit vault item form dialog
+
+For alerts or simple confirmation actions, like speedbumps, use the
+[Simple Dialog](?path=/docs/component-library-dialogs-simple-dialog--docs).
+
+Dialogs's should be used sparingly as they do call extra attention to themselves and can be
+interruptive if overused.
+
+<Primary />
+<Controls />
+
+## Size
+
+There are 3 main dialog sizes:
+
+### Large
+
+Use the large size for dialogs that have many interactive elements or tabbed content.
+
+**Tailwind styling:**
+
+`max-w-3xl` 48rem
+
+<Story of={stories.Large} />
+
+### Default
+
+Use the Default size for most dialogs that require some content and a few interactive elements.
+**Example:** master password confirmation dialog
+
+**Tailwind styling:**
+
+`max-w-xl` 36rem
+
+<Story of={stories.Default} />
+
+### Small
+
+**Tailwind styling:**
+
+`max-w-sm` 24rem
+
+<Story of={stories.Small} />
+
+## Long Title
+
+If a dialog's title is too long to fully display. It should be truncated and on hover shown in a
+tooltip.
+
+<Story of={stories.LongTitle} />
+
+## Loading
+
+Similar to a page loading state, a Dialog that takes more than a few seconds to load should use a
+loading state.
+
+<Story of={stories.Loading} />
+
+## Tab Content
+
+Use tabs to separate related content within a dialog.
+
+<Story of={stories.TabContent} />

libs/components/src/dialog/dialogs.mdx

@@ -0,0 +1,56 @@
+import { Meta, Story, Source } from "@storybook/addon-docs";
+
+<Meta title="Component Library/Dialogs" />
+
+# Dialog
+
+Dialogs are used throughout the app to help the user focus on a specific action.
+
+Use the main [Dialog Component](?path=/docs/component-library-dialogs-dialog--docs). when content
+exceeds 384px width or there are a high number of interactive elements needed. **Example:** The web
+app's edit vault item form dialog
+
+For alerts or simple confirmation actions, like speedbumps, use the
+[Simple Dialog](?path=/docs/component-library-dialogs-simple-dialog--docs).
+
+Dialogs's should be used sparingly as they do call extra attention to themselves and can be
+interruptive if overused.
+
+## Placement
+
+Dialogs should be centered vertically and horizontally on screen. Dialogs height should expand to
+fit its content until there are 2rems of margin on the top/bottom of the dialog; in this case, the
+dialog should become scrollable.
+
+A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
+
+<Story id="component-library-dialogs-service--default" />
+
+## Accessibility
+
+### Component behavior
+
+- Dialog include `role="dialog"`
+- The Dialog title is an `<h1>`
+- A user should not be able to tab focus outside of the Dialog until it has been closed.
+- Clicking outside the dialog or clicking escape should close the dialog (this prevents a keyboard
+  trap)
+
+### Required per implementation
+
+The triggering button should indicate to assistive technology that additional content will open or
+appear when the trigger is selected. Consider using `aria-haspopup="true"`
+
+Dialog title should be announced by a screen reader when launched. Consider using `aria-labelledby`
+or `aria-label`
+
+When opened, focus should follow the visual order of the popover’s focusable content. Typically
+focus is moved to the close button, but it is acceptable to move focus to the first interactive
+element after close since a user may not want to close the dialog immediately if there are
+additional interactive elements. See
+[WCAG Focus Order success criteria](https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html)
+
+Once closed, focus should remain on the the element which triggered the Dialog.
+
+**Note:** If a Simple Dialog is triggered from a main Dialog, be sure to make sure focus is moved to
+the Simple Dialog.

libs/components/src/dialog/simple-dialog/simple-dialog.mdx

@@ -0,0 +1,47 @@
+import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./simple-dialog.stories";
+
+<Meta of={stories} />
+
+# Simple Dialogs
+
+Simple Dialogs are used throughout the app for simple alert or confirmation actions such as
+speedbumps.
+
+For dialogs with a high number of interactive elements such as a form or content exceeding 384px,
+use the [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
+
+<Primary />
+<Controls />
+
+## Configurable Simple Dialog
+
+The Simple Dialog contains the following configuration points:
+
+- `title`: string
+- `content`: string
+- `type`: SimpleDialogType
+- `icon`: string – if empty, infer from type
+- `acceptButtonText`: string – if empty, default to "Yes"
+- `cancelButtonText`: string – if empty, default to "No", unless acceptButtonText is overridden, in
+  which case default to "Cancel"
+
+To increase consistency, the simple dialog service supports some automation for setting the `icon`
+and `color` based on the defined type. See the following for how properties will be configured when
+the simple dialog's type is specified.
+
+| type    | icon name                | icon                                         | color       |
+| ------- | ------------------------ | -------------------------------------------- | ----------- |
+| primary | bwi-business             | <i class="bwi bwi-business"></i>             | primary-500 |
+| success | bwi-star                 | <i class="bwi bwi-star"></i>                 | success-500 |
+| info    | bwi-info-circle          | <i class="bwi bwi-info-circle"></i>          | info-500    |
+| warning | bwi-exclamation-triangle | <i class="bwi bwi-exclamation-triangle"></i> | warning-500 |
+| danger  | bwi-error                | <i class="bwi bwi-error"></i>                | danger-500  |
+
+## Scrolling Content
+
+Simple dialogs can support scrolling content if necessary, but typically with larger quantities of
+content a [Dialog component](?path=/docs/component-library-dialogs-dialog--docs).
+
+<Story of={stories.ScrollingContent} />