@justeattakeaway/pie-icon-button 1.1.1 → 1.2.1
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.js +5 -5
- package/package.json +2 -5
- package/src/iconButton.scss +1 -2
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { LitElement as B, html as v, unsafeCSS as
|
|
2
|
-
import { classMap as
|
|
1
|
+
import { LitElement as B, html as v, unsafeCSS as g } from "lit";
|
|
2
|
+
import { classMap as p } from "lit/directives/class-map.js";
|
|
3
3
|
import { property as a } from "lit/decorators.js";
|
|
4
4
|
import { ifDefined as c } from "lit/directives/if-defined.js";
|
|
5
5
|
import { validPropertyValues as m, defineCustomElement as u } from "@justeattakeaway/pie-webc-core";
|
|
6
6
|
import "@justeattakeaway/pie-spinner";
|
|
7
|
-
const y = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 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-
|
|
7
|
+
const y = "*,*:after,*:before{box-sizing:inherit}:host{--btn-dimension-default: 48px;--icon-size-override: 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-light);--icon-display-override: block;block-size:var(--btn-dimension, var(--btn-dimension-default));inline-size:var(--btn-dimension, var(--btn-dimension-default));border-color:var(--btn-border-color);border-radius:var(--btn-border-radius);background-color:var(--btn-bg-color);color:var(--btn-icon-fill);cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;border:none;display:flex;align-items:center;justify-content:center}.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(--icon-size-override);width:var(--icon-size-override)}.o-iconBtn.o-iconBtn--primary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--primary:active:not(:disabled),.o-iconBtn.o-iconBtn--primary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-iconBtn.o-iconBtn--secondary{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-iconBtn.o-iconBtn--outline{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand);border:1px solid var(--dt-color-border-strong)}.o-iconBtn.o-iconBtn--outline:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn.o-iconBtn--outline:active:not(:disabled),.o-iconBtn.o-iconBtn--outline.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn.o-iconBtn--ghost{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--ghost:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn.o-iconBtn--ghost:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn.o-iconBtn--ghost-secondary{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-interactive-secondary)}.o-iconBtn.o-iconBtn--ghost-secondary:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-iconBtn.o-iconBtn--ghost-secondary:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost-secondary.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-iconBtn.o-iconBtn--inverse{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-icon-fill: var(--dt-color-content-interactive-brand)}.o-iconBtn.o-iconBtn--inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-iconBtn.o-iconBtn--inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-iconBtn.o-iconBtn--ghost-inverse{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-inverse)}.o-iconBtn.o-iconBtn--ghost-inverse:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-iconBtn.o-iconBtn--ghost-inverse:active:not(:disabled),.o-iconBtn.o-iconBtn--ghost-inverse.is-loading:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-iconBtn[disabled]{--btn-icon-fill: var(--dt-color-content-disabled);cursor:not-allowed}.o-iconBtn[disabled]:not(.o-iconBtn--ghost,.o-iconBtn--ghost-secondary,.o-iconBtn--ghost-inverse){--btn-bg-color: var(--dt-color-disabled-01)}.o-iconBtn[disabled].o-iconBtn--outline{border-color:var(--dt-color-disabled-01)}.o-iconBtn.o-iconBtn--xsmall{--btn-dimension: 32px;--icon-size-override: 20px}.o-iconBtn.o-iconBtn--small{--btn-dimension: 40px}.o-iconBtn.o-iconBtn--large{--btn-dimension: 56px;--icon-size-override: 28px}", k = ["xsmall", "small", "medium", "large"], x = [
|
|
8
8
|
"primary",
|
|
9
9
|
"secondary",
|
|
10
10
|
"outline",
|
|
@@ -56,7 +56,7 @@ const b = "pie-icon-button", h = class h extends B {
|
|
|
56
56
|
};
|
|
57
57
|
return v`
|
|
58
58
|
<button
|
|
59
|
-
class="${
|
|
59
|
+
class="${p(s)}"
|
|
60
60
|
data-test-id="pie-icon-button"
|
|
61
61
|
?disabled="${t}"
|
|
62
62
|
aria-label="${c(o == null ? void 0 : o.label)}"
|
|
@@ -68,7 +68,7 @@ const b = "pie-icon-button", h = class h extends B {
|
|
|
68
68
|
</button>`;
|
|
69
69
|
}
|
|
70
70
|
};
|
|
71
|
-
h.styles =
|
|
71
|
+
h.styles = g(y);
|
|
72
72
|
let i = h;
|
|
73
73
|
l([
|
|
74
74
|
a({ type: Object })
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2.1",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -24,9 +24,6 @@
|
|
|
24
24
|
"lint:style": "run -T stylelint ./src/**/*.{css,scss}",
|
|
25
25
|
"lint:style:fix": "yarn lint:style --fix",
|
|
26
26
|
"watch": "run -T vite build --watch",
|
|
27
|
-
"test": "echo \"Error: no test specified\" && exit 0",
|
|
28
|
-
"test:ci": "yarn test",
|
|
29
|
-
"test:browsers-setup": "npx playwright-lit-setup",
|
|
30
27
|
"test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
|
|
31
28
|
"test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_ICON_BUTTON} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
|
|
32
29
|
"test:visual:ci": "yarn test:visual"
|
|
@@ -41,7 +38,7 @@
|
|
|
41
38
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
42
39
|
},
|
|
43
40
|
"dependencies": {
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
41
|
+
"@justeattakeaway/pie-icons-webc": "1.4.0",
|
|
45
42
|
"@justeattakeaway/pie-spinner": "1.0.0",
|
|
46
43
|
"@justeattakeaway/pie-webc-core": "0.24.2"
|
|
47
44
|
},
|
package/src/iconButton.scss
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
.o-iconBtn {
|
|
14
14
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
15
15
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
16
|
-
--btn-icon-fill: var(--dt-color-content-interactive-
|
|
16
|
+
--btn-icon-fill: var(--dt-color-content-interactive-light);
|
|
17
17
|
--icon-display-override: block;
|
|
18
18
|
|
|
19
19
|
block-size: var(--btn-dimension, var(--btn-dimension-default));
|
|
@@ -125,4 +125,3 @@
|
|
|
125
125
|
--icon-size-override: 28px;
|
|
126
126
|
}
|
|
127
127
|
}
|
|
128
|
-
|