@justeattakeaway/pie-link 1.3.40 → 1.4.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.
- package/README.md +16 -16
- package/custom-elements.json +4 -4
- package/dist/index.d.ts +5 -5
- package/dist/index.js +61 -61
- package/dist/react.d.ts +5 -5
- package/package.json +5 -5
- package/src/defs.ts +3 -3
- package/src/link.scss +18 -0
package/README.md
CHANGED
|
@@ -31,22 +31,22 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
31
31
|
## Documentation
|
|
32
32
|
|
|
33
33
|
### Properties
|
|
34
|
-
| Prop
|
|
35
|
-
|
|
36
|
-
| `size`
|
|
37
|
-
| `variant`
|
|
38
|
-
| `tag`
|
|
39
|
-
| `href`
|
|
40
|
-
| `target`
|
|
41
|
-
| `download`
|
|
42
|
-
| `rel`
|
|
43
|
-
| `type`
|
|
44
|
-
| `underline`
|
|
45
|
-
| `isBold`
|
|
46
|
-
| `isStandalone` | `true`, `false`
|
|
47
|
-
| `hasVisited`
|
|
48
|
-
| `iconPlacement
|
|
49
|
-
| `aria`
|
|
34
|
+
| Prop | Options | Description | Default |
|
|
35
|
+
|---|---|---|---|
|
|
36
|
+
| `size` | `"xsmall"`, `"small"`, `"medium"` | Sets the size of the link. | `"medium"` |
|
|
37
|
+
| `variant` | `"default"`, `"high-visibility"`, `"inverse"`, `"inverse-light"` | Sets the variant of the link. | `"default"` |
|
|
38
|
+
| `tag` | `"a"`, `"button"` | Which HTML tag to use for the link. | `"a"` |
|
|
39
|
+
| `href` | — | The `href` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
40
|
+
| `target` | — | The `target` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
41
|
+
| `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` |
|
|
42
|
+
| `rel` | — | The `rel` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
43
|
+
| `type` | `"button"`, `"reset"`, `"submit"` | The `type` attribute to apply when `tag` is set to `"button"`. | `"submit"` |
|
|
44
|
+
| `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"` |
|
|
45
|
+
| `isBold` | `true`, `false` | If true, makes the link text bold. | `false` |
|
|
46
|
+
| `isStandalone` | `true`, `false` | If true, sets the link as a block element. | `false` |
|
|
47
|
+
| `hasVisited` | `true`, `false` | If true, the link will apply the styles for the visited state. Only takes effect if `tag` is `"a"`. | `false` |
|
|
48
|
+
| `iconPlacement` | `"leading"`, `"trailing"` | Sets the position of the icon relative to the text. Leading comes before the text and trailing comes after, taking writing direction into account. To use this, you must pass an icon into the [icon slot](#slots). **Will have no effect if `isStandalone` is false.** | `undefined` |
|
|
49
|
+
| `aria` | `{ label?: string }` | Aria properties for the link to help with making it accessible. | `undefined` |
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
### Slots
|
package/custom-elements.json
CHANGED
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
"kind": "variable",
|
|
17
17
|
"name": "variants",
|
|
18
18
|
"type": {
|
|
19
|
-
"text": "['default', 'high-visibility', 'inverse']"
|
|
19
|
+
"text": "['default', 'high-visibility', 'inverse', 'inverse-light']"
|
|
20
20
|
},
|
|
21
|
-
"default": "['default', 'high-visibility', 'inverse']"
|
|
21
|
+
"default": "['default', 'high-visibility', 'inverse', 'inverse-light']"
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
"kind": "variable",
|
|
25
25
|
"name": "sizes",
|
|
26
26
|
"type": {
|
|
27
|
-
"text": "['small', 'medium']"
|
|
27
|
+
"text": "['xsmall', 'small', 'medium']"
|
|
28
28
|
},
|
|
29
|
-
"default": "['small', 'medium']"
|
|
29
|
+
"default": "['xsmall', 'small', 'medium']"
|
|
30
30
|
},
|
|
31
31
|
{
|
|
32
32
|
"kind": "variable",
|
package/dist/index.d.ts
CHANGED
|
@@ -25,7 +25,7 @@ export declare interface LinkProps {
|
|
|
25
25
|
*/
|
|
26
26
|
tag?: typeof tags[number];
|
|
27
27
|
/**
|
|
28
|
-
* What style variant the link should be such as default, high-visibility or inverse.
|
|
28
|
+
* What style variant the link should be such as default, high-visibility, inverse or inverse-light.
|
|
29
29
|
*/
|
|
30
30
|
variant?: typeof variants[number];
|
|
31
31
|
/**
|
|
@@ -85,8 +85,8 @@ export declare interface LinkProps {
|
|
|
85
85
|
*/
|
|
86
86
|
export declare class PieLink extends PieElement implements LinkProps {
|
|
87
87
|
tag: "a" | "button";
|
|
88
|
-
variant: "default" | "high-visibility" | "inverse";
|
|
89
|
-
size: "small" | "medium";
|
|
88
|
+
variant: "default" | "high-visibility" | "inverse" | "inverse-light";
|
|
89
|
+
size: "xsmall" | "small" | "medium";
|
|
90
90
|
underline: "default" | "reversed";
|
|
91
91
|
iconPlacement: "leading" | "trailing";
|
|
92
92
|
href: LinkProps['href'];
|
|
@@ -120,12 +120,12 @@ export declare class PieLink extends PieElement implements LinkProps {
|
|
|
120
120
|
static styles: CSSResult;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
export declare const sizes: readonly ["small", "medium"];
|
|
123
|
+
export declare const sizes: readonly ["xsmall", "small", "medium"];
|
|
124
124
|
|
|
125
125
|
export declare const tags: readonly ["a", "button"];
|
|
126
126
|
|
|
127
127
|
export declare const underlineTypes: readonly ["default", "reversed"];
|
|
128
128
|
|
|
129
|
-
export declare const variants: readonly ["default", "high-visibility", "inverse"];
|
|
129
|
+
export declare const variants: readonly ["default", "high-visibility", "inverse", "inverse-light"];
|
|
130
130
|
|
|
131
131
|
export { }
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { LitElement as b, unsafeCSS as
|
|
2
|
-
import { property as
|
|
1
|
+
import { LitElement as b, unsafeCSS as x, nothing as y, html as d } from "lit";
|
|
2
|
+
import { property as e } from "lit/decorators.js";
|
|
3
3
|
import { classMap as u } from "lit/directives/class-map.js";
|
|
4
|
-
import { ifDefined as
|
|
5
|
-
import { validPropertyValues as
|
|
6
|
-
const
|
|
4
|
+
import { ifDefined as a } from "lit/directives/if-defined.js";
|
|
5
|
+
import { validPropertyValues as s, safeCustomElement as m } from "@justeattakeaway/pie-webc-core";
|
|
6
|
+
const p = class p extends b {
|
|
7
7
|
willUpdate() {
|
|
8
|
-
this.getAttribute("v") || this.setAttribute("v",
|
|
8
|
+
this.getAttribute("v") || this.setAttribute("v", p.v);
|
|
9
9
|
}
|
|
10
10
|
};
|
|
11
|
-
|
|
12
|
-
let
|
|
13
|
-
const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-body-l-link-weight);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-body-l-link-text-decoration)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-body-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-l-link-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 ::slotted(.c-pieIcon){pointer-events: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-body-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-s-link-weight);--link-text-decoration: var(--dt-font-body-s-link-text-decoration);--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-body-l-link-text-decoration)}.c-link.c-link--bold{--link-font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-l-link-weight)}.c-link.c-link--bold.c-link--small{--link-font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-s-link-weight)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.has-visited:visited{color:var(--dt-color-content-link-visited)}.c-link.has-visited: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)}", w = ["default", "high-visibility", "inverse"], S = ["small", "medium"], $ = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], C = ["default", "reversed"],
|
|
11
|
+
p.v = "1.4.0";
|
|
12
|
+
let g = p;
|
|
13
|
+
const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--link-font-weight: var(--dt-font-body-l-link-weight);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-body-l-link-text-decoration)}:host([isstandalone]){display:block}.c-link{--link-font-family: var(--dt-font-interactive-l-family);--link-font-size: calc(var(--dt-font-body-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-l-link-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 ::slotted(.c-pieIcon){pointer-events: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--inverse-light{--link-text-color: var(--dt-color-content-link-light)}.c-link.c-link--xsmall{--link-font-size: calc(var(--dt-font-caption-link-size) * 1px);--link-line-height: calc(var(--dt-font-caption-link-line-height) * 1px);--link-font-weight: var(--dt-font-caption-link-weight);--link-text-decoration: var(--dt-font-caption-link-text-decoration);--link-icon-offset-top: 0}.c-link.c-link--small{--link-font-size: calc(var(--dt-font-body-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-s-link-weight);--link-text-decoration: var(--dt-font-body-s-link-text-decoration);--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-body-l-link-text-decoration)}.c-link.c-link--bold{--link-font-size: calc(var(--dt-font-body-strong-l-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-l-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-l-link-weight)}.c-link.c-link--bold.c-link--small{--link-font-size: calc(var(--dt-font-body-strong-s-link-size) * 1px);--link-line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);--link-font-weight: var(--dt-font-body-strong-s-link-weight)}.c-link.c-link--bold.c-link--xsmall{--link-font-size: calc(var(--dt-font-caption-strong-link-size) * 1px);--link-line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);--link-font-weight: var(--dt-font-caption-strong-link-weight)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.has-visited:visited{color:var(--dt-color-content-link-visited)}.c-link.has-visited: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)}", w = ["default", "high-visibility", "inverse", "inverse-light"], S = ["xsmall", "small", "medium"], $ = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], C = ["default", "reversed"], n = {
|
|
14
14
|
tag: "a",
|
|
15
15
|
variant: "default",
|
|
16
16
|
size: "medium",
|
|
@@ -21,15 +21,15 @@ const z = "*,*:after,*:before{box-sizing:inherit}:host{display:inline-block;--li
|
|
|
21
21
|
iconPlacement: "leading",
|
|
22
22
|
type: "submit"
|
|
23
23
|
};
|
|
24
|
-
var V = Object.defineProperty, O = Object.getOwnPropertyDescriptor,
|
|
25
|
-
for (var r =
|
|
26
|
-
(v = l[f]) && (r = (
|
|
27
|
-
return
|
|
24
|
+
var V = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (l, o, h, k) => {
|
|
25
|
+
for (var r = k > 1 ? void 0 : k ? O(o, h) : o, f = l.length - 1, v; f >= 0; f--)
|
|
26
|
+
(v = l[f]) && (r = (k ? v(o, h, r) : v(r)) || r);
|
|
27
|
+
return k && r && V(o, h, r), r;
|
|
28
28
|
};
|
|
29
29
|
const c = "pie-link";
|
|
30
|
-
let t = class extends
|
|
30
|
+
let t = class extends g {
|
|
31
31
|
constructor() {
|
|
32
|
-
super(...arguments), this.tag =
|
|
32
|
+
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;
|
|
33
33
|
}
|
|
34
34
|
/**
|
|
35
35
|
* Renders the link content.
|
|
@@ -40,9 +40,9 @@ let t = class extends y {
|
|
|
40
40
|
const { iconPlacement: l, isStandalone: o } = this;
|
|
41
41
|
return d`
|
|
42
42
|
<span class="c-link-content">
|
|
43
|
-
${o && l === "leading" ? d`<slot name="icon"></slot>` :
|
|
43
|
+
${o && l === "leading" ? d`<slot name="icon"></slot>` : y}
|
|
44
44
|
<slot></slot>
|
|
45
|
-
${o && l === "trailing" ? d`<slot name="icon"></slot>` :
|
|
45
|
+
${o && l === "trailing" ? d`<slot name="icon"></slot>` : y}
|
|
46
46
|
</span>`;
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
@@ -57,7 +57,7 @@ let t = class extends y {
|
|
|
57
57
|
data-test-id="pie-link-button"
|
|
58
58
|
class="${u(l)}"
|
|
59
59
|
type=${this.type}
|
|
60
|
-
aria-label=${
|
|
60
|
+
aria-label=${a((o = this.aria) == null ? void 0 : o.label)}
|
|
61
61
|
part="base">
|
|
62
62
|
${this.renderContent()}
|
|
63
63
|
</button>`;
|
|
@@ -73,11 +73,11 @@ let t = class extends y {
|
|
|
73
73
|
<a
|
|
74
74
|
data-test-id="pie-link-anchor"
|
|
75
75
|
class="${u(l)}"
|
|
76
|
-
href=${
|
|
77
|
-
target=${
|
|
78
|
-
rel=${
|
|
79
|
-
download="${
|
|
80
|
-
aria-label=${
|
|
76
|
+
href=${a(this.href)}
|
|
77
|
+
target=${a(this.target)}
|
|
78
|
+
rel=${a(this.rel)}
|
|
79
|
+
download="${a(this.download)}"
|
|
80
|
+
aria-label=${a((o = this.aria) == null ? void 0 : o.label)}
|
|
81
81
|
part="base">
|
|
82
82
|
${this.renderContent()}
|
|
83
83
|
</a>`;
|
|
@@ -95,62 +95,62 @@ let t = class extends y {
|
|
|
95
95
|
return this.tag === "button" ? this.renderButton(l) : this.renderAnchor(l);
|
|
96
96
|
}
|
|
97
97
|
};
|
|
98
|
-
t.styles =
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
98
|
+
t.styles = x(z);
|
|
99
|
+
i([
|
|
100
|
+
e({ type: String }),
|
|
101
|
+
s(c, P, n.tag)
|
|
102
102
|
], t.prototype, "tag", 2);
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
103
|
+
i([
|
|
104
|
+
e({ type: String }),
|
|
105
|
+
s(c, w, n.variant)
|
|
106
106
|
], t.prototype, "variant", 2);
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
107
|
+
i([
|
|
108
|
+
e({ type: String }),
|
|
109
|
+
s(c, S, n.size)
|
|
110
110
|
], t.prototype, "size", 2);
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
111
|
+
i([
|
|
112
|
+
e({ type: String }),
|
|
113
|
+
s(c, C, n.underline)
|
|
114
114
|
], t.prototype, "underline", 2);
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
115
|
+
i([
|
|
116
|
+
e({ type: String }),
|
|
117
|
+
s(c, $, n.iconPlacement)
|
|
118
118
|
], t.prototype, "iconPlacement", 2);
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
i([
|
|
120
|
+
e({ type: String, reflect: !0 })
|
|
121
121
|
], t.prototype, "href", 2);
|
|
122
|
-
|
|
123
|
-
|
|
122
|
+
i([
|
|
123
|
+
e({ type: String, reflect: !0 })
|
|
124
124
|
], t.prototype, "target", 2);
|
|
125
|
-
|
|
126
|
-
|
|
125
|
+
i([
|
|
126
|
+
e({ type: String, reflect: !0 })
|
|
127
127
|
], t.prototype, "rel", 2);
|
|
128
|
-
|
|
129
|
-
|
|
128
|
+
i([
|
|
129
|
+
e({ type: String })
|
|
130
130
|
], t.prototype, "download", 2);
|
|
131
|
-
|
|
132
|
-
|
|
131
|
+
i([
|
|
132
|
+
e({ type: Boolean })
|
|
133
133
|
], t.prototype, "isBold", 2);
|
|
134
|
-
|
|
135
|
-
|
|
134
|
+
i([
|
|
135
|
+
e({ type: Boolean, reflect: !0 })
|
|
136
136
|
], t.prototype, "isStandalone", 2);
|
|
137
|
-
|
|
138
|
-
|
|
137
|
+
i([
|
|
138
|
+
e({ type: Boolean })
|
|
139
139
|
], t.prototype, "hasVisited", 2);
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
140
|
+
i([
|
|
141
|
+
e({ type: String }),
|
|
142
|
+
s(c, B, n.type)
|
|
143
143
|
], t.prototype, "type", 2);
|
|
144
|
-
|
|
145
|
-
|
|
144
|
+
i([
|
|
145
|
+
e({ type: Object })
|
|
146
146
|
], t.prototype, "aria", 2);
|
|
147
|
-
t =
|
|
148
|
-
|
|
147
|
+
t = i([
|
|
148
|
+
m("pie-link")
|
|
149
149
|
], t);
|
|
150
150
|
export {
|
|
151
151
|
t as PieLink,
|
|
152
152
|
B as buttonTypes,
|
|
153
|
-
|
|
153
|
+
n as defaultProps,
|
|
154
154
|
$ as iconPlacements,
|
|
155
155
|
S as sizes,
|
|
156
156
|
P as tags,
|
package/dist/react.d.ts
CHANGED
|
@@ -26,7 +26,7 @@ export declare interface LinkProps {
|
|
|
26
26
|
*/
|
|
27
27
|
tag?: typeof tags[number];
|
|
28
28
|
/**
|
|
29
|
-
* What style variant the link should be such as default, high-visibility or inverse.
|
|
29
|
+
* What style variant the link should be such as default, high-visibility, inverse or inverse-light.
|
|
30
30
|
*/
|
|
31
31
|
variant?: typeof variants[number];
|
|
32
32
|
/**
|
|
@@ -88,8 +88,8 @@ export declare const PieLink: React_2.ForwardRefExoticComponent<React_2.PropsWit
|
|
|
88
88
|
*/
|
|
89
89
|
declare class PieLink_2 extends PieElement implements LinkProps {
|
|
90
90
|
tag: "a" | "button";
|
|
91
|
-
variant: "default" | "high-visibility" | "inverse";
|
|
92
|
-
size: "small" | "medium";
|
|
91
|
+
variant: "default" | "high-visibility" | "inverse" | "inverse-light";
|
|
92
|
+
size: "xsmall" | "small" | "medium";
|
|
93
93
|
underline: "default" | "reversed";
|
|
94
94
|
iconPlacement: "leading" | "trailing";
|
|
95
95
|
href: LinkProps['href'];
|
|
@@ -125,12 +125,12 @@ declare class PieLink_2 extends PieElement implements LinkProps {
|
|
|
125
125
|
|
|
126
126
|
declare type ReactBaseType = React_2.AnchorHTMLAttributes<HTMLAnchorElement> & React_2.ButtonHTMLAttributes<HTMLButtonElement>;
|
|
127
127
|
|
|
128
|
-
export declare const sizes: readonly ["small", "medium"];
|
|
128
|
+
export declare const sizes: readonly ["xsmall", "small", "medium"];
|
|
129
129
|
|
|
130
130
|
export declare const tags: readonly ["a", "button"];
|
|
131
131
|
|
|
132
132
|
export declare const underlineTypes: readonly ["default", "reversed"];
|
|
133
133
|
|
|
134
|
-
export declare const variants: readonly ["default", "high-visibility", "inverse"];
|
|
134
|
+
export declare const variants: readonly ["default", "high-visibility", "inverse", "inverse-light"];
|
|
135
135
|
|
|
136
136
|
export { }
|
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.
|
|
4
|
+
"version": "1.4.0",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
"license": "Apache-2.0",
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@justeattakeaway/pie-components-config": "0.21.3",
|
|
47
|
-
"@justeattakeaway/pie-css": "1.3.
|
|
48
|
-
"@justeattakeaway/pie-monorepo-utils": "0.9.
|
|
47
|
+
"@justeattakeaway/pie-css": "1.3.2",
|
|
48
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.8",
|
|
49
49
|
"@justeattakeaway/pie-wrapper-react": "0.14.5"
|
|
50
50
|
},
|
|
51
51
|
"dependencies": {
|
|
52
|
-
"@justeattakeaway/pie-icons-webc": "1.27.
|
|
53
|
-
"@justeattakeaway/pie-webc-core": "16.
|
|
52
|
+
"@justeattakeaway/pie-icons-webc": "1.27.1",
|
|
53
|
+
"@justeattakeaway/pie-webc-core": "16.1.0"
|
|
54
54
|
},
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
56
56
|
"sideEffects": [
|
package/src/defs.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
|
|
2
2
|
|
|
3
|
-
export const variants = ['default', 'high-visibility', 'inverse'] as const;
|
|
4
|
-
export const sizes = ['small', 'medium'] as const;
|
|
3
|
+
export const variants = ['default', 'high-visibility', 'inverse', 'inverse-light'] as const;
|
|
4
|
+
export const sizes = ['xsmall', 'small', 'medium'] as const;
|
|
5
5
|
export const iconPlacements = ['leading', 'trailing'] as const;
|
|
6
6
|
export const tags = ['a', 'button'] as const;
|
|
7
7
|
export const buttonTypes = ['submit', 'button', 'reset', 'menu'] as const;
|
|
@@ -21,7 +21,7 @@ export interface LinkProps {
|
|
|
21
21
|
*/
|
|
22
22
|
tag?: typeof tags[number];
|
|
23
23
|
/**
|
|
24
|
-
* What style variant the link should be such as default, high-visibility or inverse.
|
|
24
|
+
* What style variant the link should be such as default, high-visibility, inverse or inverse-light.
|
|
25
25
|
*/
|
|
26
26
|
variant?: typeof variants[number];
|
|
27
27
|
/**
|
package/src/link.scss
CHANGED
|
@@ -54,6 +54,18 @@
|
|
|
54
54
|
--link-text-color: var(--dt-color-content-link-inverse);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
+
&.c-link--inverse-light {
|
|
58
|
+
--link-text-color: var(--dt-color-content-link-light);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&.c-link--xsmall {
|
|
62
|
+
--link-font-size: #{p.font-size(--dt-font-caption-link-size)};
|
|
63
|
+
--link-line-height: calc(var(--dt-font-caption-link-line-height) * 1px);
|
|
64
|
+
--link-font-weight: var(--dt-font-caption-link-weight);
|
|
65
|
+
--link-text-decoration: var(--dt-font-caption-link-text-decoration);
|
|
66
|
+
--link-icon-offset-top: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
57
69
|
&.c-link--small {
|
|
58
70
|
--link-font-size: #{p.font-size(--dt-font-body-s-link-size)};
|
|
59
71
|
--link-line-height: calc(var(--dt-font-body-s-link-line-height) * 1px);
|
|
@@ -82,6 +94,12 @@
|
|
|
82
94
|
--link-line-height: calc(var(--dt-font-body-strong-s-link-line-height) * 1px);
|
|
83
95
|
--link-font-weight: var(--dt-font-body-strong-s-link-weight);
|
|
84
96
|
}
|
|
97
|
+
|
|
98
|
+
&.c-link--xsmall {
|
|
99
|
+
--link-font-size: #{p.font-size(--dt-font-caption-strong-link-size)};
|
|
100
|
+
--link-line-height: calc(var(--dt-font-caption-strong-link-line-height) * 1px);
|
|
101
|
+
--link-font-weight: var(--dt-font-caption-strong-link-weight);
|
|
102
|
+
}
|
|
85
103
|
}
|
|
86
104
|
|
|
87
105
|
&.c-link--standalone {
|