@justeattakeaway/pie-link 0.11.3 → 0.12.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 +5 -89
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,15 +8,6 @@
|
|
|
8
8
|
</a>
|
|
9
9
|
</p>
|
|
10
10
|
|
|
11
|
-
# Table of Contents
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-link)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
19
|
-
|
|
20
11
|
## pie-link
|
|
21
12
|
|
|
22
13
|
`pie-link` is a Web Component built using the Lit library.
|
|
@@ -36,89 +27,14 @@ $ npm i @justeattakeaway/pie-link
|
|
|
36
27
|
$ yarn add @justeattakeaway/pie-link
|
|
37
28
|
```
|
|
38
29
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
### Importing the component
|
|
43
|
-
|
|
44
|
-
#### JavaScript
|
|
45
|
-
```js
|
|
46
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
47
|
-
import { PieLink } from '@justeattakeaway/pie-link';
|
|
48
|
-
|
|
49
|
-
// If you don't need to reference the imported object, you can simply
|
|
50
|
-
// import the module which registers the component as a custom element.
|
|
51
|
-
import '@justeattakeaway/pie-link';
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
#### React
|
|
55
|
-
```js
|
|
56
|
-
// React
|
|
57
|
-
// For React, you will need to import our React-specific component build
|
|
58
|
-
// which wraps the web component using @lit/react
|
|
59
|
-
import { PieLink } from '@justeattakeaway/pie-link/dist/react';
|
|
60
|
-
```
|
|
61
|
-
|
|
62
|
-
> [!NOTE]
|
|
63
|
-
> When using the React version of the component, please make sure to also
|
|
64
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
## Peer Dependencies
|
|
68
|
-
|
|
69
|
-
> [!IMPORTANT]
|
|
70
|
-
> When using `pie-link`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
|
|
71
|
-
|
|
72
|
-
## Props
|
|
73
|
-
|
|
74
|
-
| Property | Type | Default | Description |
|
|
75
|
-
| ------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
|
|
76
|
-
| tag | `String` | `a` | The rendered HTML element of the link, one of `tags` – `a`, `button` |
|
|
77
|
-
| variant | `String` | `default` | Variant of the link, one of `variants` – `default`, `high-visibility`, `inverse` |
|
|
78
|
-
| size | `String` | `medium` | Size of the link, one of `sizes` – `medium`, `small` |
|
|
79
|
-
| underline | `String` | `default` | The underline behaviour of the link, one of `underlineTypes` – `default`, `reversed`. The `reverse` type can only be used if `isStandalone` is set to `true` |
|
|
80
|
-
| href | `String` | `undefined` | Native html `href` attribute |
|
|
81
|
-
| rel | `String` | `undefined` | Native html `rel` attribute |
|
|
82
|
-
| target | `String` | `undefined` | Native html `target` attribute |
|
|
83
|
-
| type | `String` | `submit` | Native html `type` attribute if the tag is set to `button` |
|
|
84
|
-
| isBold | `Boolean` | `false` | If `true`, sets the link text bold |
|
|
85
|
-
| isStandalone | `Boolean` | `false` | If `true`, sets the link as a block element |
|
|
86
|
-
| hasVisited | `Boolean` | `false` | If `true`, the link will apply the styles for the visited state |
|
|
87
|
-
| iconPlacement | `String` | `leading` | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`. Can only be used if `isStandalone` is `true` |
|
|
88
|
-
| aria | `object` | `undefined` | The ARIA labels used for the link. |
|
|
89
|
-
|
|
90
|
-
In your markup or JSX, you can then use these to set the properties for the `pie-link` component:
|
|
91
|
-
|
|
92
|
-
```html
|
|
93
|
-
<!-- Native HTML -->
|
|
94
|
-
<pie-link></pie-link>
|
|
95
|
-
|
|
96
|
-
<!-- JSX -->
|
|
97
|
-
<PieLink></PieLink>
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
## Slots
|
|
30
|
+
## Documentation
|
|
101
31
|
|
|
102
|
-
|
|
103
|
-
| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
104
|
-
| Default slot | The default slot is used to pass text into the link component. |
|
|
105
|
-
| 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, but this can also accept an SVG icon. |
|
|
32
|
+
Visit [Link | PIE Design System](https://pie.design/components/link/overview) to view more information on this component.
|
|
106
33
|
|
|
107
|
-
|
|
34
|
+
## Questions
|
|
108
35
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
```html
|
|
112
|
-
<!--
|
|
113
|
-
Note that pie-link and the icons that you want to use will need to be imported as components into your application.
|
|
114
|
-
See the `pie-icons-webc` README for more info on importing these icons.
|
|
115
|
-
-->
|
|
116
|
-
<pie-link>
|
|
117
|
-
<icon-plus-circle slot="icon"></icon-plus-circle>
|
|
118
|
-
Search
|
|
119
|
-
</pie-link>
|
|
120
|
-
```
|
|
36
|
+
Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
|
|
121
37
|
|
|
122
38
|
## Contributing
|
|
123
39
|
|
|
124
|
-
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
|
40
|
+
Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
|
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.
|
|
4
|
+
"version": "0.12.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"author": "Just Eat Takeaway.com - Design System Team",
|
|
29
29
|
"license": "Apache-2.0",
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@justeattakeaway/pie-components-config": "0.
|
|
31
|
+
"@justeattakeaway/pie-components-config": "0.7.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@justeattakeaway/pie-webc-core": "0.13.0"
|