@justeattakeaway/pie-link 1.0.1 → 1.1.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 (7) hide show
  1. package/custom-elements.json +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +86 -73
  4. package/dist/react.d.ts +2 -2
  5. package/package.json +6 -5
  6. package/src/index.ts +3 -2
  7. package/declaration.d.ts +0 -9
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 u, unsafeCSS as g } from "lit";
2
- import { property as n } from "lit/decorators.js";
3
- import { classMap as v } 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, nothing as v, html as h, unsafeCSS as b } from "lit";
2
+ import { property as o } from "lit/decorators.js";
3
+ import { classMap as u } from "lit/directives/class-map.js";
4
+ import { ifDefined as k } 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 r = void 0, s = c.length - 1, p; s >= 0; s--)
8
+ (p = c[s]) && (r = p(e, i, r) || r);
9
+ return r && z(e, i, r), r;
10
+ };
11
+ class y extends m {
12
+ constructor() {
13
+ super(...arguments), this.v = "1.1.1";
14
+ }
15
+ }
16
+ S([
17
+ o({ 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 = (k, o, l, V) => {
18
- for (var s = void 0, p = k.length - 1, f; p >= 0; p--)
19
- (f = k[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 r = void 0, s = c.length - 1, p; s >= 0; s--)
32
+ (p = c[s]) && (r = p(e, i, r) || r);
33
+ return r && j(e, i, r), r;
21
34
  };
22
- const r = "pie-link", h = class h extends y {
35
+ const a = "pie-link", f = class f 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", h = class h 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>` : u}
48
+ ${i && e === "leading" ? h`<slot name="icon"></slot>` : v}
36
49
  <slot></slot>
37
- ${l && o === "trailing" ? c`<slot name="icon"></slot>` : u}
50
+ ${i && e === "trailing" ? h`<slot name="icon"></slot>` : v}
38
51
  </span>`;
39
52
  }
40
53
  /**
@@ -42,14 +55,14 @@ const r = "pie-link", h = class h 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
62
  data-test-id="pie-link-button"
50
- class="${v(o)}"
63
+ class="${u(e)}"
51
64
  type=${this.type}
52
- aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
65
+ aria-label=${k((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", h = class h 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
78
  data-test-id="pie-link-anchor"
66
- class="${v(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)}>
79
+ class="${u(e)}"
80
+ href=${k(this.href)}
81
+ target=${k(this.target)}
82
+ rel=${k(this.rel)}
83
+ aria-label=${k((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", h = class h 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
- h.styles = g(b);
88
- let t = h;
89
- i([
90
- n({ type: String }),
91
- a(r, $, e.tag)
100
+ f.styles = b($);
101
+ let t = f;
102
+ l([
103
+ o({ 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
+ o({ 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
+ o({ 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
+ o({ 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
+ o({ type: String }),
120
+ d(a, B, n.iconPlacement)
108
121
  ], t.prototype, "iconPlacement");
109
- i([
110
- n({ type: String, reflect: !0 })
122
+ l([
123
+ o({ type: String, reflect: !0 })
111
124
  ], t.prototype, "href");
112
- i([
113
- n({ type: String, reflect: !0 })
125
+ l([
126
+ o({ type: String, reflect: !0 })
114
127
  ], t.prototype, "target");
115
- i([
116
- n({ type: String, reflect: !0 })
128
+ l([
129
+ o({ type: String, reflect: !0 })
117
130
  ], t.prototype, "rel");
118
- i([
119
- n({ type: Boolean })
131
+ l([
132
+ o({ type: Boolean })
120
133
  ], t.prototype, "isBold");
121
- i([
122
- n({ type: Boolean })
134
+ l([
135
+ o({ type: Boolean })
123
136
  ], t.prototype, "isStandalone");
124
- i([
125
- n({ type: Boolean })
137
+ l([
138
+ o({ type: Boolean })
126
139
  ], t.prototype, "hasVisited");
127
- i([
128
- n({ type: String }),
129
- a(r, w, e.type)
140
+ l([
141
+ o({ type: String }),
142
+ d(a, C, n.type)
130
143
  ], t.prototype, "type");
131
- i([
132
- n({ type: Object })
144
+ l([
145
+ o({ 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,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-link",
3
3
  "description": "PIE Design System Link built using Web Components",
4
- "version": "1.0.1",
4
+ "version": "1.1.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,14 +39,15 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-components-config": "0.18.0",
43
- "@justeattakeaway/pie-css": "0.15.1",
44
- "@justeattakeaway/pie-icons-webc": "1.5.0",
42
+ "@justeattakeaway/pie-components-config": "0.19.1",
43
+ "@justeattakeaway/pie-css": "0.16.0",
44
+ "@justeattakeaway/pie-icons-webc": "1.6.2",
45
+ "@justeattakeaway/pie-monorepo-utils": "0.5.0",
45
46
  "@justeattakeaway/pie-wrapper-react": "0.14.3",
46
47
  "cem-plugin-module-file-extensions": "0.0.5"
47
48
  },
48
49
  "dependencies": {
49
- "@justeattakeaway/pie-webc-core": "0.24.2"
50
+ "@justeattakeaway/pie-webc-core": "0.25.1"
50
51
  },
51
52
  "volta": {
52
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;
package/declaration.d.ts DELETED
@@ -1,9 +0,0 @@
1
- declare module '*.scss' {
2
- const content: Record<string, string>;
3
- export default content;
4
- }
5
-
6
- declare module '*.scss?inline' {
7
- const content: Record<string, string>;
8
- export default content;
9
- }