@justeattakeaway/pie-modal 0.4.0 → 0.5.0

package/.turbo/turbo-build.log

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

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @justeattakeaway/pie-modal
 
+## 0.5.0
+
+### Minor Changes
+
+- [Updated] - enum types to string union types to string union types ([#508](https://github.com/justeattakeaway/pie/pull/508)) by [@FayeCarter](https://github.com/FayeCarter)
+
 ## 0.4.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,14 +1,14 @@
-import { unsafeCSS as m, LitElement as u, html as f } from "lit";
-import { unsafeStatic as b, html as $ } from "lit/static-html.js";
+import { unsafeCSS as h, LitElement as v, html as g } 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 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;
+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;
 };
-const _ = (n) => {
-  class r extends n {
+const _ = (s) => {
+  class r extends s {
     constructor() {
       super(...arguments), this.dir = "";
     }
@@ -26,43 +26,43 @@ const _ = (n) => {
       return this.dir === "ltr" ? !1 : this.dir === "rtl" || ((t = window == null ? void 0 : window.getComputedStyle(this)) == null ? void 0 : t.direction) === "rtl";
     }
   }
-  return O([
-    y({ type: String })
+  return P([
+    $({ type: String })
   ], r.prototype, "dir", 2), r;
-}, x = (n, r, o) => function(t, e) {
-  const s = `#${e}`;
+}, O = (s, r, n) => function(t, e) {
+  const o = `#${e}`;
   Object.defineProperty(t, e, {
     get() {
-      return this[s];
+      return this[o];
     },
     set(i) {
-      const h = this[s];
-      r.includes(i) ? this[s] = i : (console.error(
-        `<${n}> Invalid value "${i}" provided for property "${e}".`,
+      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(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[s] = o), this.requestUpdate(e, h);
+        `Falling back to default value: "${n}"`
+      ), this[o] = n), this.requestUpdate(e, m);
     }
   });
-}, C = (n) => function(r, o) {
-  const t = `#${o}`;
-  Object.defineProperty(r, o, {
+}, x = (s) => function(r, n) {
+  const t = `#${n}`;
+  Object.defineProperty(r, n, {
     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);
+      const o = this[t];
+      (e == null || e === "") && console.error(`<${s}> Missing required attribute "${n}"`), this[t] = e, this.requestUpdate(n, o);
     }
   });
-}, 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)}
+}, 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)}
 `;
-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;
+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;
 };
-class l extends u {
+class p extends v {
   constructor() {
     super(...arguments), this.propKeyValues = "";
   }
@@ -72,13 +72,13 @@ class l extends u {
   // <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>`;
+      const [n, t] = r.split(":");
+      return g`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${t}</code></p>`;
     });
   }
   // eslint-disable-next-line class-methods-use-this
   render() {
-    return f`
+    return g`
             <div class="c-webComponentTestWrapper">
                 ${this._renderPropKeyValues()}
                 <div class="c-webComponentTestWrapper-slot">
@@ -87,33 +87,33 @@ class l extends u {
             </div>`;
   }
 }
-l.styles = m(j);
-z([
+p.styles = h(C);
+j([
   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;
+], 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;
 };
-const g = "pie-modal";
-class a extends _(u) {
+const c = "pie-modal";
+class a extends _(v) {
   constructor() {
-    super(...arguments), this.isOpen = !1, this.headingLevel = p.H2;
+    super(...arguments), this.isOpen = !1, this.headingLevel = "h2";
   }
   render() {
     const {
       isOpen: r,
-      heading: o,
+      heading: n,
       headingLevel: t
-    } = this, e = b(t);
-    return $`
+    } = this, e = u(t);
+    return b`
             <dialog class="c-modal" ?open="${r}">
-                <${e} class="c-modal-heading">${o}</${e}>
+                <${e} class="c-modal-heading">${n}</${e}>
                 <div class="c-modal-contentWrapper">
                     <slot></slot>
                 </div>
@@ -121,20 +121,20 @@ class a extends _(u) {
         `;
   }
 }
