@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.
Files changed (28) hide show
  1. package/.eslintignore +6 -0
  2. package/.turbo/turbo-build.log +14 -0
  3. package/LICENSE +17 -0
  4. package/README.md +106 -0
  5. package/declaration.d.ts +9 -0
  6. package/dist/index.js +12 -0
  7. package/dist/react.js +1589 -0
  8. package/dist/types/index.d.ts +1 -0
  9. package/dist/types/react.d.ts +1 -0
  10. package/dist/types/src/defs.d.ts +3 -0
  11. package/dist/types/src/defs.d.ts.map +1 -0
  12. package/dist/types/src/index.d.ts +14 -0
  13. package/dist/types/src/index.d.ts.map +1 -0
  14. package/dist/types/src/react.d.ts +3 -0
  15. package/dist/types/src/react.d.ts.map +1 -0
  16. package/package.json +34 -0
  17. package/playwright/index.html +56 -0
  18. package/playwright/index.ts +1 -0
  19. package/playwright-lit-visual.config.ts +4 -0
  20. package/playwright-lit.config.ts +4 -0
  21. package/src/defs.ts +3 -0
  22. package/src/index.ts +28 -0
  23. package/src/link.scss +1 -0
  24. package/test/accessibility/pie-link.spec.ts +18 -0
  25. package/test/component/pie-link.spec.ts +20 -0
  26. package/test/visual/pie-link.spec.ts +14 -0
  27. package/tsconfig.json +8 -0
  28. package/vite.config.js +3 -0
