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", }); }, },