@justeattakeaway/pie-modal 0.5.0 → 0.6.1

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

@@ -1,8 +1,27 @@
 export interface ModalProps {
+    /**
+     * the heading of the modal .
+     */
+    heading: string;
+    /**
+     * the rendered heading tag of the modal header.
+     * @default h2
+     */
     headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * If `true`, the modal will be opened.
+     * @default false
+     */
+    isOpen?: boolean;
 }
 /**
  * Modal heading levels/tags
  */
-export declare const headingLevels: ModalProps['headingLevel'][];
+export declare const headingLevels: Array<ModalProps['headingLevel']>;
+/**
+ * Event name for when the modal is closed.
+ *
+ * @constant
+ */
+export declare const ON_MODAL_CLOSE_EVENT = "pie-modal-close";
 //# sourceMappingURL=defs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,EAAyC,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAwC,CAAC;AAErG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}

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

@@ -10,7 +10,16 @@ export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
-    render(): import("lit-html").TemplateResult<1 | 2>;
+    _dialog: HTMLDialogElement;
+    render(): import("lit-html").TemplateResult;
+    _handleCloseDialog: () => void;
+    /**
+     * Dispatch `ON_MODAL_CLOSE_EVENT` event.
+     * To be used whenever we close the modal.
+     *
+     * @event
+     */
+    _onDialogClose: () => void;
     static styles: import("lit").CSSResult;
 }
 declare global {

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,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGnD,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,CAAC;AAE1C,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC,qBAAa,QAAS,SAAQ,aAAoB;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAEpD,MAAM;IAoBN,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,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,EAAE,UAAU,EAAE,aAAa,EAAwB,MAAM,QAAQ,CAAC;AAGzE,OAAO,EAAE,KAAK,UAAU,EAAE,aAAa,EAAE,CAAC;AAE1C,QAAA,MAAM,iBAAiB,cAAc,CAAC;;;;;AAEtC,qBAAa,QAAS,SAAQ,aAAoB;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAGhD,OAAO,EAAE,iBAAiB,CAAC;IAE/B,MAAM;IA2BN,kBAAkB,aAGhB;IAEF;;;;;OAKG;IACH,cAAc,aAGZ;IAGF,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,QAAQ,CAAC;KACjC;CACJ"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -8,6 +8,8 @@
   "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "yarn build:wrapper pie-modal && run -T vite build",
+    "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
+    "lint:style:fix": "yarn lint:style --fix",
     "watch": "run -T vite build --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
     "test:ci": "yarn test",

package/src/defs.ts

@@ -1,8 +1,28 @@
 export interface ModalProps {
+    /**
+     * the heading of the modal .
+     */
+    heading: string;
+    /**
+     * the rendered heading tag of the modal header.
+     * @default h2
+     */
     headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * If `true`, the modal will be opened.
+     * @default false
+     */
+    isOpen?: boolean;
 }
 
 /**
  * Modal heading levels/tags
  */
-export const headingLevels: ModalProps['headingLevel'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+export const headingLevels: Array<ModalProps['headingLevel']> = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+/**
+ * Event name for when the modal is closed.
+ *
+ * @constant
+ */
+export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';

package/src/index.ts

@@ -1,10 +1,10 @@
-import { LitElement, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
+import { LitElement, unsafeCSS } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
-import { property } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
+import { property, query } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
 import { RtlMixin, validPropertyValues, requiredProperty } from '@justeattakeaway/pie-webc-core';
 
 import styles from './modal.scss?inline';
-import { ModalProps, headingLevels } from './defs';
+import { ModalProps, headingLevels, ON_MODAL_CLOSE_EVENT } from './defs';
 
 // Valid values available to consumers
 export { type ModalProps, headingLevels };
@@ -23,25 +23,52 @@ export class PieModal extends RtlMixin(LitElement) {
     @validPropertyValues(componentSelector, headingLevels, 'h2')
         headingLevel: ModalProps['headingLevel'] = 'h2';
 
+    @query('dialog')
+        _dialog: HTMLDialogElement;
+
     render () {
         const {
             isOpen,
             heading,
-            headingLevel,
+            headingLevel = 'h2',
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog class="c-modal" ?open="${isOpen}">
-                <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
-                <div class="c-modal-contentWrapper">
-                    <slot></slot>
-                </div>
+            <dialog id="dialog" class="c-modal" ?open="${isOpen}">
+                <header>
+                    <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
+                    <pie-icon-button
+                        @click="${this._handleCloseDialog}"
+                        variant="ghost-tertiary"
+                        class="c-modal-closeBtn"></pie-icon-button>
+                </header>
+                <article>
+                    <div class="c-modal-content">
+                        <slot></slot>
+                    </div>
+                </article>
             </dialog>
         `;
     }
 
+    _handleCloseDialog = () => {
+        this._dialog.close();
+        this._onDialogClose();
+    };
+
+    /**
+     * Dispatch `ON_MODAL_CLOSE_EVENT` event.
+     * To be used whenever we close the modal.
+     *
+     * @event
+     */
+    _onDialogClose = () => {
+        const event = new CustomEvent(ON_MODAL_CLOSE_EVENT);
+        this.dispatchEvent(event);
+    };
+
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 }

package/src/modal.scss

@@ -1,51 +1,62 @@
-$modal-size-l: 1080px;
-$modal-size-m: 600px;
-$modal-size-s: 450px;
-
-$modal-border-radius: var(--dt-radius-rounded-d);
-$modal-font: var(--dt-font-interactive-m-family);
-$modal-bg-color: var(--dt-color-container-default);
-$modal-elevation: var(--dt-elevation-04);
-
-$modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
-$modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
-$modal-header-font-weight: var(--dt-font-heading-m-weight);
-$modal-header-padding: var(--dt-spacing-e);
-$modal-header-padding-block-end: var(--dt-spacing-d);
-
-$modal-contentWrapper-font-size: calc(var(--dt-font-size-16) * 1px);
-$modal-contentWrapper-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
-$modal-contentWrapper-font-weight: var(--dt-font-weight-regular);
-$modal-contentWrapper-padding: var(--dt-spacing-e);
-$modal-contentWrapper-padding-block-start: var(--dt-spacing-a);
-
 .c-modal {
-  border-radius: $modal-border-radius;
-  border: none;
-  font-family: $modal-font;
-  background-color: $modal-bg-color;
-
-  padding: 0;
-  inline-size: $modal-size-m;
-
-  box-shadow: $modal-elevation;
-
-  & .c-modal-heading {
-    font-size: $modal-header-font-size;
-    line-height: $modal-header-font-line-height;
-    font-weight: $modal-header-font-weight;
-
-    margin: 0;
-    padding-block: $modal-header-padding $modal-header-padding-block-end;
-    padding-inline: $modal-header-padding;
-  }
-
-  & .c-modal-contentWrapper {
-    font-size: $modal-contentWrapper-font-size;
-    line-height: $modal-contentWrapper-line-height;
-    font-weight: $modal-contentWrapper-font-weight;
-
-    padding-block: $modal-contentWrapper-padding-block-start $modal-contentWrapper-padding;
-    padding-inline: $modal-contentWrapper-padding;
-  }
+    // Custom Property Declarations
+    // These are defined here instead of :host to encapsulate them inside Shadow DOM
+    --modal-size-s: 450px;
+    --modal-size-m: 600px;
+    --modal-size-l: 1080px;
+
+    // The base modal defaults
+    --modal-border-radius: var(--dt-radius-rounded-d);
+    --modal-font: var(--dt-font-interactive-m-family);
+    --modal-bg-color: var(--dt-color-container-default);
+    --modal-elevation: var(--dt-elevation-04);
+
+    border-radius: var(--modal-border-radius);
+    border: none;
+    font-family: var(--modal-font);
+    background-color: var(--modal-bg-color);
+
+    padding: 0;
+    inline-size: var(--modal-size-m);
+
+    box-shadow: var(--modal-elevation);
+
+    & .c-modal-heading {
+        // Modal header Custom Props
+        --modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
+        --modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
+        --modal-header-font-weight: var(--dt-font-heading-m-weight);
+        --modal-header-padding: var(--dt-spacing-e);
+        --modal-header-padding-block-end: var(--dt-spacing-d);
+
+        font-size: var(--modal-header-font-size);
+        line-height: var(--modal-header-font-line-height);
+        font-weight: var(--modal-header-font-weight);
+
+        margin: 0;
+        padding-block: var(--modal-header-padding) var(--modal-header-padding-block-end);
+        padding-inline: var(--modal-header-padding);
+    }
+
+    & .c-modal-content {
+        // Modal content Custom Props
+        --modal-content-font-size: calc(var(--dt-font-size-16) * 1px);
+        --modal-content-font-weight: var(--dt-font-weight-regular);
+        --modal-content-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+        --modal-content-padding: var(--dt-spacing-e);
+        --modal-content-padding-block-start: var(--dt-spacing-a);
+
+        font-size: var(--modal-content-font-size);
+        line-height: var(--modal-content-line-height);
+        font-weight: var(--modal-content-font-weight);
+
+        padding-block: var(--modal-content-padding-block-start) var(--modal-content-padding);
+        padding-inline: var(--modal-content-padding);
+    }
+
+    & .c-modal-closeBtn {
+        position: absolute;
+        right: var(--dt-spacing-d);
+        top: var(--dt-spacing-d);
+    }
 }

package/test/component/pie-modal.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
+import * as events from 'events';
 import { PieModal } from '@/index';
 import { headingLevels } from '@/defs';
 
@@ -25,3 +26,28 @@ headingLevels.forEach((headingLevel) => test(`should render the correct heading
     // h2 is the default / fallback value
     await expect(component.locator('h2.c-modal-heading')).toContainText(props.heading);
 }));
+
+test.describe('`When the Pie Modal is closed`', () => {
+    test.skip('should dispatch event `pie-modal-close`', async ({ mount }) => {
+        const messages: string[] = [];
+        const component = await mount(
+            PieModal,
+            {
+                props: {
+                    isOpen: true,
+                },
+            },
+        );
+
+        await component.update({
+            on: {
+                click: (event: string) => messages.push(event),
+            },
+        });
+
+        await component.locator('.c-modal-closeBtn').click({ });
+
+        expect(messages).toHaveLength(1);
+    });
+});
+

package/vite.config.js

@@ -1,3 +1,3 @@
-import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
 
 export default viteConfig;