@justeattakeaway/pie-modal 0.10.0 → 0.12.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[2:59:55 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[9:29:39 AM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 23 modules transformed.
+✓ 25 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  13.21 kB │ gzip:  4.16 kB
-dist/react.js  59.04 kB │ gzip: 15.92 kB
+dist/index.js  13.38 kB │ gzip:  4.21 kB
+dist/react.js  59.18 kB │ gzip: 15.97 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 10.22s
-[vite:dts] Declaration files built in 9231ms.
+✓ built in 9.68s
+[vite:dts] Declaration files built in 8742ms.
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @justeattakeaway/pie-modal
 
+## 0.12.0
+
+### Minor Changes
+
+- [Added] - @event jsdoc comments for modal events for react wrapper to analyse ([#612](https://github.com/justeattakeaway/pie/pull/612)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.11.0
+
+### Minor Changes
+
+- [Changed] - Ensure component implements it's props interface ([#611](https://github.com/justeattakeaway/pie/pull/611)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Fixed] - Added IconClose to Visual tests and modal ([#604](https://github.com/justeattakeaway/pie/pull/604)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,5 +1,5 @@
 import { nothing as x, unsafeCSS as D, LitElement as B } from "lit";
-import { html as z, unsafeStatic as E } from "lit/static-html.js";
+import { unsafeStatic as E, html as z } from "lit/static-html.js";
 import { property as u, query as L } from "lit/decorators.js";
 import { property as T } from "lit/decorators/property.js";
 var $ = Object.defineProperty, F = Object.getOwnPropertyDescriptor, A = (n, e, t, o) => {
@@ -176,14 +176,7 @@ class a extends k(B) {
         composed: !0
       });
       this.dispatchEvent(t);
-    }, this.renderCloseButton = () => z`
-        <pie-icon-button
-            @click="${() => {
-      this.isOpen = !1;
-    }}"
-            variant="ghost-secondary"
-            class="c-modal-closeBtn"
-            data-test-id="modal-close-button"></pie-icon-button>`, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
+    }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener(v, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
@@ -256,6 +249,23 @@ class a extends k(B) {
             </dialog>
         `;
   }
+  /**
+   * Template for the close button element. Called within the
+   * main render function.
+   *
+   * @private
+   */
+  renderCloseButton() {
+    return z`
+            <pie-icon-button
+                @click="${() => {
+      this.isOpen = !1;
+    }}"
+                variant="ghost-secondary"
+                class="c-modal-closeBtn"
+                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
+        `;
+  }
 }
 a.styles = D(X);
 s([

package/dist/react.js

@@ -1585,7 +1585,12 @@ const Qr = zr({
   elementClass: Nr,
   react: Vr,
   tagName: "pie-modal",
-  events: {}
+  events: {
+    onpiemodalopen: "pie-modal-open",
+    // when the modal is opened.
+    onpiemodalclose: "pie-modal-close"
+    // when the modal is closed.
+  }
 });
 export {
   Qr as PieModal

package/dist/types/packages/components/pie-modal/src/index.d.ts

@@ -7,7 +7,11 @@ declare const PieModal_base: (new (...args: any[]) => {
     dir: string;
     isRTL: boolean;
 }) & typeof LitElement;
-export declare class PieModal extends PieModal_base {
+/**
+ * @event {CustomEvent} pie-modal-open - when the modal is opened.
+ * @event {CustomEvent} pie-modal-close - when the modal is closed.
+ */
+export declare class PieModal extends PieModal_base implements ModalProps {
     heading: string;
     headingLevel: ModalProps['headingLevel'];
     isDismissible: boolean;

package/dist/types/packages/components/pie-modal/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,EACH,UAAU,EACV,aAAa,EAGb,KAAK,EACR,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC,qBAAa,QAAS,SAAQ,aAAoB;IAGvC,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,mBAAmB,UAAS;IAG5B,MAAM,UAAS;IAGf,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;;IAOhC,iBAAiB,IAAM,IAAI;IAM3B,oBAAoB,IAAM,IAAI;IAM9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IASjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAYpC;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAQpB,MAAM;IA2BN;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB,CAKqC;IAG9D,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,UAAU,EAAW,cAAc,EACtC,MAAM,KAAK,CAAC;AAMb,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,iDAAiD,CAAC;AAEzD,OAAO,EACH,UAAU,EACV,aAAa,EAGb,KAAK,EACR,MAAM,QAAQ,CAAC;AAGhB,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC;AAEjD,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC;;;GAGG;AACH,qBAAa,QAAS,SAAQ,aAAqB,YAAW,UAAU;IAG7D,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,aAAa,UAAS;IAGtB,mBAAmB,UAAS;IAG5B,MAAM,UAAS;IAGf,6BAA6B,CAAC,EAAE,MAAM,CAAC;IAIvC,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGvC,OAAO,CAAC,EAAE,iBAAiB,CAAC;;IAOhC,iBAAiB,IAAM,IAAI;IAM3B,oBAAoB,IAAM,IAAI;IAM9B,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IASjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAI9B;IAGF,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAYpC;;;;OAIG;IACH,OAAO,CAAC,YAAY;IAQpB,MAAM;IA2BN;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAyB/B;IAEF;;;;;;;;;;OAUG;IACH,OAAO,CAAC,yBAAyB,CAO/B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAWzB,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/dist/types/packages/components/pie-modal/src/react.d.ts

@@ -1,3 +1,7 @@
+import { EventName } from '@lit-labs/react';
 import { PieModal as PieModalReact } from './index';
-export declare const PieModal: import("@lit-labs/react").ReactWebComponent<PieModalReact, {}>;
+export declare const PieModal: import("@lit-labs/react").ReactWebComponent<PieModalReact, {
+    onpiemodalopen: EventName<CustomEvent<any>>;
+    onpiemodalclose: EventName<CustomEvent<any>>;
+}>;
 //# sourceMappingURL=react.d.ts.map

package/dist/types/packages/components/pie-modal/src/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAGpD,eAAO,MAAM,QAAQ,gEAMnB,CAAC"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAmB,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,QAAQ;;;EASnB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -23,6 +23,7 @@
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "workspace:*",
     "@justeattakeaway/pie-icon-button": "workspace:*",
+    "@justeattakeaway/pie-icons-webc": "workspace:*",
     "@justeattakeaway/pie-webc-core": "workspace:*",
     "@types/body-scroll-lock": "3.1.0"
   },

package/src/index.ts

@@ -8,6 +8,7 @@ import {
 } from '@justeattakeaway/pie-webc-core';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
+import '@justeattakeaway/pie-icons-webc/icons/IconClose';
 import styles from './modal.scss?inline';
 import {
     ModalProps,
@@ -22,7 +23,11 @@ export { type ModalProps, headingLevels, sizes };
 
 const componentSelector = 'pie-modal';
 
-export class PieModal extends RtlMixin(LitElement) {
+/**
+ * @event {CustomEvent} pie-modal-open - when the modal is opened.
+ * @event {CustomEvent} pie-modal-close - when the modal is closed.
+ */
+export class PieModal extends RtlMixin(LitElement) implements ModalProps {
     @property({ type: String })
     @requiredProperty(componentSelector)
     public heading!: string;
@@ -233,12 +238,15 @@ export class PieModal extends RtlMixin(LitElement) {
      *
      * @private
      */
-    private renderCloseButton = () : TemplateResult => html`
-        <pie-icon-button
-            @click="${() => { this.isOpen = false; }}"
-            variant="ghost-secondary"
-            class="c-modal-closeBtn"
-            data-test-id="modal-close-button"></pie-icon-button>`;
+    private renderCloseButton (): TemplateResult {
+        return html`
+            <pie-icon-button
+                @click="${() => { this.isOpen = false; }}"
+                variant="ghost-secondary"
+                class="c-modal-closeBtn"
+                data-test-id="modal-close-button"><icon-close /></pie-icon-button>
+        `;
+    }
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);