@justeattakeaway/pie-icon-button 0.17.0 → 0.18.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/dist/index.d.ts +3 -0
- package/dist/index.js +32 -28
- package/dist/react.d.ts +3 -0
- package/package.json +3 -3
- package/src/index.ts +5 -2
package/dist/index.d.ts
CHANGED
|
@@ -20,6 +20,9 @@ export declare interface IconButtonProps {
|
|
|
20
20
|
disabled: boolean;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* @tagname pie-icon-button
|
|
25
|
+
*/
|
|
23
26
|
export declare class PieIconButton extends LitElement implements IconButtonProps {
|
|
24
27
|
size: IconButtonProps['size'];
|
|
25
28
|
variant: IconButtonProps['variant'];
|
package/dist/index.js
CHANGED
|
@@ -1,63 +1,67 @@
|
|
|
1
1
|
import { unsafeCSS as h, LitElement as f, html as p } from "lit";
|
|
2
2
|
import { property as d } from "lit/decorators.js";
|
|
3
|
-
const b = (
|
|
4
|
-
const
|
|
5
|
-
Object.defineProperty(
|
|
3
|
+
const b = (t, o, r) => function(n, a) {
|
|
4
|
+
const e = `#${a}`;
|
|
5
|
+
Object.defineProperty(n, a, {
|
|
6
6
|
get() {
|
|
7
|
-
return this[
|
|
7
|
+
return this[e];
|
|
8
8
|
},
|
|
9
9
|
set(l) {
|
|
10
|
-
const u = this[
|
|
11
|
-
o.includes(l) ? this[
|
|
12
|
-
`<${
|
|
10
|
+
const u = this[e];
|
|
11
|
+
o.includes(l) ? this[e] = l : (console.error(
|
|
12
|
+
`<${t}> Invalid value "${l}" provided for property "${a}".`,
|
|
13
13
|
`Must be one of: ${o.join(" | ")}.`,
|
|
14
|
-
`Falling back to default value: "${
|
|
15
|
-
), this[
|
|
14
|
+
`Falling back to default value: "${r}"`
|
|
15
|
+
), this[e] = r), this.requestUpdate(a, u);
|
|
16
16
|
}
|
|
17
17
|
});
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
18
|
+
};
|
|
19
|
+
function g(t, o) {
|
|
20
|
+
customElements.get(t) ? console.warn(`PIE Web Component: "${t}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(t, o);
|
|
21
|
+
}
|
|
22
|
+
const m = `:host{--btn-dimension: 48px;--btn-icon-size: 24px}.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);min-block-size:var(--btn-dimension);aspect-ratio:1/1;border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);color:var(--btn-icon-fill);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-dimension)}}.o-iconBtn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.o-iconBtn[variant=primary]: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)))}.o-iconBtn[variant=primary]: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)))}.o-iconBtn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=secondary]: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)))}.o-iconBtn[variant=secondary]: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)))}.o-iconBtn[variant=outline]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=outline] .o-iconBtn{border:1px solid var(--dt-color-border-strong)}.o-iconBtn[variant=outline]: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)))}.o-iconBtn[variant=outline]: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)))}.o-iconBtn[variant=ghost]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn[variant=ghost]: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)))}.o-iconBtn[variant=ghost]: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)))}.o-iconBtn[variant=ghost-secondary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn[variant=ghost-secondary]: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)))}.o-iconBtn[variant=ghost-secondary]: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)))}.o-iconBtn[disabled]{--btn-bg-color: var(--dt-color-disabled-01) !important;--btn-icon-fill: var(--dt-color-content-disabled) !important}.o-iconBtn[disabled] .o-iconBtn{border:1px solid var(--dt-color-disabled-01);cursor:not-allowed}.o-iconBtn[disabled][variant=outline] .o-iconBtn{outline:none}.o-iconBtn[disabled][variant=ghost],.o-iconBtn[disabled][variant=ghost-secondary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-secondary] .o-iconBtn{outline:none;border:none}.o-iconBtn[size=xsmall]{--btn-dimension: 32px}.o-iconBtn[size=small]{--btn-dimension: 40px}.o-iconBtn[size=large]{--btn-dimension: 56px;--btn-icon-size: 28px}
|
|
23
|
+
`, y = ["xsmall", "small", "medium", "large"], B = ["primary", "secondary", "outline", "ghost", "ghost-secondary"];
|
|
24
|
+
var x = Object.defineProperty, z = Object.getOwnPropertyDescriptor, s = (t, o, r, i) => {
|
|
25
|
+
for (var n = i > 1 ? void 0 : i ? z(o, r) : o, a = t.length - 1, e; a >= 0; a--)
|
|
26
|
+
(e = t[a]) && (n = (i ? e(o, r, n) : e(n)) || n);
|
|
27
|
+
return i && n && x(o, r, n), n;
|
|
24
28
|
};
|
|
25
29
|
const v = "pie-icon-button";
|
|
26
|
-
class
|
|
30
|
+
class c extends f {
|
|
27
31
|
constructor() {
|
|
28
32
|
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
29
33
|
}
|
|
30
34
|
render() {
|
|
31
35
|
const {
|
|
32
36
|
disabled: o,
|
|
33
|
-
size:
|
|
34
|
-
variant:
|
|
37
|
+
size: r,
|
|
38
|
+
variant: i
|
|
35
39
|
} = this;
|
|
36
40
|
return p`
|
|
37
41
|
<button
|
|
38
42
|
class="o-iconBtn"
|
|
39
|
-
size=${
|
|
40
|
-
variant=${
|
|
43
|
+
size=${r}
|
|
44
|
+
variant=${i}
|
|
41
45
|
?disabled=${o}>
|
|
42
46
|
<slot></slot>
|
|
43
47
|
</button>`;
|
|
44
48
|
}
|
|
45
49
|
}
|
|
46
|
-
|
|
50
|
+
c.styles = h(m);
|
|
47
51
|
s([
|
|
48
52
|
d(),
|
|
49
|
-
b(v,
|
|
50
|
-
],
|
|
53
|
+
b(v, y, "medium")
|
|
54
|
+
], c.prototype, "size", 2);
|
|
51
55
|
s([
|
|
52
56
|
d(),
|
|
53
57
|
b(v, B, "primary")
|
|
54
|
-
],
|
|
58
|
+
], c.prototype, "variant", 2);
|
|
55
59
|
s([
|
|
56
60
|
d({ type: Boolean })
|
|
57
|
-
],
|
|
58
|
-
|
|
61
|
+
], c.prototype, "disabled", 2);
|
|
62
|
+
g(v, c);
|
|
59
63
|
export {
|
|
60
|
-
|
|
61
|
-
|
|
64
|
+
c as PieIconButton,
|
|
65
|
+
y as sizes,
|
|
62
66
|
B as variants
|
|
63
67
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -23,6 +23,9 @@ export declare interface IconButtonProps {
|
|
|
23
23
|
|
|
24
24
|
export declare const PieIconButton: ReactWebComponent<PieIconButton_2, {}>;
|
|
25
25
|
|
|
26
|
+
/**
|
|
27
|
+
* @tagname pie-icon-button
|
|
28
|
+
*/
|
|
26
29
|
declare class PieIconButton_2 extends LitElement implements IconButtonProps {
|
|
27
30
|
size: IconButtonProps['size'];
|
|
28
31
|
variant: IconButtonProps['variant'];
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.18.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
27
27
|
"license": "Apache-2.0",
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@justeattakeaway/pie-icons-webc": "0.
|
|
30
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
29
|
+
"@justeattakeaway/pie-icons-webc": "0.11.0",
|
|
30
|
+
"@justeattakeaway/pie-webc-core": "0.11.0"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
33
|
"@justeat/pie-design-tokens": "^5.8.2"
|
package/src/index.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { LitElement, html, unsafeCSS } from 'lit';
|
|
2
2
|
import { property } from 'lit/decorators.js';
|
|
3
|
-
import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
|
|
3
|
+
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
|
|
4
4
|
|
|
5
5
|
import styles from './iconButton.scss?inline';
|
|
6
6
|
import {
|
|
@@ -12,6 +12,9 @@ export * from './defs';
|
|
|
12
12
|
|
|
13
13
|
const componentSelector = 'pie-icon-button';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* @tagname pie-icon-button
|
|
17
|
+
*/
|
|
15
18
|
export class PieIconButton extends LitElement implements IconButtonProps {
|
|
16
19
|
@property()
|
|
17
20
|
@validPropertyValues(componentSelector, sizes, 'medium')
|
|
@@ -44,7 +47,7 @@ export class PieIconButton extends LitElement implements IconButtonProps {
|
|
|
44
47
|
static styles = unsafeCSS(styles);
|
|
45
48
|
}
|
|
46
49
|
|
|
47
|
-
|
|
50
|
+
defineCustomElement(componentSelector, PieIconButton);
|
|
48
51
|
|
|
49
52
|
declare global {
|
|
50
53
|
interface HTMLElementTagNameMap {
|