@justeattakeaway/pie-modal 0.3.0 → 0.5.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[11:03:18 AM] @custom-elements-manifest/analyzer: Created new manifest.
+[3:48:32 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
-vite v4.2.1 building for production...
+vite v4.2.3 building for production...
 transforming...
-✓ 17 modules transformed.
+✓ 28 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   1.46 kB │ gzip:  0.76 kB
-dist/react.js  59.09 kB │ gzip: 15.93 kB
+dist/index.js   5.83 kB │ gzip:  2.00 kB
+dist/react.js  59.15 kB │ gzip: 15.94 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 35.44s
-[vite:dts] Declaration files built in 33629ms.
+✓ built in 30.45s
+[vite:dts] Declaration files built in 28192ms.
 

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @justeattakeaway/pie-modal
 
+## 0.5.0
+
+### Minor Changes
+
+- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
+
+## 0.4.0
+
+### Minor Changes
+
+- [Added] - `heading` and `headingLevel` props to the modal component ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
+
+- [Added] - Modal heading added to component ([#513](https://github.com/justeattakeaway/pie/pull/513)) by [@fernandofranca](https://github.com/fernandofranca)
+
+  [Added] - Basic styling for modal default state
+
+- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] prop to control modal open & close state ([#527](https://github.com/justeattakeaway/pie/pull/527)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+### Patch Changes
+
+- [Fixed] - PieModal CSS by adding logical property ([#521](https://github.com/justeattakeaway/pie/pull/521)) by [@fernandofranca](https://github.com/fernandofranca)
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -8,6 +8,13 @@
   </a>
 </p>
 
+# Table of Contents
+
+1. [Introduction](#pie-modal)
+2. [Local Development](#local-development)
+3. [Importing the component](#importing-the-component)
+4. [Props](#props)
+
 # pie-modal
 
 This modal is a Web Component built using Lit.
@@ -39,3 +46,36 @@ import { PieModal } from '@justeattakeaway/pie-button';
 // react
 import { PieModal } from '@justeattakeaway/pie-button/dist/react';
 ```
+
+## Props
+
+| Property | Type      | Default | Description                                     |
+|----------|-----------|---------|-------------------------------------------------|
+| isOpen   | `Boolean` | `false` | Controls if the modal element is open or closed |
+| heading*   | `String` | - | Sets the heading of the modal |
+| headingLevel   | `String` | `h2` | Allows you to set the heading tag (from `h1` to `h6`) |
+
+
+## Testing
+
+### Visual tests
+
+Run at the root of the monorepo:
+```
+yarn test:visual --filter=pie-modal
+```
+
+Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
+
+### Setup via bash:
+
+```
+export PERCY_TOKEN_PIE_MODAL=abcde
+```
+
+### Setup via package.json:
+
+Under scripts `test:visual` replace the environment variable with the below:
+
+```
+PERCY_TOKEN_PIE_MODAL=abcde

package/dist/index.js

@@ -1,12 +1,14 @@
-import { html as n, LitElement as p } from "lit";
-import { property as d } from "lit/decorators/property.js";
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, m = (i, e, s, t) => {
-  for (var r = t > 1 ? void 0 : t ? f(e, s) : e, o = i.length - 1, l; o >= 0; o--)
-    (l = i[o]) && (r = (t ? l(e, s, r) : l(r)) || r);
-  return t && r && u(e, s, r), r;
+import { unsafeCSS as h, LitElement as v, html as g } from "lit";
+import { unsafeStatic as u, html as b } from "lit/static-html.js";
+import { property as d } from "lit/decorators.js";
+import { property as $ } from "lit/decorators/property.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (s, r, n, t) => {
+  for (var e = t > 1 ? void 0 : t ? w(r, n) : r, o = s.length - 1, i; o >= 0; o--)
+    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
+  return t && e && y(r, n, e), e;
 };
-const a = (i) => {
-  class e extends i {
+const _ = (s) => {
+  class r extends s {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -24,20 +26,115 @@ const a = (i) => {
       return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
     }
   }
-  return m([
-    d({ type: String })
-  ], e.prototype, "dir", 2), e;
+  return P([
+    $({ type: String })
+  ], r.prototype, "dir", 2), r;
+}, O = (s, r, n) => function(t, e) {
+  const o = `#${e}`;
+  Object.defineProperty(t, e, {
+    get() {
+      return this[o];
+    },
+    set(i) {
+      const m = this[o];
+      r.includes(i) ? this[o] = i : (console.error(
+        `<${s}> Invalid value "${i}" provided for property "${e}".`,
+        `Must be one of: ${r.join(" | ")}.`,
+        `Falling back to default value: "${n}"`
+      ), this[o] = n), this.requestUpdate(e, m);
+    }
+  });
+}, x = (s) => function(r, n) {
+  const t = `#${n}`;
+  Object.defineProperty(r, n, {
+    get() {
+      return this[t];
+    },
+    set(e) {
+      const o = this[t];
+      (e == null || e === "") && console.error(`<${s}> Missing required attribute "${n}"`), this[t] = e, this.requestUpdate(n, o);
+    }
+  });
+}, C = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
+`;
+var T = Object.defineProperty, W = Object.getOwnPropertyDescriptor, j = (s, r, n, t) => {
+  for (var e = t > 1 ? void 0 : t ? W(r, n) : r, o = s.length - 1, i; o >= 0; o--)
+    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
+  return t && e && T(r, n, e), e;
 };
-class c extends a(p) {
+class p extends v {
+  constructor() {
+    super(...arguments), this.propKeyValues = "";
+  }
+  // Renders a string such as 'size: small, isFullWidth: true'
+  // as HTML such as:
+  // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
+  // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
+  _renderPropKeyValues() {
+    return this.propKeyValues.split(",").map((r) => {
+      const [n, t] = r.split(":");
+      return g`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${t}</code></p>`;
+    });
+  }
   // eslint-disable-next-line class-methods-use-this
   render() {
-    return n`
-            <div>This is the Pie Modal
-                <slot></slot>
+    return g`
+            <div class="c-webComponentTestWrapper">
+                ${this._renderPropKeyValues()}
+                <div class="c-webComponentTestWrapper-slot">
+                    <slot></slot>
+                </div>
             </div>`;
   }
 }
-customElements.define("pie-modal", c);
+p.styles = h(C);
+j([
+  d({ type: String })
+], p.prototype, "propKeyValues", 2);
+const f = "web-component-test-wrapper";
+customElements.get(f) || customElements.define(f, p);
+const S = `.c-modal{border-radius:var(--dt-radius-rounded-d);border:none;font-family:var(--dt-font-interactive-m-family);background-color:var(--dt-color-container-default);padding:0;inline-size:600px;box-shadow:var(--dt-elevation-04)}.c-modal .c-modal-heading{font-size:calc(var(--dt-font-heading-m-size--wide) * 1px);line-height:calc(var(--dt-font-heading-m-line-height--wide) * 1px);font-weight:var(--dt-font-heading-m-weight);margin:0;padding-block:var(--dt-spacing-e) var(--dt-spacing-d);padding-inline:var(--dt-spacing-e)}.c-modal .c-modal-contentWrapper{font-size:calc(var(--dt-font-size-16) * 1px);line-height:calc(var(--dt-font-size-16-line-height) * 1px);font-weight:var(--dt-font-weight-regular);padding-block:var(--dt-spacing-a) var(--dt-spacing-e);padding-inline:var(--dt-spacing-e)}
+`, z = ["h1", "h2", "h3", "h4", "h5", "h6"];
+var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (s, r, n, t) => {
+  for (var e = t > 1 ? void 0 : t ? D(r, n) : r, o = s.length - 1, i; o >= 0; o--)
+    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
+  return t && e && L(r, n, e), e;
+};
+const c = "pie-modal";
+class a extends _(v) {
+  constructor() {
+    super(...arguments), this.isOpen = !1, this.headingLevel = "h2";
+  }
+  render() {
+    const {
+      isOpen: r,
+      heading: n,
+      headingLevel: t
+    } = this, e = u(t);
+    return b`
+            <dialog class="c-modal" ?open="${r}">
+                <${e} class="c-modal-heading">${n}</${e}>
+                <div class="c-modal-contentWrapper">
+                    <slot></slot>
+                </div>
+            </dialog>
+        `;
+  }
+}
+a.styles = h(S);
+l([
+  d({ type: Boolean })
+], a.prototype, "isOpen", 2);
+l([
+  d({ type: String }),
+  x(c)
+], a.prototype, "heading", 2);
+l([
+  d(),
+  O(c, z, "h2")
+], a.prototype, "headingLevel", 2);
+customElements.define(c, a);
 export {
-  c as PieModal
+  a as PieModal,
+  z as headingLevels
 };

package/dist/react.js

@@ -1,5 +1,7 @@
 import { PieModal as Ir } from "./index.js";
 import "lit";
+import "lit/static-html.js";
+import "lit/decorators.js";
 import "lit/decorators/property.js";
 function Nr(h, c) {
   for (var U = 0; U < c.length; U++) {
@@ -1592,7 +1594,7 @@ function Br(h = window.React, c, U, T, A) {
   const J = k.forwardRef((D, P) => F(H, { ...D, _$Gl: P }, D == null ? void 0 : D.children));
   return J.displayName = H.displayName, J;
 }
-const Kr = Br({
+const Jr = Br({
   displayName: "PieModal",
   elementClass: Ir,
   react: Wr,
@@ -1600,5 +1602,5 @@ const Kr = Br({
   events: {}
 });
 export {
-  Kr as PieModal
+  Jr as PieModal
 };

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

@@ -0,0 +1,8 @@
+export interface ModalProps {
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+/**
+ * Modal heading levels/tags
+ */
+export declare const headingLevels: ModalProps['headingLevel'][];
+//# sourceMappingURL=defs.d.ts.map

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

@@ -0,0 +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"}

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

@@ -1,15 +1,21 @@
 import { LitElement } from 'lit';
+import { ModalProps, headingLevels } from './defs';
+export { type ModalProps, headingLevels };
+declare const componentSelector = "pie-modal";
 declare const PieModal_base: (new (...args: any[]) => {
     dir: string;
     isRTL: boolean;
 }) & typeof LitElement;
 export declare class PieModal extends PieModal_base {
-    render(): import("lit-html").TemplateResult<1>;
+    isOpen: boolean;
+    heading: string;
+    headingLevel: ModalProps['headingLevel'];
+    render(): import("lit-html").TemplateResult<1 | 2>;
+    static styles: import("lit").CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-modal': PieModal;
+        [componentSelector]: PieModal;
     }
 }
-export {};
 //# sourceMappingURL=index.d.ts.map

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,EAAQ,MAAM,KAAK,CAAC;;;;;AAGvC,qBAAa,QAAS,SAAQ,aAAoB;IAE9C,MAAM;CAMT;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;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,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"}

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "scripts": {
-    "build": "yarn build:wrapper pie-modal && run -T vite build --config ../../../configs/pie-components-config/vite.config.js",
-    "watch": "run -T vite build --config ../../../configs/pie-components-config/vite.config.js --watch",
+    "build": "yarn build:wrapper pie-modal && run -T vite build",
+    "watch": "run -T vite build --watch",
     "test": "echo \"Error: no test specified\" && exit 0",
-    "test:ci": "yarn test"
+    "test:ci": "yarn test",
+    "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
+    "test:browsers:ci": "yarn test:browsers",
+    "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_MODAL} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
+    "test:visual:ci": "yarn test:visual"
   },
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",
-  "dependencies": {
-    "@justeattakeaway/pie-webc-core": "workspace:*"
-  },
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "workspace:*"
+    "@justeattakeaway/pie-components-config": "workspace:*",
+    "@justeattakeaway/pie-webc-core": "workspace:*"
   },
   "volta": {
     "extends": "../../../package.json"

package/playwright/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
+    <style>
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
+            font-weight: 400;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
+            font-weight: 700;
+            font-display: swap;
+        }
+        @font-face {
+            font-family: JETSansDigital;
+            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
+            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
+            font-weight: 800;
+            font-display: swap;
+        }
+        body {
+            font-feature-settings: "tnum"; /* Enable tabular numbers */
+        }
+        /* basic styles to center align components and give them some spacing */
+        #root {
+            padding: 1em;
+        }
+
+        #root > * {
+            display: block;
+            margin-inline: auto;
+        }
+
+        #root > * + * {
+            margin-top: 1em;
+        }
+    </style>
+    <title>Testing Page</title>
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
+    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+</body>
+</html>

package/playwright/index.ts

@@ -0,0 +1 @@
+//Import common styles here

package/playwright-lit-visual.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
+
+// @ts-ignore
+export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from '@sand4rt/experimental-ct-web';
+import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config'
+
+// @ts-ignore
+export default defineConfig(getPlaywrightConfig());

package/src/defs.ts

@@ -0,0 +1,8 @@
+export interface ModalProps {
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
+/**
+ * Modal heading levels/tags
+ */
+export const headingLevels: ModalProps['headingLevel'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

package/src/index.ts

@@ -1,20 +1,55 @@
-import { LitElement, html } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
-import { RtlMixin } from '@justeattakeaway/pie-webc-core';
+import { LitElement, unsafeCSS } from 'lit'; // eslint-disable-line import/no-extraneous-dependencies
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { property } 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';
+
+// Valid values available to consumers
+export { type ModalProps, headingLevels };
+
+const componentSelector = 'pie-modal';
 
 export class PieModal extends RtlMixin(LitElement) {
-    // eslint-disable-next-line class-methods-use-this
+    @property({ type: Boolean })
+        isOpen = false;
+
+    @property({ type: String })
+    @requiredProperty(componentSelector)
+        heading!: string;
+
+    @property()
+    @validPropertyValues(componentSelector, headingLevels, 'h2')
+        headingLevel: ModalProps['headingLevel'] = 'h2';
+
     render () {
+        const {
+            isOpen,
+            heading,
+            headingLevel,
+        } = this;
+
+        const headingTag = unsafeStatic(headingLevel);
+
         return html`
-            <div>This is the Pie Modal
-                <slot></slot>
-            </div>`;
+            <dialog class="c-modal" ?open="${isOpen}">
+                <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
+                <div class="c-modal-contentWrapper">
+                    <slot></slot>
+                </div>
+            </dialog>
+        `;
     }
+
+    // Renders a `CSSResult` generated from SCSS by Vite
+    static styles = unsafeCSS(styles);
 }
 
-customElements.define('pie-modal', PieModal);
+customElements.define(componentSelector, PieModal);
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-modal': PieModal;
+        [componentSelector]: PieModal;
     }
 }

package/src/modal.scss

@@ -0,0 +1,51 @@
+$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;
+  }
+}

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

@@ -0,0 +1,27 @@
+import { test, expect } from '@sand4rt/experimental-ct-web';
+import { PieModal } from '@/index';
+import { headingLevels } from '@/defs';
+
+headingLevels.forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => {
+    const props = {
+        heading: 'Modal Header',
+        headingLevel,
+    };
+
+    const component = await mount(PieModal, { props });
+
+    await expect(component.locator(`${props.headingLevel}.c-modal-heading`)).toContainText(props.heading);
+}));
+
+['span', 'section'].forEach((headingLevel) => test(`should render the fallback heading level 'h2' if invalid headingLevel: ${headingLevel} is passed`, async ({ mount }) => {
+    const props = {
+        heading: 'Modal Header',
+        // assert type checking as we purposely provide incorrect value
+        headingLevel,
+    };
+
+    const component = await mount(PieModal, { props });
+
+    // h2 is the default / fallback value
+    await expect(component.locator('h2.c-modal-heading')).toContainText(props.heading);
+}));

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

@@ -0,0 +1,20 @@
+import { test } from '@sand4rt/experimental-ct-web';
+import percySnapshot from '@percy/playwright';
+import { PieModal } from '@/index';
+import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
+
+const propIsOpenValues = [{ heading: 'Modal Heading', isOpen: true }, { isOpen: false }];
+
+propIsOpenValues.forEach((props) => test(`should render Modal correctly when prop isOpen is set to ${props.isOpen}`, async ({ page, mount }) => {
+    await mount(
+        PieModal,
+        {
+            props,
+            slots: {
+                default: 'Hello, this is the Pie Modal!',
+            },
+        },
+    );
+
+    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`, getLitPercyOptions());
+}));

package/vite.config.js

@@ -1,23 +1,3 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { defineConfig } from 'vite';
-import dts from 'vite-plugin-dts';
+import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
 
-// https://vitejs.dev/config/
-export default defineConfig({
-    build: {
-        lib: {
-            entry: {
-                index: 'src/index.ts',
-                react: 'src/react.ts'
-            },
-            formats: ['es'],
-        },
-        rollupOptions: {
-            external: /^lit/,
-        },
-    },
-    plugins: [dts({
-        insertTypesEntry: true,
-        outputDir: 'dist/types',
-    })],
-});
+export default viteConfig;