@justeattakeaway/pie-link 1.2.2 → 1.2.4
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 +92 -16
- package/custom-elements.json +4 -3
- package/dist/index.js +13 -13
- package/package.json +2 -2
- package/src/index.ts +1 -1
- package/src/link.scss +6 -0
package/README.md
CHANGED
|
@@ -1,37 +1,113 @@
|
|
|
1
|
-
|
|
2
|
-
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-link
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-link) | [Design Documentation](https://pie.design/components/link) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-link)
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-link">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-link.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`pie-link` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-link` is a Web Component built using the Lit library. It offers a simple and accessible link component for web applications.
|
|
14
11
|
|
|
15
|
-
|
|
12
|
+
## Table of Contents
|
|
16
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
17
23
|
|
|
18
24
|
## Installation
|
|
19
25
|
|
|
20
|
-
To install
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
27
|
+
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
29
|
+
|
|
30
|
+
## Documentation
|
|
31
|
+
|
|
32
|
+
### Properties
|
|
33
|
+
| Prop | Options | Description | Default |
|
|
34
|
+
|----------------|----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
|
|
35
|
+
| `size` | `"small"`, `"medium"` | Sets the size of the link. | `"medium"` |
|
|
36
|
+
| `variant` | `"default"`, `"high-visibility"`, `"inverse"` | Sets the variant of the link. | `"default"` |
|
|
37
|
+
| `tag` | `"a"`, `"button"` | Which HTML tag to use for the link. | `"a"` |
|
|
38
|
+
| `href` | — | The `href` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
39
|
+
| `target` | — | The `target` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
40
|
+
| `rel` | — | The `rel` attribute to apply.<br>Cannot be used if `tag` is set to `"button"`. | `undefined` |
|
|
41
|
+
| `type` | `"button"`, `"reset"`, `"submit"` | The `type` attribute to apply when `tag` is set to `"button"`. | `"submit"` |
|
|
42
|
+
| `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"` |
|
|
43
|
+
| `isBold` | `true`, `false` | If true, makes the link text bold. | `false` |
|
|
44
|
+
| `isStandalone` | `true`, `false` | If true, sets the link as a block element. | `false` |
|
|
45
|
+
| `hasVisited` | `true`, `false` | If true, the link will apply the styles for the visited state. Only takes effect if `tag` is `"a"`. | `false` |
|
|
46
|
+
| `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` |
|
|
47
|
+
| `aria` | `{ label?: string }` | Aria properties for the link to help with making it accessible. | `undefined` |
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
### Slots
|
|
51
|
+
| Slot | Description |
|
|
52
|
+
|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
|
53
|
+
| `default` | The default slot is used to pass text into the link component. |
|
|
54
|
+
| `icon` | Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon. **Please note the icon size is hardcoded and cannot be overridden.** |
|
|
55
|
+
|
|
56
|
+
### CSS Variables
|
|
57
|
+
This component does not expose any CSS variables for style overrides.
|
|
58
|
+
|
|
59
|
+
### Events
|
|
60
|
+
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
61
|
+
|
|
62
|
+
## Usage Examples
|
|
21
63
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-link
|
|
64
|
+
> When using icons, we recommend using [@justeattakeaway/pie-icons-webc](https://www.npmjs.com/package/@justeattakeaway/pie-icons-webc) to ensure consistency with the rest of the design system.
|
|
24
65
|
|
|
25
|
-
|
|
66
|
+
**For HTML:**
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
// import as module into a js file e.g. main.js
|
|
70
|
+
import '@justeattakeaway/pie-webc/components/link.js'
|
|
71
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
26
72
|
```
|
|
27
73
|
|
|
28
|
-
|
|
74
|
+
```html
|
|
75
|
+
<!-- pass js file into <script> tag -->
|
|
76
|
+
<pie-link href="https://www.pie.design">
|
|
77
|
+
<icon-placeholder slot="icon"></icon-placeholder>
|
|
78
|
+
pie.design
|
|
79
|
+
</pie-link>
|
|
80
|
+
<script type="module" src="/main.js"></script>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
84
|
+
|
|
85
|
+
```js
|
|
86
|
+
// Vue templates (using Nuxt 3)
|
|
87
|
+
import '@justeattakeaway/pie-webc/components/link.js';
|
|
88
|
+
import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
|
|
89
|
+
|
|
90
|
+
<pie-link href="https://www.pie.design">
|
|
91
|
+
<icon-placeholder slot="icon"></icon-placeholder>
|
|
92
|
+
pie.design
|
|
93
|
+
</pie-link>
|
|
94
|
+
```
|
|
95
|
+
**For React Applications:**
|
|
96
|
+
|
|
97
|
+
```jsx
|
|
98
|
+
import { PieLink } from '@justeattakeaway/pie-webc/react/link.js';
|
|
99
|
+
import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/IconPlaceholder.js';
|
|
100
|
+
|
|
101
|
+
<PieLink href="https://www.pie.design">
|
|
102
|
+
<IconPlaceholder slot="icon" />
|
|
103
|
+
pie.design
|
|
104
|
+
</PieLink>
|
|
105
|
+
```
|
|
29
106
|
|
|
30
|
-
Visit [Link | PIE Design System](https://pie.design/components/link) to view more information on this component.
|
|
31
107
|
|
|
32
|
-
## Questions
|
|
108
|
+
## Questions and Support
|
|
33
109
|
|
|
34
|
-
|
|
110
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
35
111
|
|
|
36
112
|
## Contributing
|
|
37
113
|
|
package/custom-elements.json
CHANGED
|
@@ -66,7 +66,7 @@
|
|
|
66
66
|
"type": {
|
|
67
67
|
"text": "DefaultProps"
|
|
68
68
|
},
|
|
69
|
-
"default": "{\
|
|
69
|
+
"default": "{\n tag: 'a',\n variant: 'default',\n size: 'medium',\n underline: 'default',\n isBold: false,\n isStandalone: false,\n hasVisited: false,\n iconPlacement: 'leading',\n type: 'submit',\n}"
|
|
70
70
|
}
|
|
71
71
|
],
|
|
72
72
|
"exports": [
|
|
@@ -217,7 +217,8 @@
|
|
|
217
217
|
"kind": "field",
|
|
218
218
|
"name": "isStandalone",
|
|
219
219
|
"privacy": "public",
|
|
220
|
-
"attribute": "isStandalone"
|
|
220
|
+
"attribute": "isStandalone",
|
|
221
|
+
"reflects": true
|
|
221
222
|
},
|
|
222
223
|
{
|
|
223
224
|
"kind": "field",
|
|
@@ -244,7 +245,7 @@
|
|
|
244
245
|
"kind": "method",
|
|
245
246
|
"name": "renderContent",
|
|
246
247
|
"privacy": "private",
|
|
247
|
-
"description": "Renders the link content.\
|
|
248
|
+
"description": "Renders the link content.\nIcons are only shown in block elements"
|
|
248
249
|
},
|
|
249
250
|
{
|
|
250
251
|
"kind": "method",
|
package/dist/index.js
CHANGED
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import { LitElement as
|
|
1
|
+
import { LitElement as b, unsafeCSS as m, nothing as y, html as c } from "lit";
|
|
2
2
|
import { property as o } from "lit/decorators.js";
|
|
3
|
-
import { classMap as
|
|
3
|
+
import { classMap as g } from "lit/directives/class-map.js";
|
|
4
4
|
import { ifDefined as d } from "lit/directives/if-defined.js";
|
|
5
5
|
import { validPropertyValues as s, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
|
|
6
|
-
const h = class h extends
|
|
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.
|
|
11
|
+
h.v = "1.2.4";
|
|
12
12
|
let u = h;
|
|
13
|
-
const z = "*,*:after,*:before{box-sizing:inherit}:host{
|
|
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)}: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-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)}", S = ["default", "high-visibility", "inverse"], $ = ["small", "medium"], w = ["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",
|
|
@@ -22,8 +22,8 @@ const z = "*,*:after,*:before{box-sizing:inherit}:host{--link-font-weight: var(-
|
|
|
22
22
|
type: "submit"
|
|
23
23
|
};
|
|
24
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,
|
|
26
|
-
(
|
|
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
27
|
return p && r && C(n, k, r), r;
|
|
28
28
|
};
|
|
29
29
|
const a = "pie-link";
|
|
@@ -40,9 +40,9 @@ let t = class extends u {
|
|
|
40
40
|
const { iconPlacement: l, isStandalone: n } = this;
|
|
41
41
|
return c`
|
|
42
42
|
<span class="c-link-content">
|
|
43
|
-
${n && l === "leading" ? c`<slot name="icon"></slot>` :
|
|
43
|
+
${n && l === "leading" ? c`<slot name="icon"></slot>` : y}
|
|
44
44
|
<slot></slot>
|
|
45
|
-
${n && l === "trailing" ? c`<slot name="icon"></slot>` :
|
|
45
|
+
${n && l === "trailing" ? c`<slot name="icon"></slot>` : y}
|
|
46
46
|
</span>`;
|
|
47
47
|
}
|
|
48
48
|
/**
|
|
@@ -55,7 +55,7 @@ let t = class extends u {
|
|
|
55
55
|
return c`
|
|
56
56
|
<button
|
|
57
57
|
data-test-id="pie-link-button"
|
|
58
|
-
class="${
|
|
58
|
+
class="${g(l)}"
|
|
59
59
|
type=${this.type}
|
|
60
60
|
aria-label=${d((n = this.aria) == null ? void 0 : n.label)}>
|
|
61
61
|
${this.renderContent()}
|
|
@@ -71,7 +71,7 @@ let t = class extends u {
|
|
|
71
71
|
return c`
|
|
72
72
|
<a
|
|
73
73
|
data-test-id="pie-link-anchor"
|
|
74
|
-
class="${
|
|
74
|
+
class="${g(l)}"
|
|
75
75
|
href=${d(this.href)}
|
|
76
76
|
target=${d(this.target)}
|
|
77
77
|
rel=${d(this.rel)}
|
|
@@ -92,7 +92,7 @@ let t = class extends u {
|
|
|
92
92
|
return this.tag === "button" ? this.renderButton(l) : this.renderAnchor(l);
|
|
93
93
|
}
|
|
94
94
|
};
|
|
95
|
-
t.styles =
|
|
95
|
+
t.styles = m(z);
|
|
96
96
|
i([
|
|
97
97
|
o({ type: String }),
|
|
98
98
|
s(a, P, e.tag)
|
|
@@ -126,7 +126,7 @@ i([
|
|
|
126
126
|
o({ type: Boolean })
|
|
127
127
|
], t.prototype, "isBold", 2);
|
|
128
128
|
i([
|
|
129
|
-
o({ type: Boolean })
|
|
129
|
+
o({ type: Boolean, reflect: !0 })
|
|
130
130
|
], t.prototype, "isStandalone", 2);
|
|
131
131
|
i([
|
|
132
132
|
o({ type: 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.
|
|
4
|
+
"version": "1.2.4",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
42
42
|
"@justeattakeaway/pie-components-config": "0.20.1",
|
|
43
43
|
"@justeattakeaway/pie-css": "0.16.0",
|
|
44
|
-
"@justeattakeaway/pie-icons-webc": "1.
|
|
44
|
+
"@justeattakeaway/pie-icons-webc": "1.11.1",
|
|
45
45
|
"@justeattakeaway/pie-monorepo-utils": "0.5.1",
|
|
46
46
|
"@justeattakeaway/pie-wrapper-react": "0.14.3",
|
|
47
47
|
"cem-plugin-module-file-extensions": "0.0.5"
|
package/src/index.ts
CHANGED
|
@@ -63,7 +63,7 @@ export class PieLink extends PieElement implements LinkProps {
|
|
|
63
63
|
@property({ type: Boolean })
|
|
64
64
|
public isBold = defaultProps.isBold;
|
|
65
65
|
|
|
66
|
-
@property({ type: Boolean })
|
|
66
|
+
@property({ type: Boolean, reflect: true })
|
|
67
67
|
public isStandalone = defaultProps.isStandalone;
|
|
68
68
|
|
|
69
69
|
@property({ type: Boolean })
|
package/src/link.scss
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
1
|
@use '@justeattakeaway/pie-css/scss' as p;
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
|
+
display: inline-block;
|
|
5
|
+
|
|
4
6
|
--link-font-weight: var(--dt-font-weight-regular);
|
|
5
7
|
--link-text-color: var(--dt-color-content-link);
|
|
6
8
|
}
|
|
7
9
|
|
|
10
|
+
:host([isstandalone]) {
|
|
11
|
+
display: block;
|
|
12
|
+
}
|
|
13
|
+
|
|
8
14
|
@mixin link-interactive-states($mode: 'default') {
|
|
9
15
|
&:hover,
|
|
10
16
|
&:active {
|