@justeattakeaway/pie-divider 0.1.0 → 0.2.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[9:04:00 AM] @custom-elements-manifest/analyzer: Created new manifest.
+[2:03:48 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
-✓ 12 modules transformed.
+✓ 22 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.js   0.28 kB │ gzip:  0.22 kB
-dist/react.js  58.95 kB │ gzip: 15.89 kB
+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 11.55s
-[vite:dts] Declaration files built in 10706ms.
+✓ built in 45.92s
+[vite:dts] Declaration files built in 43220ms.
 

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

package/README.md

@@ -59,16 +59,17 @@ import { PieDivider } from '@justeattakeaway/pie-divider/dist/react';
 
 | Property | Type | Default | Description |
 |---|---|---|---|
-| - | - | - | - |
+| variant | `String` | `default` | Variant of the divider, one of variants – default, inverse |
+| orientation | `String` | `horizontal` | Orientation of the divider, one of – horizontal, vertical |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-divider` component:
 
 ```html
 <!-- Native HTML -->
-<pie-divider></pie-divider>
+<pie-divider />
 
 <!-- JSX -->
-<PieDivider></PieDivider>
+<PieDivider />
 ```
 
 ## Testing

package/dist/index.js

@@ -1,12 +1,57 @@
-import { unsafeCSS as t, LitElement as i, html as s } from "lit";
-const r = "", d = "pie-divider";
-class e extends i {
+import { unsafeCSS as u, LitElement as f, html as g } from "lit";
+import { property as c } from "lit/decorators.js";
+import "lit/decorators/property.js";
+const l = (n, i, r) => function(e, t) {
+  const o = `#${t}`;
+  Object.defineProperty(e, t, {
+    get() {
+      return this[o];
+    },
+    set(s) {
+      const p = this[o];
+      i.includes(s) ? this[o] = s : (console.error(
+        `<${n}> Invalid value "${s}" provided for property "${t}".`,
+        `Must be one of: ${i.join(" | ")}.`,
+        `Falling back to default value: "${r}"`
+      ), this[o] = r), this.requestUpdate(t, p);
+    }
+  });
+}, m = `.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-height: 1px;margin:0;border:0;width:var(--divider-width);height:var(--divider-height);background-color:var(--divider-bg-color)}.c-divider[variant=inverse]{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider[orientation=vertical]{--divider-width: 1px;--divider-height: 100%}
+`, b = ["default", "inverse"], P = ["horizontal", "vertical"];
+var $ = Object.defineProperty, y = Object.getOwnPropertyDescriptor, h = (n, i, r, d) => {
+  for (var e = d > 1 ? void 0 : d ? y(i, r) : i, t = n.length - 1, o; t >= 0; t--)
+    (o = n[t]) && (e = (d ? o(i, r, e) : o(e)) || e);
+  return d && e && $(i, r, e), e;
+};
+const v = "pie-divider";
+class a extends f {
+  constructor() {
+    super(...arguments), this.variant = "default", this.orientation = "horizontal";
+  }
   render() {
-    return s`<h1 data-test-id="pie-divider">Hello world!</h1>`;
+    const { variant: i, orientation: r } = this;
+    return g`
+            <hr
+                data-test-id="pie-divider"
+                aria-hidden="true"
+                class="c-divider"
+                variant=${i}
+                orientation=${r}
+            />`;
   }
 }
-e.styles = t(r);
-customElements.define(d, e);
+a.styles = u(m);
+h([
+  c({ type: String }),
+  l(v, b, "default")
+], a.prototype, "variant", 2);
+h([
+  c({ type: String }),
+  l(v, P, "horizontal")
+], a.prototype, "orientation", 2);
+customElements.define(v, a);
 export {
-  e as PieDivider
+  a as PieDivider,
+  P as orientations,
+  b as variants
 };

package/dist/react.js

@@ -1,5 +1,7 @@
 import { PieDivider as Nr } from "./index.js";
 import "lit";
