@justeattakeaway/pie-modal 0.2.0 → 0.4.0

package/.turbo/turbo-build.log

@@ -1,11 +1,14 @@
-vite v4.2.1 building for production...
+[11:48:53] @custom-elements-manifest/analyzer: Created new manifest.
+react wrapper has been added!
+vite v4.2.3 building for production...
 transforming...
-✓ 5 modules transformed.
+✓ 27 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  1.78 kB │ gzip: 0.81 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 23.66s
-[vite:dts] Declaration files built in 23401ms.
-
+dist/index.js   5.93 kB │ gzip:  2.06 kB
+dist/react.js  59.15 kB │ gzip: 15.95 kB
+
+[vite:dts] Start generate declaration files...
+✓ built in 5.82s
+[vite:dts] Declaration files built in 5339ms.
+

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @justeattakeaway/pie-modal
 
+## 0.4.0
+
+### Minor Changes
+
+- [Added] - `heading` and `headingLevel` props to the modal component ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
+
+- [Added] - Modal heading added to component ([#513](https://github.com/justeattakeaway/pie/pull/513)) by [@fernandofranca](https://github.com/fernandofranca)
+
+  [Added] - Basic styling for modal default state
+
+- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] prop to control modal open & close state ([#527](https://github.com/justeattakeaway/pie/pull/527)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
+
+### Patch Changes
+
+- [Fixed] - PieModal CSS by adding logical property ([#521](https://github.com/justeattakeaway/pie/pull/521)) by [@fernandofranca](https://github.com/fernandofranca)
+
+## 0.3.0
+
+### Minor Changes
+
+- [Changed] - Build script to include generating react wrapper ([#426](https://github.com/justeattakeaway/pie/pull/426)) by [@LTurns](https://github.com/LTurns)
+
+### Patch Changes
+
+- [Added] - Missing `test:ci` scripts to package.json ([#492](https://github.com/justeattakeaway/pie/pull/492)) by [@siggerzz](https://github.com/siggerzz)
+
+- [Updated] - components to use the shared configurations ([#487](https://github.com/justeattakeaway/pie/pull/487)) by [@fernandofranca](https://github.com/fernandofranca)
+
+- Updated dependencies [[`090354733`](https://github.com/justeattakeaway/pie/commit/090354733f24f0aa52ce287db7f8d13648414150)]:
+  - @justeattakeaway/pie-webc-core@0.2.0
+
 ## 0.2.0
 
 ### Minor Changes

package/README.md

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

package/dist/index.js

@@ -1,13 +1,14 @@
-import { html as p, LitElement as f } from "lit";
-import { customElement as u } from "lit/decorators.js";
-import { property as m } from "lit/decorators/property.js";
-var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, c = (i, e, s, t) => {
-  for (var r = t > 1 ? void 0 : t ? _(e, s) : e, o = i.length - 1, l; o >= 0; o--)
-    (l = i[o]) && (r = (t ? l(e, s, r) : l(r)) || r);
-  return t && r && v(e, s, r), r;
+import { unsafeCSS as m, LitElement as u, html as f } from "lit";
+import { unsafeStatic as b, html as $ } from "lit/static-html.js";
+import { property as d } from "lit/decorators.js";
+import { property as y } from "lit/decorators/property.js";
+var w = Object.defineProperty, P = Object.getOwnPropertyDescriptor, O = (n, r, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? P(r, o) : r, s = n.length - 1, i; s >= 0; s--)
+    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
+  return t && e && w(r, o, e), e;
 };
-const d = (i) => {
-  class e extends i {
+const _ = (n) => {
+  class r extends n {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -25,27 +26,115 @@ const d = (i) => {
       return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
     }
   }
-  return c([
-    m({ type: String })
-  ], e.prototype, "dir", 2), e;
-};
-var a = Object.defineProperty, P = Object.getOwnPropertyDescriptor, h = (i, e, s, t) => {
-  for (var r = t > 1 ? void 0 : t ? P(e, s) : e, o = i.length - 1, l; o >= 0; o--)
-    (l = i[o]) && (r = (t ? l(e, s, r) : l(r)) || r);
-  return t && r && a(e, s, r), r;
+  return O([
+    y({ type: String })
+  ], r.prototype, "dir", 2), r;
+}, x = (n, r, o) => function(t, e) {
+  const s = `#${e}`;
+  Object.defineProperty(t, e, {
+    get() {
+      return this[s];
+    },
+    set(i) {
+      const h = this[s];
+      r.includes(i) ? this[s] = i : (console.error(
+        `<${n}> Invalid value "${i}" provided for property "${e}".`,
+        `Must be one of: ${r.join(" | ")}.`,
+        `Falling back to default value: "${o}"`
+      ), this[s] = o), this.requestUpdate(e, h);
+    }
+  });
+}, C = (n) => function(r, o) {
+  const t = `#${o}`;
+  Object.defineProperty(r, o, {
+    get() {
+      return this[t];
+    },
+    set(e) {
+      const s = this[t];
+      (e == null || e === "") && console.error(`<${n}> Missing required attribute "${o}"`), this[t] = e, this.requestUpdate(o, s);
+    }
+  });
+}, j = `.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, z = (n, r, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? W(r, o) : r, s = n.length - 1, i; s >= 0; s--)
+    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
+  return t && e && T(r, o, e), e;
 };
-let n = class extends d(f) {
+class l extends u {
+  constructor() {
+    super(...arguments), this.propKeyValues = "";
+  }
+  // Renders a string such as 'size: small, isFullWidth: true'
+  // as HTML such as:
+  // <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
+  // <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
+  _renderPropKeyValues() {
+    return this.propKeyValues.split(",").map((r) => {
+      const [o, t] = r.split(":");
+      return f`<p class="c-webComponentTestWrapper-label"><b>${o}</b>: <code>${t}</code></p>`;
+    });
+  }
   // eslint-disable-next-line class-methods-use-this
   render() {
-    return p`
-            <div>This is the Pie Modal
-                <slot></slot>
+    return f`
+            <div class="c-webComponentTestWrapper">
+                ${this._renderPropKeyValues()}
+                <div class="c-webComponentTestWrapper-slot">
+                    <slot></slot>
+                </div>
             </div>`;
   }
+}
+l.styles = m(j);
+z([
+  d({ type: String })
+], l.prototype, "propKeyValues", 2);
+const v = "web-component-test-wrapper";
+customElements.get(v) || customElements.define(v, l);
+const q = `.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)}
+`;
+var p = /* @__PURE__ */ ((n) => (n.H1 = "h1", n.H2 = "h2", n.H3 = "h3", n.H4 = "h4", n.H5 = "h5", n.H6 = "h6", n))(p || {}), M = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (n, r, o, t) => {
+  for (var e = t > 1 ? void 0 : t ? S(r, o) : r, s = n.length - 1, i; s >= 0; s--)
+    (i = n[s]) && (e = (t ? i(r, o, e) : i(e)) || e);
+  return t && e && M(r, o, e), e;
 };
-n = h([
-  u("pie-modal")
-], n);
+const g = "pie-modal";
+class a extends _(u) {
+  constructor() {
+    super(...arguments), this.isOpen = !1, this.headingLevel = p.H2;
+  }
+  render() {
+    const {
+      isOpen: r,
+      heading: o,
+      headingLevel: t
+    } = this, e = b(t);
+    return $`
+            <dialog class="c-modal" ?open="${r}">
+                <${e} class="c-modal-heading">${o}</${e}>
+                <div class="c-modal-contentWrapper">
+                    <slot></slot>
+                </div>
+            </dialog>
+        `;
+  }
+}
+a.styles = m(q);
+c([
+  d({ type: Boolean })
+], a.prototype, "isOpen", 2);
+c([
+  d({ type: String }),
+  C(g)
+], a.prototype, "heading", 2);
+c([
+  d(),
+  x(g, Object.values(p), p.H2)
+], a.prototype, "headingLevel", 2);
+customElements.define(g, a);
 export {
-  n as PieModal
+  p as HEADING_LEVELS,
+  a as PieModal
 };