@justeattakeaway/pie-divider 0.1.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 (29) hide show
  1. package/.eslintignore +6 -0
  2. package/.turbo/turbo-build.log +14 -0
  3. package/CHANGELOG.md +9 -0
  4. package/LICENSE +17 -0
  5. package/README.md +106 -0
  6. package/declaration.d.ts +9 -0
  7. package/dist/index.js +12 -0
  8. package/dist/react.js +1589 -0
  9. package/dist/types/index.d.ts +1 -0
  10. package/dist/types/react.d.ts +1 -0
  11. package/dist/types/src/defs.d.ts +3 -0
  12. package/dist/types/src/defs.d.ts.map +1 -0
  13. package/dist/types/src/index.d.ts +14 -0
  14. package/dist/types/src/index.d.ts.map +1 -0
  15. package/dist/types/src/react.d.ts +3 -0
  16. package/dist/types/src/react.d.ts.map +1 -0
  17. package/package.json +34 -0
  18. package/playwright/index.html +56 -0
  19. package/playwright/index.ts +1 -0
  20. package/playwright-lit-visual.config.ts +4 -0
  21. package/playwright-lit.config.ts +4 -0
  22. package/src/defs.ts +3 -0
  23. package/src/divider.scss +1 -0
  24. package/src/index.ts +28 -0
  25. package/test/accessibility/pie-divider.spec.ts +18 -0
  26. package/test/component/pie-divider.spec.ts +20 -0
  27. package/test/visual/pie-divider.spec.ts +14 -0
  28. package/tsconfig.json +8 -0
  29. 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 DividerProps {
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,YAAY;CAAG"}
package/dist/types/src/index.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import { LitElement } from 'lit';
2
+ import { DividerProps } from './defs';
3
+ export { type DividerProps, };
4
+ declare const componentSelector = "pie-divider";
5
+ export declare class PieDivider extends LitElement implements DividerProps {
6
+ render(): import("lit-html").TemplateResult<1>;
7
+ static styles: import("lit").CSSResult;
8
+ }
9
+ declare global {
10
+ interface HTMLElementTagNameMap {
11
+ [componentSelector]: PieDivider;
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,YAAY,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EACH,KAAK,YAAY,GACpB,CAAC;AAEF,QAAA,MAAM,iBAAiB,gBAAgB,CAAC;AAExC,qBAAa,UAAW,SAAQ,UAAW,YAAW,YAAY;IAC9D,MAAM;IAKN,MAAM,CAAC,MAAM,0BAAqB;CACrC;AAID,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;KACnC;CACJ"}
package/dist/types/src/react.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { PieDivider as PieDividerReact } from './index';
2
+ export declare const PieDivider: import("@lit-labs/react").ReactWebComponent<PieDividerReact, {}>;
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,UAAU,IAAI,eAAe,EAAE,MAAM,SAAS,CAAC;AAExD,eAAO,MAAM,UAAU,kEAMrB,CAAC"}
package/package.json ADDED
@@ -0,0 +1,34 @@
1
+ {
2
+ "name": "@justeattakeaway/pie-divider",
3
+ "description": "PIE Design System Divider built using Web Components",
4
+ "version": "0.1.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-divider && 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_DIVIDER} 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 DividerProps {}
package/src/divider.scss ADDED
@@ -0,0 +1 @@
1
+ @use '@justeattakeaway/pie-css/scss' as p;
package/src/index.ts ADDED
@@ -0,0 +1,28 @@
1
+ import { LitElement, html, unsafeCSS } from 'lit';
2
+
3
+ import styles from './divider.scss?inline';
4
+ import { DividerProps } from './defs';
5
+
6
+ // Valid values available to consumers
7
+ export {
8
+ type DividerProps,
9
+ };
10
+
11
+ const componentSelector = 'pie-divider';
12
+
13
+ export class PieDivider extends LitElement implements DividerProps {
14
+ render () {
15
+ return html`<h1 data-test-id="pie-divider">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, PieDivider);
23
+
24
+ declare global {
25
+ interface HTMLElementTagNameMap {
26
+ [componentSelector]: PieDivider;
27
+ }
28
+ }
package/test/accessibility/pie-divider.spec.ts ADDED
@@ -0,0 +1,18 @@
1
+
2
+ import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
3
+ import { PieDivider, DividerProps } from '@/index';
4
+
5
+ test.describe('PieDivider - Accessibility tests', () => {
6
+ test('a11y - should test the PieDivider component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
7
+ await mount(
8
+ PieDivider,
9
+ {
10
+ props: {} as DividerProps,
11
+ },
12
+ );
13
+
14
+ const results = await makeAxeBuilder().analyze();
15
+
16
+ expect(results.violations).toEqual([]);
17
+ });
18
+ });
package/test/component/pie-divider.spec.ts ADDED
@@ -0,0 +1,20 @@
1
+
2
+ import { test, expect } from '@sand4rt/experimental-ct-web';
3
+ import { PieDivider, DividerProps } from '@/index';
4
+
5
+ const componentSelector = '[data-test-id="pie-divider"]';
6
+
7
+ test.describe('PieDivider - Component tests', () => {
8
+ test('should render successfully', async ({ mount, page }) => {
9
+ // Arrange
10
+ await mount(PieDivider, {
11
+ props: {} as DividerProps,
12
+ });
13
+
14
+ // Act
15
+ const divider = page.locator(componentSelector);
16
+
17
+ // Assert
18
+ expect(divider).toBeVisible();
19
+ });
20
+ });
package/test/visual/pie-divider.spec.ts ADDED
@@ -0,0 +1,14 @@
1
+
2
+ import { test } from '@sand4rt/experimental-ct-web';
3
+ import percySnapshot from '@percy/playwright';
4
+ import { PieDivider, DividerProps } from '@/index';
5
+
6
+ test.describe('PieDivider - Visual tests`', () => {
7
+ test('should display the PieDivider component successfully', async ({ page, mount }) => {
8
+ await mount(PieDivider, {
9
+ props: {} as DividerProps,
10
+ });
11
+
12
+ await percySnapshot(page, 'PieDivider - Visual Test');
13
+ });
14
+ });
package/tsconfig.json ADDED
@@ -0,0 +1,8 @@
1
+ {
2
+ "extends": "@justeattakeaway/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;