@justeattakeaway/pie-modal 0.6.0 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,19 +1,14 @@
-[3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[4:04:52 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 28 modules transformed.
+✓ 30 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   7.43 kB │ gzip:  2.38 kB
+dist/index.js  13.55 kB │ gzip:  4.16 kB
 dist/react.js  59.04 kB │ gzip: 15.92 kB
 
 [vite:dts] Start generate declaration files...
-src/index.ts:27:9 - error TS2564: Property '_dialog' has no initializer and is not definitely assigned in the constructor.
-
-27         _dialog: HTMLDialogElement;
-           ~~~~~~~
-
-✓ built in 28.25s
-[vite:dts] Declaration files built in 26028ms.
+✓ built in 28.39s
+[vite:dts] Declaration files built in 26000ms.
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @justeattakeaway/pie-modal
 
+## 0.7.0
+
+### Minor Changes
+
+- [Added] - Modal backdrop functionality ([#559](https://github.com/justeattakeaway/pie/pull/559)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+- [Added] - Scroll locking to modal ([#564](https://github.com/justeattakeaway/pie/pull/564)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.6.1
+
+### Patch Changes
+
+- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -17,65 +17,92 @@
 
 # pie-modal
 
-This modal is a Web Component built using Lit.
+`pie-modal` is a Web Component built using the Lit library. It offers a simple and accessible modal component for web applications, which uses the native HTML `dialog` element under the hood.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 ## Local development
 
-Install dependencies at the root
-```
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
 yarn
 ```
 
-Navigate to this folder, compile with TypeScript and build with Vite
-```
-cd packages/components/pie-modal
-yarn build
-```
+To build the `pie-modal` package, run the following command:
 
-Compile and watch for changes (auto-compiles `dist` on save)
+```bash
+yarn build --filter=pie-modal
 ```
-yarn watch
+
+If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
+
+```bash
+yarn watch --filter=pie-modal
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
 ```
 
 ### Importing the component
 
-```javascript
+```js
 // default
-import { PieModal } from '@justeattakeaway/pie-button';
+import { PieModal } from '@justeattakeaway/pie-modal';
 
 // react
-import { PieModal } from '@justeattakeaway/pie-button/dist/react';
+import { PieModal } from '@justeattakeaway/pie-modal/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`) |
+| 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`) |
+
 
+In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
+
+```html
+<!-- Native HTML -->
+<pie-modal heading='My Awesome Heading' headingLevel='h3'>Click me!</pie-modal>
+
+<!-- JSX -->
+<PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
+```
 
 ## Testing
 
-### Visual tests
+### Browser tests
+
+To run the browser tests, run the following command from the root of the monorepo:
 
-Run at the root of the monorepo:
+```bash
+yarn test:browsers --filter=pie-modal
 ```
+
+### Visual tests
+
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
 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:
+#### Setup via bash
 
-```
+```bash
 export PERCY_TOKEN_PIE_MODAL=abcde
 ```
 
-### Setup via package.json:
+#### Setup via package.json
 
 Under scripts `test:visual` replace the environment variable with the below:
 
-```
+```bash
 PERCY_TOKEN_PIE_MODAL=abcde
+```

package/dist/index.js

@@ -1,14 +1,14 @@
-import { unsafeCSS as g, LitElement as v, html as m } from "lit";
-import { unsafeStatic as u, html as b } from "lit/static-html.js";
-import { property as s, query as _ } from "lit/decorators.js";
-import { property as w } from "lit/decorators/property.js";
-var y = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, P = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? $(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && y(t, n, e), e;
+import { unsafeCSS as T, LitElement as $, html as w } from "lit";
+import { unsafeStatic as D, html as z } from "lit/static-html.js";
+import { property as u, query as B } from "lit/decorators.js";
+import { property as k } from "lit/decorators/property.js";
+var V = Object.defineProperty, R = Object.getOwnPropertyDescriptor, A = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? R(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && V(e, t, o), o;
 };
-const O = (r) => {
-  class t extends r {
+const W = (i) => {
+  class e extends i {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,135 +22,282 @@ const O = (r) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var o;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
+      var n;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((n = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : n.direction) === "rtl";
     }
   }
-  return P([
-    w({ type: String })
-  ], t.prototype, "dir", 2), t;
-}, C = (r, t, n) => function(o, e) {
-  const a = `#${e}`;
-  Object.defineProperty(o, e, {
+  return A([
+    k({ type: String })
+  ], e.prototype, "dir", 2), e;
+}, j = (i, e, t) => function(o, r) {
+  const d = `#${r}`;
+  Object.defineProperty(o, r, {
     get() {
-      return this[a];
+      return this[d];
     },
-    set(i) {
-      const f = this[a];
-      t.includes(i) ? this[a] = i : (console.error(
-        `<${r}> Invalid value "${i}" provided for property "${e}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[a] = n), this.requestUpdate(e, f);
+    set(f) {
+      const h = this[d];
+      e.includes(f) ? this[d] = f : (console.error(
+        `<${i}> Invalid value "${f}" provided for property "${r}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${t}"`
+      ), this[d] = t), this.requestUpdate(r, h);
     }
   });
-}, x = (r) => function(t, n) {
+}, q = (i) => function(t, n) {
   const o = `#${n}`;
   Object.defineProperty(t, n, {
     get() {
       return this[o];
     },
-    set(e) {
-      const a = this[o];
-      (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
+    set(r) {
+      const d = this[o];
+      (r == null || typeof r == "string" && r.trim() === "") && console.error(`<${i}> Missing required attribute "${n}"`), this[o] = r, this.requestUpdate(n, d);
     }
   });
-}, z = `.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)}
+}, I = `.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 D = Object.defineProperty, T = Object.getOwnPropertyDescriptor, E = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? T(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && D(t, n, e), e;
+var F = Object.defineProperty, H = Object.getOwnPropertyDescriptor, E = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? H(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && F(e, t, o), o;
 };
-class c extends v {
+class b extends $ {
   constructor() {
-    super(...arguments), this.propKeyValues = "";
+    super(...arguments), this.propKeyValues = "", this.pageMode = !1;
   }
   // 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((t) => {
-      const [n, o] = t.split(":");
-      return m`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${o}</code></p>`;
+    return this.propKeyValues.split(",").map((e) => {
+      const [t, n] = e.split(":");
+      return w`<p class="c-webComponentTestWrapper-label"><b>${t}</b>: <code>${n}</code></p>`;
     });
   }
-  // eslint-disable-next-line class-methods-use-this
   render() {
-    return m`
+    return this.pageMode ? w`
+            <div>
+                <slot name="component"></slot>
+                <slot name="pageMarkup"></slot>
+            </div>` : w`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
+                    <slot name="component"></slot>
                 </div>
             </div>`;
   }
 }
-c.styles = g(z);
+b.styles = T(I);
+E([
+  u({ type: String })
+], b.prototype, "propKeyValues", 2);
 E([
-  s({ type: String })
-], c.prototype, "propKeyValues", 2);
-const h = "web-component-test-wrapper";
-customElements.get(h) || customElements.define(h, c);
-const S = `.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--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 .c-modal-heading{--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 .c-modal-content{--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 .c-modal-closeBtn{position:absolute;right:var(--dt-spacing-d);top:var(--dt-spacing-d)}
-`, j = ["h1", "h2", "h3", "h4", "h5", "h6"], L = "pie-modal-close";
-var W = Object.defineProperty, V = Object.getOwnPropertyDescriptor, l = (r, t, n, o) => {
-  for (var e = o > 1 ? void 0 : o ? V(t, n) : t, a = r.length - 1, i; a >= 0; a--)
-    (i = r[a]) && (e = (o ? i(t, n, e) : i(e)) || e);
-  return o && e && W(t, n, e), e;
+  u({ type: Boolean })
+], b.prototype, "pageMode", 2);
+const C = "web-component-test-wrapper";
+customElements.get(C) || customElements.define(C, b);
+function N(i) {
+  if (Array.isArray(i)) {
+    for (var e = 0, t = Array(i.length); e < i.length; e++)
+      t[e] = i[e];
+    return t;
+  } else
+    return Array.from(i);
+}
+var P = !1;
+if (typeof window < "u") {
+  var M = {
+    get passive() {
+      P = !0;
+    }
+  };
+  window.addEventListener("testPassive", null, M), window.removeEventListener("testPassive", null, M);
+}
+var v = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), s = [], m = !1, x = -1, c = void 0, a = void 0, p = void 0, L = function(e) {
+  return s.some(function(t) {
+    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
+  });
+}, g = function(e) {
+  var t = e || window.event;
+  return L(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}, Y = function(e) {
+  if (p === void 0) {
+    var t = !!e && e.reserveScrollBarGap === !0, n = window.innerWidth - document.documentElement.clientWidth;
+    if (t && n > 0) {
+      var o = parseInt(window.getComputedStyle(document.body).getPropertyValue("padding-right"), 10);
+      p = document.body.style.paddingRight, document.body.style.paddingRight = o + n + "px";
+    }
+  }
+  c === void 0 && (c = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, U = function() {
+  p !== void 0 && (document.body.style.paddingRight = p, p = void 0), c !== void 0 && (document.body.style.overflow = c, c = void 0);
+}, X = function() {
+  return window.requestAnimationFrame(function() {
+    if (a === void 0) {
+      a = {
+        position: document.body.style.position,
+        top: document.body.style.top,
+        left: document.body.style.left
+      };
+      var e = window, t = e.scrollY, n = e.scrollX, o = e.innerHeight;
+      document.body.style.position = "fixed", document.body.style.top = -t, document.body.style.left = -n, setTimeout(function() {
+        return window.requestAnimationFrame(function() {
+          var r = o - window.innerHeight;
+          r && t >= o && (document.body.style.top = -(t + r));
+        });
+      }, 300);
+    }
+  });
+}, K = function() {
+  if (a !== void 0) {
+    var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
+    document.body.style.position = a.position, document.body.style.top = a.top, document.body.style.left = a.left, window.scrollTo(t, e), a = void 0;
+  }
+}, G = function(e) {
+  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
+}, J = function(e, t) {
+  var n = e.targetTouches[0].clientY - x;
+  return L(e.target) ? !1 : t && t.scrollTop === 0 && n > 0 || G(t) && n < 0 ? g(e) : (e.stopPropagation(), !0);
+}, Q = function(e, t) {
+  if (!e) {
+    console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
+    return;
+  }
+  if (!s.some(function(o) {
+    return o.targetElement === e;
+  })) {
+    var n = {
+      targetElement: e,
+      options: t || {}
+    };
+    s = [].concat(N(s), [n]), v ? X() : Y(t), v && (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (x = o.targetTouches[0].clientY);
+    }, e.ontouchmove = function(o) {
+      o.targetTouches.length === 1 && J(o, e);
+    }, m || (document.addEventListener("touchmove", g, P ? { passive: !1 } : void 0), m = !0));
+  }
+}, Z = function(e) {
+  if (!e) {
+    console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
+    return;
+  }
+  s = s.filter(function(t) {
+    return t.targetElement !== e;
+  }), v && (e.ontouchstart = null, e.ontouchmove = null, m && s.length === 0 && (document.removeEventListener("touchmove", g, P ? { passive: !1 } : void 0), m = !1)), v ? K() : U();
 };
-const p = "pie-modal";
-class d extends O(v) {
+const ee = `.c-modal{--modal-size-s: 450px;--modal-size-m: 600px;--modal-size-l: 1080px;--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::backdrop{background:rgba(0,0,0,.5)}.c-modal .c-modal-heading{--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 .c-modal-content{--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);overflow-y:scroll;max-block-size:300px}.c-modal .c-modal-closeBtn{position:absolute;inset-inline-end:var(--dt-spacing-d);inset-block-start:var(--dt-spacing-d)}
+`, te = ["h1", "h2", "h3", "h4", "h5", "h6"], _ = "pie-modal-close", O = "pie-modal-open";
+var oe = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, y = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? ne(e, t) : e, r = i.length - 1, d; r >= 0; r--)
+    (d = i[r]) && (o = (n ? d(e, t, o) : d(o)) || o);
+  return n && o && oe(e, t, o), o;
+};
+const S = "pie-modal";
+class l extends W($) {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.headingLevel = "h2", this._handleCloseDialog = () => {
-      this._dialog.close(), this._onDialogClose();
-    }, this._onDialogClose = () => {
-      const t = new CustomEvent(L);
-      this.dispatchEvent(t);
-    };
+    super(), this.isOpen = !1, this.headingLevel = "h2", this._triggerCloseModal = () => {
+      this.isOpen = !1;
+    }, this._handleDialogLightDismiss = (e) => {
+      var h;
+      const t = (h = this._dialog) == null ? void 0 : h.getBoundingClientRect(), {
+        top: n = 0,
+        bottom: o = 0,
+        left: r = 0,
+        right: d = 0
+      } = t || {};
+      if (n === 0 && o === 0 && r === 0 && d === 0)
+        return;
+      (e.clientY < n || e.clientY > o || e.clientX < r || e.clientX > d) && (this.isOpen = !1);
+    }, this._dispatchModalCloseEvent = () => {
+      const e = new CustomEvent(_, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e);
+    }, this._dispatchModalOpenEvent = () => {
+      const e = new CustomEvent(O, {
+        bubbles: !0,
+        composed: !0
+      });
+      this.dispatchEvent(e);
+    }, this.addEventListener("click", (e) => this._handleDialogLightDismiss(e));
+  }
+  firstUpdated(e) {
+    this._handleModalOpenStateOnFirstRender(e);
+  }
+  updated(e) {
+    this._handleModalOpenStateChanged(e);
+  }
+  /**
+   * Opens the dialog element and disables page scrolling
+   */
+  _handleModalOpened() {
+    var e;
+    Q(this), (e = this._dialog) == null || e.showModal();
+  }
+  /**
+   * Closes the dialog element and re-enables page scrolling
+   */
+  _handleModalClosed() {
+    var e;
+    Z(this), (e = this._dialog) == null || e.close();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener(O, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener(O, this._handleModalOpened.bind(this)), document.removeEventListener(_, this._handleModalClosed.bind(this)), super.disconnectedCallback();
+  }
+  // Handles the value of the isOpen property on first render of the component
+  _handleModalOpenStateOnFirstRender(e) {
+    e.get("isOpen") === void 0 && this.isOpen && this._dispatchModalOpenEvent();
+  }
+  // Handles changes to the modal isOpen property by dispatching any appropriate events
+  _handleModalOpenStateChanged(e) {
+    const t = e.get("isOpen");
+    t !== void 0 && (t ? this._dispatchModalCloseEvent() : this._dispatchModalOpenEvent());
   }
   render() {
     const {
-      isOpen: t,
-      heading: n,
-      headingLevel: o = "h2"
-    } = this, e = u(o);
-    return b`
-            <dialog id="dialog" class="c-modal" ?open="${t}">
+      heading: e,
+      headingLevel: t = "h2"
+    } = this, n = D(t);
+    return z`
+            <dialog id="dialog" class="c-modal">
                 <header>
-                    <${e} class="c-modal-heading">${n}</${e}>
+                    <${n} class="c-modal-heading">${e}</${n}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
+                        @click="${this._triggerCloseModal}"
                         variant="ghost-tertiary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
-                <article>
-                    <div class="c-modal-content">
-                        <slot></slot>
-                    </div>
+                <article class="c-modal-content">
+                    <slot></slot>
                 </article>
             </dialog>
         `;
   }
 }
-d.styles = g(S);
-l([
-  s({ type: Boolean })
-], d.prototype, "isOpen", 2);
-l([
-  s({ type: String }),
-  x(p)
-], d.prototype, "heading", 2);
-l([
-  s(),
-  C(p, j, "h2")
-], d.prototype, "headingLevel", 2);
-l([
-  _("dialog")
-], d.prototype, "_dialog", 2);
-customElements.define(p, d);
+l.styles = T(ee);
+y([
+  u({ type: Boolean })
+], l.prototype, "isOpen", 2);
+y([
+  u({ type: String }),
+  q(S)
+], l.prototype, "heading", 2);
+y([
+  u(),
+  j(S, te, "h2")
+], l.prototype, "headingLevel", 2);
+y([
+  B("dialog")
+], l.prototype, "_dialog", 2);
+customElements.define(S, l);
 export {
-  d as PieModal,
-  j as headingLevels
+  l as PieModal,
+  te as headingLevels
 };

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

@@ -1,27 +1,30 @@
+export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * (Required) The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
+     * @default "h2"
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingLevel: typeof headingLevels[number];
     /**
-     * If `true`, the modal will be opened.
+     * (Optional) When true, the modal will be open.
      * @default false
      */
-    isOpen?: boolean;
+    isOpen: boolean;
 }
-/**
- * Modal heading levels/tags
- */
-export declare const headingLevels: ModalProps['headingLevel'][];
 /**
  * Event name for when the modal is closed.
  *
  * @constant
  */
 export declare const ON_MODAL_CLOSE_EVENT = "pie-modal-close";
+/**
+ * Event name for when the modal is opened.
+ *
+ * @constant
+ */
+export declare const ON_MODAL_OPEN_EVENT = "pie-modal-open";
 //# 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;;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,UAAU,CAAC,cAAc,CAAC,EAAyC,CAAC;AAEhG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,+CAAgD,CAAC;AAE3E,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,mBAAmB,CAAC"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
 import { ModalProps, headingLevels } from './defs';
 export { type ModalProps, headingLevels };
 declare const componentSelector = "pie-modal";
@@ -10,16 +11,47 @@ export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
-    _dialog: HTMLDialogElement;
+    _dialog?: HTMLDialogElement;
+    constructor();
+    firstUpdated(changedProperties: DependentMap<ModalProps>): void;
+    updated(changedProperties: DependentMap<ModalProps>): void;
+    /**
+     * Opens the dialog element and disables page scrolling
+     */
+    private _handleModalOpened;
+    /**
+     * Closes the dialog element and re-enables page scrolling
+     */
+    private _handleModalClosed;
+    /**
+     * This is only to be used inside the component template as direct property
+     * reassignment is not allowed.
+     */
+    private _triggerCloseModal;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _handleModalOpenStateOnFirstRender;
+    private _handleModalOpenStateChanged;
     render(): import("lit-html").TemplateResult;
-    _handleCloseDialog: () => void;
+    /**
+     * Dismisses the modal on backdrop click
+     *
+     */
+    private _handleDialogLightDismiss;
     /**
      * Dispatch `ON_MODAL_CLOSE_EVENT` event.
      * To be used whenever we close the modal.
      *
      * @event
      */
-    _onDialogClose: () => void;
+    private _dispatchModalCloseEvent;
+    /**
+     * Dispatch `ON_MODAL_OPEN_EVENT` event.
+     * To be used whenever we open the modal.
+     *
+     * @event
+     */
+    private _dispatchModalOpenEvent;
     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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AAGnE,OAAO,EACH,UAAU,EAAE,aAAa,EAC5B,MAAM,QAAQ,CAAC;AAGhB,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,CAAC,EAAE,iBAAiB,CAAC;;IAOhC,YAAY,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAIjE,OAAO,CAAE,iBAAiB,EAAE,YAAY,CAAC,UAAU,CAAC,GAAI,IAAI;IAI5D;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAQ1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAM1B;;;OAGG;IACH,OAAO,CAAC,kBAAkB,CAExB;IAEF,iBAAiB,IAAM,IAAI;IAM3B,oBAAoB,IAAM,IAAI;IAO9B,OAAO,CAAC,kCAAkC;IAU1C,OAAO,CAAC,4BAA4B;IAYpC,MAAM;IAwBN;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAqB/B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,wBAAwB,CAO9B;IAEF;;;;;OAKG;IACH,OAAO,CAAC,uBAAuB,CAO7B;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.6.0",
+  "version": "0.7.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -22,7 +22,11 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "workspace:*",
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-webc-core": "workspace:*",
+    "@types/body-scroll-lock": "3.1.0"
+  },
+  "peerDependencies": {
+    "body-scroll-lock": "4.0.0-beta.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,28 +1,32 @@
+export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * (Required) The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
+     * @default "h2"
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingLevel: typeof headingLevels[number];
     /**
-     * If `true`, the modal will be opened.
+     * (Optional) When true, the modal will be open.
      * @default false
      */
-    isOpen?: boolean;
+    isOpen: boolean;
 }
 
 /**
- * Modal heading levels/tags
+ * Event name for when the modal is closed.
+ *
+ * @constant
  */
-export const headingLevels: ModalProps['headingLevel'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';
 
 /**
- * Event name for when the modal is closed.
+ * Event name for when the modal is opened.
  *
  * @constant
  */
-export const ON_MODAL_CLOSE_EVENT = 'pie-modal-close';
+export const ON_MODAL_OPEN_EVENT = 'pie-modal-open';

package/src/index.ts

@@ -1,10 +1,15 @@
 import { LitElement, unsafeCSS } from 'lit';
 import { html, unsafeStatic } from 'lit/static-html.js';
-import { property, query } from 'lit/decorators.js'; // eslint-disable-line import/no-extraneous-dependencies
-import { RtlMixin, validPropertyValues, requiredProperty } from '@justeattakeaway/pie-webc-core';
-
+import { property, query } from 'lit/decorators.js';
+import {
+    RtlMixin, validPropertyValues, requiredProperty,
+} from '@justeattakeaway/pie-webc-core';
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import styles from './modal.scss?inline';
-import { ModalProps, headingLevels, ON_MODAL_CLOSE_EVENT } from './defs';
+import {
+    ModalProps, headingLevels, ON_MODAL_CLOSE_EVENT, ON_MODAL_OPEN_EVENT,
+} from './defs';
 
 // Valid values available to consumers
 export { type ModalProps, headingLevels };
@@ -24,11 +29,86 @@ export class PieModal extends RtlMixin(LitElement) {
         headingLevel: ModalProps['headingLevel'] = 'h2';
 
     @query('dialog')
-        _dialog: HTMLDialogElement;
+        _dialog?: HTMLDialogElement;
+
+    constructor () {
+        super();
+        this.addEventListener('click', (event) => this._handleDialogLightDismiss(event));
+    }
+
+    firstUpdated (changedProperties: DependentMap<ModalProps>) : void {
+        this._handleModalOpenStateOnFirstRender(changedProperties);
+    }
+
+    updated (changedProperties: DependentMap<ModalProps>) : void {
+        this._handleModalOpenStateChanged(changedProperties);
+    }
+
+    /**
+     * Opens the dialog element and disables page scrolling
+     */
+    private _handleModalOpened () : void {
+        disableBodyScroll(this);
+        //  We require this because toggling the prop `isOpen` itself won't
+        //  allow the dialog to open in the correct way (with the default background),
+        //  the method `showModal()` needs to be invoked.
+        this._dialog?.showModal();
+    }
+
+    /**
+     * Closes the dialog element and re-enables page scrolling
+     */
+    private _handleModalClosed () : void {
+        enableBodyScroll(this);
+        //  Closes the native dialog element
+        this._dialog?.close();
+    }
+
+    /**
+     * This is only to be used inside the component template as direct property
+     * reassignment is not allowed.
+     */
+    private _triggerCloseModal = () : void => {
+        this.isOpen = false;
+    };
+
+    connectedCallback () : void {
+        super.connectedCallback();
+        document.addEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
+        document.addEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+    }
+
+    disconnectedCallback () : void {
+        document.removeEventListener(ON_MODAL_OPEN_EVENT, this._handleModalOpened.bind(this));
+        document.removeEventListener(ON_MODAL_CLOSE_EVENT, this._handleModalClosed.bind(this));
+        super.disconnectedCallback();
+    }
+
+    // Handles the value of the isOpen property on first render of the component
+    private _handleModalOpenStateOnFirstRender (changedProperties: DependentMap<ModalProps>) : void {
+        // This ensures if the modal is open on first render, the scroll lock and backdrop are applied
+        const previousValue = changedProperties.get('isOpen');
+
+        if (previousValue === undefined && this.isOpen) {
+            this._dispatchModalOpenEvent();
+        }
+    }
+
+    // Handles changes to the modal isOpen property by dispatching any appropriate events
+    private _handleModalOpenStateChanged (changedProperties: DependentMap<ModalProps>) : void {
+        const previousValue = changedProperties.get('isOpen');
+
+        if (previousValue !== undefined) {
+            if (previousValue) {
+                this._dispatchModalCloseEvent();
+            } else {
+                this._dispatchModalOpenEvent();
+            }
+        }
+    }
 
     render () {
         const {
-            isOpen,
             heading,
             headingLevel = 'h2',
         } = this;
@@ -36,26 +116,46 @@ export class PieModal extends RtlMixin(LitElement) {
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog id="dialog" class="c-modal" ?open="${isOpen}">
+            <dialog id="dialog" class="c-modal">
                 <header>
                     <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
+                        @click="${this._triggerCloseModal}"
                         variant="ghost-tertiary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
-                <article>
-                    <div class="c-modal-content">
-                        <slot></slot>
-                    </div>
+                <article class="c-modal-content">
+                    <slot></slot>
                 </article>
             </dialog>
         `;
     }
 
-    _handleCloseDialog = () => {
-        this._dialog.close();
-        this._onDialogClose();
+    /**
+     * Dismisses the modal on backdrop click
+     *
+     */
+    private _handleDialogLightDismiss = (event: MouseEvent) : void => {
+        const rect = this._dialog?.getBoundingClientRect();
+
+        const {
+            top = 0, bottom = 0, left = 0, right = 0,
+        } = rect || {};
+
+        // This means the dialog is not open due to clicking the close button so
+        // we want to escape early
+        if (top === 0 && bottom === 0 && left === 0 && right === 0) {
+            return;
+        }
+
+        const isClickOutsideDialog = event.clientY < top ||
+            event.clientY > bottom ||
+            event.clientX < left ||
+            event.clientX > right;
+
+        if (isClickOutsideDialog) {
+            this.isOpen = false;
+        }
     };
 
     /**
@@ -64,8 +164,27 @@ export class PieModal extends RtlMixin(LitElement) {
      *
      * @event
      */
-    _onDialogClose = () => {
-        const event = new CustomEvent(ON_MODAL_CLOSE_EVENT);
+    private _dispatchModalCloseEvent = () : void => {
+        const event = new CustomEvent(ON_MODAL_CLOSE_EVENT, {
+            bubbles: true,
+            composed: true,
+        });
+
+        this.dispatchEvent(event);
+    };
+
+    /**
+     * Dispatch `ON_MODAL_OPEN_EVENT` event.
+     * To be used whenever we open the modal.
+     *
+     * @event
+     */
+    private _dispatchModalOpenEvent = () : void => {
+        const event = new CustomEvent(ON_MODAL_OPEN_EVENT, {
+            bubbles: true,
+            composed: true,
+        });
+
         this.dispatchEvent(event);
     };
 

package/src/modal.scss

@@ -1,3 +1,5 @@
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+
 .c-modal {
     // Custom Property Declarations
     // These are defined here instead of :host to encapsulate them inside Shadow DOM
@@ -21,6 +23,12 @@
 
     box-shadow: var(--modal-elevation);
 
+    // We need to pull in the token directly here because the
+    // pseudo element `::backdrop` doesn't seem to pick up custom css properties.
+    &::backdrop {
+        background: #{dt.$color-overlay};
+    }
+
     & .c-modal-heading {
         // Modal header Custom Props
         --modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
@@ -52,11 +60,14 @@
 
         padding-block: var(--modal-content-padding-block-start) var(--modal-content-padding);
         padding-inline: var(--modal-content-padding);
+
+        overflow-y: scroll;
+        max-block-size: 300px; // This is just a placeholder before we add the proper container styles to slotted content to demonstrate scrollable slot content
     }
 
     & .c-modal-closeBtn {
         position: absolute;
-        right: var(--dt-spacing-d);
-        top: var(--dt-spacing-d);
+        inset-inline-end: var(--dt-spacing-d);
+        inset-block-start: var(--dt-spacing-d);
     }
 }

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

@@ -1,5 +1,4 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import * as events from 'events';
 import { PieModal } from '@/index';
 import { headingLevels } from '@/defs';
 
@@ -21,33 +20,57 @@ headingLevels.forEach((headingLevel) => test(`should render the correct heading
         headingLevel,
     };
 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore // Added this as we want to deliberately test with invalid headingLevel (which is an invalid type based on ModalProps)
     const component = await mount(PieModal, { props });
 
     // 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,
+test.describe('`Pie Modal is closed`', () => {
+    test.describe('when via the close button click', () => {
+        test.skip('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            const messages: string[] = [];
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true
+                    },
+                    on: {
+                        click: (event: string) => messages.push(event),
+                    },
                 },
-            },
-        );
+            );
 
-        await component.update({
-            on: {
-                click: (event: string) => messages.push(event),
-            },
+            await page.locator('.c-modal-closeBtn').click();
+
+
+            expect(messages).toHaveLength(1);
         });
+    });
 
-        await component.locator('.c-modal-closeBtn').click({ });
+    test.describe('when via the backdrop click', () => {
+        test.skip('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+            const messages: string[] = [];
+            await mount(
+                PieModal,
+                {
+                    props: {
+                        isOpen: true,
+                    },
+                    on: {
+                        click: (event: string) => messages.push(event),
+                    },
+                },
+            );
 
-        expect(messages).toHaveLength(1);
+            await page.locator('#dialog').click();
+
+
+            expect(messages).toHaveLength(1);
+        });
     });
 });
 

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

@@ -1,7 +1,10 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
+import {
+    WebComponentTestWrapper,
+} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { WebComponentPropValues } from '@justeattakeaway/pie-webc-core/src/test-helpers/defs';
 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 }];
 
@@ -16,5 +19,50 @@ propIsOpenValues.forEach((props) => test(`should render Modal correctly when pro
         },
     );
 
-    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`, getLitPercyOptions());
+    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`);
 }));
+
+const renderTestPieModal = (propVals: WebComponentPropValues) => `<pie-modal ${propVals.isOpen ? 'isOpen' : ''} heading="${propVals.heading}" headingLevel="${propVals.headingLevel}"></pie-modal>`;
+
+// Creates a <ul> with a large number of <li> nodes for testing page scrolling
+const createTestPageHTML = () : string => {
+    let list = '<ul>';
+
+    for (let i = 0; i < 200; i++) {
+        list += `<li>Item ${i}</li>`;
+    }
+
+    list += '</ul>';
+
+    return list;
+};
+
+test('Should not be able to scroll when modal is open', async ({ page, mount }) => {
+    const props: WebComponentPropValues = {
+        heading: 'I am a Modal!',
+        headingLevel: 'h2',
+        isOpen: true,
+    };
+
+    const modalComponent = renderTestPieModal(props);
+
+    await mount(
+        WebComponentTestWrapper,
+        {
+            props: {
+                pageMode: true,
+            },
+            slots: {
+                component: modalComponent,
+                pageMarkup: createTestPageHTML(),
+            },
+        },
+    );
+
+    // Scroll 800 pixels down the page
+    await page.mouse.wheel(0, 800);
+
+    await page.waitForTimeout(3000); // The mouse.wheel function causes scrolling, but doesn't wait for the scroll to finish before returning.
+
+    await percySnapshot(page, 'PIE Modal scroll locking');
+});