-a.styles = m(q);
-c([
+a.styles = h(S);
+l([
   d({ type: Boolean })
 ], a.prototype, "isOpen", 2);
-c([
+l([
   d({ type: String }),
-  C(g)
+  x(c)
 ], a.prototype, "heading", 2);
-c([
+l([
   d(),
-  x(g, Object.values(p), p.H2)
+  O(c, z, "h2")
 ], a.prototype, "headingLevel", 2);
-customElements.define(g, a);
+customElements.define(c, a);
 export {
-  p as HEADING_LEVELS,
-  a as PieModal
+  a as PieModal,
+  z as headingLevels
 };

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

@@ -1,12 +1,8 @@
+export interface ModalProps {
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
 /**
  * Modal heading levels/tags
  */
-export declare enum HEADING_LEVELS {
-    H1 = "h1",
-    H2 = "h2",
-    H3 = "h3",
-    H4 = "h4",
-    H5 = "h5",
-    H6 = "h6"
-}
+export declare const headingLevels: ModalProps['headingLevel'][];
 //# 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;;GAEG;AACH,oBAAY,cAAc;IACxB,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;CACV"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACzD;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,EAAyC,CAAC"}

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
-import { HEADING_LEVELS } from './defs';
-export { HEADING_LEVELS };
+import { ModalProps, headingLevels } from './defs';
+export { type ModalProps, headingLevels };
+declare const componentSelector = "pie-modal";
 declare const PieModal_base: (new (...args: any[]) => {
     dir: string;
     isRTL: boolean;
@@ -8,13 +9,13 @@ declare const PieModal_base: (new (...args: any[]) => {
 export declare class PieModal extends PieModal_base {
     isOpen: boolean;
     heading: string;
-    headingLevel: HEADING_LEVELS;
+    headingLevel: ModalProps['headingLevel'];
     render(): import("lit-html").TemplateResult<1 | 2>;
     static styles: import("lit").CSSResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-modal': PieModal;
+        [componentSelector]: PieModal;
     }
 }
 //# sourceMappingURL=index.d.ts.map

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,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGxC,OAAO,EAAE,cAAc,EAAE,CAAC;;;;;AAI1B,qBAAa,QAAS,SAAQ,aAAoB;IAE1C,MAAM,UAAS;IAIf,OAAO,EAAG,MAAM,CAAC;IAIjB,YAAY,EAAG,cAAc,CAAqB;IAEtD,MAAM;IAoBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,WAAW,EAAE,QAAQ,CAAC;KACzB;CACJ"}
+{"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,EAAE,MAAM,QAAQ,CAAC;AAGnD,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;IAEpD,MAAM;IAoBN,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.4.0",
+  "version": "0.5.0",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",

package/src/defs.ts

@@ -1,11 +1,8 @@
+export interface ModalProps {
+    headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+}
+
 /**
  * Modal heading levels/tags
  */
-export enum HEADING_LEVELS {
-  H1 = 'h1',
-  H2 = 'h2',
-  H3 = 'h3',
-  H4 = 'h4',
-  H5 = 'h5',
-  H6 = 'h6'
-}
+export const headingLevels: ModalProps['headingLevel'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];

package/src/index.ts

@@ -4,10 +4,10 @@ import { property } from 'lit/decorators.js'; // eslint-disable-line import/no-e
 import { RtlMixin, validPropertyValues, requiredProperty } from '@justeattakeaway/pie-webc-core';
 
 import styles from './modal.scss?inline';
-import { HEADING_LEVELS } from './defs';
+import { ModalProps, headingLevels } from './defs';
 
 // Valid values available to consumers
-export { HEADING_LEVELS };
+export { type ModalProps, headingLevels };
 
 const componentSelector = 'pie-modal';
 
@@ -20,8 +20,8 @@ export class PieModal extends RtlMixin(LitElement) {
         heading!: string;
 
     @property()
-    @validPropertyValues(componentSelector, Object.values(HEADING_LEVELS), HEADING_LEVELS.H2)
-        headingLevel : HEADING_LEVELS = HEADING_LEVELS.H2;
+    @validPropertyValues(componentSelector, headingLevels, 'h2')
+        headingLevel: ModalProps['headingLevel'] = 'h2';
 
     render () {
         const {
@@ -50,6 +50,6 @@ customElements.define(componentSelector, PieModal);
 
 declare global {
     interface HTMLElementTagNameMap {
-        'pie-modal': PieModal;
+        [componentSelector]: PieModal;
     }
 }

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

@@ -1,8 +1,8 @@
 import { test, expect } from '@sand4rt/experimental-ct-web';
 import { PieModal } from '@/index';
-import { HEADING_LEVELS } from '@/defs';
+import { headingLevels } from '@/defs';
 
-Object.values(HEADING_LEVELS).forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => {
+headingLevels.forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => {
     const props = {
         heading: 'Modal Header',
         headingLevel,
@@ -13,15 +13,15 @@ Object.values(HEADING_LEVELS).forEach((headingLevel) => test(`should render the
     await expect(component.locator(`${props.headingLevel}.c-modal-heading`)).toContainText(props.heading);
 }));
 
-['span', 'section'].forEach((headingLevel) => test(`should render the fallback heading level ${HEADING_LEVELS.H2} if invalid headingLevel: ${headingLevel} is passed`, async ({ mount }) => {
+['span', 'section'].forEach((headingLevel) => test(`should render the fallback heading level 'h2' if invalid headingLevel: ${headingLevel} is passed`, async ({ mount }) => {
     const props = {
         heading: 'Modal Header',
         // assert type checking as we purposely provide incorrect value
-        headingLevel: headingLevel as HEADING_LEVELS,
+        headingLevel,
     };
 
     const component = await mount(PieModal, { props });
 
     // h2 is the default / fallback value
-    await expect(component.locator(`${HEADING_LEVELS.H2}.c-modal-heading`)).toContainText(props.heading);
+    await expect(component.locator('h2.c-modal-heading')).toContainText(props.heading);
 }));

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

@@ -1,6 +1,7 @@
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
 import { PieModal } from '@/index';
+import { getLitPercyOptions } from '@justeattakeaway/pie-webc-core/src/test-helpers/percy-lit-options.ts';
 
 const propIsOpenValues = [{ heading: 'Modal Heading', isOpen: true }, { isOpen: false }];
 
@@ -15,5 +16,5 @@ propIsOpenValues.forEach((props) => test(`should render Modal correctly when pro
         },
     );
 
-    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`);
+    await percySnapshot(page, `PIE Modal when isOpen is set to ${props.isOpen}`, getLitPercyOptions());
 }));