diff --git a/src/components/Modal/sgds-modal.ts b/src/components/Modal/sgds-modal.ts index bb304c14..8c21229c 100644 --- 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} - + ${this.noCloseButton + ? nothing + : html``} ` : ""} diff --git a/stories/templates/Modal/basic.js b/stories/templates/Modal/basic.js index 0d523022..4ca05aa3 100644 --- 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 Close diff --git a/test/modal.test.ts b/test/modal.test.ts index 21af968b..ee677e8c 100644 --- 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("", () => { + it("renders with default values", async () => { + const el = await fixture(html``); + assert.shadowDom.equal( + el, + ` + + ` + ); + }); it("should be visible with the open attribute", async () => { const el = await fixture(html` Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -134,4 +194,9 @@ describe("", () => { const el = await fixture(html` `); expect(el.shadowRoot?.querySelector(".modal")).to.have.class("centered"); }); + + it("noCloseButton prop removes button from modal", async () => { + const el = await fixture(html``); + expect(el.shadowRoot.querySelector("button.btn-close")).to.be.null; + }); });