@justeattakeaway/pie-link 1.0.0 → 1.1.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 (6) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +87 -74
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +13 -9
  6. package/src/index.ts +5 -4
package/custom-elements.json CHANGED
@@ -342,8 +342,8 @@
342
342
  }
343
343
  ],
344
344
  "superclass": {
345
- "name": "LitElement",
346
- "package": "lit"
345
+ "name": "PieElement",
346
+ "package": "@justeattakeaway/pie-webc-core/src/internals/PieElement"
347
347
  },
348
348
  "tagName": "pie-link",
349
349
  "customElement": true
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import type { TemplateResult } from 'lit-html';
5
5
 
6
6
  declare type AriaProps = {
@@ -77,7 +77,7 @@ export declare interface LinkProps {
77
77
  * @slot icon - The icon slot
78
78
  * @slot - Default slot
79
79
  */
80
- export declare class PieLink extends LitElement implements LinkProps {
80
+ export declare class PieLink extends PieElement implements LinkProps {
81
81
  tag: "a" | "button";
82
82
  variant: "default" | "high-visibility" | "inverse";
83
83
  size: "small" | "medium";
package/dist/index.js CHANGED
@@ -1,9 +1,22 @@
1
- import { LitElement as y, html as c, nothing as v, unsafeCSS as g } from "lit";
2
- import { property as n } 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)}", x = ["default", "high-visibility", "inverse"], z = ["small", "medium"], S = ["leading", "trailing"], $ = ["a", "button"], w = ["submit", "button", "reset", "menu"], B = ["default", "reversed"], e = {
1
+ import { LitElement as m, html as h, nothing as u, unsafeCSS as b } from "lit";
2
+ import { property as r } from "lit/decorators.js";
3
+ import { classMap as v } from "lit/directives/class-map.js";
4
+ import { ifDefined as f } from "lit/directives/if-defined.js";
5
+ import { validPropertyValues as d, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
+ var z = Object.defineProperty, S = (c, e, i, g) => {
7
+ for (var o = void 0, s = c.length - 1, p; s >= 0; s--)
8
+ (p = c[s]) && (o = p(e, i, o) || o);
9
+ return o && z(e, i, o), o;
10
+ };
11
+ class y extends m {
12
+ constructor() {
13
+ super(...arguments), this.v = "1.1.0";
14
+ }
15
+ }
16
+ S([
17
+ r({ type: String, reflect: !0 })
18
+ ], y.prototype, "v");
19
+ const $ = "*,*: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)}", P = ["default", "high-visibility", "inverse"], w = ["small", "medium"], B = ["leading", "trailing"], V = ["a", "button"], C = ["submit", "button", "reset", "menu"], _ = ["default", "reversed"], n = {
7
20
  tag: "a",
8
21
  variant: "default",
9
22
  size: "medium",
@@ -14,14 +27,14 @@ const b = "*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var
14
27
  iconPlacement: "leading",
15
28
  type: "submit"
16
29
  };
17
- var P = Object.defineProperty, i = (h, o, l, V) => {
18
- for (var s = void 0, p = h.length - 1, f; p >= 0; p--)
19
- (f = h[p]) && (s = f(o, l, s) || s);
20
- return s && P(o, l, s), s;
30
+ var j = Object.defineProperty, l = (c, e, i, g) => {
31
+ for (var o = void 0, s = c.length - 1, p; s >= 0; s--)
32
+ (p = c[s]) && (o = p(e, i, o) || o);
33
+ return o && j(e, i, o), o;
21
34
  };
22
- const r = "pie-link", k = class k extends y {
35
+ const a = "pie-link", k = class k extends y {
23
36
  constructor() {
24
- super(...arguments), this.tag = e.tag, this.variant = e.variant, this.size = e.size, this.underline = e.underline, this.iconPlacement = e.iconPlacement, this.isBold = e.isBold, this.isStandalone = e.isStandalone, this.hasVisited = e.hasVisited, this.type = e.type;
37
+ super(...arguments), this.tag = n.tag, this.variant = n.variant, this.size = n.size, this.underline = n.underline, this.iconPlacement = n.iconPlacement, this.isBold = n.isBold, this.isStandalone = n.isStandalone, this.hasVisited = n.hasVisited, this.type = n.type;
25
38
  }
26
39
  /**
27
40
  * Renders the link content.
@@ -29,12 +42,12 @@ const r = "pie-link", k = class k extends y {
29
42
  * @private
30
43
  */
31
44
  renderContent() {
32
- const { iconPlacement: o, isStandalone: l } = this;
33
- return c`
45
+ const { iconPlacement: e, isStandalone: i } = this;
46
+ return h`
34
47
  <span class="c-link-content">
35
- ${l && o === "leading" ? c`<slot name="icon"></slot>` : v}
48
+ ${i && e === "leading" ? h`<slot name="icon"></slot>` : u}
36
49
  <slot></slot>
37
- ${l && o === "trailing" ? c`<slot name="icon"></slot>` : v}
50
+ ${i && e === "trailing" ? h`<slot name="icon"></slot>` : u}
38
51
  </span>`;
39
52
  }
40
53
  /**
@@ -42,14 +55,14 @@ const r = "pie-link", k = class k extends y {
42
55
  *
43
56
  * @private
44
57
  */
45
- renderButton(o) {
46
- var l;
47
- return c`
58
+ renderButton(e) {
59
+ var i;
60
+ return h`
48
61
  <button
49
- data-test-id="pie-link"
50
- class="${u(o)}"
62
+ data-test-id="pie-link-button"
63
+ class="${v(e)}"
51
64
  type=${this.type}
52
- aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
65
+ aria-label=${f((i = this.aria) == null ? void 0 : i.label)}>
53
66
  ${this.renderContent()}
54
67
  </button>`;
55
68
  }
@@ -58,21 +71,21 @@ const r = "pie-link", k = class k extends y {
58
71
  *
59
72
  * @private
60
73
  */
61
- renderAnchor(o) {
62
- var l;
63
- return c`
74
+ renderAnchor(e) {
75
+ var i;
76
+ return h`
64
77
  <a
65
- data-test-id="pie-link"
66
- class="${u(o)}"
67
- href=${d(this.href)}
68
- target=${d(this.target)}
69
- rel=${d(this.rel)}
70
- aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
78
+ data-test-id="pie-link-anchor"
79
+ class="${v(e)}"
80
+ href=${f(this.href)}
81
+ target=${f(this.target)}
82
+ rel=${f(this.rel)}
83
+ aria-label=${f((i = this.aria) == null ? void 0 : i.label)}>
71
84
  ${this.renderContent()}
72
85
  </a>`;
73
86
  }
74
87
  render() {
75
- const o = {
88
+ const e = {
76
89
  "c-link": !0,
77
90
  [`c-link--${this.variant}`]: !0,
78
91
  [`c-link--${this.size}`]: !0,
@@ -81,64 +94,64 @@ const r = "pie-link", k = class k extends y {
81
94
  "c-link--standalone": this.isStandalone,
82
95
  "c-link--hasVisited": this.hasVisited
83
96
  };
84
- return this.tag === "button" ? this.renderButton(o) : this.renderAnchor(o);
97
+ return this.tag === "button" ? this.renderButton(e) : this.renderAnchor(e);
85
98
  }
86
99
  };
87
- k.styles = g(b);
100
+ k.styles = b($);
88
101
  let t = k;
89
- i([
90
- n({ type: String }),
91
- a(r, $, e.tag)
102
+ l([
103
+ r({ type: String }),
104
+ d(a, V, n.tag)
92
105
  ], t.prototype, "tag");
93
- i([
94
- n({ type: String }),
95
- a(r, x, e.variant)
106
+ l([
107
+ r({ type: String }),
108
+ d(a, P, n.variant)
96
109
  ], t.prototype, "variant");
97
- i([
98
- n({ type: String }),
99
- a(r, z, e.size)
110
+ l([
111
+ r({ type: String }),
112
+ d(a, w, n.size)
100
113
  ], t.prototype, "size");
101
- i([
102
- n({ type: String }),
103
- a(r, B, e.underline)
114
+ l([
115
+ r({ type: String }),
116
+ d(a, _, n.underline)
104
117
  ], t.prototype, "underline");
105
- i([
106
- n({ type: String }),
107
- a(r, S, e.iconPlacement)
118
+ l([
119
+ r({ type: String }),
120
+ d(a, B, n.iconPlacement)
108
121
  ], t.prototype, "iconPlacement");
109
- i([
110
- n({ type: String, reflect: !0 })
122
+ l([
123
+ r({ type: String, reflect: !0 })
111
124
  ], t.prototype, "href");
112
- i([
113
- n({ type: String, reflect: !0 })
125
+ l([
126
+ r({ type: String, reflect: !0 })
114
127
  ], t.prototype, "target");
115
- i([
116
- n({ type: String, reflect: !0 })
128
+ l([
129
+ r({ type: String, reflect: !0 })
117
130
  ], t.prototype, "rel");
118
- i([
119
- n({ type: Boolean })
131
+ l([
132
+ r({ type: Boolean })
120
133
  ], t.prototype, "isBold");
121
- i([
122
- n({ type: Boolean })
134
+ l([
135
+ r({ type: Boolean })
123
136
  ], t.prototype, "isStandalone");
124
- i([
125
- n({ type: Boolean })
137
+ l([
138
+ r({ type: Boolean })
126
139
  ], t.prototype, "hasVisited");
127
- i([
128
- n({ type: String }),
129
- a(r, w, e.type)
140
+ l([
141
+ r({ type: String }),
142
+ d(a, C, n.type)
130
143
  ], t.prototype, "type");
131
- i([
132
- n({ type: Object })
144
+ l([
145
+ r({ type: Object })
133
146
  ], t.prototype, "aria");
134
- m(r, t);
147
+ x(a, t);
135
148
  export {
136
149
  t as PieLink,
137
- w as buttonTypes,
138
- e as defaultProps,
139
- S as iconPlacements,
140
- z as sizes,
141
- $ as tags,
142
- B as underlineTypes,
143
- x as variants
150
+ C as buttonTypes,
151
+ n as defaultProps,
152
+ B as iconPlacements,
153
+ w as sizes,
154
+ V as tags,
155
+ _ as underlineTypes,
156
+ P as variants
144
157
  };
package/dist/react.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import type { CSSResult } from 'lit';
3
- import type { LitElement } from 'lit';
3
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
4
  import * as React_2 from 'react';
5
5
  import type { TemplateResult } from 'lit-html';
6
6
 
@@ -80,7 +80,7 @@ export declare const PieLink: React_2.ForwardRefExoticComponent<LinkProps & Reac
80
80
  * @slot icon - The icon slot
81
81
  * @slot - Default slot
82
82
  */
83
- declare class PieLink_2 extends LitElement implements LinkProps {
83
+ declare class PieLink_2 extends PieElement implements LinkProps {
84
84
  tag: "a" | "button";
85
85
  variant: "default" | "high-visibility" | "inverse";
86
86
  size: "small" | "medium";
package/package.json CHANGED
@@ -1,7 +1,13 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-link",
3
3
  "description": "PIE Design System Link built using Web Components",
4
- "version": "1.0.0",
4
+ "version": "1.1.0",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/justeattakeaway/pie",
8
+ "directory": "packages/components/pie-link"
9
+ },
10
+ "homepage": "https://pie.design/components/link/code/",
5
11
  "type": "module",
6
12
  "main": "dist/index.js",
7
13
  "module": "dist/index.js",
@@ -24,9 +30,6 @@
24
30
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
25
31
  "lint:style:fix": "yarn lint:style --fix",
26
32
  "watch": "run -T vite build --watch",
27
- "test": "echo \"Error: no test specified\" && exit 0",
28
- "test:ci": "yarn test",
29
- "test:browsers-setup": "npx playwright-lit-setup",
30
33
  "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
31
34
  "test:browsers:ci": "yarn test:browsers",
32
35
  "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_LINK} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
@@ -36,14 +39,15 @@
36
39
  "license": "Apache-2.0",
37
40
  "devDependencies": {
38
41
  "@custom-elements-manifest/analyzer": "0.9.0",
39
- "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.13.1",
41
- "@justeattakeaway/pie-icons-webc": "1.1.0",
42
- "@justeattakeaway/pie-wrapper-react": "0.14.2",
42
+ "@justeattakeaway/pie-components-config": "0.19.0",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-icons-webc": "1.6.1",
45
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
46
+ "@justeattakeaway/pie-wrapper-react": "0.14.3",
43
47
  "cem-plugin-module-file-extensions": "0.0.5"
44
48
  },
45
49
  "dependencies": {
46
- "@justeattakeaway/pie-webc-core": "0.24.2"
50
+ "@justeattakeaway/pie-webc-core": "0.25.0"
47
51
  },
48
52
  "volta": {
49
53
  "extends": "../../../package.json"
package/src/index.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {
2
- html, LitElement, unsafeCSS, nothing,
2
+ html, unsafeCSS, nothing,
3
3
  } from 'lit';
4
+ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
5
  import { property } from 'lit/decorators.js';
5
6
  import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
6
7
  import { ifDefined } from 'lit/directives/if-defined.js';
@@ -28,7 +29,7 @@ const componentSelector = 'pie-link';
28
29
  * @slot - Default slot
29
30
  */
30
31
 
31
- export class PieLink extends LitElement implements LinkProps {
32
+ export class PieLink extends PieElement implements LinkProps {
32
33
  @property({ type: String })
33
34
  @validPropertyValues(componentSelector, tags, defaultProps.tag)
34
35
  public tag = defaultProps.tag;
@@ -97,7 +98,7 @@ export class PieLink extends LitElement implements LinkProps {
97
98
  private renderButton (classes: ClassInfo) {
98
99
  return html`
99
100
  <button
100
- data-test-id="pie-link"
101
+ data-test-id="pie-link-button"
101
102
  class="${classMap(classes)}"
102
103
  type=${this.type}
103
104
  aria-label=${ifDefined(this.aria?.label)}>
@@ -113,7 +114,7 @@ export class PieLink extends LitElement implements LinkProps {
113
114
  private renderAnchor (classes: ClassInfo) {
114
115
  return html`
115
116
  <a
116
- data-test-id="pie-link"
117
+ data-test-id="pie-link-anchor"
117
118
  class="${classMap(classes)}"
118
119
  href=${ifDefined(this.href)}
119
120
  target=${ifDefined(this.target)}