@justeattakeaway/pie-link 1.2.3 → 1.2.5
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 +6 -1
- package/custom-elements.json +4 -3
- package/dist/index.js +17 -15
- package/package.json +2 -2
- package/src/index.ts +5 -3
- package/src/link.scss +7 -1
package/README.md
CHANGED
|
@@ -54,7 +54,12 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
54
54
|
| `icon` | Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon. **Please note the icon size is hardcoded and cannot be overridden.** |
|
|
55
55
|
|
|
56
56
|
### CSS Variables
|
|
57
|
-
|
|
57
|
+
|
|
58
|
+
| Name | Description |
|
|
59
|
+
|--------------------------|---------------------------------------------|
|
|
60
|
+
| `--link-font-weight` | Controls the font weight of the link text. |
|
|
61
|
+
| `--link-text-color` | Controls the color of the link text. |
|
|
62
|
+
| `--link-text-decoration` | Controls the text decoration of the link. |
|
|
58
63
|
|
|
59
64
|
### Events
|
|
60
65
|
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
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.5";
|
|
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);--link-text-decoration: var(--dt-font-style-underline)}: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-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,9 +55,10 @@ 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
|
-
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
60
|
+
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
61
|
+
part="base">
|
|
61
62
|
${this.renderContent()}
|
|
62
63
|
</button>`;
|
|
63
64
|
}
|
|
@@ -71,11 +72,12 @@ let t = class extends u {
|
|
|
71
72
|
return c`
|
|
72
73
|
<a
|
|
73
74
|
data-test-id="pie-link-anchor"
|
|
74
|
-
class="${
|
|
75
|
+
class="${g(l)}"
|
|
75
76
|
href=${d(this.href)}
|
|
76
77
|
target=${d(this.target)}
|
|
77
78
|
rel=${d(this.rel)}
|
|
78
|
-
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
79
|
+
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
|
|
80
|
+
part="base">
|
|
79
81
|
${this.renderContent()}
|
|
80
82
|
</a>`;
|
|
81
83
|
}
|
|
@@ -92,7 +94,7 @@ let t = class extends u {
|
|
|
92
94
|
return this.tag === "button" ? this.renderButton(l) : this.renderAnchor(l);
|
|
93
95
|
}
|
|
94
96
|
};
|
|
95
|
-
t.styles =
|
|
97
|
+
t.styles = m(z);
|
|
96
98
|
i([
|
|
97
99
|
o({ type: String }),
|
|
98
100
|
s(a, P, e.tag)
|
|
@@ -126,7 +128,7 @@ i([
|
|
|
126
128
|
o({ type: Boolean })
|
|
127
129
|
], t.prototype, "isBold", 2);
|
|
128
130
|
i([
|
|
129
|
-
o({ type: Boolean })
|
|
131
|
+
o({ type: Boolean, reflect: !0 })
|
|
130
132
|
], t.prototype, "isStandalone", 2);
|
|
131
133
|
i([
|
|
132
134
|
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.5",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -41,12 +41,12 @@
|
|
|
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.10.1",
|
|
45
44
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
46
45
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
47
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
48
47
|
},
|
|
49
48
|
"dependencies": {
|
|
49
|
+
"@justeattakeaway/pie-icons-webc": "1.12.0",
|
|
50
50
|
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
51
51
|
},
|
|
52
52
|
"volta": {
|
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 })
|
|
@@ -102,7 +102,8 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
102
102
|
data-test-id="pie-link-button"
|
|
103
103
|
class="${classMap(classes)}"
|
|
104
104
|
type=${this.type}
|
|
105
|
-
aria-label=${ifDefined(this.aria?.label)}
|
|
105
|
+
aria-label=${ifDefined(this.aria?.label)}
|
|
106
|
+
part="base">
|
|
106
107
|
${this.renderContent()}
|
|
107
108
|
</button>`;
|
|
108
109
|
}
|
|
@@ -120,7 +121,8 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
120
121
|
href=${ifDefined(this.href)}
|
|
121
122
|
target=${ifDefined(this.target)}
|
|
122
123
|
rel=${ifDefined(this.rel)}
|
|
123
|
-
aria-label=${ifDefined(this.aria?.label)}
|
|
124
|
+
aria-label=${ifDefined(this.aria?.label)}
|
|
125
|
+
part="base">
|
|
124
126
|
${this.renderContent()}
|
|
125
127
|
</a>`;
|
|
126
128
|
}
|
package/src/link.scss
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
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);
|
|
8
|
+
--link-text-decoration: var(--dt-font-style-underline);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
:host([isstandalone]) {
|
|
12
|
+
display: block;
|
|
6
13
|
}
|
|
7
14
|
|
|
8
15
|
@mixin link-interactive-states($mode: 'default') {
|
|
@@ -20,7 +27,6 @@
|
|
|
20
27
|
--link-font-family: var(--dt-font-interactive-l-family);
|
|
21
28
|
--link-font-size: #{p.font-size(--dt-font-size-16)};
|
|
22
29
|
--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
|
|
23
|
-
--link-text-decoration: var(--dt-font-style-underline);
|
|
24
30
|
--link-icon-size: 16px;
|
|
25
31
|
--link-icon-offset-top: var(--dt-spacing-a);
|
|
26
32
|
|