@justeattakeaway/pie-button 0.12.2 → 0.13.0

package/.turbo/turbo-build.log

@@ -1,11 +1,14 @@
+[11:03:19 AM] @custom-elements-manifest/analyzer: Created new manifest.
+react wrapper has been added!
 vite v4.2.1 building for production...
 transforming...
-✓ 4 modules transformed.
+✓ 19 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  4.32 kB │ gzip: 1.65 kB
+dist/index.js   6.51 kB │ gzip:  1.78 kB
+dist/react.js  59.13 kB │ gzip: 15.94 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 24.29s
-[vite:dts] Declaration files built in 23021ms.
+✓ built in 37.16s
+[vite:dts] Declaration files built in 34280ms.
 

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 0.13.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)
+
+- [Changed] - Deleted old prop validation decorator to replace with shared one from the core package ([#491](https://github.com/justeattakeaway/pie/pull/491)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Changed] - Changed styles to use CSS Custom Props and host attrs ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
+
+### Patch Changes
+
+- [Added] - Missing `test:ci` scripts to package.json ([#492](https://github.com/justeattakeaway/pie/pull/492)) by [@siggerzz](https://github.com/siggerzz)
+
+- [Fixed] - Resolved TS Build errors ([#482](https://github.com/justeattakeaway/pie/pull/482)) by [@ashleynolan](https://github.com/ashleynolan)
+
+- [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.12.2
 
 ### Patch Changes

package/README.md

@@ -45,6 +45,16 @@ Compile and watch for changes (auto-compiles `dist` on save)
 yarn watch
 ```
 
+### Importing the component
+
+```js
+// default
+import { PieButton } from '@justeattakeaway/pie-button';
+
+// react
+import { PieButton } from '@justeattakeaway/pie-button/dist/react';
+```
+
 ## Props
 
 | Property    | Type      | Default         | Description                                                          |

package/dist/index.js

@@ -1,81 +1,72 @@
-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 a, customElement as x } from "lit/decorators.js";
-const v = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;cursor:pointer;user-select:none;outline:none}.o-btn:focus-visible{outline:2px solid #4996fd}.o-btn--xsmall{min-block-size:32px;padding:6px 8px;font-size:14px;font-weight:700;line-height:20px}.o-btn--small-productive{min-block-size:40px;padding:8px 16px;font-size:16px;font-weight:700;line-height:24px}.o-btn--small-expressive{min-block-size:40px;padding:6px 16px;font-size:20px;font-weight:700;line-height:28px}.o-btn--medium{min-block-size:48px;padding:10px 24px;font-size:20px;font-weight:700;line-height:28px}.o-btn--large{min-block-size:56px;padding:14px 24px;font-size:20px;font-weight:700;line-height:28px}.o-btn--primary{background-color:#f36805;color:#fff}.o-btn--primary:hover:not(:disabled){background-color:#df5f05}.o-btn--primary:active:not(:disabled){background-color:#b74e04}.o-btn--secondary{background-color:#f5f3f1;color:#242e30}.o-btn--secondary:hover:not(:disabled){background-color:#ede9e5}.o-btn--secondary:active:not(:disabled){background-color:#dcd4cd}.o-btn--outline{background-color:#fff;color:#303d3f;border:1px solid #dbd9d7}.o-btn--outline:hover:not(:disabled){background-color:#f5f5f5}.o-btn--outline:active:not(:disabled){background-color:#e0e0e0}.o-btn--ghost{background-color:#fff;color:#242e30}.o-btn--ghost:hover:not(:disabled){background-color:#f5f5f5}.o-btn--ghost:active:not(:disabled){background-color:#e0e0e0}.o-btn.o-btn--is-disabled{background-color:#efedea;color:#8c999b;border:1px solid #efedea;cursor:not-allowed}.o-btn.o-btn--is-disabled:hover:not(:disabled){background-color:#e6e3de}.o-btn.o-btn--is-disabled:active:not(:disabled){background-color:#d5cfc7}.o-btn.o-btn--is-disabled.o-btn--ghost{background-color:#fff;outline:none}.o-btn--fullWidth{inline-size:100%}
-`, u = (o, n) => function(r, t) {
-  const e = `#${t}`;
-  Object.defineProperty(r, t, {
+import { unsafeCSS as f, LitElement as g, html as m } from "lit";
+import { property as c } from "lit/decorators.js";
+import "lit/decorators/property.js";
+const u = (t, r, e) => function(n, o) {
+  const a = `#${o}`;
+  Object.defineProperty(n, o, {
     get() {
-      return this[e];
+      return this[a];
     },
     set(i) {
-      const d = this[e];
-      o.includes(i) ? this[e] = i : (console.error(
-        `[pie-button] Invalid value "${i}" provided for property "${t}".`,
-        `Must be one of: ${o.join(" | ")}.`,
-        `Falling back to default value: "${n}"`
-      ), this[e] = n), this.requestUpdate(t, d);
+      const p = this[a];
+      r.includes(i) ? this[a] = i : (console.error(
+        `<${t}> Invalid value "${i}" provided for property "${o}".`,
+        `Must be one of: ${r.join(" | ")}.`,
+        `Falling back to default value: "${e}"`
+      ), this[a] = e), this.requestUpdate(o, p);
     }
   });
+}, y = `:host{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-min-height: 48px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer)}.o-btn{min-block-size:var(--btn-min-block-size);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none}.o-btn:focus-visible{outline:2px solid var(--btn-focus)}:host([variant=primary]) .o-btn:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)))}:host([variant=primary]) .o-btn:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-brand-h),var(--dt-color-interactive-brand-s),calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)))}:host([variant=secondary]){--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary)}:host([variant=secondary]) .o-btn:hover:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-hover-01)))}:host([variant=secondary]) .o-btn:active:not(:disabled){background-color:hsl(var(--dt-color-interactive-secondary-h),var(--dt-color-interactive-secondary-s),calc(var(--dt-color-interactive-secondary-l) - var(--dt-color-active-01)))}:host([variant=outline]){--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-interactive-tertiary)}:host([variant=outline]) .o-btn{border:1px solid var(--dt-color-border-strong)}:host([variant=outline]) .o-btn:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}:host([variant=outline]) .o-btn:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}:host([variant=ghost]){--btn-bg-color: var(--dt-color-container-default);--btn-text-color: var(--dt-color-content-link)}:host([variant=ghost]) .o-btn:hover:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)))}:host([variant=ghost]) .o-btn:active:not(:disabled){background-color:hsl(var(--dt-color-container-default-h),var(--dt-color-container-default-s),calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)))}:host([disabled]){--btn-bg-color: var(--dt-color-disabled-01);--btn-text-color: var(--dt-color-content-disabled)}:host([disabled]) .o-btn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}:host([isFullWidth]) .o-btn{inline-size:100%}:host([disabled][variant=ghost]){--btn-bg-color: var(--dt-color-container-default)}:host([disabled][variant=ghost]) .o-btn{outline:none}:host([size=xsmall]){--btn-padding: 6px var(--dt-spacing-b);--btn-min-block-size: 32px;--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}:host([size=small]){--btn-padding: 8px var(--dt-spacing-d);--btn-min-block-size: 40px;--btn-font-size: calc(var(--dt-font-size-19) * 1px);--btn-line-height: calc(var(--dt-font-size-19-line-height) * 1px)}:host([size=large]){--btn-padding: 14px var(--dt-spacing-e);--btn-min-block-size: 56px;--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}
+`;
+var s = /* @__PURE__ */ ((t) => (t.XSMALL = "xsmall", t.SMALL_EXPRESSIVE = "small-expressive", t.SMALL_PRODUCTIVE = "small-productive", t.MEDIUM = "medium", t.LARGE = "large", t))(s || {}), v = /* @__PURE__ */ ((t) => (t.SUBMIT = "submit", t.BUTTON = "button", t.RESET = "reset", t.MENU = "menu", t))(v || {}), b = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t))(b || {}), x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, d = (t, r, e, n) => {
+  for (var o = n > 1 ? void 0 : n ? z(r, e) : r, a = t.length - 1, i; a >= 0; a--)
+    (i = t[a]) && (o = (n ? i(r, e, o) : i(o)) || o);
+  return n && o && x(r, e, o), o;
 };
-var b = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL_EXPRESSIVE = "small-expressive", o.SMALL_PRODUCTIVE = "small-productive", o.MEDIUM = "medium", o.LARGE = "large", o))(b || {}), c = /* @__PURE__ */ ((o) => (o.SUBMIT = "submit", o.BUTTON = "button", o.RESET = "reset", o.MENU = "menu", o))(c || {}), p = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o))(p || {}), y = Object.defineProperty, M = Object.getOwnPropertyDescriptor, l = (o, n, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? M(n, r) : n, i = o.length - 1, d; i >= 0; i--)
-    (d = o[i]) && (e = (t ? d(n, r, e) : d(e)) || e);
-  return t && e && y(n, r, e), e;
-};
-let s = class extends h {
+const h = "pie-button";
+class l extends g {
   constructor() {
-    super(...arguments), this.size = b.MEDIUM, this.type = c.SUBMIT, this.variant = p.PRIMARY, this.disabled = !1, this.isFullWidth = !1;
+    super(...arguments), this.size = s.MEDIUM, this.type = v.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1, this.isFullWidth = !1;
   }
   render() {
     const {
-      size: o,
-      type: n,
-      variant: r,
-      disabled: t,
-      isFullWidth: e
-    } = this, i = {
-      "o-btn": !0,
-      [`o-btn--${o}`]: o,
-      [`o-btn--${r}`]: r,
-      "o-btn--is-disabled": t,
-      "o-btn--fullWidth": e
-    };
-    return g`
+      type: r,
+      disabled: e,
+      isFullWidth: n
+    } = this;
+    return m`
             <button
-                class=${m(i)}
-                type=${n}
-                ?disabled=${t}
-                ?isFullWidth=${e}>
+                class="o-btn"
+                type=${r}
+                ?disabled=${e}
+                ?isFullWidth=${n}>
                 <slot></slot>
             </button>`;
   }
-};
-s.styles = f(v);
-l([
-  a(),
-  u(Object.values(b), b.MEDIUM)
-], s.prototype, "size", 2);
-l([
-  a(),
-  u(Object.values(c), c.SUBMIT)
-], s.prototype, "type", 2);
-l([
-  a(),
-  u(Object.values(p), p.PRIMARY)
-], s.prototype, "variant", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "disabled", 2);
-l([
-  a({ type: Boolean, reflect: !0 })
-], s.prototype, "isFullWidth", 2);
-s = l([
-  x("pie-button")
-], s);
+}
+l.styles = f(y);
+d([
+  c(),
+  u(h, Object.values(s), s.MEDIUM)
+], l.prototype, "size", 2);
+d([
+  c(),
+  u(h, Object.values(v), v.SUBMIT)
+], l.prototype, "type", 2);
+d([
+  c(),
+  u(h, Object.values(b), b.PRIMARY)
+], l.prototype, "variant", 2);
+d([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "disabled", 2);
+d([
+  c({ type: Boolean, reflect: !0 })
+], l.prototype, "isFullWidth", 2);
+customElements.define(h, l);
 export {
-  b as BUTTON_SIZE,
-  c as BUTTON_TYPE,
-  p as BUTTON_VARIANT,
-  s as PieButton
+  s as BUTTON_SIZE,
+  v as BUTTON_TYPE,
+  b as BUTTON_VARIANT,
+  l as PieButton
 };