+import "lit/decorators.js";
+import "lit/decorators/property.js";
 function Fr(g, c) {
   for (var U = 0; U < c.length; U++) {
     const T = c[U];
@@ -1577,7 +1579,7 @@ function zr(g = window.React, c, U, T, A) {
   const J = k.forwardRef((D, P) => F(H, { ...D, _$Gl: P }, D == null ? void 0 : D.children));
   return J.displayName = H.displayName, J;
 }
-const qr = zr({
+const Kr = zr({
   displayName: "PieDivider",
   elementClass: Nr,
   react: Vr,
@@ -1585,5 +1587,5 @@ const qr = zr({
   events: {}
 });
 export {
-  qr as PieDivider
+  Kr as PieDivider
 };

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1 @@
+{"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/{src → packages/components/pie-divider/src}/index.d.ts

@@ -1,8 +1,10 @@
 import { LitElement } from 'lit';
-import { DividerProps } from './defs';
-export { type DividerProps, };
+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;
 }

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

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-divider",
   "description": "PIE Design System Divider built using Web Components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/playwright/index.html

@@ -34,6 +34,7 @@
         /* basic styles to center align components and give them some spacing */
         #root {
             padding: 1em;
+            min-height: 300px;
         }
 
         #root > * {

package/src/defs.ts

@@ -1,3 +1,13 @@
-// TODO - please remove the eslint disable comment below when you add props to this interface
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface DividerProps {}
+export const variants = ['default', 'inverse'] as const;
+export const orientations = ['horizontal', 'vertical'] as const;
+
+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];
+}

package/src/divider.scss

@@ -1 +1,30 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-divider {
+    --divider-bg-color: var(--dt-color-divider-default);
+    --divider-width: 100%;
+    --divider-height: 1px;
+
+    margin: 0;
+    border: 0;
+    width: var(--divider-width);
+    height: var(--divider-height);
+    background-color: var(--divider-bg-color);
+
+    &[variant='default'] {
+        /* Same as default styles */
+    }
+
+    &[variant='inverse'] {
+        --divider-bg-color: var(--dt-color-divider-inverse);
+    }
+
+    &[orientation='horizontal'] {
+        /* Same as default styles */
+    }
+
+    &[orientation='vertical'] {
+        --divider-width: 1px;
+        --divider-height: 100%;
+    }
+}

package/src/index.ts

@@ -1,18 +1,38 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-
+import { property } from 'lit/decorators.js';
+import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './divider.scss?inline';
-import { DividerProps } from './defs';
+import { DividerProps, variants, orientations } from './defs';
 
 // Valid values available to consumers
 export {
     type DividerProps,
+    variants,
+    orientations,
 };
 
 const componentSelector = 'pie-divider';
 
 export class PieDivider extends LitElement implements DividerProps {
+    @property({ type: String })
+    @validPropertyValues(componentSelector, variants, 'default')
+    public variant: DividerProps['variant'] = 'default';
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, orientations, 'horizontal')
+    public orientation : DividerProps['orientation'] = 'horizontal';
+
     render () {
-        return html`<h1 data-test-id="pie-divider">Hello world!</h1>`;
+        const { variant, orientation } = this;
+
+        return html`
+            <hr
+                data-test-id="pie-divider"
+                aria-hidden="true"
+                class="c-divider"
+                variant=${variant}
+                orientation=${orientation}
+            />`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

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

@@ -1,14 +1,50 @@
 
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import { PieDivider, DividerProps } from '@/index';
+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';
 
-test.describe('PieDivider - Visual tests`', () => {
-    test('should display the PieDivider component successfully', async ({ page, mount }) => {
-        await mount(PieDivider, {
-            props: {} as DividerProps,
-        });
+const props: PropObject = {
+    variant: variants,
+    orientation: orientations,
+};
 
-        await percySnapshot(page, 'PieDivider - Visual Test');
+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,5 +1,5 @@
 {
-  "extends": "@justeattakeaway/pie-components-config/tsconfig.json",
+  "extends": "../../../configs/pie-components-config/tsconfig.json",
   "compilerOptions": {
     "baseUrl": ".",
     "rootDir": ".",

package/dist/types/src/defs.d.ts

@@ -1,3 +0,0 @@
-export interface DividerProps {
-}
-//# sourceMappingURL=defs.d.ts.map

package/dist/types/src/defs.d.ts.map

@@ -1 +0,0 @@
-{"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.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;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"}