From 66d9ab5dc0772193d29be873cca8c2a45bd7a816 Mon Sep 17 00:00:00 2001
From: Jonathan Prusik <jprusik@users.noreply.github.com>
Date: Wed, 7 Aug 2024 11:13:29 -0400
Subject: [PATCH] [PM-9969] Papercut - Update component library storybook docs
 (#10191)

* add component import examples

* component library story html formatting/cleanup nits

* Update libs/components/src/dialog/dialog/dialog.mdx

Co-authored-by: Will Martin <contact@willmartian.com>

* Update libs/components/src/badge/badge.mdx

Co-authored-by: Will Martin <contact@willmartian.com>

* Update libs/components/src/dialog/simple-dialog/simple-dialog.mdx

Co-authored-by: Will Martin <contact@willmartian.com>

---------

Co-authored-by: Will Martin <contact@willmartian.com>
---
 libs/components/src/badge/badge.mdx           |  4 ++
 libs/components/src/badge/badge.stories.ts    |  4 +-
 libs/components/src/button/button.mdx         |  4 ++
 libs/components/src/checkbox/checkbox.mdx     | 32 ++++++++++
 .../src/checkbox/checkbox.stories.ts          | 10 ++--
 libs/components/src/dialog/dialog/dialog.mdx  |  4 ++
 .../src/dialog/dialog/dialog.stories.ts       |  4 +-
 .../dialog/simple-dialog/simple-dialog.mdx    |  4 ++
 .../simple-dialog/simple-dialog.stories.ts    |  5 +-
 libs/components/src/form-field/form-field.mdx | 60 +++++++++++++++++++
 libs/components/src/form/form.stories.ts      | 14 ++---
 .../src/icon-button/icon-button.mdx           |  4 ++
 libs/components/src/link/link.mdx             |  4 ++
 libs/components/src/search/search.mdx         | 20 +++++++
 libs/components/src/select/select.mdx         | 20 +++++++
 libs/components/src/table/table.stories.ts    |  4 +-
 libs/components/src/toast/toast.mdx           | 30 ++++++++++
 libs/components/src/typography/typography.mdx |  4 ++
 18 files changed, 210 insertions(+), 21 deletions(-)
 create mode 100644 libs/components/src/checkbox/checkbox.mdx
 create mode 100644 libs/components/src/form-field/form-field.mdx
 create mode 100644 libs/components/src/search/search.mdx
 create mode 100644 libs/components/src/select/select.mdx
 create mode 100644 libs/components/src/toast/toast.mdx

diff --git a/libs/components/src/badge/badge.mdx b/libs/components/src/badge/badge.mdx
index 1c91944997..3dd2459871 100644
--- a/libs/components/src/badge/badge.mdx
+++ b/libs/components/src/badge/badge.mdx
@@ -4,6 +4,10 @@ import * as stories from "./badge.stories";
 
 <Meta of={stories} />
 
+```ts
+import { BadgeModule } from "@bitwarden/components";
+```
+
 # Badge
 
 The Badge directive can be used on a `<span>` (non clickable events), or an `<a>` or `<button>` tag
diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts
index 27873bbbbf..cdd00ca898 100644
--- a/libs/components/src/badge/badge.stories.ts
+++ b/libs/components/src/badge/badge.stories.ts
@@ -31,9 +31,9 @@ export const Primary: Story = {
     props: args,
     template: `
       <span class="tw-text-main">Span </span><span bitBadge [variant]="variant" [truncate]="truncate">Badge containing lengthy text</span>
-      <br><br>
+      <br /><br />
       <span class="tw-text-main">Link </span><a href="#" bitBadge [variant]="variant" [truncate]="truncate">Badge</a>
-      <br><br>
+      <br /><br />
       <span class="tw-text-main">Button </span><button bitBadge [variant]="variant" [truncate]="truncate">Badge</button>
     `,
   }),
diff --git a/libs/components/src/button/button.mdx b/libs/components/src/button/button.mdx
index 6dcbbbbfac..5ee709093e 100644
--- a/libs/components/src/button/button.mdx
+++ b/libs/components/src/button/button.mdx
@@ -4,6 +4,10 @@ import * as stories from "./button.stories";
 
 <Meta of={stories} />
 
