@justeattakeaway/pie-link 1.2.14 → 1.3.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 (8) hide show
  1. package/README.md +23 -1
  2. package/custom-elements.json +8 -0
  3. package/dist/index.d.ts +8 -1
  4. package/dist/index.js +63 -59
  5. package/dist/react.d.ts +8 -1
  6. package/package.json +1 -1
  7. package/src/defs.ts +8 -1
  8. package/src/index.ts +4 -0
package/README.md CHANGED
@@ -37,6 +37,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
37
37
  | `tag` | `"a"`, `"button"` | Which HTML tag to use for the link. | `"a"` |
38
38
  | `href` | — | The `href` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
39
39
  | `target` | — | The `target` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
40
+ | `download` | `string` | Sets the download attribute to trigger file downloads. Pass an empty string `""` to enable download with the original filename, or provide a custom filename. Only available when `tag` is `a`. **Use same origin URLs** and point to the file using the `href` property. | `undefined` |
40
41
  | `rel` | — | The `rel` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
41
42
  | `type` | `"button"`, `"reset"`, `"submit"` | The `type` attribute to apply when `tag` is set to `"button"`. | `"submit"` |
42
43
  | `underline` | `"default"`, `"reversed"` | The underline behaviour of the link. The default behaviour has the link text underlined, with the underline disappearing on hover. `"reversed"` will only take effect if `isStandalone` is set to `true`. | `"default"` |
@@ -56,7 +57,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
56
57
  ### CSS Variables
57
58
 
58
59
  | Name | Description |
59
- |--------------------------|---------------------------------------------|
60
+ |--------------------------|---------------------------------------------|
60
61
  | `--link-font-weight` | Controls the font weight of the link text. |
61
62
  | `--link-text-color` | Controls the color of the link text. |
62
63
  | `--link-text-decoration` | Controls the text decoration of the link. |
@@ -109,6 +110,27 @@ import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/Icon
109
110
  </PieLink>
110
111
  ```
111
112
 
113
+ ## Downloading files
114
+
115
+ ### Basic download (using original filename)
116
+ ```html
117
+ <pie-link
118
+ tag="a"
119
+ href="/path/to/file.pdf"
120
+ download="">
121
+ Download PDF
122
+ </pie-link>
123
+ ```
124
+
125
+ ### Download with custom filename
126
+ ```html
127
+ <pie-link
128
+ tag="a"
129
+ href="/path/to/file.pdf"
130
+ download="my-custom-name.pdf">
131
+ Download PDF
132
+ </pie-link>
133
+ ```
112
134
 
113
135
  ## Questions and Support
114
136
 
package/custom-elements.json CHANGED
@@ -196,6 +196,14 @@
196
196
  },
197
197
  "privacy": "public"
198
198
  },
199
+ {
200
+ "kind": "field",
201
+ "name": "download",
202
+ "type": {
203
+ "text": "LinkProps['download']"
204
+ },
205
+ "privacy": "public"
206
+ },
199
207
  {
200
208
  "kind": "field",
201
209
  "name": "isBold",
package/dist/index.d.ts CHANGED
@@ -9,7 +9,7 @@ declare type AriaProps = {
9
9
 
10
10
  export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
11
11
 
12
- export declare type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel'>>;
12
+ export declare type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel' | 'download'>>;
13
13
 
14
14
  export declare const defaultProps: DefaultProps;
15
15
 
@@ -49,6 +49,12 @@ export declare interface LinkProps {
49
49
  * What the relationship of the linked URL is
50
50
  */
51
51
  rel?: string;
52
+ /**
53
+ * Sets the download attribute to trigger file downloads. When an empty string, sets the download attribute without a value.
54
+ * When a non-empty string, sets the download attribute with the specified filename. Only available when `tag` is `a`.
55
+ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)
56
+ */
57
+ download?: string;
52
58
  /**
53
59
  * When true, the link text will be bold.
54
60
  */
@@ -86,6 +92,7 @@ export declare class PieLink extends PieElement implements LinkProps {
86
92
  href: LinkProps['href'];
87
93
  target: LinkProps['target'];
88
94
  rel: LinkProps['rel'];
95
+ download: LinkProps['download'];
89
96
  isBold: boolean;
90
97
  isStandalone: boolean;
91
98
  hasVisited: boolean;
package/dist/index.js CHANGED
@@ -1,16 +1,16 @@
1
- import { LitElement as b, unsafeCSS as m, nothing as y, html as c } from "lit";
2
- import { property as o } from "lit/decorators.js";
1
+ import { LitElement as b, unsafeCSS as m, nothing as y, html as d } from "lit";
2
+ import { property as i } from "lit/decorators.js";
3
3
  import { classMap as g } from "lit/directives/class-map.js";
4
- import { ifDefined as d } from "lit/directives/if-defined.js";
5
- import { validPropertyValues as s, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
4
+ import { ifDefined as s } from "lit/directives/if-defined.js";
5
+ import { validPropertyValues as a, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
6
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.14";
11
+ h.v = "1.3.0";
12
12
  let u = h;
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 = {
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"], w = ["small", "medium"], $ = ["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",
@@ -21,12 +21,12 @@ const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--li
21
21
  iconPlacement: "leading",
22
22
  type: "submit"
23
23
  };
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, f = l.length - 1, v; f >= 0; f--)
26
- (v = l[f]) && (r = (p ? v(n, k, r) : v(r)) || r);
27
- return p && r && C(n, k, r), r;
24
+ var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (l, o, k, p) => {
25
+ for (var r = p > 1 ? void 0 : p ? O(o, k) : o, f = l.length - 1, v; f >= 0; f--)
26
+ (v = l[f]) && (r = (p ? v(o, k, r) : v(r)) || r);
27
+ return p && r && C(o, k, r), r;
28
28
  };
29
- const a = "pie-link";
29
+ const c = "pie-link";
30
30
  let t = class extends u {
31
31
  constructor() {
32
32
  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,12 +37,12 @@ let t = class extends u {
37
37
  * @private
38
38
  */
39
39
  renderContent() {
40
- const { iconPlacement: l, isStandalone: n } = this;
41
- return c`
40
+ const { iconPlacement: l, isStandalone: o } = this;
41
+ return d`
42
42
  <span class="c-link-content">
43
- ${n && l === "leading" ? c`<slot name="icon"></slot>` : y}
43
+ ${o && l === "leading" ? d`<slot name="icon"></slot>` : y}
44
44
  <slot></slot>
45
- ${n && l === "trailing" ? c`<slot name="icon"></slot>` : y}
45
+ ${o && l === "trailing" ? d`<slot name="icon"></slot>` : y}
46
46
  </span>`;
