@justeattakeaway/pie-icon-button 0.5.0 → 0.6.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 +6 -6
- package/CHANGELOG.md +6 -0
- package/README.md +106 -6
- package/dist/index.js +54 -42
- package/dist/react.js +209 -223
- package/dist/types/packages/components/pie-icon-button/src/defs.d.ts +18 -0
- package/dist/types/packages/components/pie-icon-button/src/defs.d.ts.map +1 -1
- package/dist/types/packages/components/pie-icon-button/src/index.d.ts +3 -2
- package/dist/types/packages/components/pie-icon-button/src/index.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/defs.ts +24 -0
- package/src/iconButton.scss +27 -7
- package/src/index.ts +13 -5
- package/test/accessibility/pie-icon-button.spec.ts +8 -5
- package/test/visual/pie-icon-button.spec.ts +4 -3
- package/vite.config.js +1 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
[3:
|
|
1
|
+
[3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
2
|
react wrapper has been added!
|
|
3
|
-
[36mvite v4.
|
|
3
|
+
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
4
|
transforming...
|
|
5
5
|
[32m✓[39m 28 modules transformed.
|
|
6
6
|
rendering chunks...
|
|
7
7
|
computing gzip size...
|
|
8
|
-
[2mdist/[22m[36mindex.js [39m[1m[2m
|
|
9
|
-
[2mdist/[22m[36mreact.js [39m[1m[2m59.
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 8.31 kB[22m[1m[22m[2m │ gzip: 2.23 kB[22m
|
|
9
|
+
[2mdist/[22m[36mreact.js [39m[1m[2m59.03 kB[22m[1m[22m[2m │ gzip: 15.92 kB[22m
|
|
10
10
|
[32m
|
|
11
11
|
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
-
[32m
|
|
13
|
-
[32m[36m[vite:dts][32m Declaration files built in
|
|
12
|
+
[32m✓ built in 28.00s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 25385ms.
|
|
14
14
|
[39m
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @justeattakeaway/pie-icon-button
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [Added] - `size` prop added to pie-icon-button ([#557](https://github.com/justeattakeaway/pie/pull/557)) by [@ashleynolan](https://github.com/ashleynolan)
|
|
8
|
+
|
|
3
9
|
## 0.5.0
|
|
4
10
|
|
|
5
11
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -8,23 +8,122 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
+
# Table of Contents
|
|
12
|
+
|
|
13
|
+
1. [Introduction](#pie-icon-button)
|
|
14
|
+
2. [Local Development](#local-development)
|
|
15
|
+
3. [Props](#props)
|
|
16
|
+
4. [Events](#events)
|
|
17
|
+
- [HTML example](#html)
|
|
18
|
+
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
19
|
+
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
20
|
+
5. [Testing](#testing)
|
|
21
|
+
- [Browser Tests](#browser-tests)
|
|
22
|
+
- [Visual Tests](#visual-tests)
|
|
23
|
+
|
|
24
|
+
|
|
11
25
|
## `pie-icon-button`
|
|
12
26
|
|
|
13
27
|
`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
28
|
|
|
29
|
+
## Local development
|
|
30
|
+
|
|
31
|
+
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
32
|
+
|
|
33
|
+
```bash
|
|
34
|
+
yarn
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
To build the `pie-icon-button` package, run the following command:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
yarn build --filter=pie-icon-button
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
yarn watch --filter=pie-icon-button
|
|
48
|
+
|
|
49
|
+
# in a separate terminal tab, run
|
|
50
|
+
yarn dev --filter=pie-storybook
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
### Importing the component
|
|
55
|
+
|
|
56
|
+
```js
|
|
57
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte etc.
|
|
58
|
+
import { PieIconButton } from '@justeattakeaway/pie-icon-button';
|
|
59
|
+
|
|
60
|
+
// React
|
|
61
|
+
// For React, you will need to import our React specific component build
|
|
62
|
+
// Which wraps the web component using the @lit-labs/react package
|
|
63
|
+
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
## Props
|
|
68
|
+
|
|
69
|
+
| Property | Type | Default | Description |
|
|
70
|
+
|-------------|-----------|-----------------|----------------------------------------------------------------------|
|
|
71
|
+
| size | `String` | `medium` | Size of the Icon Button, one of `iconButtonSizes` – `xsmall`, `small`, `medium`, `large` |
|
|
72
|
+
| variant | `String` | `primary` | Variant of the button, one of `iconButtonVariants` – `primary`, `secondary`, `outline`, `ghost`, `ghost-tertiary` |
|
|
73
|
+
| disabled | `Boolean` | `false` | If `true`, disables the button. |
|
|
74
|
+
|
|
75
|
+
In your markup or JSX, you can then use these to set the properties for the `pie-icon-button` component:
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<!-- Native HTML -->
|
|
79
|
+
<pie-icon-button size='medium' type='button' variant='primary'>Click me!</pie-icon-button>
|
|
80
|
+
|
|
81
|
+
<!-- JSX -->
|
|
82
|
+
<PieIconButton size='medium' type='button' variant='primary'>Click me!</PieIconButton>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Events
|
|
86
|
+
|
|
87
|
+
This component does not use any custom event handlers. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
88
|
+
|
|
89
|
+
For example, to add a click handler in various templates:
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
### HTML
|
|
93
|
+
```html
|
|
94
|
+
<!-- Other attributes omitted for clarity -->
|
|
95
|
+
<pie-icon-button onclick="e => console.log(e)">Click me!</pie-icon-button>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Vue templates (using Nuxt 3)
|
|
99
|
+
```html
|
|
100
|
+
<!-- Other attributes omitted for clarity -->
|
|
101
|
+
<pie-icon-button @click="handleClick">Click me!</pie-icon-button>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
### React templates (using Next 13)
|
|
105
|
+
```html
|
|
106
|
+
<!-- Other attributes omitted for clarity -->
|
|
107
|
+
<PieIconButton onClick={handleClick}>increment</PieIconButton>
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
|
|
15
112
|
## Testing
|
|
16
113
|
|
|
17
114
|
### Browser tests
|
|
18
115
|
|
|
19
|
-
|
|
20
|
-
|
|
116
|
+
To run the browser tests, run the following command from the root of the monorepo:
|
|
117
|
+
|
|
118
|
+
```bash
|
|
21
119
|
yarn test:browsers --filter=pie-icon-button
|
|
22
120
|
```
|
|
23
121
|
|
|
24
122
|
### Visual tests
|
|
25
123
|
|
|
26
|
-
|
|
27
|
-
|
|
124
|
+
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
125
|
+
|
|
126
|
+
```bash
|
|
28
127
|
yarn test:visual --filter=pie-icon-button
|
|
29
128
|
```
|
|
30
129
|
|
|
@@ -32,7 +131,7 @@ Note: To run these locally, you will need to ensure that any environment variabl
|
|
|
32
131
|
|
|
33
132
|
Setup via bash:
|
|
34
133
|
|
|
35
|
-
```
|
|
134
|
+
```bash
|
|
36
135
|
export PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
|
37
136
|
```
|
|
38
137
|
|
|
@@ -40,5 +139,6 @@ Setup via package.json:
|
|
|
40
139
|
|
|
41
140
|
Under scripts `test:visual` replace the environment variable with the below:
|
|
42
141
|
|
|
43
|
-
```
|
|
142
|
+
```bash
|
|
44
143
|
PERCY_TOKEN_PIE_ICON_BUTTON=abcde
|
|
144
|
+
```
|
package/dist/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { unsafeCSS as u, LitElement as f, html as d } from "lit";
|
|
2
|
+
import { property as l } from "lit/decorators.js";
|
|
3
3
|
import "lit/decorators/property.js";
|
|
4
|
-
const
|
|
4
|
+
const h = (i, t, n) => function(r, o) {
|
|
5
5
|
const e = `#${o}`;
|
|
6
|
-
Object.defineProperty(
|
|
6
|
+
Object.defineProperty(r, o, {
|
|
7
7
|
get() {
|
|
8
8
|
return this[e];
|
|
9
9
|
},
|
|
10
10
|
set(a) {
|
|
11
|
-
const
|
|
11
|
+
const g = this[e];
|
|
12
12
|
t.includes(a) ? this[e] = a : (console.error(
|
|
13
|
-
`<${
|
|
13
|
+
`<${i}> Invalid value "${a}" provided for property "${o}".`,
|
|
14
14
|
`Must be one of: ${t.join(" | ")}.`,
|
|
15
|
-
`Falling back to default value: "${
|
|
16
|
-
), this[e] =
|
|
15
|
+
`Falling back to default value: "${n}"`
|
|
16
|
+
), this[e] = n), this.requestUpdate(o, g);
|
|
17
17
|
}
|
|
18
18
|
});
|
|
19
|
-
},
|
|
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
20
|
`;
|
|
21
|
-
var
|
|
22
|
-
for (var o =
|
|
23
|
-
(a =
|
|
24
|
-
return
|
|
21
|
+
var y = Object.defineProperty, B = Object.getOwnPropertyDescriptor, w = (i, t, n, r) => {
|
|
22
|
+
for (var o = r > 1 ? void 0 : r ? B(t, n) : t, e = i.length - 1, a; e >= 0; e--)
|
|
23
|
+
(a = i[e]) && (o = (r ? a(t, n, o) : a(o)) || o);
|
|
24
|
+
return r && o && y(t, n, o), o;
|
|
25
25
|
};
|
|
26
|
-
class s extends
|
|
26
|
+
class s extends f {
|
|
27
27
|
constructor() {
|
|
28
28
|
super(...arguments), this.propKeyValues = "";
|
|
29
29
|
}
|
|
@@ -33,13 +33,13 @@ class s extends p {
|
|
|
33
33
|
// <p class="c-webComponentTestWrapper-label"><b>isFullWidth</b>: <code>true</code></p>
|
|
34
34
|
_renderPropKeyValues() {
|
|
35
35
|
return this.propKeyValues.split(",").map((t) => {
|
|
36
|
-
const [
|
|
37
|
-
return
|
|
36
|
+
const [n, r] = t.split(":");
|
|
37
|
+
return d`<p class="c-webComponentTestWrapper-label"><b>${n}</b>: <code>${r}</code></p>`;
|
|
38
38
|
});
|
|
39
39
|
}
|
|
40
40
|
// eslint-disable-next-line class-methods-use-this
|
|
41
41
|
render() {
|
|
42
|
-
return
|
|
42
|
+
return d`
|
|
43
43
|
<div class="c-webComponentTestWrapper">
|
|
44
44
|
${this._renderPropKeyValues()}
|
|
45
45
|
<div class="c-webComponentTestWrapper-slot">
|
|
@@ -48,38 +48,45 @@ class s extends p {
|
|
|
48
48
|
</div>`;
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
s.styles =
|
|
51
|
+
s.styles = u(m);
|
|
52
52
|
w([
|
|
53
|
-
|
|
53
|
+
l({ type: String })
|
|
54
54
|
], s.prototype, "propKeyValues", 2);
|
|
55
|
-
const
|
|
56
|
-
customElements.get(
|
|
57
|
-
const
|
|
58
|
-
`,
|
|
55
|
+
const p = "web-component-test-wrapper";
|
|
56
|
+
customElements.get(p) || customElements.define(p, s);
|
|
57
|
+
const x = `.o-iconBtn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-dimension: 48px;--btn-bg-color: var(--dt-color-interactive-brand);--btn-icon-fill: var(--dt-color-content-interactive-primary);--btn-focus: var(--dt-color-focus-outer);--btn-icon-size: 24px;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);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{outline:2px solid var(--btn-focus)}.o-iconBtn svg{height:var(--btn-icon-size);width:var(--btn-icon-size)}.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}.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}
|
|
58
|
+
`, $ = [
|
|
59
|
+
"xsmall",
|
|
60
|
+
"small",
|
|
61
|
+
"medium",
|
|
62
|
+
"large"
|
|
63
|
+
], z = [
|
|
59
64
|
"primary",
|
|
60
65
|
"secondary",
|
|
61
66
|
"outline",
|
|
62
67
|
"ghost",
|
|
63
68
|
"ghost-tertiary"
|
|
64
69
|
];
|
|
65
|
-
var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor,
|
|
66
|
-
for (var o =
|
|
67
|
-
(a =
|
|
68
|
-
return
|
|
70
|
+
var P = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, v = (i, t, n, r) => {
|
|
71
|
+
for (var o = r > 1 ? void 0 : r ? _(t, n) : t, e = i.length - 1, a; e >= 0; e--)
|
|
72
|
+
(a = i[e]) && (o = (r ? a(t, n, o) : a(o)) || o);
|
|
73
|
+
return r && o && P(t, n, o), o;
|
|
69
74
|
};
|
|
70
|
-
const
|
|
71
|
-
class
|
|
75
|
+
const b = "pie-icon-button";
|
|
76
|
+
class c extends f {
|
|
72
77
|
constructor() {
|
|
73
|
-
super(...arguments), this.variant = "primary", this.disabled = !1;
|
|
78
|
+
super(...arguments), this.size = "medium", this.variant = "primary", this.disabled = !1;
|
|
74
79
|
}
|
|
75
80
|
render() {
|
|
76
81
|
const {
|
|
77
82
|
disabled: t,
|
|
83
|
+
size: n,
|
|
78
84
|
variant: r
|
|
79
85
|
} = this;
|
|
80
|
-
return
|
|
86
|
+
return d`
|
|
81
87
|
<button
|
|
82
88
|
class="o-iconBtn"
|
|
89
|
+
size=${n}
|
|
83
90
|
variant=${r}
|
|
84
91
|
?disabled=${t}>
|
|
85
92
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
@@ -88,16 +95,21 @@ class i extends p {
|
|
|
88
95
|
</button>`;
|
|
89
96
|
}
|
|
90
97
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
],
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
98
|
+
c.styles = u(x);
|
|
99
|
+
v([
|
|
100
|
+
l(),
|
|
101
|
+
h(b, $, "medium")
|
|
102
|
+
], c.prototype, "size", 2);
|
|
103
|
+
v([
|
|
104
|
+
l(),
|
|
105
|
+
h(b, z, "primary")
|
|
106
|
+
], c.prototype, "variant", 2);
|
|
107
|
+
v([
|
|
108
|
+
l({ type: Boolean })
|
|
109
|
+
], c.prototype, "disabled", 2);
|
|
110
|
+
customElements.define(b, c);
|
|
100
111
|
export {
|
|
101
|
-
|
|
102
|
-
|
|
112
|
+
c as PieIconButton,
|
|
113
|
+
$ as iconButtonSizes,
|
|
114
|
+
z as iconButtonVariants
|
|
103
115
|
};
|