+```ts
+import { ButtonModule } from "@bitwarden/components";
+```
+
 # Button
 
 Buttons are interactive elements that can be triggered using a mouse, keyboard, or touch. They are
diff --git a/libs/components/src/checkbox/checkbox.mdx b/libs/components/src/checkbox/checkbox.mdx
new file mode 100644
index 0000000000..f3ce0d8fd0
--- /dev/null
+++ b/libs/components/src/checkbox/checkbox.mdx
@@ -0,0 +1,32 @@
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./checkbox.stories";
+
+<Meta of={stories} />
+
+```ts
+import { CheckboxModule } from "@bitwarden/components";
+```
+
+# Checkbox
+
+<Primary />
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas of={stories.Default} />
+
+### Hint
+
+<Canvas of={stories.Hint} />
+
+### Custom
+
+<Canvas of={stories.Custom} />
+
+### Intermediate
+
+<Canvas of={stories.Indeterminate} />
diff --git a/libs/components/src/checkbox/checkbox.stories.ts b/libs/components/src/checkbox/checkbox.stories.ts
index 86b682240d..0d649eb433 100644
--- a/libs/components/src/checkbox/checkbox.stories.ts
+++ b/libs/components/src/checkbox/checkbox.stories.ts
@@ -19,7 +19,7 @@ import { CheckboxModule } from "./checkbox.module";
 const template = `
   <form [formGroup]="formObj">
     <bit-form-control>
-      <input type="checkbox" bitCheckbox formControlName="checkbox">
+      <input type="checkbox" bitCheckbox formControlName="checkbox" />
       <bit-label>Click me</bit-label>
     </bit-form-control>
   </form>
@@ -107,7 +107,7 @@ export const Hint: Story = {
     template: `
       <form [formGroup]="formObj">
         <bit-form-control>
-          <input type="checkbox" bitCheckbox formControlName="checkbox">
+          <input type="checkbox" bitCheckbox formControlName="checkbox" />
           <bit-label>Really long value that never ends.</bit-label>
           <bit-hint>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur iaculis consequat enim vitae elementum.