47
47
  }
48
48
  /**
@@ -51,13 +51,13 @@ let t = class extends u {
51
51
  * @private
52
52
  */
53
53
  renderButton(l) {
54
- var n;
55
- return c`
54
+ var o;
55
+ return d`
56
56
  <button
57
57
  data-test-id="pie-link-button"
58
58
  class="${g(l)}"
59
59
  type=${this.type}
60
- aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
60
+ aria-label=${s((o = this.aria) == null ? void 0 : o.label)}
61
61
  part="base">
62
62
  ${this.renderContent()}
63
63
  </button>`;
@@ -68,15 +68,16 @@ let t = class extends u {
68
68
  * @private
69
69
  */
70
70
  renderAnchor(l) {
71
- var n;
72
- return c`
71
+ var o;
72
+ return d`
73
73
  <a
74
74
  data-test-id="pie-link-anchor"
75
75
  class="${g(l)}"
76
- href=${d(this.href)}
77
- target=${d(this.target)}
78
- rel=${d(this.rel)}
79
- aria-label=${d((n = this.aria) == null ? void 0 : n.label)}
76
+ href=${s(this.href)}
77
+ target=${s(this.target)}
78
+ rel=${s(this.rel)}
79
+ download="${s(this.download)}"
80
+ aria-label=${s((o = this.aria) == null ? void 0 : o.label)}
80
81
  part="base">
81
82
  ${this.renderContent()}
82
83
  </a>`;
@@ -95,60 +96,63 @@ let t = class extends u {
95
96
  }
96
97
  };
97
98
  t.styles = m(z);
