[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/avatar/avatar.component.ts

@@ -16,6 +16,12 @@ const SizeClasses: Record<SizeTypes, string[]> = {
   xsmall: ["tw-h-6", "tw-w-6"],
 };
 
+/**
+  * Avatars display a unique color that helps a user visually recognize their logged in account.
+
+  * A variance in color across the avatar component is important as it is used in Account Switching as a
+  * visual indicator to recognize which of a personal or work account a user is logged into.
+*/
 @Component({
   selector: "bit-avatar",
   template: `@if (src) {

libs/components/src/avatar/avatar.mdx

@@ -1,15 +1,15 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Description, Meta, Canvas, Primary, Controls, Title } from "@storybook/addon-docs";
 
 import * as stories from "./avatar.stories";
 
 <Meta of={stories} />
 
-# Avatar
+```ts
+import { AvatarModule } from "@bitwarden/components";
+```
 
-Avatars display a unique color that helps a user visually recognize their logged in account.
-
-A variance in color across the avatar component is important as it is used in Account Switching as a
-visual indicator to recognize which of a personal or work account a user is logged into.
+<Title />
+<Description />
 
 <Primary />
 <Controls />

libs/components/src/avatar/avatar.stories.ts

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/angular";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+
 import { AvatarComponent } from "./avatar.component";
 
 export default {
@@ -21,42 +23,56 @@ export default {
 type Story = StoryObj<AvatarComponent>;
 
 export const Default: Story = {
+  render: (args) => {
+    return {
+      props: args,
+      template: `
+        <bit-avatar ${formatArgsForCodeSnippet<AvatarComponent>(args)}></bit-avatar>
+      `,
+    };
+  },
   args: {
     color: "#175ddc",
   },
 };
 
 export const Large: Story = {
+  ...Default,
   args: {
     size: "large",
   },
 };
 
 export const Small: Story = {
+  ...Default,
   args: {
     size: "small",
   },
 };
 
 export const LightBackground: Story = {
+  ...Default,
   args: {
     color: "#d2ffcf",
   },
 };
 
 export const Border: Story = {
+  ...Default,
   args: {
     border: true,
   },
 };
 
 export const ColorByID: Story = {
+  ...Default,
   args: {
     id: "236478",
   },
 };
 
 export const ColorByText: Story = {
+  ...Default,
   args: {
     text: "Jason Doe",
   },