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

@@ -1,22 +1,25 @@
 import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 
-type SizeTypes = "small" | "default" | "large";
-type BackgroundTypes = "danger" | "primary" | "success" | "warning";
+type ProgressSizeType = "small" | "default" | "large";
+type BackgroundType = "danger" | "primary" | "success" | "warning";
 
-const SizeClasses: Record<SizeTypes, string[]> = {
+const SizeClasses: Record<ProgressSizeType, string[]> = {
   small: ["tw-h-1"],
   default: ["tw-h-4"],
   large: ["tw-h-6"],
 };
 
-const BackgroundClasses: Record<BackgroundTypes, string[]> = {
+const BackgroundClasses: Record<BackgroundType, string[]> = {
   danger: ["tw-bg-danger-600"],
   primary: ["tw-bg-primary-600"],
   success: ["tw-bg-success-600"],
   warning: ["tw-bg-warning-600"],
 };
 
+/**
+ * Progress indicators may be used to visually indicate progress or to visually measure some other value, such as a password strength indicator.
+ */
 @Component({
   selector: "bit-progress",
   templateUrl: "./progress.component.html",
@@ -25,9 +28,9 @@ const BackgroundClasses: Record<BackgroundTypes, string[]> = {
 })
 export class ProgressComponent {
   @Input() barWidth = 0;
-  @Input() bgColor: BackgroundTypes = "primary";
+  @Input() bgColor: BackgroundType = "primary";
   @Input() showText = true;
-  @Input() size: SizeTypes = "default";
+  @Input() size: ProgressSizeType = "default";
   @Input() text?: string;
 
   get displayText() {

libs/components/src/progress/progress.mdx

@@ -1,13 +1,15 @@
-import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs";
+import { Meta, Canvas, Primary, Controls, Title, Description } from "@storybook/addon-docs";
 
 import * as stories from "./progress.stories";
 
 <Meta of={stories} />
 
-# Progress
+```ts
+import { ProgressModule } from "@bitwarden/components";
+```
 
-Progress indicators may be used to visually indicate progress or to visually measure some other
-value, such as a password strength indicator.
+<Title />
+<Description />
 
 <Primary />
 <Controls />

libs/components/src/progress/progress.stories.ts

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/angular";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
+
 import { ProgressComponent } from "./progress.component";
 
 export default {
@@ -20,19 +22,34 @@ export default {
 
 type Story = StoryObj<ProgressComponent>;
 
+export const Base: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-progress ${formatArgsForCodeSnippet<ProgressComponent>(args)}></bit-progress>
+    `,
+  }),
+  args: {
+    barWidth: 50,
+  },
+};
+
 export const Empty: Story = {
+  ...Base,
   args: {
     barWidth: 0,
   },
 };
 
 export const Full: Story = {
+  ...Base,
   args: {
     barWidth: 100,
   },
 };
 
 export const CustomText: Story = {
+  ...Base,
   args: {
     barWidth: 25,
     text: "Loading...",