[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/toast/toast.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Source, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./toast.stories";
 
@@ -8,12 +8,16 @@ import * as stories from "./toast.stories";
 import { ToastService } from "@bitwarden/components";
 ```
 
-# Toast
+<Title />
 
-Toasts are ephemeral notifications. They most often communicate the result of a user action. Due to
-their ephemeral nature, long messages and critical alerts should not utilize toasts.
+<Primary />
+<Controls />
 
-<Canvas of={stories.Default} />
+### Variants
+
+<Canvas of={stories.Variants} />
+
+### Long content
 
 <Canvas of={stories.LongContent} />
 
@@ -38,7 +42,7 @@ The following options are accepted:
 
 <Canvas of={stories.Service} />
 
-## Toast container
+### Toast container
 
 `bit-toast-container` should be added to the app root of consuming clients to ensure toasts are
 properly announced to screenreaders.
@@ -48,7 +52,7 @@ properly announced to screenreaders.
 <bit-toast-container></bit-toast-container>
 ```
 
-## Accessibility
+### Accessibility
 
 In addition to the accessibility provided by the `bit-toast-container` component, the toast itself
 will apply `aria-alert="true"` if the toast is of type `error`.

libs/components/src/toast/toast.stories.ts

@@ -6,6 +6,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 import { ButtonModule } from "../button";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -75,11 +76,22 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-flex tw-flex-col tw-min-w tw-max-w-[--bit-toast-width]">
-        <bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="success"></bit-toast>
-        <bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="info"></bit-toast>
-        <bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="warning"></bit-toast>
-        <bit-toast [title]="title" [message]="message" [progressWidth]="progressWidth" (onClose)="onClose()" variant="error"></bit-toast>
+      <div class="tw-min-w tw-max-w-[--bit-toast-width]">
+        <bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)}></bit-toast>
+      </div>
+    `,
+  }),
+};
+
+export const Variants: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <div class="tw-flex tw-flex-col tw-min-w tw-max-w-[--bit-toast-width] tw-gap-2">
+        <bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="success"></bit-toast>
+        <bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="info"></bit-toast>
+        <bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="warning"></bit-toast>
+        <bit-toast ${formatArgsForCodeSnippet<ToastComponent>(args)} variant="error"></bit-toast>
       </div>
     `,
   }),
@@ -93,8 +105,8 @@ export const LongContent: Story = {
   args: {
     title: "Foo",
     message: [
-      "Lorem ipsum dolor sit amet, consectetur adipisci",
-      "Lorem ipsum dolor sit amet, consectetur adipisci",
+      "Maecenas commodo posuere quam, vel malesuada nulla accumsan ac.",
+      "Pellentesque interdum ligula ante, eget bibendum ante lacinia congue.",
     ],
   },
 };

libs/components/src/toast/toastr.component.ts

@@ -4,6 +4,9 @@ import { Toast as BaseToastrComponent, ToastPackage, ToastrService } from "ngx-t
 
 import { ToastComponent } from "./toast.component";
 
+/**
+ * Toasts are ephemeral notifications. They most often communicate the result of a user action. Due to their ephemeral nature, long messages and critical alerts should not utilize toasts.
+ */
 @Component({
   template: `
     <bit-toast