[CL-46] Dialogs (#3237)

libs/components/src/dialog/simple-dialog/simple-dialog.component.html

@@ -0,0 +1,19 @@
+<div
+  class="tw-my-4 tw-flex tw-max-h-screen tw-max-w-sm tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+>
+  <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
+    <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content>
+    <ng-template #elseBlock>
+      <i class="bwi bwi-exclamation-triangle tw-text-3xl tw-text-warning" aria-hidden="true"></i>
+    </ng-template>
+    <h2 class="tw-mb-0 tw-text-base tw-font-semibold">
+      <ng-content select="[bit-dialog-title]"></ng-content>
+    </h2>
+  </div>
+  <div class="tw-overflow-y-auto tw-px-4 tw-pt-2 tw-pb-4 tw-text-center tw-text-base">
+    <ng-content select="[bit-dialog-content]"></ng-content>
+  </div>
+  <div class="tw-border-0 tw-border-t tw-border-solid tw-border-secondary-300 tw-p-4">
+    <ng-content select="[bit-dialog-footer]"></ng-content>
+  </div>
+</div>

libs/components/src/dialog/simple-dialog/simple-dialog.component.ts

@@ -0,0 +1,16 @@
+import { Component, ContentChild, Directive } from "@angular/core";
+
+@Directive({ selector: "[bit-dialog-icon]" })
+export class IconDirective {}
+
+@Component({
+  selector: "bit-simple-dialog",
+  templateUrl: "./simple-dialog.component.html",
+})
+export class SimpleDialogComponent {
+  @ContentChild(IconDirective) icon!: IconDirective;
+
+  get hasIcon() {
+    return this.icon != null;
+  }
+}

libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts

@@ -0,0 +1,81 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { ButtonModule } from "../../button";
+
+import { IconDirective, SimpleDialogComponent } from "./simple-dialog.component";
+
+export default {
+  title: "Component Library/Dialogs/Simple Dialog",
+  component: SimpleDialogComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonModule],
+      declarations: [IconDirective],
+    }),
+  ],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library",
+    },
+  },
+} as Meta;
+
+const Template: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
+  props: args,
+  template: `
+  <bit-simple-dialog>
+      <span bit-dialog-title>Alert Dialog</span>
+      <span bit-dialog-content>Message Content</span>
+      <div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
+        <button bitButton buttonType="primary">Yes</button>
+        <button bitButton buttonType="secondary">No</button>
+      </div>
+  </bit-simple-dialog>
+  `,
+});
+
+export const Default = Template.bind({});
+
+const TemplateWithIcon: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
+  props: args,
+  template: `
+  <bit-simple-dialog>
+      <i bit-dialog-icon class="bwi bwi-star tw-text-3xl tw-text-success" aria-hidden="true"></i>
+      <span bit-dialog-title>Premium Subscription Available</span>
+      <span bit-dialog-content> Message Content</span>
+      <div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
+        <button bitButton buttonType="primary">Yes</button>
+        <button bitButton buttonType="secondary">No</button>
+      </div>
+  </bit-simple-dialog>
+  `,
+});
+
+export const CustomIcon = TemplateWithIcon.bind({});
+
+const TemplateScroll: Story<SimpleDialogComponent> = (args: SimpleDialogComponent) => ({
+  props: args,
+  template: `
+  <bit-simple-dialog>
+      <span bit-dialog-title>Alert Dialog</span>
+      <span bit-dialog-content>
+        Message Content
+        Message text goes here.<br>
+        <ng-container *ngFor="let _ of [].constructor(100)">
+          repeating lines of characters <br>
+        </ng-container>
+        end of sequence!
+      </span>
+      <div bit-dialog-footer class="tw-flex tw-flex-row tw-gap-2">
+        <button bitButton buttonType="primary">Yes</button>
+        <button bitButton buttonType="secondary">No</button>
+      </div>
+  </bit-simple-dialog>
+  `,
+});
+
+export const ScrollingContent = TemplateScroll.bind({});
+ScrollingContent.args = {
+  useDefaultIcon: true,
+};