[CL-208][CL-339] Enhance Storybook docs pages (#14838)

* 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

libs/components/src/link/link.directive.ts

@@ -66,6 +66,14 @@ abstract class LinkDirective {
   linkType: LinkType = "primary";
 }
 
+/**
+  * Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
+
+  * - if navigating to a new page, use a `<a>`
+  * - if taking an action on the current page, use a `<button>`
+
+  * Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions or show/hide additional form options.
+ */
 @Directive({
   selector: "a[bitLink]",
   standalone: true,

libs/components/src/link/link.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Story, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./link.stories";
 
@@ -8,18 +8,11 @@ import * as stories from "./link.stories";
 import { LinkModule } from "@bitwarden/components";
 ```
 
-# Link / Text button
-
-Text Links and Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action
-the button takes:
-
-- if navigating to a new page, use a `<a>`
-- if taking an action on the current page, use a `<button>`
-
-Text buttons or links are most commonly used in paragraphs of text or in forms to customize actions
-or show/hide additional form options.
+<Title>Link / Text button</Title>
+<Description />
 
 <Primary />
+<Controls />
 
 ## Variants
 

libs/components/src/link/link.stories.ts

@@ -1,5 +1,7 @@
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+
 import { AnchorLinkDirective, ButtonLinkDirective } from "./link.directive";
 import { LinkModule } from "./link.module";
 
@@ -27,6 +29,14 @@ export default {
 type Story = StoryObj<ButtonLinkDirective>;
 
 export const Default: Story = {
+  render: (args) => ({
+    template: /*html*/ `
+      <a bitLink ${formatArgsForCodeSnippet<ButtonLinkDirective>(args)}>Your text here</a>
+    `,
+  }),
+};
+
+export const InteractionStates: Story = {
   render: () => ({
     template: /*html*/ `
       <div class="tw-flex tw-gap-4 tw-p-2 tw-mb-6">