[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

.storybook/format-args-for-code-snippet.ts

@@ -0,0 +1,33 @@
+import { argsToTemplate, StoryObj } from "@storybook/angular";
+
+type RenderArgType<T> = StoryObj<T>["args"];
+
+export const formatArgsForCodeSnippet = <ComponentType extends Record<string, any>>(
+  args: RenderArgType<ComponentType>,
+) => {
+  const nonNullArgs = Object.entries(args as ComponentType).filter(
+    ([_, value]) => value !== null && value !== undefined,
+  );
+  const functionArgs = nonNullArgs.filter(([_, value]) => typeof value === "function");
+  const argsToFormat = nonNullArgs.filter(([_, value]) => typeof value !== "function");
+
+  const argsToTemplateIncludeKeys = [...functionArgs].map(
+    ([key, _]) => key as keyof RenderArgType<ComponentType>,
+  );
+
+  const formattedNonFunctionArgs = argsToFormat
+    .map(([key, value]) => {
+      if (typeof value === "boolean") {
+        return `[${key}]="${value}"`;
+      }
+
+      if (Array.isArray(value)) {
+        const formattedArray = value.map((v) => `'${v}'`).join(", ");
+        return `[${key}]="[${formattedArray}]"`;
+      }
+      return `${key}="${value}"`;
+    })
+    .join(" ");
+
+  return `${formattedNonFunctionArgs} ${argsToTemplate(args as ComponentType, { include: argsToTemplateIncludeKeys })}`;
+};