[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,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

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>
     `,
   }),

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

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} />

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>
     `,

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

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>

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

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 Content Message text goes here.<br />
-          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>

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} />

libs/components/src/form/form.stories.ts

@@ -122,7 +122,7 @@ export const FullExample: Story = {
 
         <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>
 

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

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.

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} />

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} />

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>

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} />

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 />