@justeattakeaway/pie-modal 0.5.0 → 0.6.1

package/.turbo/turbo-build.log

@@ -1,14 +1,19 @@
-[3:48:32 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[2:38:36 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
-vite v4.2.3 building for production...
+vite v4.3.9 building for production...
 transforming...
 ✓ 28 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   5.83 kB │ gzip:  2.00 kB
-dist/react.js  59.15 kB │ gzip: 15.94 kB
+dist/index.js   7.43 kB │ gzip:  2.38 kB
+dist/react.js  59.04 kB │ gzip: 15.92 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 30.45s
-[vite:dts] Declaration files built in 28192ms.
+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.
 

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @justeattakeaway/pie-modal
 
+## 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
+
+- [Changed] - Updated styles to use custom props ([#551](https://github.com/justeattakeaway/pie/pull/551)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [Added] - close button to modal ([#549](https://github.com/justeattakeaway/pie/pull/549)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
 ## 0.5.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 h, LitElement as v, html as g } from "lit";
+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 d } from "lit/decorators.js";
-import { property as $ } from "lit/decorators/property.js";
-var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (s, r, n, t) => {
-  for (var e = t > 1 ? void 0 : t ? w(r, n) : r, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
-  return t && e && y(r, n, e), e;
+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;
 };
-const _ = (s) => {
-  class r extends s {
+const O = (r) => {
+  class t extends r {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -22,47 +22,47 @@ const _ = (s) => {
      * will not be reactive and is only computed once
      */
     get isRTL() {
-      var t;
-      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
+      var o;
+      return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((o = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : o.direction) === "rtl";
     }
   }
   return P([
-    $({ type: String })
-  ], r.prototype, "dir", 2), r;
-}, O = (s, r, n) => function(t, e) {
-  const o = `#${e}`;
-  Object.defineProperty(t, e, {
+    w({ type: String })
+  ], t.prototype, "dir", 2), t;
+}, C = (r, t, n) => function(o, e) {
+  const a = `#${e}`;
+  Object.defineProperty(o, e, {
     get() {
-      return this[o];
+      return this[a];
     },
     set(i) {
-      const m = this[o];
-      r.includes(i) ? this[o] = i : (console.error(
-        `<${s}> Invalid value "${i}" provided for property "${e}".`,
-        `Must be one of: ${r.join(" | ")}.`,
+      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[o] = n), this.requestUpdate(e, m);
+      ), this[a] = n), this.requestUpdate(e, f);
     }
   });
-}, x = (s) => function(r, n) {
-  const t = `#${n}`;
-  Object.defineProperty(r, n, {
+}, x = (r) => function(t, n) {
+  const o = `#${n}`;
+  Object.defineProperty(t, n, {
     get() {
-      return this[t];
+      return this[o];
     },
     set(e) {
-      const o = this[t];
-      (e == null || e === "") && console.error(`<${s}> Missing required attribute "${n}"`), this[t] = e, this.requestUpdate(n, o);
+      const a = this[o];
+      (e == null || e === "") && console.error(`<${r}> Missing required attribute "${n}"`), this[o] = e, this.requestUpdate(n, a);
     }
   });
-}, C = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
+}, 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 T = Object.defineProperty, W = Object.getOwnPropertyDescriptor, j = (s, r, n, t) => {
-  for (var e = t > 1 ? void 0 : t ? W(r, n) : r, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
-  return t && e && T(r, n, e), e;
+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 p extends v {
+class c extends v {
   constructor() {
     super(...arguments), this.propKeyValues = "";
   }
@@ -71,14 +71,14 @@ class p extends v {
   // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
   // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
   _renderPropKeyValues() {
-    return this.propKeyValues.split(",").map((r) => {
-      const [n, t] = r.split(":");
-      return g`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${t}</code></p>`;
+    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 g`
+    return m`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
@@ -87,54 +87,70 @@ class p extends v {
             </div>`;
   }
 }
-p.styles = h(C);
-j([
-  d({ type: String })
-], p.prototype, "propKeyValues", 2);
-const f = "web-component-test-wrapper";
-customElements.get(f) || customElements.define(f, p);
-const S = `.c-modal{border-radius:var(--dt-radius-rounded-d);border:none;font-family:var(--dt-font-interactive-m-family);background-color:var(--dt-color-container-default);padding:0;inline-size:600px;box-shadow:var(--dt-elevation-04)}.c-modal .c-modal-heading{font-size:calc(var(--dt-font-heading-m-size--wide) * 1px);line-height:calc(var(--dt-font-heading-m-line-height--wide) * 1px);font-weight:var(--dt-font-heading-m-weight);margin:0;padding-block:var(--dt-spacing-e) var(--dt-spacing-d);padding-inline:var(--dt-spacing-e)}.c-modal .c-modal-contentWrapper{font-size:calc(var(--dt-font-size-16) * 1px);line-height:calc(var(--dt-font-size-16-line-height) * 1px);font-weight:var(--dt-font-weight-regular);padding-block:var(--dt-spacing-a) var(--dt-spacing-e);padding-inline:var(--dt-spacing-e)}
-`, z = ["h1", "h2", "h3", "h4", "h5", "h6"];
-var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, l = (s, r, n, t) => {
-  for (var e = t > 1 ? void 0 : t ? D(r, n) : r, o = s.length - 1, i; o >= 0; o--)
-    (i = s[o]) && (e = (t ? i(r, n, e) : i(e)) || e);
-  return t && e && L(r, n, e), e;
+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;
 };
-const c = "pie-modal";
-class a extends _(v) {
+const p = "pie-modal";
+class d extends O(v) {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.headingLevel = "h2";
+    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);
+    };
   }
   render() {
     const {
-      isOpen: r,
+      isOpen: t,
       heading: n,
-      headingLevel: t
-    } = this, e = u(t);
+      headingLevel: o = "h2"
+    } = this, e = u(o);
     return b`
-            <dialog class="c-modal" ?open="${r}">
-                <${e} class="c-modal-heading">${n}</${e}>
-                <div class="c-modal-contentWrapper">
-                    <slot></slot>
-                </div>
+            <dialog id="dialog" class="c-modal" ?open="${t}">
+                <header>
+                    <${e} class="c-modal-heading">${n}</${e}>
+                    <pie-icon-button
+                        @click="${this._handleCloseDialog}"
+                        variant="ghost-tertiary"
+                        class="c-modal-closeBtn"></pie-icon-button>
+                </header>
+                <article>
+                    <div class="c-modal-content">
+                        <slot></slot>
+                    </div>
+                </article>
             </dialog>
         `;
   }
 }
-a.styles = h(S);
+d.styles = g(S);
+l([
+  s({ type: Boolean })
+], d.prototype, "isOpen", 2);
 l([
-  d({ type: Boolean })
-], a.prototype, "isOpen", 2);
+  s({ type: String }),
+  x(p)
+], d.prototype, "heading", 2);
 l([
-  d({ type: String }),
-  x(c)
-], a.prototype, "heading", 2);
+  s(),
+  C(p, j, "h2")
+], d.prototype, "headingLevel", 2);
 l([
-  d(),
-  O(c, z, "h2")
-], a.prototype, "headingLevel", 2);
-customElements.define(c, a);
+  _("dialog")
+], d.prototype, "_dialog", 2);
+customElements.define(p, d);
 export {
-  a as PieModal,
-  z as headingLevels
+  d as PieModal,
+  j as headingLevels
 };