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

@@ -147,7 +147,13 @@ const sizes: Record<IconButtonSize, string[]> = {
   default: ["tw-px-2.5", "tw-py-1.5"],
   small: ["tw-leading-none", "tw-text-base", "tw-p-1"],
 };
+/**
+  * Icon buttons are used when no text accompanies the button. It consists of an icon that may be updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
 
+  * The most common use of the icon button is in the banner, toast, and modal components as a close button. It can also be found in tables as the 3 dot option menu, or on navigation list items when there are options that need to be collapsed into a menu.
+
+  * Similar to the main button components, spacing between multiple icon buttons should be .5rem.
+ */
 @Component({
   selector: "button[bitIconButton]:not(button[bitButton])",
   templateUrl: "icon-button.component.html",

libs/components/src/icon-button/icon-button.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 "./icon-button.stories";
 
@@ -8,16 +8,8 @@ import * as stories from "./icon-button.stories";
 import { IconButtonModule } from "@bitwarden/components";
 ```
 
-# Icon Button
-
-Icon buttons are used when no text accompanies the button. It consists of an icon that may be
-updated to any icon in the `bwi-font`, a `title` attribute, and an `aria-label`.
-
-The most common use of the icon button is in the banner, toast, and modal components as a close
-button. It can also be found in tables as the 3 dot option menu, or on navigation list items when
-there are options that need to be collapsed into a menu.
-
-Similar to the main button components, spacing between multiple icon buttons should be .5rem.
+<Title />
+<Description />
 
 <Primary />
 <Controls />

libs/components/src/icon-button/icon-button.stories.ts

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/angular";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+
 import { BitIconButtonComponent } from "./icon-button.component";
 
 export default {
@@ -7,8 +9,11 @@ export default {
   component: BitIconButtonComponent,
   args: {
     bitIconButton: "bwi-plus",
-    size: "default",
-    disabled: false,
+  },
+  argTypes: {
+    buttonType: {
+      options: ["primary", "secondary", "danger", "unstyled", "contrast", "main", "muted", "light"],
+    },
   },
   parameters: {
     design: {
@@ -24,25 +29,9 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-    <div class="tw-space-x-4">
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="main" [size]="size">Button</button>
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="muted" [size]="size">Button</button>
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="primary" [size]="size">Button</button>
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="secondary"[size]="size">Button</button>
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="danger" [size]="size">Button</button>
-      <div class="tw-bg-primary-600 tw-p-2 tw-inline-block">
-        <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="contrast" [size]="size">Button</button>
-      </div>
-      <div class="tw-bg-background-alt2 tw-p-2 tw-inline-block">
-        <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" buttonType="light" [size]="size">Button</button>
-      </div>
-    </div>
+      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     `,
   }),
-  args: {
-    size: "default",
-    buttonType: "primary",
-  },
 };
 
 export const Small: Story = {
@@ -54,40 +43,35 @@ export const Small: Story = {
 };
 
 export const Primary: Story = {
-  render: (args) => ({
-    props: args,
-    template: /*html*/ `
-    <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
-    `,
-  }),
+  ...Default,
   args: {
     buttonType: "primary",
   },
 };
 
 export const Secondary: Story = {
-  ...Primary,
+  ...Default,
   args: {
     buttonType: "secondary",
   },
 };
 
 export const Danger: Story = {
-  ...Primary,
+  ...Default,
   args: {
     buttonType: "danger",
   },
 };
 
 export const Main: Story = {
-  ...Primary,
+  ...Default,
   args: {
     buttonType: "main",
   },
 };
 
 export const Muted: Story = {
-  ...Primary,
+  ...Default,
   args: {
     buttonType: "muted",
   },
@@ -98,7 +82,8 @@ export const Light: Story = {
     props: args,
     template: /*html*/ `
     <div class="tw-bg-background-alt2 tw-p-6 tw-w-full tw-inline-block">
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
+      <!-- <div> used only to provide dark background color -->
+      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     </div>
       `,
   }),
@@ -112,7 +97,8 @@ export const Contrast: Story = {
     props: args,
     template: /*html*/ `
     <div class="tw-bg-primary-600 tw-p-6 tw-w-full tw-inline-block">
-      <button bitIconButton="bwi-plus" [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size">Button</button>
+      <!-- <div> used only to provide dark background color -->
+      <button ${formatArgsForCodeSnippet<BitIconButtonComponent>(args)}>Button</button>
     </div>
       `,
   }),