package/dist/types/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './src/index'
package/dist/types/react.d.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './src/react'
package/dist/types/src/defs.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export interface LinkProps {
2
+ }
3
+ //# sourceMappingURL=defs.d.ts.map
package/dist/types/src/defs.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,SAAS;CAAG"}
package/dist/types/src/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { LitElement } from 'lit';
2
+ import { LinkProps } from './defs';
3
+ export { type LinkProps, };
4
+ declare const componentSelector = "pie-link";
5
+ export declare class PieLink extends LitElement implements LinkProps {
6
+ render(): import("lit-html").TemplateResult<1>;
7
+ static styles: import("lit").CSSResult;
8
+ }
9
+ declare global {
10
+ interface HTMLElementTagNameMap {
11
+ [componentSelector]: PieLink;
12
+ }
13
+ }
14
+ //# sourceMappingURL=index.d.ts.map
package/dist/types/src/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAGnC,OAAO,EACH,KAAK,SAAS,GACjB,CAAC;AAEF,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qBAAa,OAAQ,SAAQ,UAAW,YAAW,SAAS;IACxD,MAAM;IAKN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAChC;CACJ"}
package/dist/types/src/react.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { PieLink as PieLinkReact } from './index';
2
+ export declare const PieLink: import("@lit-labs/react").ReactWebComponent<PieLinkReact, {}>;
3
+ //# sourceMappingURL=react.d.ts.map
package/dist/types/src/react.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/react.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,OAAO,+DAMlB,CAAC"}
package/package.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "name": "@justeattakeaway/pie-link",
3
+ "description": "PIE Design System Link built using Web Components",
4
+ "version": "0.0.0",
5
+ "type": "module",
6
+ "main": "dist/index.js",
7
+ "module": "dist/index.js",
8
+ "types": "dist/types/index.d.ts",
9
+ "scripts": {
10
+ "build": "yarn build:wrapper pie-link && run -T vite build",
11
+ "lint:scripts": "run -T eslint .",
12
+ "lint:scripts:fix": "yarn lint:scripts --fix",
13
+ "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
14
+ "lint:style:fix": "yarn lint:style --fix",
15
+ "watch": "run -T vite build --watch",
16
+ "test": "echo \"Error: no test specified\" && exit 0",
17
+ "test:ci": "yarn test",
18
+ "test:browsers": "npx playwright test -c ./playwright-lit.config.ts",
19
+ "test:browsers:ci": "yarn test:browsers",
20
+ "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_LINK} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
21
+ "test:visual:ci": "yarn test:visual"
22
+ },
23
+ "author": "JustEatTakeaway.com - Design System Web Team",
24
+ "license": "Apache-2.0",
25
+ "devDependencies": {
26
+ "@justeattakeaway/pie-components-config": "workspace:*"
27
+ },
28
+ "dependencies": {
29
+ "@justeattakeaway/pie-webc-core": "workspace:*"
30
+ },
31
+ "volta": {
32
+ "extends": "../../../package.json"
33
+ }
34
+ }
package/playwright/index.html ADDED
@@ -0,0 +1,56 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
7
+ <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
8
+ <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
9
+ <style>
10
+ @font-face {
11
+ font-family: JETSansDigital;
12
+ src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
13
+ url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
14
+ font-weight: 400;
15
+ font-display: swap;
16
+ }
17
+ @font-face {
18
+ font-family: JETSansDigital;
19
+ src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
20
+ url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
21
+ font-weight: 700;
22
+ font-display: swap;
23
+ }
24
+ @font-face {
25
+ font-family: JETSansDigital;
26
+ src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
27
+ url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
28
+ font-weight: 800;
29
+ font-display: swap;
30
+ }
31
+ body {
32
+ font-feature-settings: "tnum"; /* Enable tabular numbers */
33
+ }
34
+ /* basic styles to center align components and give them some spacing */
35
+ #root {
36
+ padding: 1em;
37
+ }
38
+
39
+ #root > * {
40
+ display: block;
41
+ margin-inline: auto;
42
+ }
43
+
44
+ #root > * + * {
45
+ margin-top: 1em;
46
+ }
47
+ </style>
48
+ <title>Testing Page</title>
49
+ <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
50
+ <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
51
+ </head>
52
+ <body>
53
+ <div id="root"></div>
54
+ <script type="module" src="./index.ts"></script>
55
+ </body>
56
+ </html>
package/playwright/index.ts ADDED
@@ -0,0 +1 @@
1
+ // Import common styles here
package/playwright-lit-visual.config.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { defineConfig } from '@sand4rt/experimental-ct-web';
2
+ import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
3
+
4
+ export default defineConfig(getPlaywrightVisualConfig());
package/playwright-lit.config.ts ADDED
@@ -0,0 +1,4 @@
1
+ import { defineConfig } from '@sand4rt/experimental-ct-web';
2
+ import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
3
+
4
+ export default defineConfig(getPlaywrightConfig());
package/src/defs.ts ADDED
@@ -0,0 +1,3 @@
1
+ // TODO - please remove the eslint disable comment below when you add props to this interface
2
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
3
+ export interface LinkProps {}
package/src/index.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { LitElement, html, unsafeCSS } from 'lit';
2
+
3
+ import styles from './link.scss?inline';
4
+ import { LinkProps } from './defs';
5
+
6
+ // Valid values available to consumers
7
+ export {
8
+ type LinkProps,
9
+ };
10
+
11
+ const componentSelector = 'pie-link';
12
+
13
+ export class PieLink extends LitElement implements LinkProps {
14
+ render () {
15
+ return html`<h1 data-test-id="pie-link">Hello world!</h1>`;
16
+ }
17
+
18
+ // Renders a `CSSResult` generated from SCSS by Vite
19
+ static styles = unsafeCSS(styles);
20
+ }
21
+
22
+ customElements.define(componentSelector, PieLink);
23
+
24
+ declare global {
25
+ interface HTMLElementTagNameMap {
26
+ [componentSelector]: PieLink;
27
+ }
28
+ }
package/src/link.scss ADDED
@@ -0,0 +1 @@
1
+ @use '@justeattakeaway/pie-css/scss' as p;
package/test/accessibility/pie-link.spec.ts ADDED
@@ -0,0 +1,18 @@
1
+
2
+ import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
3
+ import { PieLink, LinkProps } from '@/index';
4
+
5
+ test.describe('PieLink - Accessibility tests', () => {
6
+ test('a11y - should test the PieLink component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
7
+ await mount(
8
+ PieLink,
9
+ {
10
+ props: {} as LinkProps,
11
+ },
12
+ );
13
+
14
+ const results = await makeAxeBuilder().analyze();
15
+
16
+ expect(results.violations).toEqual([]);
17
+ });
18
+ });
package/test/component/pie-link.spec.ts ADDED
@@ -0,0 +1,20 @@
1
+
2
+ import { test, expect } from '@sand4rt/experimental-ct-web';
3
+ import { PieLink, LinkProps } from '@/index';
4
+
5
+ const componentSelector = '[data-test-id="pie-link"]';
6
+
7
+ test.describe('PieLink - Component tests', () => {
8
+ test('should render successfully', async ({ mount, page }) => {
9
+ // Arrange
10
+ await mount(PieLink, {
11
+ props: {} as LinkProps,
12
+ });
13
+
14
+ // Act
15
+ const link = page.locator(componentSelector);
16
+
17
+ // Assert
18
+ expect(link).toBeVisible();
19
+ });
20
+ });
package/test/visual/pie-link.spec.ts ADDED
@@ -0,0 +1,14 @@
1
+
2
+ import { test } from '@sand4rt/experimental-ct-web';
3
+ import percySnapshot from '@percy/playwright';
4
+ import { PieLink, LinkProps } from '@/index';
5
+
6
+ test.describe('PieLink - Visual tests`', () => {
7
+ test('should display the PieLink component successfully', async ({ page, mount }) => {
8
+ await mount(PieLink, {
9
+ props: {} as LinkProps,
10
+ });
11
+
12
+ await percySnapshot(page, 'PieLink - Visual Test');
13
+ });
14
+ });
package/tsconfig.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "extends": "../../../configs/pie-components-config/tsconfig.json",
3
+ "compilerOptions": {
4
+ "baseUrl": ".",
5
+ "rootDir": ".",
6
+ },
7
+ "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
8
+ }
package/vite.config.js ADDED
@@ -0,0 +1,3 @@
1
+ import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
2
+
3
+ export default viteConfig;