[CL-622][CL-562][CL-621][CL-632] various drawer improvements (#14120)

- add focus trap to drawers
- add config to open existing dialogs as drawers
- make drawer take up fill width/height on smaller screens

libs/components/src/dialog/dialog.service.stories.ts

@@ -1,12 +1,17 @@
 import { DIALOG_DATA, DialogModule, DialogRef } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { NoopAnimationsModule } from "@angular/platform-browser/animations";
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
+import { getAllByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import { ButtonModule } from "../button";
 import { IconButtonModule } from "../icon-button";
+import { LayoutComponent } from "../layout";
 import { SharedModule } from "../shared";
+import { positionFixedWrapperDecorator } from "../stories/storybook-decorators";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { DialogComponent } from "./dialog/dialog.component";
@@ -19,7 +24,12 @@ interface Animal {
 }
 
 @Component({
-  template: `<button bitButton type="button" (click)="openDialog()">Open Dialog</button>`,
+  template: `
+    <bit-layout>
+      <button class="tw-mr-2" bitButton type="button" (click)="openDialog()">Open Dialog</button>
+      <button bitButton type="button" (click)="openDrawer()">Open Drawer</button>
+    </bit-layout>
+  `,
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -31,6 +41,14 @@ class StoryDialogComponent {
       },
     });
   }
+
+  openDrawer() {
+    this.dialogService.openDrawer(StoryDialogContentComponent, {
+      data: {
+        animal: "panda",
+      },
+    });
+  }
 }
 
 @Component({
@@ -65,25 +83,37 @@ export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
   decorators: [
+    positionFixedWrapperDecorator(),
     moduleMetadata({
       declarations: [StoryDialogContentComponent],
       imports: [
         SharedModule,
         ButtonModule,
+        NoopAnimationsModule,
         DialogModule,
         IconButtonModule,
         DialogCloseDirective,
         DialogComponent,
         DialogTitleContainerDirective,
+        RouterTestingModule,
+        LayoutComponent,
       ],
+      providers: [DialogService],
+    }),
+    applicationConfig({
       providers: [
-        DialogService,
         {
           provide: I18nService,
           useFactory: () => {
             return new I18nMockService({
               close: "Close",
-              loading: "Loading",
+              search: "Search",
+              skipToContent: "Skip to content",
+              submenu: "submenu",
+              toggleCollapse: "toggle collapse",
+              toggleSideNavigation: "Toggle side navigation",
+              yes: "Yes",
+              no: "No",
             });
           },
         },
@@ -100,4 +130,21 @@ export default {
 
 type Story = StoryObj<StoryDialogComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[0];
+    await userEvent.click(button);
+  },
+};
+
+/** Drawers must be a descendant of `bit-layout`. */
+export const Drawer: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[1];
+    await userEvent.click(button);
+  },
+};