diff --git a/libs/components/src/dialog/dialogs.mdx b/libs/components/src/dialog/dialogs.mdx
index bd6a30d7f20..9a63e1301b0 100644
--- a/libs/components/src/dialog/dialogs.mdx
+++ b/libs/components/src/dialog/dialogs.mdx
@@ -1,5 +1,7 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
+import * as stories from "./dialog.service.stories";
+
# Dialog
@@ -24,7 +26,7 @@ dialog should become scrollable.
A backdrop should be used to hide the content below the dialog. Use `#000000` with `30% opacity`.
-
+
## Accessibility
diff --git a/libs/components/src/form/forms.mdx b/libs/components/src/form/forms.mdx
index 6c6fa33f68e..dba6a1466c6 100644
--- a/libs/components/src/form/forms.mdx
+++ b/libs/components/src/form/forms.mdx
@@ -1,5 +1,14 @@
import { Meta, Story, Source } from "@storybook/addon-docs";
+import * as formStories from "./form.stories";
+import * as fieldStories from "../form-field/form-field.stories";
+import * as passwordToggleStories from "../form-field/password-input-toggle.stories";
+import * as searchStories from "../search/search.stories";
+import * as selectStories from "../select/select.stories";
+import * as multiSelectStories from "../form-field/multi-select.stories";
+import * as radioStories from "../radio-button/radio-button.stories";
+import * as checkboxStories from "../checkbox/checkbox.stories";
+
# Forms
@@ -8,9 +17,9 @@ Component Library forms should always be built using [Angular Reactive Forms][re
[ADR-0001][adr-0001] for a background to this decision. In practice this means that forms should
always use the native `form` element and bind a `formGroup`.
-
+
-
+
## Form spacing and sections
@@ -48,25 +57,25 @@ controls like email verification, number selection, and more.
#### Default with required attribute
-
+
#### Password Toggle
-
+
-#### Search
+### Search
-
+
### Selects
#### Searchable single select (default)
-
+
#### Multi-select
-
+
### Radio group
@@ -89,14 +98,11 @@ using a radio group for more than 5 options even if the options require addition
#### Block
-
+
#### Inline
-
-
-[reactive]: https://angular.io/guide/reactive-forms
-[adr-0001]: https://contributing.bitwarden.com/architecture/adr/reactive-forms
+
### Checkbox
@@ -116,7 +122,7 @@ If a checkbox group has more than 4 options a
#### Single checkbox
-
+
## Accessibility
@@ -176,3 +182,6 @@ the field’s label.
Maintain a ratio of 3:1 with the form's background.
- Error styling should not rely only on using the `danger-600`color change. Use
as a prefix to highlight the text as error text versus helper
+
+[reactive]: https://angular.io/guide/reactive-forms
+[adr-0001]: https://contributing.bitwarden.com/architecture/adr/reactive-forms
diff --git a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
index 58bd9716792..fa78f04d236 100644
--- a/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
+++ b/libs/components/src/stories/kitchen-sink/kitchen-sink.stories.ts
@@ -64,6 +64,7 @@ export default {
skipToContent: "Skip to content",
submenu: "submenu",
toggleCollapse: "toggle collapse",
+ toggleSideNavigation: "toggle side navigation",
});
},
},