@justeattakeaway/pie-link 0.17.7 → 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.
Files changed (10) hide show
  1. package/custom-elements.json +22 -57
  2. package/dist/index.d.ts +13 -13
  3. package/dist/index.js +70 -73
  4. package/dist/react.d.ts +13 -13
  5. package/dist/react.js +12 -10
  6. package/package.json +4 -3
  7. package/src/defs-react.ts +1 -1
  8. package/src/defs.ts +1 -1
  9. package/src/index.ts +48 -49
  10. package/src/link.scss +18 -27
package/custom-elements.json CHANGED
@@ -150,45 +150,30 @@
150
150
  {
151
151
  "kind": "field",
152
152
  "name": "tag",
153
- "type": {
154
- "text": "LinkProps['tag']"
155
- },
156
153
  "privacy": "public",
157
154
  "attribute": "tag"
158
155
  },
159
156
  {
160
157
  "kind": "field",
161
158
  "name": "variant",
162
- "type": {
163
- "text": "LinkProps['variant']"
164
- },
165
159
  "privacy": "public",
166
160
  "attribute": "variant"
167
161
  },
168
162
  {
169
163
  "kind": "field",
170
164
  "name": "size",
171
- "type": {
172
- "text": "LinkProps['size']"
173
- },
174
165
  "privacy": "public",
175
166
  "attribute": "size"
176
167
  },
177
168
  {
178
169
  "kind": "field",
179
170
  "name": "underline",
180
- "type": {
181
- "text": "LinkProps['underline']"
182
- },
183
171
  "privacy": "public",
184
172
  "attribute": "underline"
185
173
  },
186
174
  {
187
175
  "kind": "field",
188
176
  "name": "iconPlacement",
189
- "type": {
190
- "text": "LinkProps['iconPlacement']"
191
- },
192
177
  "privacy": "public",
193
178
  "attribute": "iconPlacement"
194
179
  },
@@ -196,7 +181,7 @@
196
181
  "kind": "field",
197
182
  "name": "href",
198
183
  "type": {
199
- "text": "string | undefined"
184
+ "text": "LinkProps['href']"
200
185
  },
201
186
  "privacy": "public",
202
187
  "attribute": "href",
@@ -206,7 +191,7 @@
206
191
  "kind": "field",
207
192
  "name": "target",
208
193
  "type": {
209
- "text": "string | undefined"
194
+ "text": "LinkProps['target']"
210
195
  },
211
196
  "privacy": "public",
212
197
  "attribute": "target",
@@ -216,7 +201,7 @@
216
201
  "kind": "field",
217
202
  "name": "rel",
218
203
  "type": {
219
- "text": "string | undefined"
204
+ "text": "LinkProps['rel']"
220
205
  },
221
206
  "privacy": "public",
222
207
  "attribute": "rel",
@@ -243,9 +228,6 @@
243
228
  {
244
229
  "kind": "field",
245
230
  "name": "type",
246
- "type": {
247
- "text": "LinkProps['type']"
248
- },
249
231
  "privacy": "public",
250
232
  "attribute": "type"
251
233
  },
@@ -253,7 +235,7 @@
253
235
  "kind": "field",
254
236
  "name": "aria",
255
237
  "type": {
256
- "text": "AriaProps"
238
+ "text": "LinkProps['aria']"
257
239
  },
258
240
  "privacy": "public",
259
241
  "attribute": "aria"
@@ -262,90 +244,76 @@
262
244
  "kind": "method",
263
245
  "name": "renderContent",
264
246
  "privacy": "private",
265
- "return": {
266
- "type": {
267
- "text": "TemplateResult"
268
- }
269
- },
270
247
  "description": "Renders the link content.\nIcons are only shown in block elements"
271
248
  },
