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

@@ -1,4 +1,12 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import {
+  Markdown,
+  Meta,
+  Canvas,
+  Primary,
+  Controls,
+  Title,
+  Description,
+} from "@storybook/addon-docs";
 
 import * as stories from "./button.stories";
 
@@ -8,10 +16,9 @@ import * as stories from "./button.stories";
 import { ButtonModule } from "@bitwarden/components";
 ```
 
-# Button
+<Title />
 
-Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
-used to indicate actions that can be performed by a user such as submitting a form.
+### Default / Secondary
 
 <Primary />
 
@@ -30,7 +37,7 @@ takes:
 
 ### Groups
 
-Groups of buttons should be seperated by a `0.5` rem gap. Usually acomplished by using the
+Groups of buttons should be separated by a `0.5` rem gap. Usually accomplished by using the
 `tw-gap-2` class in the button group container.
 
 Groups within page content, dialog footers or forms should have the `primary` call to action placed
@@ -41,26 +48,24 @@ right.
 
 There are 3 main styles for the button: Primary, Secondary, and Danger.
 
-### Primary
+### Default / Secondary
 
-<Canvas of={stories.Primary} />
+The secondary styling(shown above) should be used for secondary calls to action. An action is
+"secondary" if it relates indirectly to the purpose of a page. There may be multiple secondary
+buttons next to each other; however, generally there should only be 1 or 2 calls to action per page.
+
+### Primary
 
 Use the primary button styling for all Primary call to actions. An action is "primary" if it relates
 to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
 
-### Secondary
-
-<Canvas of={stories.Secondary} />
-
-The secondary styling should be used for secondary calls to action. An action is "secondary" if it
-relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each
-other; however, generally there should only be 1 or 2 calls to action per page.
+<Canvas of={stories.Primary} />
 
 ### Danger
 
-<Canvas of={stories.Danger} />
+Use the danger styling only in settings when the user may perform a permanent destructive action.
 
-Use the danger styling only in settings when the user may preform a permanent action.
+<Canvas of={stories.Danger} />
 
 ## Disabled UI
 
@@ -114,7 +119,7 @@ success toast).
 ### Submit and async actions
 
 Both submit and async action buttons use a loading button state while an action is taken. If your
-button is preforming a long running task in the background like a server API call, be sure to review
+button is performing a long running task in the background like a server API call, be sure to review
 the [Async Actions Directive](?path=/story/component-library-async-actions-overview--page).
 
 <Canvas of={stories.Loading} />

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

@@ -1,15 +1,15 @@
 import { Meta, StoryObj } from "@storybook/angular";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+
 import { ButtonComponent } from "./button.component";
 
 export default {
   title: "Component Library/Button",
   component: ButtonComponent,
   args: {
-    buttonType: "primary",
     disabled: false,
     loading: false,
-    size: "default",
   },
   argTypes: {
     size: {
@@ -27,40 +27,27 @@ export default {
 
 type Story = StoryObj<ButtonComponent>;
 
-export const Primary: Story = {
+export const Default: Story = {
   render: (args) => ({
     props: args,
     template: /*html*/ `
-    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
-    </div>
-    <div class="tw-flex tw-gap-4 tw-items-center">
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
-      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
-    </div>
+      <button bitButton ${formatArgsForCodeSnippet<ButtonComponent>(args)}>Button</button>
     `,
   }),
-  args: {
-    buttonType: "primary",
-  },
-};
-
-export const Secondary: Story = {
-  ...Primary,
   args: {
     buttonType: "secondary",
   },
 };
 
+export const Primary: Story = {
+  ...Default,
+  args: {
+    buttonType: "primary",
+  },
+};
+
 export const Danger: Story = {
-  ...Primary,
+  ...Default,
   args: {
     buttonType: "danger",
   },
@@ -83,16 +70,8 @@ export const Small: Story = {
 };
 
 export const Loading: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="primary" class="tw-mr-2">Primary</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="secondary" class="tw-mr-2">Secondary</button>
-      <button bitButton [disabled]="disabled" [loading]="loading" [block]="block" buttonType="danger" class="tw-mr-2">Danger</button>
-    `,
-  }),
+  ...Default,
   args: {
-    disabled: false,
     loading: true,
   },
 };
@@ -101,7 +80,6 @@ export const Disabled: Story = {
   ...Loading,
   args: {
     disabled: true,
-    loading: false,
   },
 };
 
@@ -165,3 +143,28 @@ export const WithIcon: Story = {
     `,
   }),
 };
+
+export const InteractionStates: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-flex tw-gap-4 tw-mb-6 tw-items-center">
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Button</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Button:hover</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Button:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Button:hover:focus-visible</button>
+      <button bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Button:active</button>
+    </div>
+    <div class="tw-flex tw-gap-4 tw-items-center">
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block">Anchor</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover">Anchor:hover</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-focus-visible">Anchor:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-hover tw-test-focus-visible">Anchor:hover:focus-visible</a>
+      <a href="#" bitButton [disabled]="disabled" [loading]="loading" [buttonType]="buttonType" [size]="size" [block]="block" class="tw-test-active">Anchor:active</a>
+    </div>
+    `,
+  }),
+  args: {
+    buttonType: "primary",
+  },
+};