@justeattakeaway/pie-modal 0.6.1 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,19 +1,14 @@
-[2:38:36 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[11:02:50 AM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 28 modules transformed.
+✓ 23 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   7.43 kB │ gzip:  2.38 kB
+dist/index.js  12.03 kB │ gzip:  3.79 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 23.71s
-[vite:dts] Declaration files built in 21869ms.
+✓ built in 27.07s
+[vite:dts] Declaration files built in 24624ms.
 

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @justeattakeaway/pie-modal
 
+## 0.8.0
+
+### Minor Changes
+
+- [Added] - New size prop for pie-modal ([#572](https://github.com/justeattakeaway/pie/pull/572)) by [@xander-marjoram](https://github.com/xander-marjoram)
+
+  [Added] - Visual regression test for each size
+  [Changed] - Modal story to include new size prop
+
+## 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

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 C, LitElement as x } from "lit";
+import { unsafeStatic as E, html as L } from "lit/static-html.js";
+import { property as y, query as T } from "lit/decorators.js";
+import { property as $ } from "lit/decorators/property.js";
+var D = Object.defineProperty, B = Object.getOwnPropertyDescriptor, k = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? B(e, t) : e, d = i.length - 1, a; d >= 0; d--)
+    (a = i[d]) && (o = (n ? a(e, t, o) : a(o)) || o);
+  return n && o && D(e, t, o), o;
 };
-const O = (r) => {
-  class t extends r {
+const R = (i) => {
+  class e extends i {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,135 +22,248 @@ 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 k([
+    $({ type: String })
+  ], e.prototype, "dir", 2), e;
+}, S = (i, e, t) => function(o, d) {
+  const a = `#${d}`;
+  Object.defineProperty(o, d, {
     get() {
       return this[a];
     },
-    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 m = this[a];
+      e.includes(f) ? this[a] = f : (console.error(
+        `<${i}> Invalid value "${f}" provided for property "${d}".`,
+        `Must be one of: ${e.join(" | ")}.`,
+        `Falling back to default value: "${t}"`
+      ), this[a] = t), this.requestUpdate(d, m);
     }
   });
-}, x = (r) => function(t, n) {
+}, A = (i) => function(t, n) {
   const o = `#${n}`;
   Object.defineProperty(t, n, {
     get() {
       return this[o];
     },
-    set(e) {
+    set(d) {
       const a = this[o];
-      (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
+      (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${i}> Missing required attribute "${n}"`), this[o] = d, this.requestUpdate(n, a);
     }
   });
-}, 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)}
-`;
-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;
 };
-class c 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((t) => {
-      const [n, o] = t.split(":");
-      return m`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${o}</code></p>`;
-    });
-  }
-  // eslint-disable-next-line class-methods-use-this
-  render() {
-    return m`
-            <div class="c-webComponentTestWrapper">
-                ${this._renderPropKeyValues()}
-                <div class="c-webComponentTestWrapper-slot">
-                    <slot></slot>
-                </div>
-            </div>`;
-  }
+function q(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);
 }
-c.styles = g(z);
-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;
+var _ = !1;
+if (typeof window < "u") {
+  var z = {
+    get passive() {
+      _ = !0;
+    }
+  };
+  window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
+}
+var p = typeof window < "u" && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === "MacIntel" && window.navigator.maxTouchPoints > 1), r = [], v = !1, P = -1, c = void 0, l = void 0, u = void 0, M = function(e) {
+  return r.some(function(t) {
+    return !!(t.options.allowTouchMove && t.options.allowTouchMove(e));
+  });
+}, g = function(e) {
+  var t = e || window.event;
+  return M(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
+}, I = function(e) {
+  if (u === 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);
+      u = document.body.style.paddingRight, document.body.style.paddingRight = o + n + "px";
+    }
+  }
+  c === void 0 && (c = document.body.style.overflow, document.body.style.overflow = "hidden");
+}, V = function() {
+  u !== void 0 && (document.body.style.paddingRight = u, u = void 0), c !== void 0 && (document.body.style.overflow = c, c = void 0);
+}, j = function() {
+  return window.requestAnimationFrame(function() {
+    if (l === void 0) {
+      l = {
+        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 d = o - window.innerHeight;
+          d && t >= o && (document.body.style.top = -(t + d));
+        });
+      }, 300);
+    }
+  });
+}, F = function() {
+  if (l !== void 0) {
+    var e = -parseInt(document.body.style.top, 10), t = -parseInt(document.body.style.left, 10);
+    document.body.style.position = l.position, document.body.style.top = l.top, document.body.style.left = l.left, window.scrollTo(t, e), l = void 0;
+  }
+}, H = function(e) {
+  return e ? e.scrollHeight - e.scrollTop <= e.clientHeight : !1;
+}, N = function(e, t) {
+  var n = e.targetTouches[0].clientY - P;
+  return M(e.target) ? !1 : t && t.scrollTop === 0 && n > 0 || H(t) && n < 0 ? g(e) : (e.stopPropagation(), !0);
+}, Y = function(e, t) {
+  if (!e) {
+    console.error("disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.");
+    return;
+  }
+  if (!r.some(function(o) {
+    return o.targetElement === e;
+  })) {
+    var n = {
+      targetElement: e,
+      options: t || {}
+    };
+    r = [].concat(q(r), [n]), p ? j() : I(t), p && (e.ontouchstart = function(o) {
+      o.targetTouches.length === 1 && (P = o.targetTouches[0].clientY);
+    }, e.ontouchmove = function(o) {
+      o.targetTouches.length === 1 && N(o, e);
+    }, v || (document.addEventListener("touchmove", g, _ ? { passive: !1 } : void 0), v = !0));
+  }
+}, U = function(e) {
+  if (!e) {
+    console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
+    return;
+  }
+  r = r.filter(function(t) {
+    return t.targetElement !== e;
+  }), p && (e.ontouchstart = null, e.ontouchmove = null, v && r.length === 0 && (document.removeEventListener("touchmove", g, _ ? { passive: !1 } : void 0), v = !1)), p ? F() : V();
 };
-const p = "pie-modal";
-class d extends O(v) {
+const X = `.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;box-shadow:var(--modal-elevation);font-family:var(--modal-font);background-color:var(--modal-bg-color);padding:0;--modal-max-inline-size: var(--modal-size-m);--modal-inline-size: 75%;max-inline-size:var(--modal-max-inline-size);inline-size:var(--modal-inline-size)}.c-modal[size=small]{--modal-max-inline-size: var(--modal-size-s)}.c-modal[size=large]{--modal-max-inline-size: var(--modal-size-l);--modal-inline-size: 100%}@media (min-width: 768px){.c-modal[size=large]{--modal-inline-size: 75%}}.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)}
+`, W = ["h1", "h2", "h3", "h4", "h5", "h6"], G = ["small", "medium", "large"], w = "pie-modal-close", O = "pie-modal-open";
+var J = Object.defineProperty, Q = Object.getOwnPropertyDescriptor, h = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? Q(e, t) : e, d = i.length - 1, a; d >= 0; d--)
+    (a = i[d]) && (o = (n ? a(e, t, o) : a(o)) || o);
+  return n && o && J(e, t, o), o;
+};
+const b = "pie-modal";
+class s extends R(x) {
   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.size = "medium", this._triggerCloseModal = () => {
+      this.isOpen = !1;
+    }, this._handleDialogLightDismiss = (e) => {
+      var m;
+      const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
+        top: n = 0,
+        bottom: o = 0,
+        left: d = 0,
+        right: a = 0
+      } = t || {};
+      if (n === 0 && o === 0 && d === 0 && a === 0)
+        return;
+      (e.clientY < n || e.clientY > o || e.clientX < d || e.clientX > a) && (this.isOpen = !1);
+    }, this._dispatchModalCloseEvent = () => {
+      const e = new CustomEvent(w, {
+        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;
+    Y(this), (e = this._dialog) == null || e.showModal();
+  }
+  /**
+   * Closes the dialog element and re-enables page scrolling
+   */
+  _handleModalClosed() {
+    var e;
+    U(this), (e = this._dialog) == null || e.close();
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener(O, this._handleModalOpened.bind(this)), document.addEventListener(w, this._handleModalClosed.bind(this));
+  }
+  disconnectedCallback() {
+    document.removeEventListener(O, this._handleModalOpened.bind(this)), document.removeEventListener(w, 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",
+      size: n
+    } = this, o = E(t);
+    return L`
+            <dialog
+                id="dialog"
+                size="${n}"
+                class="c-modal">
                 <header>
-                    <${e} class="c-modal-heading">${n}</${e}>
+                    <${o} class="c-modal-heading">${e}</${o}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
-                        variant="ghost-tertiary"
+                        @click="${this._triggerCloseModal}"
+                        variant="ghost-secondary"
                         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);
+s.styles = C(X);
+h([
+  y({ type: Boolean })
+], s.prototype, "isOpen", 2);
+h([
+  y({ type: String }),
+  A(b)
+], s.prototype, "heading", 2);
+h([
+  y(),
+  S(b, W, "h2")
+], s.prototype, "headingLevel", 2);
+h([
+  y(),
+  S(b, G, "medium")
+], s.prototype, "size", 2);
+h([
+  T("dialog")
+], s.prototype, "_dialog", 2);
+customElements.define(b, s);
 export {
-  d as PieModal,
-  j as headingLevels
+  s as PieModal,
+  W as headingLevels,
+  G as sizes
 };

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

@@ -1,27 +1,33 @@
+export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const sizes: readonly ["small", "medium", "large"];
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    headingLevel: typeof headingLevels[number];
     /**
-     * If `true`, the modal will be opened.
-     * @default false
+     * When true, the modal will be open.
      */
-    isOpen?: boolean;
+    isOpen: boolean;
+    /**
+     * The size of the modal; this controls how wide it will appear on the page.
+     */
+    size: typeof sizes[number];
 }
-/**
- * Modal heading levels/tags
- */
-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";
+/**
+ * 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,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAwC,CAAC;AAErG;;;;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;AAC3E,eAAO,MAAM,KAAK,uCAAwC,CAAC;AAE3D,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,EAAE,OAAO,aAAa,CAAC,MAAM,CAAC,CAAC;IAC3C;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,IAAI,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B;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,6 +1,7 @@
 import { LitElement } from 'lit';
-import { ModalProps, headingLevels } from './defs';
-export { type ModalProps, headingLevels };
+import type { DependentMap } from '@justeattakeaway/pie-webc-core';
+import { ModalProps, headingLevels, sizes } from './defs';
+export { type ModalProps, headingLevels, sizes };
 declare const componentSelector = "pie-modal";
 declare const PieModal_base: (new (...args: any[]) => {
     dir: string;
@@ -10,16 +11,48 @@ export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
-    _dialog: HTMLDialogElement;
+    size: ModalProps['size'];
+    _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,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;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAIhD,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGpC,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;IA4BN;;;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.1",
+  "version": "0.8.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -22,7 +22,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "workspace:*",
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-icon-button": "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,35 @@
+export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+export const sizes = ['small', 'medium', 'large'] as const;
+
 export interface ModalProps {
     /**
-     * the heading of the modal .
+     * The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * the rendered heading tag of the modal header.
-     * @default h2
+     * The HTML heading tag to use for the modal's heading. Can be h1-h6.
+     */
+    headingLevel: typeof headingLevels[number];
+    /**
+     * When true, the modal will be open.
      */
-    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    isOpen: boolean;
     /**
-     * If `true`, the modal will be opened.
-     * @default false
+     * The size of the modal; this controls how wide it will appear on the page.
      */
-    isOpen?: boolean;
+    size: typeof sizes[number];
 }
 
 /**
- * Modal heading levels/tags
+ * Event name for when the modal is closed.
+ *
+ * @constant
  */
-export const headingLevels: Array<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,13 +1,22 @@
 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,
+    sizes,
+} from './defs';
 
 // Valid values available to consumers
-export { type ModalProps, headingLevels };
+export { type ModalProps, headingLevels, sizes };
 
 const componentSelector = 'pie-modal';
 
@@ -23,39 +32,142 @@ export class PieModal extends RtlMixin(LitElement) {
     @validPropertyValues(componentSelector, headingLevels, 'h2')
         headingLevel: ModalProps['headingLevel'] = 'h2';
 
+    @property()
+    @validPropertyValues(componentSelector, sizes, 'medium')
+        size: ModalProps['size'] = 'medium';
+
     @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',
+            size,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog id="dialog" class="c-modal" ?open="${isOpen}">
+            <dialog
+                id="dialog"
+                size="${size}"
+                class="c-modal">
                 <header>
                     <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
                     <pie-icon-button
-                        @click="${this._handleCloseDialog}"
-                        variant="ghost-tertiary"
+                        @click="${this._triggerCloseModal}"
+                        variant="ghost-secondary"
                         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 +176,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,6 +1,10 @@
+@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
+    $breakpoint-wide: 768px;
+
     --modal-size-s: 450px;
     --modal-size-m: 600px;
     --modal-size-l: 1080px;
@@ -13,13 +17,40 @@
 
     border-radius: var(--modal-border-radius);
     border: none;
+    box-shadow: var(--modal-elevation);
     font-family: var(--modal-font);
     background-color: var(--modal-bg-color);
 
     padding: 0;
-    inline-size: var(--modal-size-m);
 
-    box-shadow: var(--modal-elevation);
+    --modal-max-inline-size: var(--modal-size-m);
+    --modal-inline-size: 75%;
+
+    max-inline-size: var(--modal-max-inline-size);
+    inline-size: var(--modal-inline-size);
+
+    &[size='small'] {
+        --modal-max-inline-size: var(--modal-size-s);
+    }
+
+    &[size='medium'] {
+        /* Same as default styles */
+    }
+
+    &[size='large'] {
+        --modal-max-inline-size: var(--modal-size-l);
+        --modal-inline-size: 100%;
+
+        @media (min-width: $breakpoint-wide) {
+            --modal-inline-size: 75%;
+        }
+    }
+
+    // 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
@@ -52,11 +83,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,8 +1,25 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
-import * as events from 'events';
+import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import { PieModal } from '@/index';
 import { headingLevels } from '@/defs';
 
+// Mount any components that are used inside of pie-modal so that
+// they have been registered with the browser before the tests run.
+// There is likely a nicer way to do this but this will temporarily
+// unblock tests.
+test.beforeEach(async ({ page, mount }) => {
+    await mount(
+        PieIconButton,
+        {},
+    );
+
+    // Removing the element so it's not present in the tests (but is still registered in the DOM)
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-icon-button');
+        element?.remove();
+    });
+});
+
 headingLevels.forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => {
     const props = {
         heading: 'Modal Header',
@@ -21,33 +38,55 @@ 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('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 page.locator('.c-modal-closeBtn').click();
 
-        await component.update({
-            on: {
-                click: (event: string) => messages.push(event),
-            },
+            expect(messages).toHaveLength(1);
         });
+    });
+
+    test.describe('when via the backdrop click', () => {
+        test('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.locator('.c-modal-closeBtn').click({ });
+            await page.locator('#dialog').click();
 
-        expect(messages).toHaveLength(1);
+            expect(messages).toHaveLength(1);
+        });
     });
 });
 

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

@@ -1,20 +1,90 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
+import {
+    WebComponentTestWrapper,
+} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
+import { PieIconButton } from '@justeattakeaway/pie-icon-button';
 import { PieModal } from '@/index';
-import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
+import { ModalProps, sizes } from '@/defs';
 
-const propIsOpenValues = [{ heading: 'Modal Heading', isOpen: true }, { isOpen: false }];
+// Renders a <pie-modal> HTML string with the given prop values
+const renderTestPieModal = ({
+    heading = 'This is a modal heading',
+    headingLevel = 'h2',
+    size = 'medium',
+    isOpen = true,
+} : Partial<ModalProps> = {}) => `<pie-modal ${isOpen ? 'isOpen' : ''} heading="${heading}" headingLevel="${headingLevel}" size="${size}"></pie-modal>`;
+
+// Creates a <ol> with a large number of <li> nodes for testing page scrolling
+const createTestPageHTML = () => `<ol>
+        ${'<li>List item</li>'.repeat(200)}
+    </ol>`;
+
+// Mount any components that are used inside of pie-modal so that
+// they have been registered with the browser before the tests run.
+// There is likely a nicer way to do this but this will temporarily
+// unblock tests.
+test.beforeEach(async ({ page, mount }) => {
+    await mount(
+        PieIconButton,
+        {},
+    );
+
+    // Removing the element so it's not present in the tests (but is still registered in the DOM)
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-icon-button');
+        element?.remove();
+    });
+});
+
+test('Should not be able to scroll when modal is open', async ({ page, mount }) => {
+    const modalComponent = renderTestPieModal();
 
-propIsOpenValues.forEach((props) => test(`should render Modal correctly when prop isOpen is set to ${props.isOpen}`, async ({ page, mount }) => {
     await mount(
-        PieModal,
+        WebComponentTestWrapper,
         {
-            props,
+            props: {
+                pageMode: true,
+            },
             slots: {
-                default: 'Hello, this is the Pie Modal!',
+                component: modalComponent,
+                pageMarkup: createTestPageHTML(),
             },
         },
     );
 
-    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`, getLitPercyOptions());
-}));
+    // 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, 'Modal - scroll locking');
+});
+
+test('should not render when isOpen = false', async ({ page, mount }) => {
+    await mount(PieModal, {
+        props: {
+            heading: 'This is a modal heading',
+            headingLevel: 'h2',
+            isOpen: false,
+            size: 'medium',
+        },
+    });
+
+    await percySnapshot(page, 'Modal - isOpen = false');
+});
+
+sizes.forEach((size) => {
+    test(`should render correctly with size = ${size}`, async ({ page, mount }) => {
+        await mount(PieModal, {
+            props: {
+                heading: 'This is a modal heading',
+                headingLevel: 'h2',
+                isOpen: true,
+                size,
+            },
+        });
+
+        await percySnapshot(page, `Modal - size = ${size}`);
+    });
+});