feat(modal): add tedi ready modal #189

community/components/overlay/modal/footer/modal-footer.component.scss

@@ -4,7 +4,7 @@
   --_modal-footer-gap: 0.5rem;
   display: flex;
   gap: var(--_modal-footer-gap);
-  border-top: var(--_modal-border);
+  border-top: var(--borders-01) solid var(--modal-border-inner);
 
   padding: var(--_tedi-modal-footer-padding-y)
     var(--_tedi-modal-footer-padding-x);

community/components/overlay/modal/header/modal-header.component.scss

@@ -1,7 +1,7 @@
 @use "@tedi-design-system/core/mixins";
 
 .tedi-modal-header {
-  border-bottom: var(--_modal-border);
+  border-bottom: var(--borders-01) solid var(--modal-border-inner);
   padding: var(--_tedi-modal-heading-padding-y)
     var(--_tedi-modal-heading-padding-x);
 

community/components/overlay/modal/modal.component.scss

@@ -27,7 +27,7 @@ $modal-breapoints: (xs, sm, md, lg, xl);
 }
 
 .tedi-modal {
-  --_modal-border: var(--borders-01) solid var(--modal-border);
+  --_modal-border: var(--borders-01) solid var(--modal-border-outer);
   --_modal-padding: var(--dimensions-13);
 
   overflow: auto;

community/components/overlay/modal/modal.stories.ts

@@ -114,6 +114,11 @@ const meta: Meta<DialogData> = {
       imports: [ModalOpenComponent, StorybookModalComponent],
     }),
   ],
+  parameters: {
+    status: {
+      type: ["existsInTediReady"],
+    },
+  },
   argTypes: {
     maxWidth: {
       control: {

package.json

@@ -32,7 +32,7 @@
     "ngx-float-ui": "^19.0.1 || ^20.0.0"
   },
   "dependencies": {
-    "@tedi-design-system/core": "^2.0.0"
+    "@tedi-design-system/core": "^2.4.0"
   },
   "devDependencies": {
     "@angular-devkit/core": "19.2.15",

tedi/components/overlay/index.ts

@@ -1,2 +1,3 @@
+export * from "./modal";
 export * from "./tooltip";
-export * from "./popover";
+export * from "./popover";

tedi/components/overlay/modal/index.ts

@@ -0,0 +1,4 @@
+export * from "./modal.component";
+export * from "./modal-content/modal-content.component";
+export * from "./modal-footer/modal-footer.component";
+export * from "./modal-header/modal-header.component";

tedi/components/overlay/modal/modal-content/modal-content.component.html

@@ -0,0 +1 @@
+<ng-content />

tedi/components/overlay/modal/modal-content/modal-content.component.ts

@@ -0,0 +1,16 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+} from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "tedi-modal-content",
+  imports: [],
+  templateUrl: "./modal-content.component.html",
+  styleUrl: "../modal.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalContentComponent {}

tedi/components/overlay/modal/modal-footer/modal-footer.component.ts

@@ -0,0 +1,15 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+} from "@angular/core";
+
+@Component({
+  standalone: true,
+  selector: "tedi-modal-footer",
+  template: "<ng-content />",
+  styleUrl: "../modal.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalFooterComponent {}

tedi/components/overlay/modal/modal-header/modal-header.component.html

@@ -0,0 +1,7 @@
+<div class="tedi-modal-header__head">
+  <ng-content select="h1,h2,h3,h4,h5,h6" />
+  @if (showClose()) {
+    <button tedi-closing-button (click)="closeModal()"></button>
+  }
+</div>
+<ng-content />

tedi/components/overlay/modal/modal-header/modal-header.component.spec.ts

@@ -0,0 +1,85 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+import { Component } from "@angular/core";
+import { ModalHeaderComponent } from "./modal-header.component";
+import { ModalComponent } from "../modal.component";
+import { viewChild } from "@angular/core";
+
+class MockModalComponent {
+  open = {
+    value: false,
+    set: jest.fn(function (val: boolean) {
+      this.value = val;
+    }),
+  };
+}
+
+@Component({
+  standalone: true,
+  imports: [ModalHeaderComponent],
+  template: `
+    <tedi-modal-header [showClose]="showClose">
+      Header Content
+    </tedi-modal-header>
+  `,
+})
+class TestHostComponent {
+  showClose = true;
+  header = viewChild.required(ModalHeaderComponent);
+}
+
+describe("ModalHeaderComponent", () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: TestHostComponent;
+  let component: ModalHeaderComponent;
+  let modal: MockModalComponent;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+      providers: [{ provide: ModalComponent, useClass: MockModalComponent }],
+    });
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+
+    host = fixture.componentInstance;
+    component = host.header();
+    modal = TestBed.inject(ModalComponent) as unknown as MockModalComponent;
+  });
+
+  it("should create the component", () => {
+    expect(component).toBeTruthy();
+  });
+
+  it("should show close button when showClose = true", () => {
+    const btn = fixture.nativeElement.querySelector("button");
+    expect(btn).not.toBeNull();
+  });
+
+  it("should hide close button when showClose = false", () => {
+    host.showClose = false;
+    fixture.detectChanges();
+
+    const btn = fixture.nativeElement.querySelector("button");
+    expect(btn).toBeNull();
+  });
+
+  it("should close modal when close button is clicked", () => {
+    const btn = fixture.nativeElement.querySelector("button")!;
+    modal.open.value = true;
+
+    btn.click();
+    fixture.detectChanges();
+
+    expect(modal.open.set).toHaveBeenCalledWith(false);
+  });
+
+  it("should close modal via closeModal() method", () => {
+    modal.open.value = true;
+
+    component.closeModal();
+    fixture.detectChanges();
+
+    expect(modal.open.set).toHaveBeenCalledWith(false);
+  });
+});

