feat(modal): add noCloseButton prop (#205)

GovTechSG · Aug 1, 2024 · 1a2a874 · 1a2a874
2 parents dd447e0 + ad2db0f
commit 1a2a874
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 12 deletions.
diff --git a/src/components/Modal/sgds-modal.ts b/src/components/Modal/sgds-modal.ts
@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html, nothing } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
@@ -75,6 +75,8 @@ export class SgdsModal extends SgdsElement {
   @property({ type: Boolean, reflect: true }) centeredAlignVariant = false;
   /** Removes the default animation when opening and closing of modal */
   @property({ type: Boolean, reflect: true }) noAnimation = false;
+  /** Removes the close button from modal header */
+  @property({ type: Boolean, reflect: true }) noCloseButton = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -258,16 +260,18 @@ export class SgdsModal extends SgdsElement {
                   >
                     ${this.titleIcon ? withLabelIcon : ""} ${this.title}
                   </h3>
-                  <button
-                    class=${classMap({
-                      "modal-close": true,
-                      "btn-sm": true,
-                      "btn-close": true,
-                      centered: this.centeredAlignVariant
-                    })}
-                    @click="${() => this.requestClose("close-button")}"
-                    aria-label="close modal"
-                  ></button>
+                  ${this.noCloseButton
+                    ? nothing
+                    : html`<button
+                        class=${classMap({
+                          "modal-close": true,
+                          "btn-sm": true,
+                          "btn-close": true,
+                          centered: this.centeredAlignVariant
+                        })}
+                        @click="${() => this.requestClose("close-button")}"
+                        aria-label="close modal"
+                      ></button>`}
                 </div>
               `
             : ""}

diff --git a/stories/templates/Modal/basic.js b/stories/templates/Modal/basic.js
@@ -11,6 +11,7 @@ export const Template = args => {
       ?centered=${args.centered}
       ?centeredAlignVariant=${args.centeredAlignVariant}
       ?noAnimation=${args.noAnimation}
+      ?noCloseButton=${args.noCloseButton}
     >
       This is a Modal
       <sgds-button @click=${closeModal} slot="footer" variant="link" class="close-modal">Close</sgds-button>

diff --git a/test/modal.test.ts b/test/modal.test.ts
@@ -1,11 +1,71 @@
 import { SgdsModal } from "../src/components";
 import "../src/index";
-import { expect, fixture, waitUntil } from "@open-wc/testing";
+import { expect, fixture, waitUntil, assert } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import sinon from "sinon";
 import { html } from "lit";
 
 describe("<sgds-modal>", () => {
+  it("renders with default values", async () => {
+    const el = await fixture(html`<sgds-modal></sgds-moadl>`);
+    assert.shadowDom.equal(
+      el,
+      `
+   <div
+       class="modal"
+       hidden=""
+       part="base"
+     >
+        <div
+          class="modal-overlay"
+          part="overlay"
+        >
+        </div>
+        <div
+          aria-hidden="true"
+          aria-labelledby="title"
+          aria-modal="true"
+          class="modal-panel"
+          part="panel"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="modal-header"
+            part="header"
+          >
+            <h3
+              class="modal-title"
+              id="title"
+              part="title"
+              tabindex="-1"
+            >
+            </h3>
+            <button
+              aria-label="close modal"
+              class="btn-close btn-sm modal-close"
+            >
+            </button>
+          </div>
+          <div
+            class="modal-body"
+            part="body"
+          >
+            <slot>
+            </slot>
+          </div>
+          <footer
+            class="modal-footer"
+            part="footer"
+          >
+            <slot name="footer">
+            </slot>
+          </footer>
+        </div>
+      </div>
+    `
+    );
+  });
   it("should be visible with the open attribute", async () => {
     const el = await fixture<SgdsModal>(html`
       <sgds-modal open>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</sgds-modal>
@@ -134,4 +194,9 @@ describe("<sgds-modal>", () => {
     const el = await fixture<SgdsModal>(html` <sgds-modal centered></sgds-modal> `);
     expect(el.shadowRoot?.querySelector(".modal")).to.have.class("centered");
   });
+
+  it("noCloseButton prop removes button from modal", async () => {
+    const el = await fixture<SgdsModal>(html`<sgds-modal noCloseButton></sgds-modal>`);
+    expect(el.shadowRoot.querySelector("button.btn-close")).to.be.null;
+  });
 });