@@ -138,15 +138,15 @@ export const Custom: Story = {
       <div class="tw-flex tw-flex-col tw-w-32">
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
           A-Z
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
           a-z
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
         <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2 tw-items-baseline">
           0-9
-          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox>
+          <input class="tw-ml-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
       </div>
     `,
diff --git a/libs/components/src/dialog/dialog/dialog.mdx b/libs/components/src/dialog/dialog/dialog.mdx
index f1f7692d4c..d7ccd423da 100644
--- a/libs/components/src/dialog/dialog/dialog.mdx
+++ b/libs/components/src/dialog/dialog/dialog.mdx
@@ -4,6 +4,10 @@ import * as stories from "./dialog.stories";
 
 <Meta of={stories} />
 
+```ts
+import { DialogModule, DialogService } from "@bitwarden/components";
+```
+
 # Dialog
 
 Dialogs are used throughout the app to help the user focus on a specific action. Use this dialog
diff --git a/libs/components/src/dialog/dialog/dialog.stories.ts b/libs/components/src/dialog/dialog/dialog.stories.ts
index ee377aa930..905123ac90 100644
--- a/libs/components/src/dialog/dialog/dialog.stories.ts
+++ b/libs/components/src/dialog/dialog/dialog.stories.ts
@@ -145,9 +145,9 @@ export const ScrollingContent: Story = {
     template: `
       <bit-dialog title="Scrolling Example" [dialogSize]="dialogSize" [loading]="loading" [disablePadding]="disablePadding">
         <span bitDialogContent>
-          Dialog body text goes here.<br>
+          Dialog body text goes here.<br />
           <ng-container *ngFor="let _ of [].constructor(100)">
-            repeating lines of characters <br>
+            repeating lines of characters <br />
           </ng-container>
           end of sequence!
         </span>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.mdx b/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
index a78ba4650a..d188b3598e 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.mdx
@@ -4,6 +4,10 @@ import * as stories from "./simple-dialog.stories";
 
 <Meta of={stories} />
 
+```ts
+import { DialogModule, DialogService } from "@bitwarden/components";
+```
+
 # Simple Dialogs
 
 Simple Dialogs are used throughout the app for simple alert or confirmation actions such as
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
index a433de21be..34dedaaec0 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts
@@ -64,10 +64,9 @@ export const ScrollingContent: Story = {
       <bit-simple-dialog>
         <span bitDialogTitle>Alert Dialog</span>
         <span bitDialogContent>
-          Message Content
-          Message text goes here.<br>
+          Message Content Message text goes here.<br />
           <ng-container *ngFor="let _ of [].constructor(100)">
-            repeating lines of characters <br>
+            repeating lines of characters <br />
           </ng-container>
           end of sequence!
         </span>
diff --git a/libs/components/src/form-field/form-field.mdx b/libs/components/src/form-field/form-field.mdx
new file mode 100644
index 0000000000..d84535481a
--- /dev/null
+++ b/libs/components/src/form-field/form-field.mdx
@@ -0,0 +1,60 @@
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./form-field.stories";
+
+<Meta of={stories} />
+
+```ts
+import { FormFieldModule } from "@bitwarden/components";
+```
+
+# Field
+
+<Primary />
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas of={stories.Default} />
+
+### Required
+
+<Canvas of={stories.Required} />
+
+### Hint
+
+<Canvas of={stories.Hint} />
+
+### Disabled
+
+<Canvas of={stories.Disabled} />
+
+### Readonly
+
+<Canvas of={stories.Readonly} />
+
+### Input Group
+
+<Canvas of={stories.InputGroup} />
+
+### Button Input Group
+
+<Canvas of={stories.ButtonInputGroup} />
+
+### Disabled Button Input Group
+
+<Canvas of={stories.DisabledButtonInputGroup} />
+
+### Select
+
+<Canvas of={stories.Select} />
+
+### Advanced Select
+
+<Canvas of={stories.AdvancedSelect} />
+
+### Textarea
+
+<Canvas of={stories.Textarea} />
diff --git a/libs/components/src/form/form.stories.ts b/libs/components/src/form/form.stories.ts
index cc4e9b62cf..8f08966ba5 100644
--- a/libs/components/src/form/form.stories.ts
+++ b/libs/components/src/form/form.stories.ts
@@ -96,19 +96,19 @@ export const FullExample: Story = {
           <bit-label>Name</bit-label>
           <input bitInput formControlName="name" />
         </bit-form-field>
-  
+
         <bit-form-field>
           <bit-label>Email</bit-label>
           <input bitInput formControlName="email" />
         </bit-form-field>
-  
+
         <bit-form-field>
           <bit-label>Country</bit-label>
           <bit-select formControlName="country">
             <bit-option *ngFor="let country of countries" [value]="country.value" [label]="country.name"></bit-option>
           </bit-select>
         </bit-form-field>
-  
+
         <bit-form-field>
           <bit-label>Age</bit-label>
           <input
@@ -119,13 +119,13 @@ export const FullExample: Story = {
             max="150"
           />
         </bit-form-field>
-  
+
         <bit-form-control>
           <bit-label>Agree to terms</bit-label>
-          <input type="checkbox" bitCheckbox formControlName="terms">
+          <input type="checkbox" bitCheckbox formControlName="terms" />
           <bit-hint>Required for the service to work properly</bit-hint>
         </bit-form-control>
-  
+
         <bit-radio-group formControlName="updates">
           <bit-label>Subscribe to updates?</bit-label>
           <bit-radio-button value="yes">
@@ -138,7 +138,7 @@ export const FullExample: Story = {
             <bit-label>Decide later</bit-label>
           </bit-radio-button>
         </bit-radio-group>
-  
+
         <button type="submit" bitButton buttonType="primary">Submit</button>
       </form>
     `,
diff --git a/libs/components/src/icon-button/icon-button.mdx b/libs/components/src/icon-button/icon-button.mdx
index 817594a772..8361d4c399 100644
--- a/libs/components/src/icon-button/icon-button.mdx
+++ b/libs/components/src/icon-button/icon-button.mdx
@@ -4,6 +4,10 @@ import * as stories from "./icon-button.stories";
 
 <Meta of={stories} />
 
+```ts
+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
diff --git a/libs/components/src/link/link.mdx b/libs/components/src/link/link.mdx
index 100824277a..39d8de72fc 100644
--- a/libs/components/src/link/link.mdx
+++ b/libs/components/src/link/link.mdx
@@ -4,6 +4,10 @@ import * as stories from "./link.stories";
 
 <Meta of={stories} />
 
+```ts
+import { LinkModule } from "@bitwarden/components";
+```
+
 # Link / Text button
 
 Text Links and Buttons use the `primary-600` color and can use either the `<a>` or `<button>` tags.
diff --git a/libs/components/src/search/search.mdx b/libs/components/src/search/search.mdx
new file mode 100644
index 0000000000..492fd0dda2
--- /dev/null
+++ b/libs/components/src/search/search.mdx
@@ -0,0 +1,20 @@
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./search.stories";
+
+<Meta of={stories} />
+
+```ts
+import { SearchModule } from "@bitwarden/components";
+```
+
+# Search
+
+<Primary />
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas of={stories.Default} />
diff --git a/libs/components/src/select/select.mdx b/libs/components/src/select/select.mdx
new file mode 100644
index 0000000000..8dfbe4aa52
--- /dev/null
+++ b/libs/components/src/select/select.mdx
@@ -0,0 +1,20 @@
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./select.stories";
+
+<Meta of={stories} />
+
+```ts
+import { SelectModule } from "@bitwarden/components";
+```
+
+# Select
+
+<Primary />
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas of={stories.Default} />
diff --git a/libs/components/src/table/table.stories.ts b/libs/components/src/table/table.stories.ts
index 9c1fac6956..8fa3f5559d 100644
--- a/libs/components/src/table/table.stories.ts
+++ b/libs/components/src/table/table.stories.ts
@@ -44,7 +44,7 @@ export const Default: Story = {
         <ng-template body>
           <tr bitRow [alignContent]="alignRowContent">
             <td bitCell>Cell 1</td>
-            <td bitCell>Cell 2 <br> Multiline Cell</td>
+            <td bitCell>Cell 2 <br /> Multiline Cell</td>
             <td bitCell>Cell 3</td>
           </tr>
           <tr bitRow [alignContent]="alignRowContent">
@@ -53,7 +53,7 @@ export const Default: Story = {
             <td bitCell>Cell 6</td>
           </tr>
           <tr bitRow [alignContent]="alignRowContent">
-            <td bitCell>Cell 7 <br> Multiline Cell</td>
+            <td bitCell>Cell 7 <br /> Multiline Cell</td>
             <td bitCell>Cell 8</td>
             <td bitCell>Cell 9</td>
           </tr>
diff --git a/libs/components/src/toast/toast.mdx b/libs/components/src/toast/toast.mdx
new file mode 100644
index 0000000000..69b0ddf6a0
--- /dev/null
+++ b/libs/components/src/toast/toast.mdx
@@ -0,0 +1,30 @@
+import { Meta, Canvas, Source, Primary, Controls } from "@storybook/addon-docs";
+
+import * as stories from "./toast.stories";
+
+<Meta of={stories} />
+
+```ts
+import { ToastService } from "@bitwarden/components";
+```
+
+# Toast
+
+<Primary />
+<Controls />
+
+## Stories
+
+### Default
+
+<Canvas of={stories.Default} />
+
+### Long Content
+
+Avoid using long messages in toasts.
+
+<Canvas of={stories.LongContent} />
+
+### Service
+
+<Canvas of={stories.Service} />
diff --git a/libs/components/src/typography/typography.mdx b/libs/components/src/typography/typography.mdx
index 6c463f7cae..45420270ce 100644
--- a/libs/components/src/typography/typography.mdx
+++ b/libs/components/src/typography/typography.mdx
@@ -4,6 +4,10 @@ import * as stories from "./typography.stories";
 
 <Meta of={stories} />
 
+```ts
+import { TypographyModule } from "@bitwarden/components";
+```
+
 # Typography
 
 <Primary />