@justeattakeaway/pie-link 0.18.0 → 0.18.1

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 (3) hide show
  1. package/dist/index.js +72 -73
  2. package/dist/react.js +11 -16
  3. package/package.json +4 -4
package/dist/index.js CHANGED
@@ -1,10 +1,9 @@
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";
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
3
  import { classMap as u } from "lit/directives/class-map.js";
4
4
  import { ifDefined as d } from "lit/directives/if-defined.js";
5
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
+ 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 = {
8
7
  tag: "a",
9
8
  variant: "default",
10
9
  size: "medium",
@@ -15,15 +14,14 @@ const b = `*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var
15
14
  iconPlacement: "leading",
16
15
  type: "submit"
17
16
  };
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;
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;
22
21
  };
23
- const s = "pie-link";
24
- class e extends g {
22
+ const r = "pie-link", k = class k extends y {
25
23
  constructor() {
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;
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;
27
25
  }
28
26
  /**
29
27
  * Renders the link content.
@@ -31,12 +29,12 @@ class e extends g {
31
29
  * @private
32
30
  */
33
31
  renderContent() {
34
- const { iconPlacement: n, isStandalone: l } = this;
32
+ const { iconPlacement: o, isStandalone: l } = this;
35
33
  return c`
36
34
  <span class="c-link-content">
37
- ${l && n === "leading" ? c`<slot name="icon"></slot>` : v}
35
+ ${l && o === "leading" ? c`<slot name="icon"></slot>` : v}
38
36
  <slot></slot>
39
- ${l && n === "trailing" ? c`<slot name="icon"></slot>` : v}
37
+ ${l && o === "trailing" ? c`<slot name="icon"></slot>` : v}
40
38
  </span>`;
41
39
  }
42
40
  /**
@@ -44,12 +42,12 @@ class e extends g {
44
42
  *
45
43
  * @private
46
44
  */
47
- renderButton(n) {
45
+ renderButton(o) {
48
46
  var l;
49
47
  return c`
50
48
  <button
51
49
  data-test-id="pie-link"
52
- class="${u(n)}"
50
+ class="${u(o)}"
53
51
  type=${this.type}
54
52
  aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
55
53
  ${this.renderContent()}
@@ -60,12 +58,12 @@ class e extends g {
60
58
  *
61
59
  * @private
62
60
  */
63
- renderAnchor(n) {
61
+ renderAnchor(o) {
64
62
  var l;
65
63
  return c`
66
64
  <a
67
65
  data-test-id="pie-link"
68
- class="${u(n)}"
66
+ class="${u(o)}"
69
67
  href=${d(this.href)}
70
68
  target=${d(this.target)}
71
69
  rel=${d(this.rel)}
@@ -74,7 +72,7 @@ class e extends g {
74
72
  </a>`;
75
73
  }
76
74
  render() {
77
- const n = {
75
+ const o = {
78
76
  "c-link": !0,
79
77
  [`c-link--${this.variant}`]: !0,
80
78
  [`c-link--${this.size}`]: !0,
@@ -83,63 +81,64 @@ class e extends g {
83
81
  "c-link--standalone": this.isStandalone,
84
82
  "c-link--hasVisited": this.hasVisited
85
83
  };
86
- return this.tag === "button" ? this.renderButton(n) : this.renderAnchor(n);
84
+ return this.tag === "button" ? this.renderButton(o) : this.renderAnchor(o);
87
85
  }
88
- }
89
- e.styles = y(b);
90
- o([
91
- i(),
92
- a(s, P, t.tag)
93
- ], e.prototype, "tag", 2);
94
- o([
95
- i({ type: String }),
96
- a(s, x, t.variant)
97
- ], e.prototype, "variant", 2);
98
- o([
99
- i({ type: String }),
100
- a(s, z, t.size)
101
- ], e.prototype, "size", 2);
102
- o([
103
- i({ type: String }),
104
- a(s, w, t.underline)
105
- ], e.prototype, "underline", 2);
106
- o([
107
- i({ type: String }),
108
- a(s, S, t.iconPlacement)
109
- ], e.prototype, "iconPlacement", 2);
110
- o([
111
- i({ type: String, reflect: !0 })
112
- ], e.prototype, "href", 2);
113
- o([
114
- i({ type: String, reflect: !0 })
115
- ], e.prototype, "target", 2);
116
- o([
117
- i({ type: String, reflect: !0 })
118
- ], e.prototype, "rel", 2);
119
- o([
120
- i({ type: Boolean })
121
- ], e.prototype, "isBold", 2);
122
- o([
123
- i({ type: Boolean })
124
- ], e.prototype, "isStandalone", 2);
125
- o([
126
- i({ type: Boolean })
127
- ], e.prototype, "hasVisited", 2);
128
- o([
129
- i({ type: String }),
130
- a(s, $, t.type)
131
- ], e.prototype, "type", 2);
132
- o([
133
- i({ type: Object })
134
- ], e.prototype, "aria", 2);
135
- m(s, e);
86
+ };
87
+ k.styles = g(b);
88
+ let t = k;
89
+ i([
90
+ n(),
91
+ a(r, $, e.tag)
92
+ ], t.prototype, "tag");
93
+ i([
94
+ n({ type: String }),
95
+ a(r, x, e.variant)
96
+ ], t.prototype, "variant");
97
+ i([
98
+ n({ type: String }),
99
+ a(r, z, e.size)
100
+ ], t.prototype, "size");
101
+ i([
102
+ n({ type: String }),
103
+ a(r, B, e.underline)
104
+ ], t.prototype, "underline");
105
+ i([
106
+ n({ type: String }),
107
+ a(r, S, e.iconPlacement)
108
+ ], t.prototype, "iconPlacement");
109
+ i([
110
+ n({ type: String, reflect: !0 })
111
+ ], t.prototype, "href");
112
+ i([
113
+ n({ type: String, reflect: !0 })
114
+ ], t.prototype, "target");
115
+ i([
116
+ n({ type: String, reflect: !0 })
117
+ ], t.prototype, "rel");
118
+ i([
119
+ n({ type: Boolean })
120
+ ], t.prototype, "isBold");
121
+ i([
122
+ n({ type: Boolean })
123
+ ], t.prototype, "isStandalone");
124
+ i([
125
+ n({ type: Boolean })
126
+ ], t.prototype, "hasVisited");
127
+ i([
128
+ n({ type: String }),
129
+ a(r, w, e.type)
130
+ ], t.prototype, "type");
131
+ i([
132
+ n({ type: Object })
133
+ ], t.prototype, "aria");
134
+ m(r, t);
136
135
  export {
137
- e as PieLink,
138
- $ as buttonTypes,
139
- t as defaultProps,
136
+ t as PieLink,
137
+ w as buttonTypes,
138
+ e as defaultProps,
140
139
  S as iconPlacements,
141
140
  z as sizes,
142
- P as tags,
143
- w as underlineTypes,
141
+ $ as tags,
142
+ B as underlineTypes,
144
143
  x as variants
145
144
  };
package/dist/react.js CHANGED
@@ -1,26 +1,21 @@
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 f, defaultProps as L, iconPlacements as d, sizes as u, tags as y, underlineTypes as g, variants as v } from "./index.js";
5
- import "lit";
6
- import "lit/decorators.js";
7
- import "lit/directives/class-map.js";
8
- import "lit/directives/if-defined.js";
9
- import "@justeattakeaway/pie-webc-core";
10
- const o = t({
4
+ import { buttonTypes as p, defaultProps as c, iconPlacements as l, sizes as P, tags as k, underlineTypes as f, variants as L } from "./index.js";
5
+ const n = t({
11
6
  displayName: "PieLink",
12
7
  elementClass: i,
13
8
  react: e,
14
9
  tagName: "pie-link",
15
10
  events: {}
16
- }), l = o;
11
+ }), s = n;
17
12
  export {
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
13
+ s as PieLink,
14
+ p as buttonTypes,
15
+ c as defaultProps,
16
+ l as iconPlacements,
17
+ P as sizes,
18
+ k as tags,
19
+ f as underlineTypes,
20
+ L as variants
26
21
  };
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.18.0",
4
+ "version": "0.18.1",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -37,13 +37,13 @@
37
37
  "devDependencies": {
38
38
  "@custom-elements-manifest/analyzer": "0.9.0",
39
39
  "@justeattakeaway/pie-components-config": "0.18.0",
40
- "@justeattakeaway/pie-css": "0.12.1",
41
- "@justeattakeaway/pie-icons-webc": "0.25.1",
40
+ "@justeattakeaway/pie-css": "0.13.0",
41
+ "@justeattakeaway/pie-icons-webc": "0.25.2",
42
42
  "@justeattakeaway/pie-wrapper-react": "0.14.1",
43
43
  "cem-plugin-module-file-extensions": "0.0.5"
44
44
  },
45
45
  "dependencies": {
46
- "@justeattakeaway/pie-webc-core": "0.24.0"
46
+ "@justeattakeaway/pie-webc-core": "0.24.1"
47
47
  },
48
48
  "volta": {
49
49
  "extends": "../../../package.json"