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/callout/callout.mdx

@@ -0,0 +1,66 @@
+import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./callout.stories";
+
+<Meta of={stories} />
+
+# Callouts
+
+Callouts are used to communicate important information to the user. Callouts should be used
+sparingly, as they command a large amount of visual attention. Avoid using more than 1 callout in
+the same location.
+
+## Styles
+
+Icons should remain consistent across these types. Do not change the icon without consulting a
+designer. Use the following guidelines to help choose the correct type of callout.
+
+### Success
+
+Use the success callout to communicate a positive messaging to the user.
+
+**Example:** a positive report results shows a success callout.
+
+The success callout may also be used for the information related to a premium membership. In this
+case, replace the icon with <i class="bwi bwi-star" title="bwi-star" aria-label="bwi-star"></i>
+
+<Story of={stories.Success} />
+
+### Info
+
+Use an info callout to call attention to important information the user should be aware of, but has
+low risk of the user receiving and unintended or irreversible results if they do not read the
+information.
+
+**Example:** in the Domain Claiming modal, an info callout is used to tell the user the domain will
+automatically be checked.
+
+<Story of={stories.Info} />
+
+### Warning
+
+Use a warning callout if the user is about to perform an action that may have unintended or
+irreversible results.
+
+**Example:** the warning callout is used before the change master password and encryption key form
+to alert the user that they will be logged out.
+
+<Story of={stories.Warning} />
+
+### Danger
+
+Use the danger callout to communicate an action the user is about to take is dangerous and typically
+not reversible.
+
+The danger callout can also be used to alert the user of an error or errors, such as a server side
+errors after form submit or failed communication request.
+
+<Story of={stories.Danger} />
+
+## Accessibility
+
+Use the `role=”alert”` only if the callout is appearing on a page after the user takes an action. If
+the content is static, do not use the alert role. This will cause a screen reader to announce the
+callout content on page load.
+
+Ensure the title's color contrast remains WCAG compliant with the callout's background.