@justeattakeaway/pie-modal 0.7.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[4:04:52 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[13:51:16] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 30 modules transformed.
+✓ 23 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  13.55 kB │ gzip:  4.16 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...
-✓ built in 28.39s
-[vite:dts] Declaration files built in 26000ms.
-
+
+[vite:dts] Start generate declaration files...
+✓ built in 4.35s
+[vite:dts] Declaration files built in 3800ms.
+

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @justeattakeaway/pie-modal
 
+## 0.9.0
+
+### Minor Changes
+
+- [Changed] - Set modal props to public ([#597](https://github.com/justeattakeaway/pie/pull/597)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 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

package/dist/index.js

@@ -1,13 +1,13 @@
-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;
+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 W = (i) => {
+const R = (i) => {
   class e extends i {
     constructor() {
       super(...arguments), this.dir = "";
@@ -26,80 +26,37 @@ const W = (i) => {
       return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((n = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : n.direction) === "rtl";
     }
   }
-  return A([
-    k({ type: String })
+  return k([
+    $({ type: String })
   ], e.prototype, "dir", 2), e;
-}, j = (i, e, t) => function(o, r) {
-  const d = `#${r}`;
-  Object.defineProperty(o, r, {
+}, S = (i, e, t) => function(o, d) {
+  const a = `#${d}`;
+  Object.defineProperty(o, d, {
     get() {
-      return this[d];
+      return this[a];
     },
     set(f) {
-      const h = this[d];
-      e.includes(f) ? this[d] = f : (console.error(
-        `<${i}> Invalid value "${f}" provided for property "${r}".`,
+      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[d] = t), this.requestUpdate(r, h);
+      ), this[a] = t), this.requestUpdate(d, m);
     }
   });
-}, q = (i) => function(t, n) {
+}, A = (i) => function(t, n) {
   const o = `#${n}`;
   Object.defineProperty(t, n, {
     get() {
       return this[o];
     },
-    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);
+    set(d) {
+      const a = this[o];
+      (d == null || typeof d == "string" && d.trim() === "") && console.error(`<${i}> Missing required attribute "${n}"`), this[o] = d, this.requestUpdate(n, a);
     }
   });
-}, 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 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 b extends $ {
-  constructor() {
-    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((e) => {
-      const [t, n] = e.split(":");
-      return w`<p class="c-webComponentTestWrapper-label"><b>${t}</b>: <code>${n}</code></p>`;
-    });
-  }
-  render() {
-    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 name="component"></slot>
-                </div>
-            </div>`;
-  }
-}
-b.styles = T(I);
-E([
-  u({ type: String })
-], b.prototype, "propKeyValues", 2);
-E([
-  u({ type: Boolean })
-], b.prototype, "pageMode", 2);
-const C = "web-component-test-wrapper";
-customElements.get(C) || customElements.define(C, b);
-function N(i) {
+function q(i) {
   if (Array.isArray(i)) {
     for (var e = 0, t = Array(i.length); e < i.length; e++)
       t[e] = i[e];
@@ -107,37 +64,37 @@ function N(i) {
   } else
     return Array.from(i);
 }
-var P = !1;
+var _ = !1;
 if (typeof window < "u") {
-  var M = {
+  var z = {
     get passive() {
-      P = !0;
+      _ = !0;
     }
   };
-  window.addEventListener("testPassive", null, M), window.removeEventListener("testPassive", null, M);
+  window.addEventListener("testPassive", null, z), window.removeEventListener("testPassive", null, z);
 }
-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) {
+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 L(t.target) || t.touches.length > 1 ? !0 : (t.preventDefault && t.preventDefault(), !1);
-}, Y = function(e) {
-  if (p === void 0) {
+  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);
-      p = document.body.style.paddingRight, document.body.style.paddingRight = o + n + "px";
+      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");
-}, 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() {
+}, 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 (a === void 0) {
-      a = {
+    if (l === void 0) {
+      l = {
         position: document.body.style.position,
         top: document.body.style.top,
         left: document.body.style.left
@@ -145,74 +102,74 @@ var v = typeof window < "u" && window.navigator && window.navigator.platform &&
       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));
+          var d = o - window.innerHeight;
+          d && t >= o && (document.body.style.top = -(t + d));
         });
       }, 300);
     }
   });
-}, K = function() {
-  if (a !== void 0) {
+}, 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 = a.position, document.body.style.top = a.top, document.body.style.left = a.left, window.scrollTo(t, e), a = void 0;
+    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;
   }
-}, G = function(e) {
+}, H = 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) {
+}, 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 (!s.some(function(o) {
+  if (!r.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);
+    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 && J(o, e);
-    }, m || (document.addEventListener("touchmove", g, P ? { passive: !1 } : void 0), m = !0));
+      o.targetTouches.length === 1 && N(o, e);
+    }, v || (document.addEventListener("touchmove", g, _ ? { passive: !1 } : void 0), v = !0));
   }
-}, Z = function(e) {
+}, U = function(e) {
   if (!e) {
     console.error("enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.");
     return;
   }
-  s = s.filter(function(t) {
+  r = r.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();
+  }), 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 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 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 S = "pie-modal";
-class l extends W($) {
+const b = "pie-modal";
+class s extends R(x) {
   constructor() {
-    super(), this.isOpen = !1, this.headingLevel = "h2", this._triggerCloseModal = () => {
+    super(), this.isOpen = !1, this.headingLevel = "h2", this.size = "medium", this._triggerCloseModal = () => {
       this.isOpen = !1;
     }, this._handleDialogLightDismiss = (e) => {
-      var h;
-      const t = (h = this._dialog) == null ? void 0 : h.getBoundingClientRect(), {
+      var m;
+      const t = (m = this._dialog) == null ? void 0 : m.getBoundingClientRect(), {
         top: n = 0,
         bottom: o = 0,
-        left: r = 0,
-        right: d = 0
+        left: d = 0,
+        right: a = 0
       } = t || {};
-      if (n === 0 && o === 0 && r === 0 && d === 0)
+      if (n === 0 && o === 0 && d === 0 && a === 0)
         return;
-      (e.clientY < n || e.clientY > o || e.clientX < r || e.clientX > d) && (this.isOpen = !1);
+      (e.clientY < n || e.clientY > o || e.clientX < d || e.clientX > a) && (this.isOpen = !1);
     }, this._dispatchModalCloseEvent = () => {
-      const e = new CustomEvent(_, {
+      const e = new CustomEvent(w, {
         bubbles: !0,
         composed: !0
       });
@@ -236,20 +193,20 @@ class l extends W($) {
    */
   _handleModalOpened() {
     var e;
-    Q(this), (e = this._dialog) == null || e.showModal();
+    Y(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();
+    U(this), (e = this._dialog) == null || e.close();
   }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener(O, this._handleModalOpened.bind(this)), document.addEventListener(_, this._handleModalClosed.bind(this));
+    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(_, this._handleModalClosed.bind(this)), super.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) {
@@ -263,15 +220,19 @@ class l extends W($) {
   render() {
     const {
       heading: e,
-      headingLevel: t = "h2"
-    } = this, n = D(t);
-    return z`
-            <dialog id="dialog" class="c-modal">
+      headingLevel: t = "h2",
+      size: n
+    } = this, o = E(t);
+    return L`
+            <dialog
+                id="dialog"
+                size="${n}"
+                class="c-modal">
                 <header>
-                    <${n} class="c-modal-heading">${e}</${n}>
+                    <${o} class="c-modal-heading">${e}</${o}>
                     <pie-icon-button
                         @click="${this._triggerCloseModal}"
-                        variant="ghost-tertiary"
+                        variant="ghost-secondary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
                 <article class="c-modal-content">
@@ -281,23 +242,28 @@ class l extends W($) {
         `;
   }
 }
-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);
+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 {
-  l as PieModal,
-  te as headingLevels
+  s as PieModal,
+  W as headingLevels,
+  G as sizes
 };

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

@@ -1,19 +1,22 @@
 export declare const headingLevels: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const sizes: readonly ["small", "medium", "large"];
 export interface ModalProps {
     /**
-     * (Required) The text to display in the modal's heading.
+     * The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
-     * @default "h2"
+     * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
     headingLevel: typeof headingLevels[number];
     /**
-     * (Optional) When true, the modal will be open.
-     * @default false
+     * When true, the modal will be open.
      */
     isOpen: boolean;
+    /**
+     * The size of the modal; this controls how wide it will appear on the page.
+     */
+    size: typeof sizes[number];
 }
 /**
  * Event name for when the modal is closed.

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,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"}
+{"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,7 +1,7 @@
 import { LitElement } from 'lit';
 import type { DependentMap } from '@justeattakeaway/pie-webc-core';
-import { ModalProps, headingLevels } from './defs';
-export { type ModalProps, headingLevels };
+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;
@@ -11,6 +11,7 @@ export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
     headingLevel: ModalProps['headingLevel'];
+    size: ModalProps['size'];
     _dialog?: HTMLDialogElement;
     constructor();
     firstUpdated(changedProperties: DependentMap<ModalProps>): void;

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,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"}
+{"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;IAEvC,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAE,UAAU,CAAC,cAAc,CAAC,CAAQ;IAIhD,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC,CAAY;IAGvC,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.7.0",
+  "version": "0.9.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",
@@ -22,6 +22,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "workspace:*",
+    "@justeattakeaway/pie-icon-button": "workspace:*",
     "@justeattakeaway/pie-webc-core": "workspace:*",
     "@types/body-scroll-lock": "3.1.0"
   },

package/src/defs.ts

@@ -1,20 +1,23 @@
 export const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;
+export const sizes = ['small', 'medium', 'large'] as const;
 
 export interface ModalProps {
     /**
-     * (Required) The text to display in the modal's heading.
+     * The text to display in the modal's heading.
      */
     heading: string;
     /**
-     * (Optional) The HTML heading tag to use for the modal's heading. Can be H1-H6.
-     * @default "h2"
+     * The HTML heading tag to use for the modal's heading. Can be h1-h6.
      */
     headingLevel: typeof headingLevels[number];
     /**
-     * (Optional) When true, the modal will be open.
-     * @default false
+     * When true, the modal will be open.
      */
     isOpen: boolean;
+    /**
+     * The size of the modal; this controls how wide it will appear on the page.
+     */
+    size: typeof sizes[number];
 }
 
 /**

package/src/index.ts

@@ -8,25 +8,33 @@ 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, ON_MODAL_OPEN_EVENT,
+    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';
 
 export class PieModal extends RtlMixin(LitElement) {
     @property({ type: Boolean })
-        isOpen = false;
+    public isOpen = false;
 
     @property({ type: String })
     @requiredProperty(componentSelector)
-        heading!: string;
+    public heading!: string;
 
     @property()
     @validPropertyValues(componentSelector, headingLevels, 'h2')
-        headingLevel: ModalProps['headingLevel'] = 'h2';
+    public headingLevel: ModalProps['headingLevel'] = 'h2';
+
+    @property()
+    @validPropertyValues(componentSelector, sizes, 'medium')
+    public size: ModalProps['size'] = 'medium';
 
     @query('dialog')
         _dialog?: HTMLDialogElement;
@@ -111,17 +119,21 @@ export class PieModal extends RtlMixin(LitElement) {
         const {
             heading,
             headingLevel = 'h2',
+            size,
         } = this;
 
         const headingTag = unsafeStatic(headingLevel);
 
         return html`
-            <dialog id="dialog" class="c-modal">
+            <dialog
+                id="dialog"
+                size="${size}"
+                class="c-modal">
                 <header>
                     <${headingTag} class="c-modal-heading">${heading}</${headingTag}>
                     <pie-icon-button
                         @click="${this._triggerCloseModal}"
-                        variant="ghost-tertiary"
+                        variant="ghost-secondary"
                         class="c-modal-closeBtn"></pie-icon-button>
                 </header>
                 <article class="c-modal-content">

package/src/modal.scss

@@ -3,6 +3,8 @@
 .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;
@@ -15,13 +17,34 @@
 
     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.

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

@@ -1,7 +1,25 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
+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',
@@ -30,13 +48,13 @@ headingLevels.forEach((headingLevel) => test(`should render the correct heading
 
 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 }) => {
+        test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
             const messages: string[] = [];
             await mount(
                 PieModal,
                 {
                     props: {
-                        isOpen: true
+                        isOpen: true,
                     },
                     on: {
                         click: (event: string) => messages.push(event),
@@ -46,13 +64,12 @@ test.describe('`Pie Modal is closed`', () => {
 
             await page.locator('.c-modal-closeBtn').click();
 
-
             expect(messages).toHaveLength(1);
         });
     });
 
     test.describe('when via the backdrop click', () => {
-        test.skip('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
+        test('should dispatch event `pie-modal-close`', async ({ mount, page }) => {
             const messages: string[] = [];
             await mount(
                 PieModal,
@@ -68,7 +85,6 @@ test.describe('`Pie Modal is closed`', () => {
 
             await page.locator('#dialog').click();
 
-
             expect(messages).toHaveLength(1);
         });
     });

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

@@ -2,49 +2,43 @@ 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';
+} 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 { 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>`;
 
-propIsOpenValues.forEach((props) => test(`should render Modal correctly when prop isOpen is set to ${props.isOpen}`, async ({ page, mount }) => {
+// 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(
-        PieModal,
-        {
-            props,
-            slots: {
-                default: 'Hello, this is the Pie Modal!',
-            },
-        },
+        PieIconButton,
+        {},
     );
 
-    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;
-};
+    // 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 props: WebComponentPropValues = {
-        heading: 'I am a Modal!',
-        headingLevel: 'h2',
-        isOpen: true,
-    };
-
-    const modalComponent = renderTestPieModal(props);
+    const modalComponent = renderTestPieModal();
 
     await mount(
         WebComponentTestWrapper,
@@ -64,5 +58,33 @@ test('Should not be able to scroll when modal is open', async ({ page, mount })
 
     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');
+    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}`);
+    });
 });