@justeattakeaway/pie-link 0.11.1 → 0.11.2-next.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 +0 -0
- package/dist/index.js +42 -42
- package/dist/react.d.ts +1 -1
- package/dist/react.js +39 -62
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
File without changes
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
import { unsafeCSS as
|
|
1
|
+
import { unsafeCSS as v, LitElement as g, html as u, nothing as l } from "lit";
|
|
2
2
|
import { property as i } from "lit/decorators.js";
|
|
3
|
-
const p = (o, t,
|
|
4
|
-
const
|
|
5
|
-
Object.defineProperty(
|
|
3
|
+
const p = (o, t, r) => function(s, a) {
|
|
4
|
+
const c = `#${a}`;
|
|
5
|
+
Object.defineProperty(s, a, {
|
|
6
6
|
get() {
|
|
7
|
-
return this[
|
|
7
|
+
return this[c];
|
|
8
8
|
},
|
|
9
9
|
set(f) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
`<${o}> Invalid value "${f}" provided for property "${l}".`,
|
|
10
|
+
t.includes(f) ? this[c] = f : (console.error(
|
|
11
|
+
`<${o}> Invalid value "${f}" provided for property "${a}".`,
|
|
13
12
|
`Must be one of: ${t.join(" | ")}.`,
|
|
14
|
-
`Falling back to default value: "${
|
|
15
|
-
), this[
|
|
16
|
-
}
|
|
13
|
+
`Falling back to default value: "${r}"`
|
|
14
|
+
), this[c] = r);
|
|
15
|
+
},
|
|
16
|
+
configurable: !0
|
|
17
17
|
});
|
|
18
18
|
};
|
|
19
|
-
function
|
|
19
|
+
function k(o, t) {
|
|
20
20
|
customElements.get(o) ? console.warn(`PIE Web Component: "${o}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(o, t);
|
|
21
21
|
}
|
|
22
|
-
const
|
|
23
|
-
`,
|
|
24
|
-
var
|
|
25
|
-
for (var
|
|
26
|
-
(
|
|
27
|
-
return h &&
|
|
22
|
+
const y = `.c-link{--link-font-family: var(--dt-font-interactive-m-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-style-underline);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link:hover,.c-link:active{--link-text-decoration: none}.c-link[tag=button]{outline:none;border:none;user-select:none;background:transparent;padding:0}.c-link[variant=high-visibility]{--link-text-color: var(--dt-color-content-link-distinct)}.c-link[variant=inverse]{--link-text-color: var(--dt-color-content-link-inverse)}.c-link[size=small]{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link[underline=reversed][isStandalone]{--link-text-decoration: none}.c-link[underline=reversed][isStandalone]:hover,.c-link[underline=reversed][isStandalone]:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block;width:fit-content}.c-link[hasVisited]:visited{color:var(--dt-color-content-link-visited)}.c-link[hasVisited]:visited[variant=inverse]{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}
|
|
23
|
+
`, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], $ = ["leading", "trailing"], x = ["a", "button"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
|
|
24
|
+
var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (o, t, r, h) => {
|
|
25
|
+
for (var s = h > 1 ? void 0 : h ? B(t, r) : t, a = o.length - 1, c; a >= 0; a--)
|
|
26
|
+
(c = o[a]) && (s = (h ? c(t, r, s) : c(s)) || s);
|
|
27
|
+
return h && s && P(t, r, s), s;
|
|
28
28
|
};
|
|
29
29
|
const d = "pie-link";
|
|
30
|
-
class e extends
|
|
30
|
+
class e extends g {
|
|
31
31
|
constructor() {
|
|
32
32
|
super(...arguments), this.tag = "a", this.variant = "default", this.size = "medium", this.underline = "default", this.iconPlacement = "leading", this.isBold = !1, this.isStandalone = !1, this.hasVisited = !1, this.type = "submit";
|
|
33
33
|
}
|
|
@@ -37,12 +37,12 @@ class e extends k {
|
|
|
37
37
|
* @private
|
|
38
38
|
*/
|
|
39
39
|
renderContent() {
|
|
40
|
-
const { iconPlacement: t, isStandalone:
|
|
40
|
+
const { iconPlacement: t, isStandalone: r } = this;
|
|
41
41
|
return u`
|
|
42
42
|
<span class="c-link-content">
|
|
43
|
-
${
|
|
43
|
+
${r && t === "leading" ? u`<slot name="icon"></slot>` : l}
|
|
44
44
|
<slot></slot>
|
|
45
|
-
${
|
|
45
|
+
${r && t === "trailing" ? u`<slot name="icon"></slot>` : l}
|
|
46
46
|
</span>`;
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
@@ -63,8 +63,8 @@ class e extends k {
|
|
|
63
63
|
?isBold=${this.isBold}
|
|
64
64
|
?isStandalone=${this.isStandalone}
|
|
65
65
|
?hasVisited=${this.hasVisited}
|
|
66
|
-
type=${this.type ||
|
|
67
|
-
aria-label=${((t = this.aria) == null ? void 0 : t.label) ||
|
|
66
|
+
type=${this.type || l}
|
|
67
|
+
aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
|
|
68
68
|
${this.renderContent()}
|
|
69
69
|
</button>`;
|
|
70
70
|
}
|
|
@@ -86,10 +86,10 @@ class e extends k {
|
|
|
86
86
|
?isBold=${this.isBold}
|
|
87
87
|
?isStandalone=${this.isStandalone}
|
|
88
88
|
?hasVisited=${this.hasVisited}
|
|
89
|
-
href=${this.href ||
|
|
90
|
-
target=${this.target ||
|
|
91
|
-
rel=${this.rel ||
|
|
92
|
-
aria-label=${((t = this.aria) == null ? void 0 : t.label) ||
|
|
89
|
+
href=${this.href || l}
|
|
90
|
+
target=${this.target || l}
|
|
91
|
+
rel=${this.rel || l}
|
|
92
|
+
aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
|
|
93
93
|
${this.renderContent()}
|
|
94
94
|
</a>`;
|
|
95
95
|
}
|
|
@@ -97,26 +97,26 @@ class e extends k {
|
|
|
97
97
|
return this.tag === "button" ? this.renderButton() : this.renderAnchor();
|
|
98
98
|
}
|
|
99
99
|
}
|
|
100
|
-
e.styles =
|
|
100
|
+
e.styles = v(y);
|
|
101
101
|
n([
|
|
102
102
|
i(),
|
|
103
|
-
p(d,
|
|
103
|
+
p(d, x, "a")
|
|
104
104
|
], e.prototype, "tag", 2);
|
|
105
105
|
n([
|
|
106
106
|
i({ type: String }),
|
|
107
|
-
p(d,
|
|
107
|
+
p(d, m, "default")
|
|
108
108
|
], e.prototype, "variant", 2);
|
|
109
109
|
n([
|
|
110
110
|
i({ type: String }),
|
|
111
|
-
p(d,
|
|
111
|
+
p(d, b, "medium")
|
|
112
112
|
], e.prototype, "size", 2);
|
|
113
113
|
n([
|
|
114
114
|
i({ type: String }),
|
|
115
|
-
p(d,
|
|
115
|
+
p(d, S, "default")
|
|
116
116
|
], e.prototype, "underline", 2);
|
|
117
117
|
n([
|
|
118
118
|
i({ type: String }),
|
|
119
|
-
p(d,
|
|
119
|
+
p(d, $, "leading")
|
|
120
120
|
], e.prototype, "iconPlacement", 2);
|
|
121
121
|
n([
|
|
122
122
|
i({ type: String, reflect: !0 })
|
|
@@ -138,18 +138,18 @@ n([
|
|
|
138
138
|
], e.prototype, "hasVisited", 2);
|
|
139
139
|
n([
|
|
140
140
|
i(),
|
|
141
|
-
p(d,
|
|
141
|
+
p(d, z, "submit")
|
|
142
142
|
], e.prototype, "type", 2);
|
|
143
143
|
n([
|
|
144
144
|
i({ type: Object })
|
|
145
145
|
], e.prototype, "aria", 2);
|
|
146
|
-
|
|
146
|
+
k(d, e);
|
|
147
147
|
export {
|
|
148
148
|
e as PieLink,
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
149
|
+
z as buttonTypes,
|
|
150
|
+
$ as iconPlacements,
|
|
151
|
+
b as sizes,
|
|
152
|
+
x as tags,
|
|
153
|
+
S as underlineTypes,
|
|
154
|
+
m as variants
|
|
155
155
|
};
|
package/dist/react.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { CSSResult } from 'lit';
|
|
2
2
|
import type { LitElement } from 'lit';
|
|
3
|
-
import type { ReactWebComponent } from '@lit
|
|
3
|
+
import type { ReactWebComponent } from '@lit/react';
|
|
4
4
|
import type { TemplateResult } from 'lit';
|
|
5
5
|
|
|
6
6
|
export declare type AriaProps = {
|
package/dist/react.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import { PieLink as
|
|
3
|
-
import { buttonTypes as
|
|
1
|
+
import * as y from "react";
|
|
2
|
+
import { PieLink as L } from "./index.js";
|
|
3
|
+
import { buttonTypes as C, iconPlacements as M, sizes as T, tags as j, underlineTypes as x, variants as A } from "./index.js";
|
|
4
4
|
import "lit";
|
|
5
5
|
import "lit/decorators.js";
|
|
6
6
|
/**
|
|
@@ -8,69 +8,46 @@ import "lit/decorators.js";
|
|
|
8
8
|
* Copyright 2018 Google LLC
|
|
9
9
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
10
10
|
*/
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
let a =
|
|
15
|
-
a === void 0 &&
|
|
16
|
-
let
|
|
17
|
-
|
|
18
|
-
})(t,
|
|
19
|
-
},
|
|
20
|
-
|
|
21
|
-
};
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
constructor() {
|
|
32
|
-
super(...arguments), this.o = null;
|
|
33
|
-
}
|
|
34
|
-
t(e) {
|
|
35
|
-
if (this.o !== null)
|
|
36
|
-
for (const u in this.i)
|
|
37
|
-
E(this.o, u, this.props[u], e ? e[u] : void 0, d);
|
|
38
|
-
}
|
|
39
|
-
componentDidMount() {
|
|
11
|
+
const k = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), v = /* @__PURE__ */ new WeakMap(), E = (t, c, o, u, l) => {
|
|
12
|
+
const m = l == null ? void 0 : l[c];
|
|
13
|
+
m === void 0 || o === u ? (t[c] = o, o == null && c in HTMLElement.prototype && t.removeAttribute(c)) : ((i, r, s) => {
|
|
14
|
+
let a = v.get(i);
|
|
15
|
+
a === void 0 && v.set(i, a = /* @__PURE__ */ new Map());
|
|
16
|
+
let n = a.get(r);
|
|
17
|
+
s !== void 0 ? n === void 0 ? (a.set(r, n = { handleEvent: s }), i.addEventListener(r, n)) : n.handleEvent = s : n !== void 0 && (a.delete(r), i.removeEventListener(r, n));
|
|
18
|
+
})(t, m, o);
|
|
19
|
+
}, N = ({ react: t, tagName: c, elementClass: o, events: u, displayName: l }) => {
|
|
20
|
+
const m = new Set(Object.keys(u ?? {})), i = t.forwardRef((r, s) => {
|
|
21
|
+
const a = t.useRef(null), n = t.useRef(null), d = {}, p = {};
|
|
22
|
+
for (const [e, f] of Object.entries(r))
|
|
23
|
+
k.has(e) ? d[e === "className" ? "class" : e] = f : m.has(e) || e in o.prototype ? p[e] = f : d[e] = f;
|
|
24
|
+
return t.useLayoutEffect(() => {
|
|
25
|
+
if (n.current !== null) {
|
|
26
|
+
for (const e in p)
|
|
27
|
+
E(n.current, e, r[e], a.current ? a.current[e] : void 0, u);
|
|
28
|
+
a.current = r;
|
|
29
|
+
}
|
|
30
|
+
}), t.useLayoutEffect(() => {
|
|
40
31
|
var e;
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
this.h !== e && (this.u = (s) => {
|
|
49
|
-
e !== null && b(e, s), this.o = s, this.h = e;
|
|
50
|
-
}), this.i = {};
|
|
51
|
-
const v = { ref: this.u };
|
|
52
|
-
for (const [s, y] of Object.entries(u))
|
|
53
|
-
L.has(s) ? v[s === "className" ? "class" : s] = y : l.has(s) || s in n.prototype ? this.i[s] = y : v[s] = y;
|
|
54
|
-
return v.suppressHydrationWarning = !0, a(r, v);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
f.displayName = m ?? n.name;
|
|
58
|
-
const N = o.forwardRef((c, e) => a(f, { ...c, _$Gl: e }, c == null ? void 0 : c.children));
|
|
59
|
-
return N.displayName = f.displayName, N;
|
|
60
|
-
}
|
|
61
|
-
const R = P({
|
|
32
|
+
(e = n.current) == null || e.removeAttribute("defer-hydration");
|
|
33
|
+
}, []), d.suppressHydrationWarning = !0, t.createElement(c, { ...d, ref: t.useCallback((e) => {
|
|
34
|
+
n.current = e, typeof s == "function" ? s(e) : s !== null && (s.current = e);
|
|
35
|
+
}, [s]) });
|
|
36
|
+
});
|
|
37
|
+
return i.displayName = l ?? o.name, i;
|
|
38
|
+
}, w = N({
|
|
62
39
|
displayName: "PieLink",
|
|
63
|
-
elementClass:
|
|
64
|
-
react:
|
|
40
|
+
elementClass: L,
|
|
41
|
+
react: y,
|
|
65
42
|
tagName: "pie-link",
|
|
66
43
|
events: {}
|
|
67
44
|
});
|
|
68
45
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
46
|
+
w as PieLink,
|
|
47
|
+
C as buttonTypes,
|
|
48
|
+
M as iconPlacements,
|
|
49
|
+
T as sizes,
|
|
50
|
+
j as tags,
|
|
51
|
+
x as underlineTypes,
|
|
52
|
+
A as variants
|
|
76
53
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-link",
|
|
3
3
|
"description": "PIE Design System Link built using Web Components",
|
|
4
|
-
"version": "0.11.
|
|
4
|
+
"version": "0.11.2-next.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -28,10 +28,10 @@
|
|
|
28
28
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
31
|
+
"@justeattakeaway/pie-components-config": "0.6.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
34
|
+
"@justeattakeaway/pie-webc-core": "0.12.0-next.0"
|
|
35
35
|
},
|
|
36
36
|
"volta": {
|
|
37
37
|
"extends": "../../../package.json"
|