tedi/components/overlay/modal/modal-header/modal-header.component.ts

@@ -0,0 +1,29 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  input,
+  inject,
+} from "@angular/core";
+import { ClosingButtonComponent } from "../../../buttons/closing-button/closing-button.component";
+import { ModalComponent } from "../modal.component";
+
+@Component({
+  standalone: true,
+  selector: "tedi-modal-header",
+  imports: [ClosingButtonComponent],
+  templateUrl: "./modal-header.component.html",
+  styleUrl: "../modal.component.scss",
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalHeaderComponent {
+  /** Should show closing button? */
+  readonly showClose = input(true);
+
+  private readonly modal = inject(ModalComponent);
+
+  closeModal() {
+    this.modal.open.set(false);
+  }
+}

tedi/components/overlay/modal/modal.component.html

@@ -0,0 +1,15 @@
+@if (open()) {
+  <div class="tedi-modal__backdrop" (click)="open.set(false)"></div>
+  <div
+    class="tedi-modal__dialog"
+    role="dialog"
+    aria-modal="true"
+    tabindex="-1"
+    cdkTrapFocus
+    [cdkTrapFocusAutoCapture]="open()"
+  >
+    <ng-content select="tedi-modal-header" />
+    <ng-content select="tedi-modal-content" />
+    <ng-content select="tedi-modal-footer" />
+  </div>
+}

tedi/components/overlay/modal/modal.component.scss

@@ -0,0 +1,129 @@
+@use "@tedi-design-system/core/typography";
+
+@mixin modal-heading($size) {
+  .tedi-modal-header__head {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @include typography.heading-styles($size);
+    }
+  }
+}
+
+$modal-widths: (xs, sm, md, lg, xl);
+
+.tedi-modal {
+  position: fixed;
+  inset: 0;
+  display: none;
+  z-index: 1000;
+
+  &--open {
+    display: block;
+  }
+
+  &--default {
+    --_tedi-modal-heading-padding-x: var(--modal-heading-padding-x);
+    --_tedi-modal-heading-padding-y: var(--modal-heading-padding-y);
+    --_tedi-modal-body-padding: var(--modal-body-padding);
+    --_tedi-modal-footer-padding-x: var(--modal-footer-padding-x);
+    --_tedi-modal-footer-padding-y: var(--modal-footer-padding-y);
+
+    @include modal-heading(h3);
+  }
+
+  &--small {
+    --_tedi-modal-heading-padding-x: var(--modal-heading-padding-x-sm);
+    --_tedi-modal-heading-padding-y: var(--modal-heading-padding-y-sm);
+    --_tedi-modal-body-padding: var(--modal-body-padding-sm);
+    --_tedi-modal-footer-padding-x: var(--modal-footer-padding-x-sm);
+    --_tedi-modal-footer-padding-y: var(--modal-footer-padding-y-sm);
+
+    @include modal-heading(h4);
+  }
+
+  @each $width in $modal-widths {
+    &--#{$width} {
+      .tedi-modal__dialog {
+        max-width: var(--modal-max-width-#{$width});
+      }
+    }
+  }
+
+  &--center {
+    .tedi-modal__dialog {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      max-height: 95dvh;
+    }
+  }
+
+  &--left {
+    .tedi-modal__dialog {
+      top: 0;
+      left: 0;
+      height: 100%;
+    }
+  }
+
+  &--right {
+    .tedi-modal__dialog {
+      top: 0;
+      right: 0;
+      height: 100%;
+    }
+  }
+
+  &__dialog {
+    position: fixed;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--modal-background);
+    border: var(--borders-01) solid var(--modal-border-outer);
+    border-radius: var(--modal-radius);
+  }
+
+  &__backdrop {
+    position: fixed;
+    inset: 0;
+    background: var(--general-surface-overlay);
+  }
+
+  tedi-modal-header {
+    border-bottom: var(--borders-01) solid var(--modal-border-inner);
+    padding: var(--_tedi-modal-heading-padding-y)
+      var(--_tedi-modal-heading-padding-x);
+
+    .tedi-modal-header__head {
+      display: flex;
+      align-items: center;
+      gap: var(--layout-grid-gutters-08);
+
+      button[tedi-closing-button] {
+        margin-left: auto;
+      }
+    }
+  }
+
+  tedi-modal-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--layout-grid-gutters-16);
+    padding: var(--_tedi-modal-body-padding);
+    overflow-y: auto;
+  }
+
+  tedi-modal-footer {
+    display: flex;
+    gap: var(--layout-grid-gutters-16);
+
+    border-top: var(--borders-01) solid var(--modal-border-inner);
+    padding: var(--_tedi-modal-footer-padding-y)
+      var(--_tedi-modal-footer-padding-x);
+  }
+}