@justeattakeaway/pie-button 0.7.0 → 0.9.0

package/.turbo/turbo-build.log

@@ -3,4 +3,27 @@ transforming...
 ✓ 4 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/pie-button.js  3.69 kB │ gzip: 1.55 kB
+dist/index.js  3.81 kB │ gzip: 1.60 kB
+
+[vite:dts] Start generate declaration files...
+../../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3135:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
+
+3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                  ~~~~~~~~~~~~~~~~~~~~~~~~
+
+  ../../../node_modules/@types/react/index.d.ts:3135:14
+    3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                      ~~~~~~~~~~~~~~~~~~~~~~~~
+    'LibraryManagedAttributes' was also declared here.
+../../../node_modules/@types/react/index.d.ts:3135:14 - error TS2300: Duplicate identifier 'LibraryManagedAttributes'.
+
+3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                  ~~~~~~~~~~~~~~~~~~~~~~~~
+
+  ../../../node_modules/@types/react-dom/node_modules/@types/react/index.d.ts:3135:14
+    3135         type LibraryManagedAttributes<C, P> = C extends React.MemoExoticComponent<infer T> | React.LazyExoticComponent<infer T>
+                      ~~~~~~~~~~~~~~~~~~~~~~~~
+    'LibraryManagedAttributes' was also declared here.
+
+[vite:dts] Declaration files built in 17153ms.
+

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 0.9.0
+
+### Minor Changes
+
+- [Added] - HTMLElementTagNameMap entry for pie-button element ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+- [Added] - Slot functionality to pie-button component and associated SB and example app integrations ([#364](https://github.com/justeattakeaway/pie/pull/364)) by [@jamieomaguire](https://github.com/jamieomaguire)
+
+## 0.8.0
+
+### Minor Changes
+
+- [Updated] - Register approach for button web component ([#346](https://github.com/justeattakeaway/pie/pull/346)) by [@fernandofranca](https://github.com/fernandofranca)
+
+  [Added] - "types" field in package.json for better DX and IDE TypesScript support
+  [Updated] - Provide Vite settings for generating TypeScript declaration files during build
+
 ## 0.7.0
 
 ### Minor Changes

package/dist/{pie-button.js → index.js}

@@ -1,8 +1,8 @@
 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";
+import { property as u, 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, n) => function(i, t) {
+`, p = (o, n) => function(i, t) {
   const e = `#${t}`;
   Object.defineProperty(i, t, {
     get() {
@@ -18,14 +18,20 @@ const x = `.o-btn{border-radius:50rem;border:none;font-family:JetSansDigital;fon
     }
   });
 };
-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) => {
+var a = /* @__PURE__ */ ((o) => (o.XSMALL = "xsmall", o.SMALL = "small", o.MEDIUM = "medium", o.LARGE = "large", o))(a || {}), 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, c = (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;
 };
+function k(o) {
+  return (n) => {
+    if (!customElements.get(o))
+      return v(o)(n);
+  };
+}
 let l = class extends h {
   constructor() {
-    super(...arguments), this.size = c.MEDIUM, this.type = d.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1;
+    super(...arguments), this.size = a.MEDIUM, this.type = d.SUBMIT, this.variant = b.PRIMARY, this.disabled = !1;
   }
   render() {
     const { size: o, type: n, variant: i, disabled: t } = this, e = {
@@ -43,31 +49,31 @@ let l = class extends h {
                 type=${n}
                 ?disabled=${t}
                 @click="${r}">
-                I'm a PIE button
+                <slot></slot>
             </button>`;
   }
 };
 l.styles = f(x);
-a([
-  p(),
-  u(Object.values(c), c.MEDIUM)
+c([
+  u(),
+  p(Object.values(a), a.MEDIUM)
 ], l.prototype, "size", 2);
-a([
-  p(),
-  u(Object.values(d), d.SUBMIT)
+c([
+  u(),
+  p(Object.values(d), d.SUBMIT)
 ], l.prototype, "type", 2);
-a([
-  p(),
-  u(Object.values(b), b.PRIMARY)
+c([
+  u(),
+  p(Object.values(b), b.PRIMARY)
 ], l.prototype, "variant", 2);
-a([
-  p()
+c([
+  u({ type: Boolean, reflect: !0 })
 ], l.prototype, "disabled", 2);
-l = a([
-  v("pie-button")
+l = c([
+  k("pie-button")
 ], l);
 export {
-  c as BUTTON_SIZE,
+  a as BUTTON_SIZE,
   d as BUTTON_TYPE,
   b as BUTTON_VARIANT,
   l as PieButton

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index'

package/dist/types/src/decorators.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A decorator for specifying a list of valid values for a property.
+ * If this property's setter is called with an invalid value, an error is logged and the default value will be assigned instead.
+ * @param validValues - The array of valid values
+ * @param defaultValue - The value to fall back on
+ * @returns
+ */
+export declare const validPropertyValues: (validValues: any[], defaultValue: any) => (target: any, propertyKey: string) => void;
+//# sourceMappingURL=decorators.d.ts.map

package/dist/types/src/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/decorators.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,gBAAiB,GAAG,EAAE,gBAAgB,GAAG,cAC5C,GAAG,eAAe,MAAM,KAAI,IAyBxD,CAAC"}

package/dist/types/src/defs.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Button size variants
+ */
+export declare enum BUTTON_SIZE {
+    XSMALL = "xsmall",
+    SMALL = "small",
+    MEDIUM = "medium",
+    LARGE = "large"
+}
+/**
+ * Button style variants
+ */
+export declare enum BUTTON_TYPE {
+    SUBMIT = "submit",
+    BUTTON = "button",
+    RESET = "reset",
+    MENU = "menu"
+}
+/**
+ * Button style variants
+ */
+export declare enum BUTTON_VARIANT {
+    PRIMARY = "primary",
+    SECONDARY = "secondary",
+    OUTLINE = "outline",
+    GHOST = "ghost"
+}
+//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/defs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAClB;AAED;;GAEG;AACH,oBAAY,WAAW;IACnB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CAChB;AAED;;GAEG;AACH,oBAAY,cAAc;IACtB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;IACnB,KAAK,UAAU;CAClB"}

package/dist/types/src/index.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
+export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
+export declare class PieButton extends LitElement {
+    size: BUTTON_SIZE;
+    type: BUTTON_TYPE;
+    variant: BUTTON_VARIANT;
+    disabled: boolean;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'pie-button': PieButton;
+    }
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAMlD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAGlE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,cAAc,EAAE,CAAC;AAWpD,qBACa,SAAU,SAAQ,UAAU;IAGrC,IAAI,EAAG,WAAW,CAAsB;IAIxC,IAAI,EAAG,WAAW,CAAsB;IAIxC,OAAO,EAAG,cAAc,CAA0B;IAGlD,QAAQ,EAAG,OAAO,CAAS;IAE3B,MAAM;IA2BN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,YAAY,EAAE,SAAS,CAAC;KAC3B;CACJ"}

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@justeattakeaway/pie-button",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "PIE design system button built using web components",
   "type": "module",
-  "main": "dist/pie-button.js",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "scripts": {
     "build": "run -T vite build",
     "watch": "run -T vite build --watch",
     "dev": "run -T vite",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 0"
   },
   "author": "JustEatTakeaway - Design System Web Team",
   "license": "Apache-2.0",

package/src/index.ts

@@ -9,7 +9,16 @@ import { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './defs';
 // Valid values available to consumers
 export { BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT };
 
-@customElement('pie-button')
+// TODO: Extract as a utility function in a shared package
+function defineCustomElement(elementName:string) {
+    return (elementClass:typeof LitElement) => {
+        if(customElements.get(elementName)) return;
+
+        return customElement(elementName)(elementClass);
+    }
+}
+
+@defineCustomElement('pie-button')
 export class PieButton extends LitElement {
     @property()
     @validPropertyValues(Object.values(BUTTON_SIZE), BUTTON_SIZE.MEDIUM)
@@ -23,7 +32,7 @@ export class PieButton extends LitElement {
     @validPropertyValues(Object.values(BUTTON_VARIANT), BUTTON_VARIANT.PRIMARY)
     variant : BUTTON_VARIANT = BUTTON_VARIANT.PRIMARY;
 
-    @property()
+    @property({type: Boolean, reflect: true})
     disabled : boolean = false;
 
     render () {
@@ -48,10 +57,16 @@ export class PieButton extends LitElement {
                 type=${type}
                 ?disabled=${disabled}
                 @click="${raiseWCEvent}">
-                I'm a PIE button
+                <slot></slot>
             </button>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite
     static styles = unsafeCSS(styles);
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'pie-button': PieButton;
+    }
+}

package/vite.config.js

@@ -1,14 +1,21 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  build: {
-    lib: {
-      entry: 'src/index.ts',
-      formats: ['es'],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            fileName: 'index',
+            formats: ['es'],
+        },
+        rollupOptions: {
+            external: /^lit/,
+        },
     },
-    rollupOptions: {
-      external: /^lit/,
-    },
-  },
+    plugins: [dts({
+        insertTypesEntry: true,
+        outputDir: 'dist/types',
+    })],
 });