@justeattakeaway/pie-icon-button 0.2.0 → 0.4.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 +10 -10
- package/CHANGELOG.md +26 -0
- package/README.md +31 -0
- package/dist/index.js +67 -28
- package/dist/react.js +1 -1
- package/dist/types/packages/components/pie-icon-button/src/index.d.ts.map +1 -1
- package/package.json +6 -5
- package/playwright/index.html +56 -0
- package/playwright/index.ts +1 -0
- package/playwright-lit-visual.config.ts +5 -0
- package/playwright-lit.config.ts +5 -0
- package/src/iconButton.scss +58 -60
- package/src/index.ts +2 -1
- package/test/accessibility/pie-icon-button.spec.ts +37 -0
- package/test/component/pie-icon-button.spec.ts +25 -0
- package/test/visual/pie-icon-button.spec.ts +58 -0
- package/vite.config.js +2 -22
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[11:
|
|
1
|
+
[11:48:53] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
|
-
|
|
3
|
+
vite v4.2.3 building for production...
|
|
4
4
|
transforming...
|
|
5
|
-
|
|
5
|
+
✓ 27 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
dist/index.js 8.04 kB │ gzip: 2.21 kB
|
|
9
|
+
dist/react.js 59.14 kB │ gzip: 15.95 kB
|
|
10
|
+
|
|
11
|
+
[vite:dts] Start generate declaration files...
|
|
12
|
+
✓ built in 5.82s
|
|
13
|
+
[vite:dts] Declaration files built in 5320ms.
|
|
14
|
+
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @justeattakeaway/pie-icon-button
|
|
2
2
|
|
|
3
|
+
## 0.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Changed] - Refactor visual tests to have labels showing props ([#519](https://github.com/justeattakeaway/pie/pull/519)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
8
|
+
|
|
9
|
+
- [Added] - component and a11y browser tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
10
|
+
|
|
11
|
+
- [Changed] - moved pie-webc-core dependency to devDependencies in each component ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
12
|
+
|
|
13
|
+
- [Added] - percy visual tests ([#499](https://github.com/justeattakeaway/pie/pull/499)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
14
|
+
|
|
15
|
+
- [Added] - Additional notes on visual tests and environment variables ([#525](https://github.com/justeattakeaway/pie/pull/525)) by [@jamieomaguire](https://github.com/jamieomaguire)
|
|
16
|
+
|
|
17
|
+
- [Added] Read me percy config examples ([#529](https://github.com/justeattakeaway/pie/pull/529)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- [Changed] - Use `componentSelector` to define the custom element ([#530](https://github.com/justeattakeaway/pie/pull/530)) by [@raoufswe](https://github.com/raoufswe)
|
|
22
|
+
|
|
23
|
+
## 0.3.0
|
|
24
|
+
|
|
25
|
+
### Minor Changes
|
|
26
|
+
|
|
27
|
+
- [Changed] - customElement.define parameter to string ([#507](https://github.com/justeattakeaway/pie/pull/507)) by [@LTurns](https://github.com/LTurns)
|
|
28
|
+
|
|
3
29
|
## 0.2.0
|
|
4
30
|
|
|
5
31
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -11,3 +11,34 @@
|
|
|
11
11
|
## `pie-icon-button`
|
|
12
12
|
|
|
13
13
|
`pie-icon-button` is a Web Component built using the Lit library. It offers a simple and accessible icon button component for web applications. This component can be easily integrated into various frontend frameworks and customized through a set of properties.
|
|
14
|
+
|
|
15
|
+
## Testing
|
|
16
|
+
|
|
17
|
+
### Browser tests
|
|
18
|
+
|
|
19
|
+
Run at the root of the monorepo:
|
|
20
|
+
```
|
|
21
|
+
yarn test:browsers --filter=pie-icon-button
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Visual tests
|
|
25
|
+
|
|
26
|
+
Run at the root of the monorepo:
|
|
27
|
+
```
|
|
28
|
+
yarn test:visual --filter=pie-icon-button
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
32
|
+
|
|
33
|
+
Setup via bash:
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
export PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Setup via package.json:
|
|
40
|
+
|
|
41
|
+
Under scripts `test:visual` replace the environment variable with the below:
|
|
42
|
+
|
|
43
|
+
```
|
|
44
|
+
PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
package/dist/index.js
CHANGED
|
@@ -1,42 +1,81 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as p, LitElement as u, html as d } from "lit";
|
|
2
|
+
import { property as s } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
5
|
-
const
|
|
6
|
-
Object.defineProperty(
|
|
4
|
+
const y = (t, r, n) => function(e, o) {
|
|
5
|
+
const a = `#${o}`;
|
|
6
|
+
Object.defineProperty(e, o, {
|
|
7
7
|
get() {
|
|
8
|
-
return this[
|
|
8
|
+
return this[a];
|
|
9
9
|
},
|
|
10
|
-
set(
|
|
11
|
-
const
|
|
12
|
-
r.includes(
|
|
13
|
-
`<${
|
|
10
|
+
set(c) {
|
|
11
|
+
const g = this[a];
|
|
12
|
+
r.includes(c) ? this[a] = c : (console.error(
|
|
13
|
+
`<${t}> Invalid value "${c}" provided for property "${o}".`,
|
|
14
14
|
`Must be one of: ${r.join(" | ")}.`,
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[
|
|
15
|
+
`Falling back to default value: "${n}"`
|
|
16
|
+
), this[a] = n), this.requestUpdate(o, g);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
+
}, m = `.c-webComponentTestWrapper{padding-block:var(--dt-spacing-c);padding-inline:var(--dt-spacing-e);font-family:var(--dt-font-interactive-m-family);font-size:calc(var(--dt-font-size-20) * 1px);border:1px solid var(--dt-color-background-dark);display:grid;grid-template-columns:1fr 1fr}.c-webComponentTestWrapper-label{margin-block:var(--dt-spacing-c)}.c-webComponentTestWrapper-slot{padding:var(--dt-spacing-c);border:1px dashed var(--dt-color-background-dark);grid-column:1/3;margin-block-start:var(--dt-spacing-c)}
|
|
20
|
+
`;
|
|
21
|
+
var B = Object.defineProperty, w = Object.getOwnPropertyDescriptor, P = (t, r, n, e) => {
|
|
22
|
+
for (var o = e > 1 ? void 0 : e ? w(r, n) : r, a = t.length - 1, c; a >= 0; a--)
|
|
23
|
+
(c = t[a]) && (o = (e ? c(r, n, o) : c(o)) || o);
|
|
24
|
+
return e && o && B(r, n, o), o;
|
|
19
25
|
};
|
|
20
|
-
|
|
21
|
-
|
|
26
|
+
class v extends u {
|
|
27
|
+
constructor() {
|
|
28
|
+
super(...arguments), this.propKeyValues = "";
|
|
29
|
+
}
|
|
30
|
+
// Renders a string such as 'size: small, isFullWidth: true'
|
|
31
|
+
// as HTML such as:
|
|
32
|
+
// <p class="c-webComponentTestWrapper-label"><b>size</b>: <code>small</code></p>
|
|
33
|
+
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
|
+
_renderPropKeyValues() {
|
|
35
|
+
return this.propKeyValues.split(",").map((r) => {
|
|
36
|
+
const [n, e] = r.split(":");
|
|
37
|
+
return d`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${e}</code></p>`;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
// eslint-disable-next-line class-methods-use-this
|
|
41
|
+
render() {
|
|
42
|
+
return d`
|
|
43
|
+
<div class="c-webComponentTestWrapper">
|
|
44
|
+
${this._renderPropKeyValues()}
|
|
45
|
+
<div class="c-webComponentTestWrapper-slot">
|
|
46
|
+
<slot></slot>
|
|
47
|
+
</div>
|
|
48
|
+
</div>`;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
v.styles = p(m);
|
|
52
|
+
P([
|
|
53
|
+
s({ type: String })
|
|
54
|
+
], v.prototype, "propKeyValues", 2);
|
|
55
|
+
const b = "web-component-test-wrapper";
|
|
56
|
+
customElements.get(b) || customElements.define(b, v);
|
|
57
|
+
var i = /* @__PURE__ */ ((t) => (t.PRIMARY = "primary", t.SECONDARY = "secondary", t.OUTLINE = "outline", t.GHOST = "ghost", t.GHOST_TERTIARY = "ghost-tertiary", t))(i || {});
|
|
58
|
+
const $ = `.o-iconBtn{--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);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)}.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-tertiary]{--btn-bg-color: var(--dt-color-container-default);--btn-icon-fill: var(--dt-color-content-interactive-tertiary)}.o-iconBtn[variant=ghost-tertiary]: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-tertiary]: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);--btn-icon-fill: var(--dt-color-content-disabled)}.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-tertiary]{--btn-bg-color: transparent;--btn-icon-fill: var(--dt-color-content-default)}.o-iconBtn[disabled][variant=ghost] .o-iconBtn,.o-iconBtn[disabled][variant=ghost-tertiary] .o-iconBtn{outline:none;border:none}
|
|
22
59
|
`;
|
|
23
|
-
var
|
|
24
|
-
for (var
|
|
25
|
-
(
|
|
26
|
-
return
|
|
60
|
+
var x = Object.defineProperty, L = Object.getOwnPropertyDescriptor, h = (t, r, n, e) => {
|
|
61
|
+
for (var o = e > 1 ? void 0 : e ? L(r, n) : r, a = t.length - 1, c; a >= 0; a--)
|
|
62
|
+
(c = t[a]) && (o = (e ? c(r, n, o) : c(o)) || o);
|
|
63
|
+
return e && o && x(r, n, o), o;
|
|
27
64
|
};
|
|
28
|
-
const
|
|
65
|
+
const f = "pie-icon-button";
|
|
29
66
|
class l extends u {
|
|
30
67
|
constructor() {
|
|
31
68
|
super(...arguments), this.variant = i.PRIMARY, this.disabled = !1;
|
|
32
69
|
}
|
|
33
70
|
render() {
|
|
34
71
|
const {
|
|
35
|
-
disabled: r
|
|
72
|
+
disabled: r,
|
|
73
|
+
variant: n
|
|
36
74
|
} = this;
|
|
37
|
-
return
|
|
75
|
+
return d`
|
|
38
76
|
<button
|
|
39
77
|
class="o-iconBtn"
|
|
78
|
+
variant=${n}
|
|
40
79
|
?disabled=${r}>
|
|
41
80
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
42
81
|
<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"/>
|
|
@@ -44,15 +83,15 @@ class l extends u {
|
|
|
44
83
|
</button>`;
|
|
45
84
|
}
|
|
46
85
|
}
|
|
47
|
-
l.styles =
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
86
|
+
l.styles = p($);
|
|
87
|
+
h([
|
|
88
|
+
s(),
|
|
89
|
+
y(f, Object.values(i), i.PRIMARY)
|
|
51
90
|
], l.prototype, "variant", 2);
|
|
52
|
-
|
|
53
|
-
|
|
91
|
+
h([
|
|
92
|
+
s({ type: Boolean })
|
|
54
93
|
], l.prototype, "disabled", 2);
|
|
55
|
-
customElements.define(
|
|
94
|
+
customElements.define(f, l);
|
|
56
95
|
export {
|
|
57
96
|
i as ICON_BUTTON_VARIANT,
|
|
58
97
|
l as PieIconButton
|
package/dist/react.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAG,mBAAmB,CAA+B;IAG5D,QAAQ,UAAS;IAErB,MAAM;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAI7C,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,iBAAiB,oBAAoB,CAAC;AAE5C,qBAAa,aAAc,SAAQ,UAAU;IAGrC,OAAO,EAAG,mBAAmB,CAA+B;IAG5D,QAAQ,UAAS;IAErB,MAAM;IAkBN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,aAAa,CAAC;KACtC;CACJ"}
|
package/package.json
CHANGED
|
@@ -1,20 +1,21 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-icon-button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "PIE Design System Icon Button built using Web Components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"scripts": {
|
|
10
|
-
"build": "yarn build:wrapper pie-icon-button && run -T vite build
|
|
11
|
-
"watch": "run -T vite build --
|
|
10
|
+
"build": "yarn build:wrapper pie-icon-button && run -T vite build",
|
|
11
|
+
"watch": "run -T vite build --watch",
|
|
12
12
|
"test": "echo \"Error: no test specified\" && exit 0",
|
|
13
|
-
"test:
|
|
13
|
+
"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",
|
|
14
|
+
"test:visual:ci": "yarn test:visual"
|
|
14
15
|
},
|
|
15
16
|
"author": "JustEatTakeaway - Design System Web Team",
|
|
16
17
|
"license": "Apache-2.0",
|
|
17
|
-
"
|
|
18
|
+
"devDependencies": {
|
|
18
19
|
"@justeattakeaway/pie-webc-core": "workspace:*"
|
|
19
20
|
},
|
|
20
21
|
"volta": {
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
7
|
+
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
8
|
+
<link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
|
|
9
|
+
<style>
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: JETSansDigital;
|
|
12
|
+
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
|
|
13
|
+
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
|
|
14
|
+
font-weight: 400;
|
|
15
|
+
font-display: swap;
|
|
16
|
+
}
|
|
17
|
+
@font-face {
|
|
18
|
+
font-family: JETSansDigital;
|
|
19
|
+
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
|
|
20
|
+
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
|
|
21
|
+
font-weight: 700;
|
|
22
|
+
font-display: swap;
|
|
23
|
+
}
|
|
24
|
+
@font-face {
|
|
25
|
+
font-family: JETSansDigital;
|
|
26
|
+
src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
|
|
27
|
+
url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
|
|
28
|
+
font-weight: 800;
|
|
29
|
+
font-display: swap;
|
|
30
|
+
}
|
|
31
|
+
body {
|
|
32
|
+
font-feature-settings: "tnum"; /* Enable tabular numbers */
|
|
33
|
+
}
|
|
34
|
+
/* basic styles to center align components and give them some spacing */
|
|
35
|
+
#root {
|
|
36
|
+
padding: 1em;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
#root > * {
|
|
40
|
+
display: block;
|
|
41
|
+
margin-inline: auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
#root > * + * {
|
|
45
|
+
margin-top: 1em;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
<title>Testing Page</title>
|
|
49
|
+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
|
|
50
|
+
<link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
|
|
51
|
+
</head>
|
|
52
|
+
<body>
|
|
53
|
+
<div id="root"></div>
|
|
54
|
+
<script type="module" src="./index.ts"></script>
|
|
55
|
+
</body>
|
|
56
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//Import common styles here
|
package/src/iconButton.scss
CHANGED
|
@@ -1,4 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
@mixin button-interactive-states($bg-color) {
|
|
2
|
+
&:hover:not(:disabled) {
|
|
3
|
+
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
&:active:not(:disabled) {
|
|
7
|
+
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
// Base button styles
|
|
12
|
+
.o-iconBtn {
|
|
2
13
|
--btn-border-radius: var(--dt-radius-rounded-e);
|
|
3
14
|
|
|
4
15
|
// The base values are set to the size default, which is for the medium button size
|
|
@@ -10,20 +21,7 @@
|
|
|
10
21
|
--btn-bg-color: var(--dt-color-interactive-brand);
|
|
11
22
|
--btn-icon-fill: var(--dt-color-content-interactive-primary);
|
|
12
23
|
--btn-focus: var(--dt-color-focus-outer);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
@mixin button-interactive-states($bg-color) {
|
|
16
|
-
& .o-iconBtn:hover:not(:disabled) {
|
|
17
|
-
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-hover-01)));
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
& .o-iconBtn:active:not(:disabled) {
|
|
21
|
-
background-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) - var(--dt-color-active-01)));
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
24
|
|
|
25
|
-
// Base button styles
|
|
26
|
-
.o-iconBtn {
|
|
27
25
|
min-block-size: var(--btn-height);
|
|
28
26
|
aspect-ratio: 1 / 1;
|
|
29
27
|
|
|
@@ -55,68 +53,68 @@
|
|
|
55
53
|
svg, path {
|
|
56
54
|
fill: var(--btn-icon-fill);
|
|
57
55
|
}
|
|
58
|
-
}
|
|
59
56
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
57
|
+
&[variant='primary'] {
|
|
58
|
+
@include button-interactive-states('--dt-color-interactive-brand');
|
|
59
|
+
}
|
|
64
60
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
&[variant='secondary'] {
|
|
62
|
+
--btn-bg-color: var(--dt-color-interactive-secondary);
|
|
63
|
+
--btn-icon-fill: var(--dt-color-content-interactive-secondary);
|
|
68
64
|
|
|
69
|
-
|
|
70
|
-
}
|
|
65
|
+
@include button-interactive-states('--dt-color-interactive-secondary');
|
|
66
|
+
}
|
|
71
67
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
68
|
+
&[variant='outline'] {
|
|
69
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
70
|
+
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
75
71
|
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
72
|
+
& .o-iconBtn {
|
|
73
|
+
border: 1px solid var(--dt-color-border-strong);
|
|
74
|
+
}
|
|
79
75
|
|
|
80
|
-
|
|
81
|
-
}
|
|
76
|
+
@include button-interactive-states('--dt-color-container-default');
|
|
77
|
+
}
|
|
82
78
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
79
|
+
&[variant='ghost'] {
|
|
80
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
81
|
+
--btn-icon-fill: var(--dt-color-content-interactive-brand);
|
|
86
82
|
|
|
87
|
-
|
|
88
|
-
}
|
|
83
|
+
@include button-interactive-states('--dt-color-container-default');
|
|
84
|
+
}
|
|
89
85
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
86
|
+
&[variant='ghost-tertiary'] {
|
|
87
|
+
--btn-bg-color: var(--dt-color-container-default);
|
|
88
|
+
--btn-icon-fill: var(--dt-color-content-interactive-tertiary);
|
|
93
89
|
|
|
94
|
-
|
|
95
|
-
}
|
|
90
|
+
@include button-interactive-states('--dt-color-container-default');
|
|
91
|
+
}
|
|
96
92
|
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
93
|
+
&[disabled] {
|
|
94
|
+
--btn-bg-color: var(--dt-color-disabled-01);
|
|
95
|
+
--btn-icon-fill: var(--dt-color-content-disabled);
|
|
100
96
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
97
|
+
& .o-iconBtn {
|
|
98
|
+
border: 1px solid var(--dt-color-disabled-01);
|
|
99
|
+
cursor: not-allowed;
|
|
100
|
+
}
|
|
104
101
|
}
|
|
105
|
-
}
|
|
106
102
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
103
|
+
&[disabled][variant='outline'] {
|
|
104
|
+
& .o-iconBtn {
|
|
105
|
+
outline: none;
|
|
106
|
+
}
|
|
110
107
|
}
|
|
111
|
-
}
|
|
112
108
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
109
|
+
&[disabled][variant='ghost'],
|
|
110
|
+
&[disabled][variant='ghost-tertiary'] {
|
|
111
|
+
--btn-bg-color: transparent;
|
|
112
|
+
--btn-icon-fill: var(--dt-color-content-default);
|
|
117
113
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
& .o-iconBtn {
|
|
115
|
+
outline: none;
|
|
116
|
+
border: none;
|
|
117
|
+
}
|
|
121
118
|
}
|
|
122
119
|
}
|
|
120
|
+
|
package/src/index.ts
CHANGED
|
@@ -19,13 +19,14 @@ export class PieIconButton extends LitElement {
|
|
|
19
19
|
|
|
20
20
|
render () {
|
|
21
21
|
const {
|
|
22
|
-
disabled,
|
|
22
|
+
disabled, variant,
|
|
23
23
|
} = this;
|
|
24
24
|
|
|
25
25
|
// The inline SVG is temporary until we have a proper icon integration
|
|
26
26
|
return html`
|
|
27
27
|
<button
|
|
28
28
|
class="o-iconBtn"
|
|
29
|
+
variant=${variant}
|
|
29
30
|
?disabled=${disabled}>
|
|
30
31
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
31
32
|
<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"/>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
+
import AxeBuilder from '@axe-core/playwright';
|
|
3
|
+
import {
|
|
4
|
+
PropObject, Combination, getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
5
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
6
|
+
import { PieIconButton } from '@/index';
|
|
7
|
+
import { ICON_BUTTON_VARIANT } from '@/defs';
|
|
8
|
+
|
|
9
|
+
const props: PropObject = {
|
|
10
|
+
variant: Object.values(ICON_BUTTON_VARIANT),
|
|
11
|
+
disabled: [true, false],
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
const componentPropsMatrix : Combination[] = getAllPropCombinations(props);
|
|
15
|
+
const componentPropsMatrixByVariant: Record<string, Combination[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
16
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
17
|
+
|
|
18
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
19
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: Combination) => {
|
|
20
|
+
await mount(
|
|
21
|
+
PieIconButton,
|
|
22
|
+
{
|
|
23
|
+
props: { ...combo },
|
|
24
|
+
slots: {
|
|
25
|
+
default: 'Hello world',
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
);
|
|
29
|
+
}));
|
|
30
|
+
|
|
31
|
+
const results = await new AxeBuilder.default({ page })
|
|
32
|
+
.withTags(['wcag21a', 'wcag21aa', 'wcag143', 'cat.color', 'cat.aria'])
|
|
33
|
+
.disableRules(['color-contrast', 'color-contrast-enhanced'])
|
|
34
|
+
.analyze();
|
|
35
|
+
|
|
36
|
+
expect(results.violations).toEqual([]);
|
|
37
|
+
}));
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { test, expect } from '@sand4rt/experimental-ct-web';
|
|
2
|
+
import { PieIconButton } from '@/index';
|
|
3
|
+
import { ICON_BUTTON_VARIANT } from '@/defs';
|
|
4
|
+
|
|
5
|
+
test('should correctly work with native click events', async ({ mount }) => {
|
|
6
|
+
const messages: string[] = [];
|
|
7
|
+
const expectedEventMessage = 'Native event dispatched';
|
|
8
|
+
const component = await mount(
|
|
9
|
+
PieIconButton,
|
|
10
|
+
{
|
|
11
|
+
props: {
|
|
12
|
+
variant: ICON_BUTTON_VARIANT.PRIMARY,
|
|
13
|
+
},
|
|
14
|
+
on: {
|
|
15
|
+
click: () => {
|
|
16
|
+
messages.push(expectedEventMessage);
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
await component.click();
|
|
23
|
+
|
|
24
|
+
expect(messages).toEqual([expectedEventMessage]);
|
|
25
|
+
});
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { test } from '@sand4rt/experimental-ct-web';
|
|
2
|
+
import percySnapshot from '@percy/playwright';
|
|
3
|
+
import type {
|
|
4
|
+
PropObject, WebComponentPropValues, WebComponentTestInput,
|
|
5
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/defs.ts';
|
|
6
|
+
import {
|
|
7
|
+
getAllPropCombinations, splitCombinationsByPropertyValue,
|
|
8
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/get-all-prop-combos.ts';
|
|
9
|
+
import {
|
|
10
|
+
createTestWebComponent,
|
|
11
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/rendering.ts';
|
|
12
|
+
import {
|
|
13
|
+
WebComponentTestWrapper,
|
|
14
|
+
} from '@justeattakeaway/pie-webc-core/src/test-helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
|
|
15
|
+
import { PieIconButton } from '@/index';
|
|
16
|
+
import { ICON_BUTTON_VARIANT } from '@/defs';
|
|
17
|
+
|
|
18
|
+
const props: PropObject = {
|
|
19
|
+
variant: Object.values(ICON_BUTTON_VARIANT),
|
|
20
|
+
disabled: [true, false],
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
// Renders a <pie-icon-button> HTML string with the given prop values
|
|
24
|
+
const renderTestPieIconButton = (propVals: WebComponentPropValues) => `<pie-icon-button variant="${propVals.variant}" ${propVals.disabled ? 'disabled' : ''}></pie-icon-button>`;
|
|
25
|
+
|
|
26
|
+
const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
|
|
27
|
+
const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
|
|
28
|
+
const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
|
|
29
|
+
|
|
30
|
+
// This ensures the component is registered in the DOM for each test
|
|
31
|
+
// This is not required if your tests mount the web component directly in the tests
|
|
32
|
+
test('Component registered in the DOM', async ({ mount }) => {
|
|
33
|
+
await mount(
|
|
34
|
+
PieIconButton,
|
|
35
|
+
{
|
|
36
|
+
props: {},
|
|
37
|
+
},
|
|
38
|
+
);
|
|
39
|
+
});
|
|
40
|
+
|
|
41
|
+
componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
|
|
42
|
+
await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
|
|
43
|
+
const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieIconButton);
|
|
44
|
+
const propKeyValues = `disabled: ${testComponent.propValues.disabled}`;
|
|
45
|
+
|
|
46
|
+
await mount(
|
|
47
|
+
WebComponentTestWrapper,
|
|
48
|
+
{
|
|
49
|
+
props: { propKeyValues },
|
|
50
|
+
slots: {
|
|
51
|
+
default: testComponent.renderedString,
|
|
52
|
+
},
|
|
53
|
+
},
|
|
54
|
+
);
|
|
55
|
+
}));
|
|
56
|
+
|
|
57
|
+
await percySnapshot(page, `PIE Icon Button - Variant: ${variant}`);
|
|
58
|
+
}));
|
package/vite.config.js
CHANGED
|
@@ -1,23 +1,3 @@
|
|
|
1
|
-
|
|
2
|
-
import { defineConfig } from 'vite';
|
|
3
|
-
import dts from 'vite-plugin-dts';
|
|
1
|
+
import viteConfig from '@justeattakeaway/pie-components-config/vite.config'; // eslint-disable-line import/no-extraneous-dependencies
|
|
4
2
|
|
|
5
|
-
|
|
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
|
-
});
|
|
3
|
+
export default viteConfig;
|