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

@@ -7,15 +7,24 @@ import { I18nPipe } from "@bitwarden/ui-common";
 
 import { IconButtonModule } from "../icon-button";
 
-type BannerTypes = "premium" | "info" | "warning" | "danger";
+type BannerType = "premium" | "info" | "warning" | "danger";
 
-const defaultIcon: Record<BannerTypes, string> = {
+const defaultIcon: Record<BannerType, string> = {
   premium: "bwi-star",
   info: "bwi-info-circle",
   warning: "bwi-exclamation-triangle",
   danger: "bwi-error",
 };
+/**
+  * Banners are used for important communication with the user that needs to be seen right away, but has
+  * little effect on the experience. Banners appear at the top of the user's screen on page load and
+  * persist across all pages a user navigates to.
 
+  * - They should always be dismissible and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.
+  * - Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
+  * - Avoid stacking multiple banners.
+  * - Banners can contain a button or anchor that uses the `bitLink` directive with `linkType="secondary"`.
+ */
 @Component({
   selector: "bit-banner",
   templateUrl: "./banner.component.html",
@@ -23,7 +32,7 @@ const defaultIcon: Record<BannerTypes, string> = {
   imports: [CommonModule, IconButtonModule, I18nPipe],
 })
 export class BannerComponent implements OnInit {
-  @Input("bannerType") bannerType: BannerTypes = "info";
+  @Input("bannerType") bannerType: BannerType = "info";
   @Input() icon: string;
   @Input() useAlertRole = true;
   @Input() showClose = true;

libs/components/src/banner/banner.mdx

@@ -1,25 +1,16 @@
-import { Meta, Controls, Canvas, Primary } from "@storybook/addon-docs";
+import { Canvas, Controls, Description, Meta, Primary, Title } from "@storybook/addon-docs";
 
 import * as stories from "./banner.stories";
 
 <Meta of={stories} />
 
-# Banner
-
-Banners are used for important communication with the user that needs to be seen right away, but has
-little effect on the experience. Banners appear at the top of the user's screen on page load and
-persist across all pages a user navigates to.
-
-- They should always be dismissible and never use a timeout. If a user dismisses a banner, it should
-  not reappear during that same active session.
-- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their
-  effectiveness may decrease if too many are used.
-- Avoid stacking multiple banners.
-- Banners can contain a button or anchor that uses the `bitLink` directive with
-  `linkType="secondary"`.
+```ts
+import { BannerModule } from "@bitwarden/components";
+```
 
+<Title />
+<Description />
 <Primary />
-
 <Controls />
 
 ## Types
@@ -56,5 +47,5 @@ Rarely used, but may be used to alert users over critical messages or very outda
 ## Accessibility
 
 Banners sets the `role="status"` and `aria-live="polite"` attributes to ensure screen readers
-announce the content prior to the test of the page. This behaviour can be disabled by setting
+announce the content prior to the test of the page. This behavior can be disabled by setting
 `[useAlertRole]="false"`.

libs/components/src/banner/banner.stories.ts

@@ -2,6 +2,7 @@ import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
+import { formatArgsForCodeSnippet } from "../../../../.storybook/format-args-for-code-snippet";
 import { IconButtonModule } from "../icon-button";
 import { LinkModule } from "../link";
 import { SharedModule } from "../shared/shared.module";
@@ -44,48 +45,50 @@ export default {
 
 type Story = StoryObj<BannerComponent>;
 
+export const Base: Story = {
+  render: (args) => {
+    return {
+      props: args,
+      template: `
+        <bit-banner ${formatArgsForCodeSnippet<BannerComponent>(args)}>
+          Content Really Long Text Lorem Ipsum Ipsum Ipsum
+          <button bitLink linkType="secondary">Button</button>
+        </bit-banner>
+      `,
+    };
+  },
+};
+
 export const Premium: Story = {
+  ...Base,
   args: {
     bannerType: "premium",
   },
-  render: (args) => ({
-    props: args,
-    template: `
-      <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
-        Content Really Long Text Lorem Ipsum Ipsum Ipsum
-        <button bitLink linkType="secondary">Button</button>
-      </bit-banner>
-      `,
-  }),
-};
-
-Premium.args = {
-  bannerType: "premium",
 };
 
 export const Info: Story = {
-  ...Premium,
+  ...Base,
   args: {
     bannerType: "info",
   },
 };
 
 export const Warning: Story = {
-  ...Premium,
+  ...Base,
   args: {
     bannerType: "warning",
   },
 };
 
 export const Danger: Story = {
-  ...Premium,
+  ...Base,
   args: {
     bannerType: "danger",
   },
 };
 
 export const HideClose: Story = {
-  ...Premium,
+  ...Base,
   args: {
     showClose: false,
   },