@justeattakeaway/pie-icon-button 0.1.0 → 0.3.0

package/.turbo/turbo-build.log

@@ -1,11 +1,14 @@
+[7:49:27 AM] @custom-elements-manifest/analyzer: Created new manifest.
+react wrapper has been added!
 vite v4.2.1 building for production...
 transforming...
-✓ 1 modules transformed.
+✓ 19 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js  0.67 kB │ gzip: 0.40 kB
+dist/index.js   6.20 kB │ gzip:  1.70 kB
+dist/react.js  59.14 kB │ gzip: 15.95 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 11.98s
-[vite:dts] Declaration files built in 11853ms.
+✓ built in 14.76s
+[vite:dts] Declaration files built in 13749ms.
 

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @justeattakeaway/pie-icon-button
 
+## 0.3.0
+
+### Minor Changes
+
+- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
+
+## 0.2.0
+
+### Minor Changes
+
+- [Added] - Variant and disabled props and styling ([#491](https://github.com/justeattakeaway/pie/pull/491)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [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)
+
+- [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.1.0
 
 ### Minor Changes

package/dist/index.js

@@ -1,23 +1,59 @@
-import { LitElement as m, html as u } from "lit";
-import { customElement as i } from "lit/decorators.js";
-var c = Object.defineProperty, f = Object.getOwnPropertyDescriptor, b = (p, e, r, o) => {
-  for (var t = o > 1 ? void 0 : o ? f(e, r) : e, n = p.length - 1, l; n >= 0; n--)
-    (l = p[n]) && (t = (o ? l(e, r, t) : l(t)) || t);
-  return o && t && c(e, r, t), t;
+import { unsafeCSS as b, LitElement as h, html as u } from "lit";
+import { property as d } from "lit/decorators.js";
+import "lit/decorators/property.js";
+const f = (o, r, e) => function(c, t) {
+  const n = `#${t}`;
+  Object.defineProperty(c, t, {
+    get() {
+      return this[n];
+    },
+    set(a) {
+      const v = this[n];
+      r.includes(a) ? this[n] = a : (console.error(
+        `<${o}> Invalid value "${a}" provided for property "${t}".`,
+        `Must be one of: ${r.join(" | ")}.`,
+        `Falling back to default value: "${e}"`
+      ), this[n] = e), this.requestUpdate(t, v);
+    }
+  });
 };
-let s = class extends m {
-  // eslint-disable-next-line class-methods-use-this
+var i = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o.GHOST_TERTIARY = "ghost-tertiary", o))(i || {});
+const g = `:host{--btn-border-radius: var(--dt-radius-rounded-e);--btn-height: 48px;--btn-width: var(--btn-height);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer)}.o-iconBtn{min-block-size:var(--btn-height);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center}@supports not (aspect-ratio: 1/1){.o-iconBtn{min-inline-size:var(--btn-width)}}.o-iconBtn:focus-visible{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:24.5px;width:24.5px}.o-iconBtn svg,.o-iconBtn path{fill:var(--btn-icon-fill)}:host([variant=primary]) .o-iconBtn: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-iconBtn: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-icon-fill: var(--dt-color-content-interactive-secondary)}:host([variant=secondary]) .o-iconBtn: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-iconBtn: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-icon-fill: var(--dt-color-content-interactive-brand)}:host([variant=outline]) .o-iconBtn{border:1px solid var(--dt-color-border-strong)}:host([variant=outline]) .o-iconBtn: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-iconBtn: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-icon-fill: var(--dt-color-content-interactive-brand)}:host([variant=ghost]) .o-iconBtn: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-iconBtn: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-tertiary]){--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-tertiary)}:host([variant=ghost-tertiary]) .o-iconBtn: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-tertiary]) .o-iconBtn: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-icon-fill: var(--dt-color-content-disabled)}:host([disabled]) .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}:host([disabled][variant=outline]) .o-iconBtn{outline:none}:host([disabled][variant=ghost]),:host([disabled][variant=ghost-tertiary]){--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}:host([disabled][variant=ghost]) .o-iconBtn,:host([disabled][variant=ghost-tertiary]) .o-iconBtn{outline:none;border:none}
+`;
+var p = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (o, r, e, c) => {
+  for (var t = c > 1 ? void 0 : c ? y(r, e) : r, n = o.length - 1, a; n >= 0; n--)
+    (a = o[n]) && (t = (c ? a(r, e, t) : a(t)) || t);
+  return c && t && p(r, e, t), t;
+};
+const B = "pie-icon-button";
+class l extends h {
+  constructor() {
+    super(...arguments), this.variant = i.PRIMARY, this.disabled = !1;
+  }
   render() {
+    const {
+      disabled: r
+    } = this;
     return u`
-            <button>
-                I am a pie-icon-button
-                <slot></slot>
+            <button
+                class="o-iconBtn"
+                ?disabled=${r}>
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11.8676 3.20496L8.0001 7.07248L4.13258 3.20496L3.20508 4.13246L7.0726 7.99998L3.20508 11.8675L4.13258 12.795L8.0001 8.92748L11.8676 12.795L12.7951 11.8675L8.92761 7.99998L12.7951 4.13246L11.8676 3.20496Z" fill="#242E30"/>
+                </svg>
             </button>`;
   }
-};
-s = b([
-  i("pie-icon-button")
-], s);
+}
+l.styles = b(g);
+s([
+  d(),
+  f(B, Object.values(i), i.PRIMARY)
+], l.prototype, "variant", 2);
+s([
+  d({ type: Boolean })
+], l.prototype, "disabled", 2);
+customElements.define("pie-icon-button", l);
 export {
-  s as PieIconButton
+  i as ICON_BUTTON_VARIANT,
+  l as PieIconButton
 };