98
- i([
99
- o({ type: String }),
100
- s(a, P, e.tag)
99
+ n([
100
+ i({ type: String }),
101
+ a(c, P, e.tag)
101
102
  ], t.prototype, "tag", 2);
102
- i([
103
- o({ type: String }),
104
- s(a, S, e.variant)
103
+ n([
104
+ i({ type: String }),
105
+ a(c, S, e.variant)
105
106
  ], t.prototype, "variant", 2);
106
- i([
107
- o({ type: String }),
108
- s(a, $, e.size)
107
+ n([
108
+ i({ type: String }),
109
+ a(c, w, e.size)
109
110
  ], t.prototype, "size", 2);
110
- i([
111
- o({ type: String }),
112
- s(a, V, e.underline)
111
+ n([
112
+ i({ type: String }),
113
+ a(c, V, e.underline)
113
114
  ], t.prototype, "underline", 2);
114
- i([
115
- o({ type: String }),
116
- s(a, w, e.iconPlacement)
115
+ n([
116
+ i({ type: String }),
117
+ a(c, $, e.iconPlacement)
117
118
  ], t.prototype, "iconPlacement", 2);
118
- i([
119
- o({ type: String, reflect: !0 })
119
+ n([
120
+ i({ type: String, reflect: !0 })
120
121
  ], t.prototype, "href", 2);
121
- i([
122
- o({ type: String, reflect: !0 })
122
+ n([
123
+ i({ type: String, reflect: !0 })
123
124
  ], t.prototype, "target", 2);
124
- i([
125
- o({ type: String, reflect: !0 })
125
+ n([
126
+ i({ type: String, reflect: !0 })
126
127
  ], t.prototype, "rel", 2);
127
- i([
128
- o({ type: Boolean })
128
+ n([
129
+ i({ type: String })
130
+ ], t.prototype, "download", 2);
131
+ n([
132
+ i({ type: Boolean })
129
133
  ], t.prototype, "isBold", 2);
130
- i([
131
- o({ type: Boolean, reflect: !0 })
134
+ n([
135
+ i({ type: Boolean, reflect: !0 })
132
136
  ], t.prototype, "isStandalone", 2);
133
- i([
134
- o({ type: Boolean })
137
+ n([
138
+ i({ type: Boolean })
135
139
  ], t.prototype, "hasVisited", 2);
136
- i([
137
- o({ type: String }),
138
- s(a, B, e.type)
140
+ n([
141
+ i({ type: String }),
142
+ a(c, B, e.type)
139
143
  ], t.prototype, "type", 2);
140
- i([
141
- o({ type: Object })
144
+ n([
145
+ i({ type: Object })
142
146
  ], t.prototype, "aria", 2);
143
- t = i([
147
+ t = n([
144
148
  x("pie-link")
145
149
  ], t);
146
150
  export {
147
151
  t as PieLink,
148
152
  B as buttonTypes,
149
153
  e as defaultProps,
150
- w as iconPlacements,
151
- $ as sizes,
154
+ $ as iconPlacements,
155
+ w as sizes,
152
156
  P as tags,
153
157
  V as underlineTypes,
154
158
  S as variants
package/dist/react.d.ts CHANGED
@@ -10,7 +10,7 @@ declare type AriaProps = {
10
10
 
11
11
  export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
12
12
 
13
- export declare type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel'>>;
13
+ export declare type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel' | 'download'>>;
14
14
 
15
15
  export declare const defaultProps: DefaultProps;
16
16
 
@@ -50,6 +50,12 @@ export declare interface LinkProps {
50
50
  * What the relationship of the linked URL is
51
51
  */
52
52
  rel?: string;
53
+ /**
54
+ * Sets the download attribute to trigger file downloads. When an empty string, sets the download attribute without a value.
55
+ * When a non-empty string, sets the download attribute with the specified filename. Only available when `tag` is `a`.
56
+ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)
57
+ */
58
+ download?: string;
53
59
  /**
54
60
  * When true, the link text will be bold.
55
61
  */
@@ -89,6 +95,7 @@ declare class PieLink_2 extends PieElement implements LinkProps {
89
95
  href: LinkProps['href'];
90
96
  target: LinkProps['target'];
91
97
  rel: LinkProps['rel'];
98
+ download: LinkProps['download'];
92
99
  isBold: boolean;
93
100
  isStandalone: boolean;
94
101
  hasVisited: 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.14",
4
+ "version": "1.3.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
package/src/defs.ts CHANGED
@@ -45,6 +45,13 @@ export interface LinkProps {
45
45
  * What the relationship of the linked URL is
46
46
  */
47
47
  rel?: string;
48
+
49
+ /**
50
+ * Sets the download attribute to trigger file downloads. When an empty string, sets the download attribute without a value.
51
+ * When a non-empty string, sets the download attribute with the specified filename. Only available when `tag` is `a`.
52
+ * [MDN reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)
53
+ */
54
+ download?: string;
48
55
  /**
49
56
  * When true, the link text will be bold.
50
57
  */
@@ -68,7 +75,7 @@ export interface LinkProps {
68
75
  type?: typeof buttonTypes[number];
69
76
  }
70
77
 
71
- export type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel'>>;
78
+ export type DefaultProps = ComponentDefaultProps<LinkProps, keyof Omit<LinkProps, 'aria' | 'href' | 'target' | 'rel' | 'download'>>;
72
79
 
73
80
  export const defaultProps: DefaultProps = {
74
81
  tag: 'a',
package/src/index.ts CHANGED
@@ -60,6 +60,9 @@ export class PieLink extends PieElement implements LinkProps {
60
60
  @property({ type: String, reflect: true })
61
61
  public rel: LinkProps['rel'];
62
62
 
63
+ @property({ type: String })
64
+ public download: LinkProps['download'];
65
+
63
66
  @property({ type: Boolean })
64
67
  public isBold = defaultProps.isBold;
65
68
 
@@ -121,6 +124,7 @@ export class PieLink extends PieElement implements LinkProps {
121
124
  href=${ifDefined(this.href)}
122
125
  target=${ifDefined(this.target)}
123
126
  rel=${ifDefined(this.rel)}
127
+ download="${ifDefined(this.download)}"
124
128
  aria-label=${ifDefined(this.aria?.label)}
125
129
  part="base">
126
130
  ${this.renderContent()}