[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/callout/callout.component.html

@@ -4,7 +4,10 @@
   [attr.aria-labelledby]="titleId"
 >
   @if (title) {
-    <header id="{{ titleId }}" class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold">
+    <header
+      id="{{ titleId }}"
+      class="tw-mb-1 tw-mt-0 tw-text-base tw-font-semibold tw-flex tw-gap-2 tw-items-center"
+    >
       @if (icon) {
         <i class="bwi" [ngClass]="[icon, headerClass]" aria-hidden="true"></i>
       }

libs/components/src/callout/callout.component.ts

@@ -24,6 +24,11 @@ const defaultI18n: Partial<Record<CalloutTypes, string>> = {
 // Increments for each instance of this component
 let nextId = 0;
 
+/**
+ * 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.
+ */
 @Component({
   selector: "bit-callout",
   templateUrl: "callout.component.html",

libs/components/src/callout/callout.mdx

@@ -1,4 +1,4 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./callout.stories";
 
@@ -8,11 +8,11 @@ import { CalloutModule } from "@bitwarden/components";
 
 <Meta of={stories} />
 
-# Callouts
+<Title />
+<Description />
 
-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.
+<Primary />
+<Controls />
 
 ## Styles
 

libs/components/src/callout/callout.stories.ts

@@ -2,6 +2,7 @@ import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { CalloutComponent } from "./callout.component";
@@ -24,9 +25,6 @@ export default {
       ],
     }),
   ],
-  args: {
-    type: "warning",
-  },
   parameters: {
     design: {
       type: "figma",
@@ -37,36 +35,35 @@ export default {
 
 type Story = StoryObj<CalloutComponent>;
 
-export const Success: Story = {
+export const Info: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-callout [type]="type" [title]="title">Content</bit-callout>
+      <bit-callout ${formatArgsForCodeSnippet<CalloutComponent>(args)}>Content</bit-callout>
     `,
   }),
   args: {
-    type: "success",
-    title: "Success",
+    title: "Title",
   },
 };
 
-export const Info: Story = {
-  ...Success,
+export const Success: Story = {
+  ...Info,
   args: {
-    type: "info",
-    title: "Info",
+    ...Info.args,
+    type: "success",
   },
 };
 
 export const Warning: Story = {
-  ...Success,
+  ...Info,
   args: {
     type: "warning",
   },
 };
 
 export const Danger: Story = {
-  ...Success,
+  ...Info,
   args: {
     type: "danger",
   },