@justeattakeaway/pie-divider 0.2.0 → 0.4.0

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
-  "types": "dist/types/index.d.ts",
+  "types": "dist/index.d.ts",
+  "files": [
+    "src",
+    "dist",
+    "**/*.d.ts"
+  ],
   "scripts": {
     "build": "yarn build:wrapper pie-divider && run -T vite build",
     "lint:scripts": "run -T eslint .",

package/src/index.ts

@@ -5,11 +5,7 @@ import styles from './divider.scss?inline';
 import { DividerProps, variants, orientations } from './defs';
 
 // Valid values available to consumers
-export {
-    type DividerProps,
-    variants,
-    orientations,
-};
+export * from './defs';
 
 const componentSelector = 'pie-divider';
 

package/.eslintignore

@@ -1,6 +0,0 @@
-.turbo
-dist
-node_modules
-lit-browsers-report
-lit-visual-report
-test-results

package/.turbo/turbo-build.log

@@ -1,14 +0,0 @@
-[2:03:48 PM] @custom-elements-manifest/analyzer: Created new manifest.
-react wrapper has been added!
-vite v4.3.9 building for production...
-transforming...
-✓ 22 modules transformed.
-rendering chunks...
-computing gzip size...
-dist/index.js   2.04 kB │ gzip:  0.94 kB
-dist/react.js  59.02 kB │ gzip: 15.91 kB
-
-[vite:dts] Start generate declaration files...
-✓ built in 45.92s
-[vite:dts] Declaration files built in 43220ms.
-

package/CHANGELOG.md

@@ -1,19 +0,0 @@
-# @justeattakeaway/pie-divider
-
-## 0.2.0
-
-### Minor Changes
-
-- [Added] pie divider component ([#704](https://github.com/justeattakeaway/pie/pull/704)) by [@raoufswe](https://github.com/raoufswe)
-
-- [Changed] - skip visual tests ([#709](https://github.com/justeattakeaway/pie/pull/709)) by [@raoufswe](https://github.com/raoufswe)
-
-- [Changed] extend ts config using relative paths ([#704](https://github.com/justeattakeaway/pie/pull/704)) by [@raoufswe](https://github.com/raoufswe)
-
-## 0.1.0
-
-### Minor Changes
-
-- [Added] - Create a skeleton divider web component using our component generator ([#693](https://github.com/justeattakeaway/pie/pull/693)) by [@raoufswe](https://github.com/raoufswe)
-
-- [Added] - init pie link ([#707](https://github.com/justeattakeaway/pie/pull/707)) by [@raoufswe](https://github.com/raoufswe)

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export * from './packages/components/pie-divider/src/index'

package/dist/types/packages/components/pie-divider/src/defs.d.ts

@@ -1,13 +0,0 @@
-export declare const variants: readonly ["default", "inverse"];
-export declare const orientations: readonly ["horizontal", "vertical"];
-export interface DividerProps {
-    /**
-      * What style variant the divider should be such as default or vertical.
-      */
-    variant: typeof variants[number];
-    /**
-     * What orientation the divider should be such as horizontal or inverse.
-     */
-    orientation: typeof orientations[number];
-}
-//# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-divider/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,iCAAkC,CAAC;AACxD,eAAO,MAAM,YAAY,qCAAsC,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC1B;;QAEI;IACJ,OAAO,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAChC;;OAEG;IACJ,WAAW,EAAE,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;CAC3C"}

package/dist/types/packages/components/pie-divider/src/index.d.ts

@@ -1,16 +0,0 @@
-import { LitElement } from 'lit';
-import { DividerProps, variants, orientations } from './defs';
-export { type DividerProps, variants, orientations, };
-declare const componentSelector = "pie-divider";
-export declare class PieDivider extends LitElement implements DividerProps {
-    variant: DividerProps['variant'];
-    orientation: DividerProps['orientation'];
-    render(): import("lit-html").TemplateResult<1>;
-    static styles: import("lit").CSSResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        [componentSelector]: PieDivider;
-    }
-}
-//# sourceMappingURL=index.d.ts.map

package/dist/types/packages/components/pie-divider/src/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAIlD,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAG9D,OAAO,EACH,KAAK,YAAY,EACjB,QAAQ,EACR,YAAY,GACf,CAAC;AAEF,QAAA,MAAM,iBAAiB,gBAAgB,CAAC;AAExC,qBAAa,UAAW,SAAQ,UAAW,YAAW,YAAY;IAGvD,OAAO,EAAE,YAAY,CAAC,SAAS,CAAC,CAAa;IAI7C,WAAW,EAAG,YAAY,CAAC,aAAa,CAAC,CAAgB;IAEhE,MAAM;IAcN,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/packages/components/pie-divider/src/react.d.ts

@@ -1,3 +0,0 @@
-import { PieDivider as PieDividerReact } from './index';
-export declare const PieDivider: import("@lit-labs/react").ReactWebComponent<PieDividerReact, {}>;
-//# sourceMappingURL=react.d.ts.map

package/dist/types/packages/components/pie-divider/src/react.d.ts.map

@@ -1 +0,0 @@
-{"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/dist/types/react.d.ts

@@ -1 +0,0 @@
-export * from './packages/components/pie-divider/src/react'

package/playwright/index.html

@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2" as="font" type="font/woff2" crossorigin>
-    <style>
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Regular-optimised.woff') format("woff");
-            font-weight: 400;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-Bold-optimised.woff') format("woff");
-            font-weight: 700;
-            font-display: swap;
-        }
-        @font-face {
-            font-family: JETSansDigital;
-            src: url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff2') format("woff2"),
-            url('https://d30v2pzvrfyzpo.cloudfront.net/fonts/JETSansDigital-ExtraBold-optimised.woff') format("woff");
-            font-weight: 800;
-            font-display: swap;
-        }
-        body {
-            font-feature-settings: "tnum"; /* Enable tabular numbers */
-        }
-        /* basic styles to center align components and give them some spacing */
-        #root {
-            padding: 1em;
-            min-height: 300px;
-        }
-
-        #root > * {
-            display: block;
-            margin-inline: auto;
-        }
-
-        #root > * + * {
-            margin-top: 1em;
-        }
-    </style>
-    <title>Testing Page</title>
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet.css" />
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/@justeat/pie-design-tokens/dist/jet-hsl-colors.css" />
-</head>
-<body>
-    <div id="root"></div>
-    <script type="module" src="./index.ts"></script>
-</body>
-</html>

package/playwright/index.ts

@@ -1 +0,0 @@
-// Import common styles here

package/playwright-lit-visual.config.ts

@@ -1,4 +0,0 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightVisualConfig } from '@justeattakeaway/pie-components-config';
-
-export default defineConfig(getPlaywrightVisualConfig());

package/playwright-lit.config.ts

@@ -1,4 +0,0 @@
-import { defineConfig } from '@sand4rt/experimental-ct-web';
-import { getPlaywrightConfig } from '@justeattakeaway/pie-components-config';
-
-export default defineConfig(getPlaywrightConfig());

package/test/accessibility/pie-divider.spec.ts

@@ -1,18 +0,0 @@
-
-import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/fixtures.ts';
-import { PieDivider, DividerProps } from '@/index';
-
-test.describe('PieDivider - Accessibility tests', () => {
-    test('a11y - should test the PieDivider component WCAG compliance', async ({ makeAxeBuilder, mount }) => {
-        await mount(
-            PieDivider,
-            {
-                props: {} as DividerProps,
-            },
-        );
-
-        const results = await makeAxeBuilder().analyze();
-
-        expect(results.violations).toEqual([]);
-    });
-});

package/test/component/pie-divider.spec.ts

@@ -1,20 +0,0 @@
-
-import { test, expect } from '@sand4rt/experimental-ct-web';
-import { PieDivider, DividerProps } from '@/index';
-
-const componentSelector = '[data-test-id="pie-divider"]';
-
-test.describe('PieDivider - Component tests', () => {
-    test('should render successfully', async ({ mount, page }) => {
-        // Arrange
-        await mount(PieDivider, {
-            props: {} as DividerProps,
-        });
-
-        // Act
-        const divider = page.locator(componentSelector);
-
-        // Assert
-        expect(divider).toBeVisible();
-    });
-});

package/test/visual/pie-divider.spec.ts

@@ -1,50 +0,0 @@
-
-import { test } from '@sand4rt/experimental-ct-web';
-import percySnapshot from '@percy/playwright';
-import type {
-    PropObject, WebComponentPropValues, WebComponentTestInput,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
-import {
-    getAllPropCombinations, splitCombinationsByPropertyValue,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
-import {
-    createTestWebComponent,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/rendering.ts';
-import {
-    WebComponentTestWrapper,
-} from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts';
-import { variants, orientations } from '@/defs';
-import { PieDivider } from '@/index';
-
-const props: PropObject = {
-    variant: variants,
-    orientation: orientations,
-};
-
-const renderTestPieDivider = (propVals: WebComponentPropValues) => `<pie-divider variant="${propVals.variant}" orientation="${propVals.orientation}" />`;
-
-const componentPropsMatrix : WebComponentPropValues[] = getAllPropCombinations(props);
-const componentPropsMatrixByVariant: Record<string, WebComponentPropValues[]> = splitCombinationsByPropertyValue(componentPropsMatrix, 'variant');
-const componentVariants: string[] = Object.keys(componentPropsMatrixByVariant);
-
-test.beforeEach(async ({ page, mount }) => {
-    await mount(PieDivider, {});
-    await page.evaluate(() => {
-        const element : Element | null = document.querySelector('pie-divider');
-        element?.remove();
-    });
-});
-
-componentVariants.forEach((variant) => test(`Render all prop variations for Variant: ${variant}`, async ({ page, mount }) => {
-    await Promise.all(componentPropsMatrixByVariant[variant].map(async (combo: WebComponentPropValues) => {
-        const testComponent: WebComponentTestInput = createTestWebComponent(combo, renderTestPieDivider);
-        const propKeyValues = `orientation: ${testComponent.propValues.orientation}}`;
-
-        await mount(
-            WebComponentTestWrapper,
-            { props: { propKeyValues, darkMode: variant === 'inverse' } },
-        );
-    }));
-
-    await percySnapshot(page, `PIE Divider - Variant: ${variant}`);
-}));

package/tsconfig.json

@@ -1,8 +0,0 @@
-{
-  "extends": "../../../configs/pie-components-config/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "rootDir": ".",
-  },
-  "include": ["src/**/*.ts","./declaration.d.ts", "test/**/*.ts", "playwright-lit-visual.config.ts", "playwright-lit.config.ts"],
-}

package/vite.config.js

@@ -1,3 +0,0 @@
-import viteConfig from '@justeattakeaway/pie-components-config/vite.config';
-
-export default viteConfig;