@justeattakeaway/pie-icon-button 0.16.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/README.md +43 -17
- 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/LICENSE +0 -17
package/README.md
CHANGED
|
@@ -11,13 +11,16 @@
|
|
|
11
11
|
# Table of Contents
|
|
12
12
|
|
|
13
13
|
1. [Introduction](#pie-icon-button)
|
|
14
|
-
2. [
|
|
15
|
-
3. [
|
|
16
|
-
4. [
|
|
14
|
+
2. [Installation](#installation)
|
|
15
|
+
3. [Importing the component](#importing-the-component)
|
|
16
|
+
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
+
5. [Local Development](#local-development)
|
|
18
|
+
6. [Props](#props)
|
|
19
|
+
7. [Events](#events)
|
|
17
20
|
- [HTML example](#html)
|
|
18
21
|
- [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
|
|
19
22
|
- [React example (using Next 13)](#react-templates-using-next-13)
|
|
20
|
-
|
|
23
|
+
8. [Testing](#testing)
|
|
21
24
|
- [Browser Tests](#browser-tests)
|
|
22
25
|
- [Visual Tests](#visual-tests)
|
|
23
26
|
|
|
@@ -28,6 +31,41 @@
|
|
|
28
31
|
|
|
29
32
|
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
|
|
30
33
|
|
|
34
|
+
|
|
35
|
+
## Installation
|
|
36
|
+
|
|
37
|
+
To install `pie-icon-button` in your application, run the following on your command line:
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
# npm
|
|
41
|
+
$ npm i @justeattakeaway/pie-icon-button
|
|
42
|
+
|
|
43
|
+
# yarn
|
|
44
|
+
$ yarn add @justeattakeaway/pie-icon-button
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
### Importing the component
|
|
51
|
+
|
|
52
|
+
```js
|
|
53
|
+
// Default – for Native JS Applications, Vue, Angular, Svelte etc.
|
|
54
|
+
import { PieIconButton } from '@justeattakeaway/pie-icon-button';
|
|
55
|
+
|
|
56
|
+
// React
|
|
57
|
+
// For React, you will need to import our React specific component build
|
|
58
|
+
// Which wraps the web component using the @lit-labs/react package
|
|
59
|
+
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
## Peer Dependencies
|
|
64
|
+
|
|
65
|
+
> [!IMPORTANT]
|
|
66
|
+
> When using `pie-icon-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
67
|
+
|
|
68
|
+
|
|
31
69
|
## Local development
|
|
32
70
|
|
|
33
71
|
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
@@ -53,18 +91,6 @@ yarn dev --filter=pie-storybook
|
|
|
53
91
|
```
|
|
54
92
|
|
|
55
93
|
|
|
56
|
-
### Importing the component
|
|
57
|
-
|
|
58
|
-
```js
|
|
59
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte etc.
|
|
60
|
-
import { PieIconButton } from '@justeattakeaway/pie-icon-button';
|
|
61
|
-
|
|
62
|
-
// React
|
|
63
|
-
// For React, you will need to import our React specific component build
|
|
64
|
-
// Which wraps the web component using the @lit-labs/react package
|
|
65
|
-
import { PieIconButton } from '@justeattakeaway/pie-icon-button/dist/react';
|
|
66
|
-
```
|
|
67
|
-
|
|
68
94
|
## Importing Icons
|
|
69
95
|
|
|
70
96
|
We recommend using the `pie-icon-button` component alongside the `pie-icons-webc` package. This package contains all of the PIE iconset as importable web components and are built to work alongside our other PIE components.
|
|
@@ -86,7 +112,7 @@ Then, in your markup, you would implement the component like this:
|
|
|
86
112
|
<pie-icon-button><icon-close /></pie-icon-button>
|
|
87
113
|
```
|
|
88
114
|
|
|
89
|
-
>
|
|
115
|
+
> [!WARNING]
|
|
90
116
|
> Usually, icons imported from `pie-icons-webc` can be resized by specifying the `size` prop (such as `<icon-close size="xl" />`).
|
|
91
117
|
> These size props will have no effect when used alongside the `pie-icon-button` component, as the icon is resized with respect to the size of the `pie-icon-button`.
|
|
92
118
|
|
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 {
|
package/LICENSE
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
Apache License
|
|
2
|
-
Version 2.0, January 2004
|
|
3
|
-
http://www.apache.org/licenses/
|
|
4
|
-
|
|
5
|
-
Copyright (c) Just Eat Takeaway.com
|
|
6
|
-
|
|
7
|
-
Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
-
you may not use this file except in compliance with the License.
|
|
9
|
-
You may obtain a copy of the License at
|
|
10
|
-
|
|
11
|
-
http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
-
|
|
13
|
-
Unless required by applicable law or agreed to in writing, software
|
|
14
|
-
distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
-
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
-
See the License for the specific language governing permissions and
|
|
17
|
-
limitations under the License.
|