[CL-748] Support nondismissable dialogs and simple dialogs (#15464)

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

@@ -25,10 +25,13 @@ interface Animal {
   template: `
     <bit-layout>
       <button class="tw-mr-2" bitButton type="button" (click)="openDialog()">Open Dialog</button>
+      <button class="tw-mr-2" bitButton type="button" (click)="openDialogNonDismissable()">
+        Open Non-Dismissable Dialog
+      </button>
       <button bitButton type="button" (click)="openDrawer()">Open Drawer</button>
     </bit-layout>
   `,
-  imports: [ButtonModule],
+  imports: [ButtonModule, LayoutComponent],
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -41,6 +44,15 @@ class StoryDialogComponent {
     });
   }
 
+  openDialogNonDismissable() {
+    this.dialogService.open(NonDismissableContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
+
   openDrawer() {
     this.dialogService.openDrawer(StoryDialogContentComponent, {
       data: {
@@ -79,13 +91,40 @@ class StoryDialogContentComponent {
   }
 }
 
+@Component({
+  template: `
+    <bit-dialog title="Dialog Title" dialogSize="large">
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+      <ng-container bitDialogFooter>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+      </ng-container>
+    </bit-dialog>
+  `,
+  imports: [DialogModule, ButtonModule],
+})
+class NonDismissableContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
 export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
   decorators: [
     positionFixedWrapperDecorator(),
     moduleMetadata({
-      declarations: [StoryDialogContentComponent],
       imports: [
         SharedModule,
         ButtonModule,
@@ -138,8 +177,7 @@ export const Default: Story = {
   },
 };
 
-/** Drawers must be a descendant of `bit-layout`. */
-export const Drawer: Story = {
+export const NonDismissable: Story = {
   play: async (context) => {
     const canvas = context.canvasElement;
 
@@ -147,3 +185,13 @@ export const Drawer: Story = {
     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")[2];
+    await userEvent.click(button);
+  },
+};