@justeattakeaway/pie-link 0.0.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/.eslintignore +6 -0
- package/.turbo/turbo-build.log +14 -0
- package/LICENSE +17 -0
- package/README.md +106 -0
- package/declaration.d.ts +9 -0
- package/dist/index.js +12 -0
- package/dist/react.js +1589 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/react.d.ts +1 -0
- package/dist/types/src/defs.d.ts +3 -0
- package/dist/types/src/defs.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +14 -0
- package/dist/types/src/index.d.ts.map +1 -0
- package/dist/types/src/react.d.ts +3 -0
- package/dist/types/src/react.d.ts.map +1 -0
- package/package.json +34 -0
- package/playwright/index.html +56 -0
- package/playwright/index.ts +1 -0
- package/playwright-lit-visual.config.ts +4 -0
- package/playwright-lit.config.ts +4 -0
- package/src/defs.ts +3 -0
- package/src/index.ts +28 -0
- package/src/link.scss +1 -0
- package/test/accessibility/pie-link.spec.ts +18 -0
- package/test/component/pie-link.spec.ts +20 -0
- package/test/visual/pie-link.spec.ts +14 -0
- package/tsconfig.json +8 -0
- package/vite.config.js +3 -0
package/.eslintignore
ADDED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
[8:54:51 PM] @custom-elements-manifest/analyzer: Created new manifest.
|
|
2
|
+
react wrapper has been added!
|
|
3
|
+
[36mvite v4.3.9 [32mbuilding for production...[36m[39m
|
|
4
|
+
transforming...
|
|
5
|
+
[32m✓[39m 12 modules transformed.
|
|
6
|
+
rendering chunks...
|
|
7
|
+
computing gzip size...
|
|
8
|
+
[2mdist/[22m[36mindex.js [39m[1m[2m 0.27 kB[22m[1m[22m[2m │ gzip: 0.22 kB[22m
|
|
9
|
+
[2mdist/[22m[36mreact.js [39m[1m[2m58.94 kB[22m[1m[22m[2m │ gzip: 15.90 kB[22m
|
|
10
|
+
[32m
|
|
11
|
+
[36m[vite:dts][32m Start generate declaration files...[39m
|
|
12
|
+
[32m✓ built in 11.55s[39m
|
|
13
|
+
[32m[36m[vite:dts][32m Declaration files built in 10712ms.
|
|
14
|
+
[39m
|
package/LICENSE
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
Apache License
|
|
2
|
+
Version 2.0, January 2004
|
|
3
|
+
http://www.apache.org/licenses/
|
|
4
|
+
|
|
5
|
+
Copyright (c) Just Eat Takeaway.com
|
|
6
|
+
|
|
7
|
+
Licensed under the Apache License, Version 2.0 (the "License");
|
|
8
|
+
you may not use this file except in compliance with the License.
|
|
9
|
+
You may obtain a copy of the License at
|
|
10
|
+
|
|
11
|
+
http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
+
|
|
13
|
+
Unless required by applicable law or agreed to in writing, software
|
|
14
|
+
distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
+
See the License for the specific language governing permissions and
|
|
17
|
+
limitations under the License.
|
package/README.md
ADDED
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img align="center" src="../../../readme_image.png" height="200" alt="">
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
<a href="https://www.npmjs.com/@justeattakeaway/pie-link">
|
|
7
|
+
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-link.svg">
|
|
8
|
+
</a>
|
|
9
|
+
</p>
|
|
10
|
+
|
|
11
|
+
# Table of Contents
|
|
12
|
+
|
|
13
|
+
1. [Introduction](#pie-link)
|
|
14
|
+
2. [Local Development](#local-development)
|
|
15
|
+
3. [Importing the component](#importing-the-component)
|
|
16
|
+
4. [Props](#props)
|
|
17
|
+
5. [Testing](#testing)
|
|
18
|
+
|
|
19
|
+
# pie-link
|
|
20
|
+
|
|
21
|
+
`pie-link` is a Web Component built using the Lit library.
|
|
22
|
+
|
|
23
|
+
This component can be easily integrated into various frontend frameworks and customized through a set of properties.
|
|
24
|
+
|
|
25
|
+
## Local development
|
|
26
|
+
|
|
27
|
+
Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
yarn
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
To build the `pie-link` package, run the following command:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
yarn build --filter=pie-link
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
yarn watch --filter=pie-link
|
|
43
|
+
|
|
44
|
+
# in a separate terminal tab, run
|
|
45
|
+
yarn dev --filter=pie-storybook
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Importing the component
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
// default
|
|
52
|
+
import { PieLink } from '@justeattakeaway/pie-link';
|
|
53
|
+
|
|
54
|
+
// react
|
|
55
|
+
import { PieLink } from '@justeattakeaway/pie-link/dist/react';
|
|
56
|
+
```
|
|
57
|
+
|
|
58
|
+
## Props
|
|
59
|
+
|
|
60
|
+
| Property | Type | Default | Description |
|
|
61
|
+
|---|---|---|---|
|
|
62
|
+
| - | - | - | - |
|
|
63
|
+
|
|
64
|
+
In your markup or JSX, you can then use these to set the properties for the `pie-link` component:
|
|
65
|
+
|
|
66
|
+
```html
|
|
67
|
+
<!-- Native HTML -->
|
|
68
|
+
<pie-link></pie-link>
|
|
69
|
+
|
|
70
|
+
<!-- JSX -->
|
|
71
|
+
<PieLink></PieLink>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Testing
|
|
75
|
+
|
|
76
|
+
### Browser tests
|
|
77
|
+
|
|
78
|
+
To run the browser tests, run the following command from the root of the monorepo:
|
|
79
|
+
|
|
80
|
+
```bash
|
|
81
|
+
yarn test:browsers --filter=pie-link
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
### Visual tests
|
|
85
|
+
|
|
86
|
+
To run the visual regression tests, run the following command from the root of the monorepo:
|
|
87
|
+
|
|
88
|
+
```bash
|
|
89
|
+
yarn test:visual --filter=pie-link
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
|
|
93
|
+
|
|
94
|
+
#### Setup via bash
|
|
95
|
+
|
|
96
|
+
```bash
|
|
97
|
+
export PERCY_TOKEN_PIE_LINK=abcde
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
#### Setup via package.json
|
|
101
|
+
|
|
102
|
+
Under scripts `test:visual` replace the environment variable with the below:
|
|
103
|
+
|
|
104
|
+
```bash
|
|
105
|
+
PERCY_TOKEN_PIE_LINK=abcde
|
|
106
|
+
```
|
package/declaration.d.ts
ADDED
package/dist/index.js
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { unsafeCSS as t, LitElement as n, html as s } from "lit";
|
|
2
|
+
const l = "", o = "pie-link";
|
|
3
|
+
class e extends n {
|
|
4
|
+
render() {
|
|
5
|
+
return s`<h1 data-test-id="pie-link">Hello world!</h1>`;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
e.styles = t(l);
|
|
9
|
+
customElements.define(o, e);
|
|
10
|
+
export {
|
|
11
|
+
e as PieLink
|
|
12
|
+
};
|