@justeattakeaway/pie-link 1.2.3 → 1.2.4
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/custom-elements.json +4 -3
- package/dist/index.js +13 -13
- package/package.json +2 -2
- package/src/index.ts +1 -1
- package/src/link.scss +6 -0
package/custom-elements.json
CHANGED
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"type": {
|
|
67
67
|
"text": "DefaultProps"
|
|
68
68
|
},
|
|
69
|
-
"default": "{\
|
|
69
|
+
"default": "{\n tag: 'a',\n variant: 'default',\n size: 'medium',\n underline: 'default',\n isBold: false,\n isStandalone: false,\n hasVisited: false,\n iconPlacement: 'leading',\n type: 'submit',\n}"
|
|
70
70
|
}
|
|
71
71
|
],
|
|
72
72
|
"exports": [
|
|
@@ -217,7 +217,8 @@
|
|
|
217
217
|
"kind": "field",
|
|
218
218
|
"name": "isStandalone",
|
|
219
219
|
"privacy": "public",
|
|
220
|
-
"attribute": "isStandalone"
|
|
220
|
+
"attribute": "isStandalone",
|
|
221
|
+
"reflects": true
|
|
221
222
|
},
|
|
222
223
|
{
|
|
223
224
|
"kind": "field",
|
|
@@ -244,7 +245,7 @@
|
|
|
244
245
|
"kind": "method",
|
|
245
246
|
"name": "renderContent",
|
|
246
247
|
"privacy": "private",
|
|
247
|
-
"description": "Renders the link content.\
|
|
248
|
+
"description": "Renders the link content.\nIcons are only shown in block elements"
|
|
248
249
|
},
|
|
249
250
|
{
|
|
250
251
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as b, unsafeCSS as m, nothing as y, html as c } from "lit";
|
|
2
2
|
import { property as o } from "lit/decorators.js";
|
|
3
|
-
import { classMap as
|
|
3
|
+
import { classMap as g } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as d } from "lit/directives/if-defined.js";
|
|
5
5
|
import { validPropertyValues as s, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
|
|
6
|
-
const h = class h extends
|
|
6
|
+
const h = class h extends b {
|
|
7
7
|
willUpdate() {
|
|
8
8
|
this.getAttribute("v") || this.setAttribute("v", h.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
h.v = "1.2.
|
|
11
|
+
h.v = "1.2.4";
|
|
12
12
|
let u = h;
|
|
13
|
-
const z = "*,*:after,*:before{box-sizing:inherit}:host{
|
|
13
|
+
const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--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.c-link--high-visibility{--link-text-color: var(--dt-color-content-link-distinct)}.c-link.c-link--inverse{--link-text-color: var(--dt-color-content-link-inverse)}.c-link.c-link--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.c-link--underline-reversed.c-link--standalone{--link-text-decoration: none}.c-link.c-link--underline-reversed.c-link--standalone:hover,.c-link.c-link--underline-reversed.c-link--standalone:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link.c-link--bold{--link-font-weight: var(--dt-font-weight-bold)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.c-link--hasVisited:visited{color:var(--dt-color-content-link-visited)}.c-link.c-link--hasVisited:visited.c-link--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)}button.c-link{outline:none;border:none;-webkit-user-select:none;user-select:none;background:transparent;padding:0}.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)}", S = ["default", "high-visibility", "inverse"], $ = ["small", "medium"], w = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], V = ["default", "reversed"], e = {
|
|
14
14
|
tag: "a",
|
|
15
15
|
variant: "default",
|
|
16
16
|
size: "medium",
|
|
@@ -22,8 +22,8 @@ const z = "*,*:after,*:before{box-sizing:inherit}:host{--link-font-weight: var(-
|
|
|
22
22
|
type: "submit"
|
|
23
23
|
};
|
|
24
24
|
var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (l, n, k, p) => {
|
|
25
|
-
for (var r = p > 1 ? void 0 : p ? O(n, k) : n,
|
|
26
|
-
(
|
|
25
|
+
for (var r = p > 1 ? void 0 : p ? O(n, k) : n, f = l.length - 1, v; f >= 0; f--)
|
|
26
|
+
(v = l[f]) && (r = (p ? v(n, k, r) : v(r)) || r);
|
|
27
27
|
return p && r && C(n, k, r), r;
|
|
28
28
|
};
|
|
29
29
|
const a = "pie-link";
|
|
@@ -40,9 +40,9 @@ let t = class extends u {
|
|
|
40
40
|
const { iconPlacement: l, isStandalone: n } = this;
|
|
41
41
|
return c`
|
|
42
42
|
<span class="c-link-content">
|
|
43
|
-
${n && l === "leading" ? c`<slot name="icon"></slot>` :
|
|
43
|
+
${n && l === "leading" ? c`<slot name="icon"></slot>` : y}
|
|
44
44
|
<slot></slot>
|
|
45
|
-
${n && l === "trailing" ? c`<slot name="icon"></slot>` :
|
|
45
|
+
${n && l === "trailing" ? c`<slot name="icon"></slot>` : y}
|
|
46
46
|
</span>`;
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
@@ -55,7 +55,7 @@ let t = class extends u {
|
|
|
55
55
|
return c`
|
|
56
56
|
<button
|
|
57
57
|
data-test-id="pie-link-button"
|
|
58
|
-
class="${
|
|
58
|
+
class="${g(l)}"
|
|
59
59
|
type=${this.type}
|
|
60
60
|
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}>
|
|
61
61
|
${this.renderContent()}
|
|
@@ -71,7 +71,7 @@ let t = class extends u {
|
|
|
71
71
|
return c`
|
|
72
72
|
<a
|
|
73
73
|
data-test-id="pie-link-anchor"
|
|
74
|
-
class="${
|
|
74
|
+
class="${g(l)}"
|
|
75
75
|
href=${d(this.href)}
|
|
76
76
|
target=${d(this.target)}
|
|
77
77
|
rel=${d(this.rel)}
|
|
@@ -92,7 +92,7 @@ let t = class extends u {
|
|
|
92
92
|
return this.tag === "button" ? this.renderButton(l) : this.renderAnchor(l);
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
|
-
t.styles =
|
|
95
|
+
t.styles = m(z);
|
|
96
96
|
i([
|
|
97
97
|
o({ type: String }),
|
|
98
98
|
s(a, P, e.tag)
|
|
@@ -126,7 +126,7 @@ i([
|
|
|
126
126
|
o({ type: Boolean })
|
|
127
127
|
], t.prototype, "isBold", 2);
|
|
128
128
|
i([
|
|
129
|
-
o({ type: Boolean })
|
|
129
|
+
o({ type: Boolean, reflect: !0 })
|
|
130
130
|
], t.prototype, "isStandalone", 2);
|
|
131
131
|
i([
|
|
132
132
|
o({ type: Boolean })
|
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": "1.2.
|
|
4
|
+
"version": "1.2.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.11.1",
|
|
45
45
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
46
46
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
47
47
|
"cem-plugin-module-file-extensions": "0.0.5"
|
package/src/index.ts
CHANGED
|
@@ -63,7 +63,7 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
63
63
|
@property({ type: Boolean })
|
|
64
64
|
public isBold = defaultProps.isBold;
|
|
65
65
|
|
|
66
|
-
@property({ type: Boolean })
|
|
66
|
+
@property({ type: Boolean, reflect: true })
|
|
67
67
|
public isStandalone = defaultProps.isStandalone;
|
|
68
68
|
|
|
69
69
|
@property({ type: Boolean })
|
package/src/link.scss
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
|
|
4
6
|
--link-font-weight: var(--dt-font-weight-regular);
|
|
5
7
|
--link-text-color: var(--dt-color-content-link);
|
|
6
8
|
}
|
|
7
9
|
|
|
10
|
+
:host([isstandalone]) {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
13
|
+
|
|
8
14
|
@mixin link-interactive-states($mode: 'default') {
|
|
9
15
|
&:hover,
|
|
10
16
|
&:active {
|