@justeattakeaway/pie-button 0.6.1 → 0.7.0

package/.turbo/turbo-build.log

@@ -1,7 +1,6 @@
-@justeattakeaway/pie-button:build: cache hit, replaying output d804f716cd573de0
-@justeattakeaway/pie-button:build: vite v4.0.4 building for production...
-@justeattakeaway/pie-button:build: transforming...
-@justeattakeaway/pie-button:build: ✓ 4 modules transformed.
-@justeattakeaway/pie-button:build: rendering chunks...
-@justeattakeaway/pie-button:build: computing gzip size...
-@justeattakeaway/pie-button:build: dist/pie-button.js  3.52 kB │ gzip: 1.49 kB
+vite v4.0.4 building for production...
+transforming...
+✓ 4 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/pie-button.js  3.69 kB │ gzip: 1.55 kB

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.7.0
+
+### Minor Changes
+
+- [Updated] button to handle custom events ([#309](https://github.com/justeattakeaway/pie/pull/309)) by [@FayeCarter](https://github.com/FayeCarter)
+
+### Patch Changes
+
+- Add missing Volta settings to package.json ([#322](https://github.com/justeattakeaway/pie/pull/322)) by [@fernandofranca](https://github.com/fernandofranca)
+
 ## 0.6.1
 
 ### Patch Changes

package/dist/pie-button.js

@@ -1,70 +1,74 @@
-import { unsafeCSS as f, LitElement as g, html as h } from "lit";
+import { unsafeCSS as f, LitElement as h, html as g } from "lit";
 import { classMap as m } from "lit/directives/class-map.js";
 import { property as p, customElement as v } from "lit/decorators.js";
 const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;font-weight:700;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{padding:6px 8px;min-height:32px;font-size:14px;line-height:20px}.o-btn--small{padding:8px 16px;min-height:40px;font-size:19px;line-height:28px}.o-btn--medium{padding:10px 24px;min-height:48px;font-size:20px;line-height:28px}.o-btn--large{padding:14px 24px;min-height:56px;font-size:20px;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover{background-color:#df5f05}.o-btn--primary:active{background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover{background-color:#ede9e5}.o-btn--secondary:active{background-color:#dcd4cd}.o-btn--outline{outline:1px solid #dbd9d7;background-color:#fff;color:#303d3f}.o-btn--outline:hover{background-color:#f5f5f5}.o-btn--outline:active{background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover{background-color:#f5f5f5}.o-btn--ghost:active{background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;outline:1px solid #efedea;cursor:default}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}
-`, u = (o, r) => function(t, n) {
-  const e = `_${n}`;
-  Object.defineProperty(t, n, {
+`, u = (o, n) => function(i, t) {
+  const e = `#${t}`;
+  Object.defineProperty(i, t, {
     get() {
-      return t[e];
+      return this[e];
     },
-    set(i) {
-      const l = t[e];
-      o.includes(i) ? t[e] = i : (console.error(
-        `[pie-button] Invalid value "${i}" provided for property "${n}".`,
+    set(r) {
+      const s = this[e];
+      o.includes(r) ? this[e] = r : (console.error(
+        `[pie-button] Invalid value "${r}" provided for property "${t}".`,
         `Must be one of: ${o.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), t[e] = r), this.requestUpdate(n, l);
+        `Falling back to default value: "${n}"`
+      ), this[e] = n), this.requestUpdate(t, s);
     }
   });
 };
-var c = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(c || {}), b = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(b || {}), d = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(d || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (o, r, t, n) => {
-  for (var e = n > 1 ? void 0 : n ? M(r, t) : r, i = o.length - 1, l; i >= 0; i--)
-    (l = o[i]) && (e = (n ? l(r, t, e) : l(e)) || e);
-  return n && e && y(r, t, e), e;
+var c = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(c || {}), d = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(d || {}), b = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(b || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, a = (o, n, i, t) => {
+  for (var e = t > 1 ? void 0 : t ? M(n, i) : n, r = o.length - 1, s; r >= 0; r--)
+    (s = o[r]) && (e = (t ? s(n, i, e) : s(e)) || e);
+  return t && e && y(n, i, e), e;
 };
-let s = class extends g {
+let l = class extends h {
   constructor() {
-    super(...arguments), this.size = c.MEDIUM, this.type = b.SUBMIT, this.variant = d.PRIMARY, this.disabled = !1;
+    super(...arguments), this.size = c.MEDIUM, this.type = d.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1;
   }
   render() {
-    const { size: o, type: r, variant: t, disabled: n } = this, e = {
+    const { size: o, type: n, variant: i, disabled: t } = this, e = {
       "o-btn": !0,
       [`o-btn--${o}`]: o,
-      [`o-btn--${t}`]: t,
-      "o-btn--is-disabled": n
+      [`o-btn--${i}`]: i,
+      "o-btn--is-disabled": t
+    }, r = () => {
+      const s = new Event("CustomEvent");
+      console.info("WC event dispatched"), this.dispatchEvent(s);
     };
-    return h`
+    return g`
             <button
                 class=${m(e)}
-                type=${r}
-                ?disabled=${n}>
+                type=${n}
+                ?disabled=${t}
+                @click="${r}">
                 I'm a PIE button
             </button>`;
   }
 };
-s.styles = f(x);
+l.styles = f(x);
 a([
   p(),
   u(Object.values(c), c.MEDIUM)
-], s.prototype, "size", 2);
+], l.prototype, "size", 2);
 a([
   p(),
-  u(Object.values(b), b.SUBMIT)
-], s.prototype, "type", 2);
+  u(Object.values(d), d.SUBMIT)
+], l.prototype, "type", 2);
 a([
   p(),
-  u(Object.values(d), d.PRIMARY)
-], s.prototype, "variant", 2);
+  u(Object.values(b), b.PRIMARY)
+], l.prototype, "variant", 2);
 a([
   p()
-], s.prototype, "disabled", 2);
-s = a([
+], l.prototype, "disabled", 2);
+l = a([
   v("pie-button")
-], s);
+], l);
 export {
   c as BUTTON_SIZE,
-  b as BUTTON_TYPE,
-  d as BUTTON_VARIANT,
-  s as PieButton
+  d as BUTTON_TYPE,
+  b as BUTTON_VARIANT,
+  l as PieButton
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "PIE design system button built using web components",
   "type": "module",
   "main": "dist/pie-button.js",
@@ -11,5 +11,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "JustEatTakeaway - Design System Web Team",
-  "license": "Apache-2.0"
+  "license": "Apache-2.0",
+  "volta": {
+    "extends": "../../../package.json"
+  }
 }

package/src/decorators.ts

@@ -7,14 +7,14 @@
  */
 export const validPropertyValues = (validValues: any[], defaultValue: any) => {
     return function (target: any, propertyKey: string) : void {
-        const privatePropertyKey = `_${propertyKey}`;
+        const privatePropertyKey = `#${propertyKey}`;
 
         Object.defineProperty(target, propertyKey, {
             get () : any {
-                return target[privatePropertyKey];
+                return this[privatePropertyKey];
             },
             set (value: any) : void {
-                const oldValue = target[privatePropertyKey];
+                const oldValue = this[privatePropertyKey];
 
                 if (!validValues.includes(value)) {
                     console.error(
@@ -22,9 +22,9 @@ export const validPropertyValues = (validValues: any[], defaultValue: any) => {
                         `Must be one of: ${validValues.join(' | ')}.`,
                         `Falling back to default value: "${defaultValue}"`
                     );
-                    target[privatePropertyKey] = defaultValue;
+                    this[privatePropertyKey] = defaultValue;
                 } else {
-                    target[privatePropertyKey] = value;
+                    this[privatePropertyKey] = value;
                 }
 
                 this.requestUpdate(propertyKey, oldValue);

package/src/index.ts

@@ -36,15 +36,22 @@ export class PieButton extends LitElement {
             'o-btn--is-disabled': disabled,
         };
 
+        const raiseWCEvent = () => {
+            const event = new Event('CustomEvent')
+            console.info('WC event dispatched')
+            this.dispatchEvent(event)
+        }
+
         return html`
             <button
                 class=${classMap(classes)}
                 type=${type}
-                ?disabled=${disabled}>
+                ?disabled=${disabled}
+                @click="${raiseWCEvent}">
                 I'm a PIE button
             </button>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
-}
+}