@justeattakeaway/pie-icon-button 0.2.0 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +5 -5
- package/CHANGELOG.md +6 -0
- package/dist/index.js +14 -14
- package/dist/react.js +1 -1
- package/package.json +1 -1
- package/src/index.ts +1 -1
- package/vite.config.js +0 -23
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[
|
|
1
|
+
[7:49:27 AM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
3
|
[36mvite v4.2.1 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 19 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m 6.
|
|
9
|
-
[2mdist/[22m[36mreact.js [39m[1m[2m59.
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 6.20 kB[22m[1m[22m[2m │ gzip: 1.70 kB[22m
|
|
9
|
+
[2mdist/[22m[36mreact.js [39m[1m[2m59.14 kB[22m[1m[22m[2m │ gzip: 15.95 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m✓[39m built in
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓[39m built in 14.76s
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 13749ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @justeattakeaway/pie-icon-button
|
|
2
2
|
|
|
3
|
+
## 0.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
8
|
+
|
|
3
9
|
## 0.2.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/dist/index.js
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as b, LitElement as h, html as u } from "lit";
|
|
2
2
|
import { property as d } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
4
|
+
const f = (o, r, e) => function(c, t) {
|
|
5
5
|
const n = `#${t}`;
|
|
6
6
|
Object.defineProperty(c, t, {
|
|
7
7
|
get() {
|
|
8
8
|
return this[n];
|
|
9
9
|
},
|
|
10
10
|
set(a) {
|
|
11
|
-
const
|
|
11
|
+
const v = this[n];
|
|
12
12
|
r.includes(a) ? this[n] = a : (console.error(
|
|
13
13
|
`<${o}> Invalid value "${a}" provided for property "${t}".`,
|
|
14
14
|
`Must be one of: ${r.join(" | ")}.`,
|
|
15
15
|
`Falling back to default value: "${e}"`
|
|
16
|
-
), this[n] = e), this.requestUpdate(t,
|
|
16
|
+
), this[n] = e), this.requestUpdate(t, v);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
var i = /* @__PURE__ */ ((o) => (o.PRIMARY = "primary", o.SECONDARY = "secondary", o.OUTLINE = "outline", o.GHOST = "ghost", o.GHOST_TERTIARY = "ghost-tertiary", o))(i || {});
|
|
21
|
-
const
|
|
21
|
+
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}
|
|
22
22
|
`;
|
|
23
|
-
var
|
|
24
|
-
for (var t = c > 1 ? void 0 : c ?
|
|
23
|
+
var p = Object.defineProperty, y = Object.getOwnPropertyDescriptor, s = (o, r, e, c) => {
|
|
24
|
+
for (var t = c > 1 ? void 0 : c ? y(r, e) : r, n = o.length - 1, a; n >= 0; n--)
|
|
25
25
|
(a = o[n]) && (t = (c ? a(r, e, t) : a(t)) || t);
|
|
26
|
-
return c && t &&
|
|
26
|
+
return c && t && p(r, e, t), t;
|
|
27
27
|
};
|
|
28
|
-
const
|
|
29
|
-
class l extends
|
|
28
|
+
const B = "pie-icon-button";
|
|
29
|
+
class l extends h {
|
|
30
30
|
constructor() {
|
|
31
31
|
super(...arguments), this.variant = i.PRIMARY, this.disabled = !1;
|
|
32
32
|
}
|
|
@@ -34,7 +34,7 @@ class l extends u {
|
|
|
34
34
|
const {
|
|
35
35
|
disabled: r
|
|
36
36
|
} = this;
|
|
37
|
-
return
|
|
37
|
+
return u`
|
|
38
38
|
<button
|
|
39
39
|
class="o-iconBtn"
|
|
40
40
|
?disabled=${r}>
|
|
@@ -44,15 +44,15 @@ class l extends u {
|
|
|
44
44
|
</button>`;
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
|
-
l.styles =
|
|
47
|
+
l.styles = b(g);
|
|
48
48
|
s([
|
|
49
49
|
d(),
|
|
50
|
-
|
|
50
|
+
f(B, Object.values(i), i.PRIMARY)
|
|
51
51
|
], l.prototype, "variant", 2);
|
|
52
52
|
s([
|
|
53
53
|
d({ type: Boolean })
|
|
54
54
|
], l.prototype, "disabled", 2);
|
|
55
|
-
customElements.define(
|
|
55
|
+
customElements.define("pie-icon-button", l);
|
|
56
56
|
export {
|
|
57
57
|
i as ICON_BUTTON_VARIANT,
|
|
58
58
|
l as PieIconButton
|
package/dist/react.js
CHANGED
package/package.json
CHANGED
package/src/index.ts
CHANGED
|
@@ -37,7 +37,7 @@ export class PieIconButton extends LitElement {
|
|
|
37
37
|
static styles = unsafeCSS(styles);
|
|
38
38
|
}
|
|
39
39
|
|
|
40
|
-
customElements.define(
|
|
40
|
+
customElements.define('pie-icon-button', PieIconButton);
|
|
41
41
|
|
|
42
42
|
declare global {
|
|
43
43
|
interface HTMLElementTagNameMap {
|
package/vite.config.js
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
/* eslint-disable import/no-extraneous-dependencies */
|
|
2
|
-
import { defineConfig } from 'vite';
|
|
3
|
-
import dts from 'vite-plugin-dts';
|
|
4
|
-
|
|
5
|
-
// https://vitejs.dev/config/
|
|
6
|
-
export default defineConfig({
|
|
7
|
-
build: {
|
|
8
|
-
lib: {
|
|
9
|
-
entry: {
|
|
10
|
-
index: 'src/index.ts',
|
|
11
|
-
react: 'src/react.ts',
|
|
12
|
-
},
|
|
13
|
-
formats: ['es'],
|
|
14
|
-
},
|
|
15
|
-
rollupOptions: {
|
|
16
|
-
external: /^lit/,
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
plugins: [dts({
|
|
20
|
-
insertTypesEntry: true,
|
|
21
|
-
outputDir: 'dist/types',
|
|
22
|
-
})],
|
|
23
|
-
});
|