272
249
  {
273
250
  "kind": "method",
274
251
  "name": "renderButton",
275
252
  "privacy": "private",
276
- "return": {
277
- "type": {
278
- "text": "TemplateResult"
253
+ "parameters": [
254
+ {
255
+ "name": "classes",
256
+ "type": {
257
+ "text": "ClassInfo"
258
+ }
279
259
  }
280
- },
260
+ ],
281
261
  "description": "Renders the link as a button element."
282
262
  },
283
263
  {
284
264
  "kind": "method",
285
265
  "name": "renderAnchor",
286
266
  "privacy": "private",
287
- "return": {
288
- "type": {
289
- "text": "TemplateResult"
267
+ "parameters": [
268
+ {
269
+ "name": "classes",
270
+ "type": {
271
+ "text": "ClassInfo"
272
+ }
290
273
  }
291
- },
274
+ ],
292
275
  "description": "Renders the link as an anchor element."
293
276
  }
294
277
  ],
295
278
  "attributes": [
296
279
  {
297
280
  "name": "tag",
298
- "type": {
299
- "text": "LinkProps['tag']"
300
- },
301
281
  "fieldName": "tag"
302
282
  },
303
283
  {
304
284
  "name": "variant",
305
- "type": {
306
- "text": "LinkProps['variant']"
307
- },
308
285
  "fieldName": "variant"
309
286
  },
310
287
  {
311
288
  "name": "size",
312
- "type": {
313
- "text": "LinkProps['size']"
314
- },
315
289
  "fieldName": "size"
316
290
  },
317
291
  {
318
292
  "name": "underline",
319
- "type": {
320
- "text": "LinkProps['underline']"
321
- },
322
293
  "fieldName": "underline"
323
294
  },
324
295
  {
325
296
  "name": "iconPlacement",
326
- "type": {
327
- "text": "LinkProps['iconPlacement']"
328
- },
329
297
  "fieldName": "iconPlacement"
330
298
  },
331
299
  {
332
300
  "name": "href",
333
301
  "type": {
334
- "text": "string | undefined"
302
+ "text": "LinkProps['href']"
335
303
  },
336
304
  "fieldName": "href"
337
305
  },
338
306
  {
339
307
  "name": "target",
340
308
  "type": {
341
- "text": "string | undefined"
309
+ "text": "LinkProps['target']"
342
310
  },
343
311
  "fieldName": "target"
344
312
  },
345
313
  {
346
314
  "name": "rel",
347
315
  "type": {
348
- "text": "string | undefined"
316
+ "text": "LinkProps['rel']"
349
317
  },
350
318
  "fieldName": "rel"
351
319
  },
@@ -363,15 +331,12 @@
363
331
  },
364
332
  {
365
333
  "name": "type",
366
- "type": {
367
- "text": "LinkProps['type']"
368
- },
369
334
  "fieldName": "type"
370
335
  },
371
336
  {
372
337
  "name": "aria",
373
338
  "type": {
374
- "text": "AriaProps"
339
+ "text": "LinkProps['aria']"
375
340
  },
376
341
  "fieldName": "aria"
377
342
  }
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { LitElement } from 'lit';
4
- import type { TemplateResult } from 'lit';
4
+ import type { TemplateResult } from 'lit-html';
5
5
 
6
- export declare type AriaProps = {
6
+ declare type AriaProps = {
7
7
  label?: string;
8
8
  };
9
9
 
@@ -78,19 +78,19 @@ export declare interface LinkProps {
78
78
  * @slot - Default slot
79
79
  */
80
80
  export declare class PieLink extends LitElement implements LinkProps {
81
- tag: LinkProps['tag'];
82
- variant: LinkProps['variant'];
83
- size: LinkProps['size'];
84
- underline: LinkProps['underline'];
85
- iconPlacement: LinkProps['iconPlacement'];
86
- href?: string;
87
- target?: string;
88
- rel?: string;
81
+ tag: "a" | "button";
82
+ variant: "default" | "high-visibility" | "inverse";
83
+ size: "small" | "medium";
84
+ underline: "default" | "reversed";
85
+ iconPlacement: "leading" | "trailing";
86
+ href: LinkProps['href'];
87
+ target: LinkProps['target'];
88
+ rel: LinkProps['rel'];
89
89
  isBold: boolean;
90
90
  isStandalone: boolean;
91
91
  hasVisited: boolean;
92
- type: LinkProps['type'];
93
- aria: AriaProps;
92
+ type: "button" | "submit" | "reset" | "menu";
93
+ aria: LinkProps['aria'];
94
94
  /**
95
95
  * Renders the link content.
96
96
  * Icons are only shown in block elements
@@ -109,7 +109,7 @@ export declare class PieLink extends LitElement implements LinkProps {
109
109
  * @private
110
110
  */
111
111
  private renderAnchor;
112
- render(): TemplateResult;
112
+ render(): TemplateResult<1>;
113
113
  static styles: CSSResult;
114
114
  }
115
115
 
package/dist/index.js CHANGED
@@ -1,8 +1,10 @@
1
- import { unsafeCSS as f, LitElement as k, html as c, nothing as s } from "lit";
2
- import { property as n } from "lit/decorators.js";
3
- import { validPropertyValues as d, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
4
- const y = `*,*:after,*:before{box-sizing:inherit}.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-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;-webkit-user-select: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)}
5
- `, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], x = ["leading", "trailing"], $ = ["a", "button"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"], t = {
1
+ import { unsafeCSS as y, LitElement as g, html as c, nothing as v } from "lit";
2
+ import { property as i } from "lit/decorators.js";
3
+ import { classMap as u } from "lit/directives/class-map.js";
4
+ import { ifDefined as d } from "lit/directives/if-defined.js";
5
+ import { validPropertyValues as a, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
6
+ const b = `*,*:after,*:before{box-sizing:inherit}.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-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.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)}
7
+ `, x = ["default", "high-visibility", "inverse"], z = ["small", "medium"], S = ["leading", "trailing"], P = ["a", "button"], $ = ["submit", "button", "reset", "menu"], w = ["default", "reversed"], t = {
6
8
  tag: "a",
7
9
  variant: "default",
8
10
  size: "medium",
@@ -13,13 +15,13 @@ const y = `*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var
13
15
  iconPlacement: "leading",
14
16
  type: "submit"
15
17
  };
16
- var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (h, i, a, p) => {
17
- for (var l = p > 1 ? void 0 : p ? P(i, a) : i, u = h.length - 1, v; u >= 0; u--)
18
- (v = h[u]) && (l = (p ? v(i, a, l) : v(l)) || l);
19
- return p && l && B(i, a, l), l;
18
+ var B = Object.defineProperty, V = Object.getOwnPropertyDescriptor, o = (h, n, l, p) => {
19
+ for (var r = p > 1 ? void 0 : p ? V(n, l) : n, k = h.length - 1, f; k >= 0; k--)
20
+ (f = h[k]) && (r = (p ? f(n, l, r) : f(r)) || r);
21
+ return p && r && B(n, l, r), r;
20
22
  };
21
- const r = "pie-link";
22
- class e extends k {
23
+ const s = "pie-link";
24
+ class e extends g {
23
25
  constructor() {
24
26
  super(...arguments), this.tag = t.tag, this.variant = t.variant, this.size = t.size, this.underline = t.underline, this.iconPlacement = t.iconPlacement, this.isBold = t.isBold, this.isStandalone = t.isStandalone, this.hasVisited = t.hasVisited, this.type = t.type;
25
27
  }
@@ -29,35 +31,28 @@ class e extends k {
29
31
  * @private
30
32
  */
31
33
  renderContent() {
32
- const { iconPlacement: i, isStandalone: a } = this;
34
+ const { iconPlacement: n, isStandalone: l } = this;
33
35
  return c`
34
- <span class="c-link-content">
35
- ${a && i === "leading" ? c`<slot name="icon"></slot>` : s}
36
- <slot></slot>
37
- ${a && i === "trailing" ? c`<slot name="icon"></slot>` : s}
38
- </span>`;
36
+ <span class="c-link-content">
37
+ ${l && n === "leading" ? c`<slot name="icon"></slot>` : v}
38
+ <slot></slot>
39
+ ${l && n === "trailing" ? c`<slot name="icon"></slot>` : v}
40
+ </span>`;
39
41
  }
40
42
  /**
41
43
  * Renders the link as a button element.
42
44
  *
43
45
  * @private
44
46
  */
45
- renderButton() {
46
- var i;
47
+ renderButton(n) {
48
+ var l;
47
49
  return c`
48
50
  <button
49
51
  data-test-id="pie-link"
50
- class="c-link"
51
- tag=${this.tag || "button"}
52
- variant=${this.variant || "default"}
53
- size=${this.size || "medium"}
54
- underline=${this.underline || "default"}
55
- ?isBold=${this.isBold}
56
- ?isStandalone=${this.isStandalone}
57
- ?hasVisited=${this.hasVisited}
58
- type=${this.type || "submit"}
59
- aria-label=${((i = this.aria) == null ? void 0 : i.label) || s}>
60
- ${this.renderContent()}
52
+ class="${u(n)}"
53
+ type=${this.type}
54
+ aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
55
+ ${this.renderContent()}
61
56
  </button>`;
62
57
  }
63
58
  /**
@@ -65,84 +60,86 @@ class e extends k {
65
60
  *
66
61
  * @private
67
62
  */
68
- renderAnchor() {
69
- var i;
63
+ renderAnchor(n) {
64
+ var l;
70
65
  return c`
71
66
  <a
72
67
  data-test-id="pie-link"
73
- class="c-link"
74
- tag=${this.tag || "a"}
75
- variant=${this.variant || "default"}
76
- size=${this.size || "medium"}
77
- underline=${this.underline || "default"}
78
- ?isBold=${this.isBold}
79
- ?isStandalone=${this.isStandalone}
80
- ?hasVisited=${this.hasVisited}
81
- href=${this.href || ""}
82
- target=${this.target || s}
83
- rel=${this.rel || s}
84
- aria-label=${((i = this.aria) == null ? void 0 : i.label) || s}>
85
- ${this.renderContent()}
68
+ class="${u(n)}"
69
+ href=${d(this.href)}
70
+ target=${d(this.target)}
71
+ rel=${d(this.rel)}
72
+ aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
73
+ ${this.renderContent()}
86
74
  </a>`;
87
75
  }
88
76
  render() {
89
- return this.tag === "button" ? this.renderButton() : this.renderAnchor();
77
+ const n = {
78
+ "c-link": !0,
79
+ [`c-link--${this.variant}`]: !0,
80
+ [`c-link--${this.size}`]: !0,
81
+ "c-link--underline-reversed": this.underline === "reversed",
82
+ "c-link--bold": this.isBold,
83
+ "c-link--standalone": this.isStandalone,
84
+ "c-link--hasVisited": this.hasVisited
85
+ };
86
+ return this.tag === "button" ? this.renderButton(n) : this.renderAnchor(n);
90
87
  }
91
88
  }
92
- e.styles = f(y);
89
+ e.styles = y(b);
93
90
  o([
94
- n(),
95
- d(r, $, t.tag)
91
+ i(),
92
+ a(s, P, t.tag)
96
93
  ], e.prototype, "tag", 2);
97
94
  o([
98
- n({ type: String }),
99
- d(r, m, t.variant)
95
+ i({ type: String }),
96
+ a(s, x, t.variant)
100
97
  ], e.prototype, "variant", 2);
101
98
  o([
102
- n({ type: String }),
103
- d(r, b, t.size)
99
+ i({ type: String }),
100
+ a(s, z, t.size)
104
101
  ], e.prototype, "size", 2);
105
102
  o([
106
- n({ type: String }),
107
- d(r, S, t.underline)
103
+ i({ type: String }),
104
+ a(s, w, t.underline)
108
105
  ], e.prototype, "underline", 2);
109
106
  o([
110
- n({ type: String }),
111
- d(r, x, t.iconPlacement)
107
+ i({ type: String }),
108
+ a(s, S, t.iconPlacement)
112
109
  ], e.prototype, "iconPlacement", 2);
113
110
  o([
114
- n({ type: String, reflect: !0 })
111
+ i({ type: String, reflect: !0 })
115
112
  ], e.prototype, "href", 2);
116
113
  o([
117
- n({ type: String, reflect: !0 })
114
+ i({ type: String, reflect: !0 })
118
115
  ], e.prototype, "target", 2);
119
116
  o([
120
- n({ type: String, reflect: !0 })
117
+ i({ type: String, reflect: !0 })
121
118
  ], e.prototype, "rel", 2);
122
119
  o([
123
- n({ type: Boolean })
120
+ i({ type: Boolean })
124
121
  ], e.prototype, "isBold", 2);
125
122
  o([
126
- n({ type: Boolean })
123
+ i({ type: Boolean })
127
124
  ], e.prototype, "isStandalone", 2);
128
125
  o([
129
- n({ type: Boolean })
126
+ i({ type: Boolean })
130
127
  ], e.prototype, "hasVisited", 2);
131
128
  o([
132
- n(),
133
- d(r, z, t.type)
129
+ i({ type: String }),
130
+ a(s, $, t.type)
134
131
  ], e.prototype, "type", 2);
135
132
  o([
136
- n({ type: Object })
133
+ i({ type: Object })
137
134
  ], e.prototype, "aria", 2);
138
- g(r, e);
135
+ m(s, e);
139
136
  export {
140
137
  e as PieLink,
141
- z as buttonTypes,
138
+ $ as buttonTypes,
142
139
  t as defaultProps,
143
- x as iconPlacements,
144
- b as sizes,
145
- $ as tags,
146
- S as underlineTypes,
147
- m as variants
140
+ S as iconPlacements,
141
+ z as sizes,
142
+ P as tags,
143
+ w as underlineTypes,
144
+ x as variants
148
145
  };
package/dist/react.d.ts CHANGED
@@ -2,9 +2,9 @@ import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
3
  import type { LitElement } from 'lit';
4
4
  import * as React_2 from 'react';
5
- import type { TemplateResult } from 'lit';
5
+ import type { TemplateResult } from 'lit-html';
6
6
 
7
- export declare type AriaProps = {
7
+ declare type AriaProps = {
8
8
  label?: string;
9
9
  };
10
10
 
@@ -81,19 +81,19 @@ export declare const PieLink: React_2.ForwardRefExoticComponent<LinkProps & Reac
81
81
  * @slot - Default slot
82
82
  */
83
83
  declare class PieLink_2 extends LitElement implements LinkProps {
84
- tag: LinkProps['tag'];
85
- variant: LinkProps['variant'];
86
- size: LinkProps['size'];
87
- underline: LinkProps['underline'];
88
- iconPlacement: LinkProps['iconPlacement'];
89
- href?: string;
90
- target?: string;
91
- rel?: string;
84
+ tag: "a" | "button";
85
+ variant: "default" | "high-visibility" | "inverse";
86
+ size: "small" | "medium";
87
+ underline: "default" | "reversed";
88
+ iconPlacement: "leading" | "trailing";
89
+ href: LinkProps['href'];
90
+ target: LinkProps['target'];
91
+ rel: LinkProps['rel'];
92
92
  isBold: boolean;
93
93
  isStandalone: boolean;
94
94
  hasVisited: boolean;
95
- type: LinkProps['type'];
96
- aria: AriaProps;
95
+ type: "button" | "submit" | "reset" | "menu";
96
+ aria: LinkProps['aria'];
97
97
  /**
98
98
  * Renders the link content.
99
99
  * Icons are only shown in block elements
@@ -112,7 +112,7 @@ declare class PieLink_2 extends LitElement implements LinkProps {
112
112
  * @private
113
113
  */
114
114
  private renderAnchor;
115
- render(): TemplateResult;
115
+ render(): TemplateResult<1>;
116
116
  static styles: CSSResult;
117
117
  }
118
118
 
package/dist/react.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import * as e from "react";
2
2
  import { createComponent as t } from "@lit/react";
3
3
  import { PieLink as i } from "./index.js";
4
- import { buttonTypes as P, defaultProps as k, iconPlacements as f, sizes as L, tags as d, underlineTypes as u, variants as y } from "./index.js";
4
+ import { buttonTypes as f, defaultProps as L, iconPlacements as d, sizes as u, tags as y, underlineTypes as g, variants as v } from "./index.js";
5
5
  import "lit";
6
6
  import "lit/decorators.js";
7
+ import "lit/directives/class-map.js";
8
+ import "lit/directives/if-defined.js";
7
9
  import "@justeattakeaway/pie-webc-core";
8
10
  const o = t({
9
11
  displayName: "PieLink",
@@ -11,14 +13,14 @@ const o = t({
11
13
  react: e,
12
14
  tagName: "pie-link",
13
15
  events: {}
14
- }), p = o;
16
+ }), l = o;
15
17
  export {
16
- p as PieLink,
17
- P as buttonTypes,
18
- k as defaultProps,
19
- f as iconPlacements,
20
- L as sizes,
21
- d as tags,
22
- u as underlineTypes,
23
- y as variants
18
+ l as PieLink,
19
+ f as buttonTypes,
20
+ L as defaultProps,
21
+ d as iconPlacements,
22
+ u as sizes,
23
+ y as tags,
24
+ g as underlineTypes,
25
+ v as variants
24
26
  };
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.17.7",
4
+ "version": "0.18.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -36,8 +36,9 @@
36
36
  "license": "Apache-2.0",
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
- "@justeattakeaway/pie-components-config": "0.16.0",
40
- "@justeattakeaway/pie-icons-webc": "0.24.2",
39
+ "@justeattakeaway/pie-components-config": "0.18.0",
40
+ "@justeattakeaway/pie-css": "0.12.1",
41
+ "@justeattakeaway/pie-icons-webc": "0.25.1",
41
42
  "@justeattakeaway/pie-wrapper-react": "0.14.1",
42
43
  "cem-plugin-module-file-extensions": "0.0.5"
43
44
  },
package/src/defs-react.ts CHANGED
@@ -1,3 +1,3 @@
1
- import React from 'react';
1
+ import type React from 'react';
2
2
 
3
3
  export type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>
package/src/defs.ts CHANGED
@@ -7,7 +7,7 @@ export const tags = ['a', 'button'] as const;
7
7
  export const buttonTypes = ['submit', 'button', 'reset', 'menu'] as const;
8
8
  export const underlineTypes = ['default', 'reversed'] as const;
9
9
 
10
- export type AriaProps = {
10
+ type AriaProps = {
11
11
  label?: string;
12
12
  };
13
13
 
package/src/index.ts CHANGED
@@ -1,18 +1,19 @@
1
1
  import {
2
- html, LitElement, unsafeCSS, nothing, TemplateResult,
2
+ html, LitElement, unsafeCSS, nothing,
3
3
  } from 'lit';
4
4
  import { property } from 'lit/decorators.js';
5
+ import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
6
+ import { ifDefined } from 'lit/directives/if-defined.js';
5
7
  import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
6
8
  import styles from './link.scss?inline';
7
9
  import {
8
- LinkProps,
10
+ type LinkProps,
9
11
  variants,
10
12
  sizes,
11
13
  iconPlacements,
12
14
  tags,
13
15
  buttonTypes,
14
16
  underlineTypes,
15
- type AriaProps,
16
17
  defaultProps,
17
18
  } from './defs';
18
19
 
@@ -30,32 +31,32 @@ const componentSelector = 'pie-link';
30
31
  export class PieLink extends LitElement implements LinkProps {
31
32
  @property()
32
33
  @validPropertyValues(componentSelector, tags, defaultProps.tag)
33
- public tag: LinkProps['tag'] = defaultProps.tag;
34
+ public tag = defaultProps.tag;
34
35
 
35
36
  @property({ type: String })
36
37
  @validPropertyValues(componentSelector, variants, defaultProps.variant)
37
- public variant: LinkProps['variant'] = defaultProps.variant;
38
+ public variant = defaultProps.variant;
38
39
 
39
40
  @property({ type: String })
40
41
  @validPropertyValues(componentSelector, sizes, defaultProps.size)
41
- public size: LinkProps['size'] = defaultProps.size;
42
+ public size = defaultProps.size;
42
43
 
43
44
  @property({ type: String })
44
45
  @validPropertyValues(componentSelector, underlineTypes, defaultProps.underline)
45
- public underline: LinkProps['underline'] = defaultProps.underline;
46
+ public underline = defaultProps.underline;
46
47
 
47
48
  @property({ type: String })
48
49
  @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
49
- public iconPlacement: LinkProps['iconPlacement'] = defaultProps.iconPlacement;
50
+ public iconPlacement = defaultProps.iconPlacement;
50
51
 
51
52
  @property({ type: String, reflect: true })
52
- public href?: string;
53
+ public href: LinkProps['href'];
53
54
 
54
55
  @property({ type: String, reflect: true })
55
- public target?: string;
56
+ public target: LinkProps['target'];
56
57
 
57
58
  @property({ type: String, reflect: true })
58
- public rel?: string;
59
+ public rel: LinkProps['rel'];
59
60
 
60
61
  @property({ type: Boolean })
61
62
  public isBold = defaultProps.isBold;
@@ -66,26 +67,26 @@ export class PieLink extends LitElement implements LinkProps {
66
67
  @property({ type: Boolean })
67
68
  public hasVisited = defaultProps.hasVisited;
68
69
 
69
- @property()
70
+ @property({ type: String })
70
71
  @validPropertyValues(componentSelector, buttonTypes, defaultProps.type)
71
- public type: LinkProps['type'] = defaultProps.type;
72
+ public type = defaultProps.type;
72
73
 
73
74
  @property({ type: Object })
74
- public aria!: AriaProps;
75
+ public aria: LinkProps['aria'];
75
76
 
76
77
  /**
77
78
  * Renders the link content.
78
79
  * Icons are only shown in block elements
79
80
  * @private
80
81
  */
81
- private renderContent (): TemplateResult {
82
+ private renderContent () {
82
83
  const { iconPlacement, isStandalone } = this;
83
84
  return html`
84
- <span class="c-link-content">
85
- ${isStandalone && iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
86
- <slot></slot>
87
- ${isStandalone && iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
88
- </span>`;
85
+ <span class="c-link-content">
86
+ ${isStandalone && iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
87
+ <slot></slot>
88
+ ${isStandalone && iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
89
+ </span>`;
89
90
  }
90
91
 
91
92
  /**
@@ -93,21 +94,14 @@ export class PieLink extends LitElement implements LinkProps {
93
94
  *
94
95
  * @private
95
96
  */
96
- private renderButton (): TemplateResult {
97
+ private renderButton (classes: ClassInfo) {
97
98
  return html`
98
99
  <button
99
100
  data-test-id="pie-link"
100
- class="c-link"
101
- tag=${this.tag || 'button'}
102
- variant=${this.variant || 'default'}
103
- size=${this.size || 'medium'}
104
- underline=${this.underline || 'default'}
105
- ?isBold=${this.isBold}
106
- ?isStandalone=${this.isStandalone}
107
- ?hasVisited=${this.hasVisited}
108
- type=${this.type || 'submit'}
109
- aria-label=${this.aria?.label || nothing}>
110
- ${this.renderContent()}
101
+ class="${classMap(classes)}"
102
+ type=${this.type}
103
+ aria-label=${ifDefined(this.aria?.label)}>
104
+ ${this.renderContent()}
111
105
  </button>`;
112
106
  }
113
107
 
@@ -116,30 +110,35 @@ export class PieLink extends LitElement implements LinkProps {
116
110
  *
117
111
  * @private
118
112
  */
119
- private renderAnchor (): TemplateResult {
113
+ private renderAnchor (classes: ClassInfo) {
120
114
  return html`
121
115
  <a
122
116
  data-test-id="pie-link"
123
- class="c-link"
124
- tag=${this.tag || 'a'}
125
- variant=${this.variant || 'default'}
126
- size=${this.size || 'medium'}
127
- underline=${this.underline || 'default'}
128
- ?isBold=${this.isBold}
129
- ?isStandalone=${this.isStandalone}
130
- ?hasVisited=${this.hasVisited}
131
- href=${this.href || ''}
132
- target=${this.target || nothing}
133
- rel=${this.rel || nothing}
134
- aria-label=${this.aria?.label || nothing}>
135
- ${this.renderContent()}
117
+ class="${classMap(classes)}"
118
+ href=${ifDefined(this.href)}
119
+ target=${ifDefined(this.target)}
120
+ rel=${ifDefined(this.rel)}
121
+ aria-label=${ifDefined(this.aria?.label)}>
122
+ ${this.renderContent()}
136
123
  </a>`;
137
124
  }
138
125
 
139
126
  render () {
140
- const isButton = this.tag === 'button';
141
-
142
- return isButton ? this.renderButton() : this.renderAnchor();
127
+ const classes: ClassInfo = {
128
+ 'c-link': true,
129
+ [`c-link--${this.variant}`]: true,
130
+ [`c-link--${this.size}`]: true,
131
+ 'c-link--underline-reversed': this.underline === 'reversed',
132
+ 'c-link--bold': this.isBold,
133
+ 'c-link--standalone': this.isStandalone,
134
+ 'c-link--hasVisited': this.hasVisited,
135
+ };
136
+
137
+ if (this.tag === 'button') {
138
+ return this.renderButton(classes);
139
+ }
140
+
141
+ return this.renderAnchor(classes);
143
142
  }
144
143
 
145
144
  // Renders a `CSSResult` generated from SCSS by Vite
package/src/link.scss CHANGED
@@ -33,64 +33,47 @@
33
33
 
34
34
  @include link-interactive-states('default');
35
35
 
36
-
37
- &[tag='a'] {
38
- /* Same as default styles */
39
- }
40
-
41
- &[tag='button'] {
42
- outline: none;
43
- border: none;
44
- user-select: none;
45
- background: transparent;
46
- padding: 0;
47
- }
48
-
49
- &[variant='default'] {
36
+ &.c-link--default {
50
37
  /* Same as default styles */
51
38
  }
52
39
 
53
- &[variant='high-visibility'] {
40
+ &.c-link--high-visibility {
54
41
  --link-text-color: var(--dt-color-content-link-distinct);
55
42
  }
56
43
 
57
- &[variant='inverse'] {
44
+ &.c-link--inverse {
58
45
  --link-text-color: var(--dt-color-content-link-inverse);
59
46
  }
60
47
 
61
- &[size='small'] {
48
+ &.c-link--small {
62
49
  --link-font-size: #{p.font-size(--dt-font-size-14)};
63
50
  --link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
64
51
  --link-icon-offset-top: 2px;
65
52
  }
66
53
 
67
- &[size='medium'] {
68
- /* Same as default styles */
69
- }
70
-
71
- &[underline='default'] {
54
+ &.c-link--medium {
72
55
  /* Same as default styles */
73
56
  }
74
57
 
75
- &[underline='reversed'][isStandalone] {
58
+ &.c-link--underline-reversed.c-link--standalone {
76
59
  --link-text-decoration: none;
77
60
 
78
61
  @include link-interactive-states('reversed');
79
62
  }
80
63
 
81
- &[isBold] {
64
+ &.c-link--bold {
82
65
  --link-font-weight: var(--dt-font-weight-bold);
83
66
  }
84
67
 
85
- &[isStandalone] {
68
+ &.c-link--standalone {
86
69
  display: block;
87
70
  width: fit-content;
88
71
  }
89
72
 
90
- &[hasVisited]:visited {
73
+ &.c-link--hasVisited:visited {
91
74
  color: var(--dt-color-content-link-visited);
92
75
 
93
- &[variant='inverse'] {
76
+ &.c-link--inverse {
94
77
  color: var(--dt-color-content-link-visited-inverse);
95
78
  }
96
79
  }
@@ -102,6 +85,14 @@
102
85
  }
103
86
  }
104
87
 
88
+ button.c-link {
89
+ outline: none;
90
+ border: none;
91
+ user-select: none;
92
+ background: transparent;
93
+ padding: 0;
94
+ }
95
+
105
96
  .c-link-content {
106
97
  display: flex;
107
98
  gap: var(--dt-spacing-a);