@justeattakeaway/pie-link 0.0.0 → 0.1.0

package/.turbo/turbo-build.log

@@ -1,14 +1,14 @@
-[8:54:51 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[2:03:47 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.27 kB │ gzip:  0.22 kB
-dist/react.js  58.94 kB │ gzip: 15.90 kB
+dist/index.js   3.27 kB │ gzip:  1.24 kB
+dist/react.js  59.04 kB │ gzip: 15.92 kB
 
 [vite:dts] Start generate declaration files...
-✓ built in 11.55s
-[vite:dts] Declaration files built in 10712ms.
+✓ built in 45.82s
+[vite:dts] Declaration files built in 43014ms.
 

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @justeattakeaway/pie-link
+
+## 0.1.0
+
+### Minor Changes
+
+- [Changed] - skip visual tests ([#709](https://github.com/justeattakeaway/pie/pull/709)) by [@raoufswe](https://github.com/raoufswe)

package/README.md

@@ -57,9 +57,15 @@ import { PieLink } from '@justeattakeaway/pie-link/dist/react';
 
 ## Props
 
-| Property | Type | Default | Description |
-|---|---|---|---|
-| - | - | - | - |
+| Property     | Type        | Default       | Description                                                                 |
+| ------------ | ----------- | ------------- | --------------------------------------------------------------------------- |
+| variant      | `String`  | `default`   | Variant of the link, one of variants – default, high-visibility or inverse |
+| size         | `String`  | `medium`    | Size of the link, one of `sizes` – `medium`, `small`                 |
+| href         | `String`  | `undefined` | Native html `href` attribute                                              |
+| rel          | `String`  | `undefined` | Native html `rel` attribute                                               |
+| target       | `String`  | `undefined` | Native html `target` attribute                                            |
+| isBold       | `Boolean` | `false`     | If `true`, sets the link text bold                                        |
+| isStandalone | `Boolean` | `false`     | If `true`, sets the link as a block element                               |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-link` component:
 
@@ -103,4 +109,4 @@ Under scripts `test:visual` replace the environment variable with the below:
 
 ```bash
 PERCY_TOKEN_PIE_LINK=abcde
-```
+```

package/dist/index.js

@@ -1,12 +1,86 @@
-import { unsafeCSS as t, LitElement as n, html as s } from "lit";
-const l = "", o = "pie-link";
-class e extends n {
+import { unsafeCSS as k, LitElement as g, html as m } from "lit";
+import { property as s } from "lit/decorators.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import "lit/decorators/property.js";
+const v = (c, n, r) => function(t, e) {
+  const i = `#${e}`;
+  Object.defineProperty(t, e, {
+    get() {
+      return this[i];
+    },
+    set(f) {
+      const h = this[i];
+      n.includes(f) ? this[i] = f : (console.error(
+        `<${c}> Invalid value "${f}" provided for property "${e}".`,
+        `Must be one of: ${n.join(" | ")}.`,
+        `Falling back to default value: "${r}"`
+      ), this[i] = r), this.requestUpdate(e, h);
+    }
+  });
+}, u = `.c-link{--link-font-family: var(--dt-font-interactive-m-family);--link-font-size: calc(var(--dt-font-size-16) * 1px);--link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link);--link-text-decoration: var(--dt-font-style-underline);font-family:var(--link-font-family);font-size:var(--link-font-size);line-height:var(--link-line-height);font-weight:var(--link-font-weight);color:var(--link-text-color);text-decoration:var(--link-text-decoration);cursor:pointer}.c-link[variant=high-visibility]{--link-text-color: var(--dt-color-content-link-distinct)}.c-link[variant=inverse]{--link-text-color: var(--dt-color-content-link-inverse)}.c-link[size=small]{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block}
+`, y = ["default", "high-visibility", "inverse"], z = ["small", "medium"];
+var x = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (c, n, r, l) => {
+  for (var t = l > 1 ? void 0 : l ? S(n, r) : n, e = c.length - 1, i; e >= 0; e--)
+    (i = c[e]) && (t = (l ? i(n, r, t) : i(t)) || t);
+  return l && t && x(n, r, t), t;
+};
+const p = "pie-link";
+class o extends g {
+  constructor() {
+    super(...arguments), this.variant = "default", this.size = "medium", this.isBold = !1, this.isStandalone = !1;
+  }
   render() {
-    return s`<h1 data-test-id="pie-link">Hello world!</h1>`;
+    const {
+      variant: n,
+      size: r,
+      href: l,
+      target: t,
+      rel: e,
+      isBold: i,
+      isStandalone: f
+    } = this;
+    return m`
+            <a  
+                data-test-id="pie-link"
+                class="c-link"
+                variant=${n}
+                size=${r}
+                href=${d(l)}
+                target=${d(t)}
+                rel=${d(e)}
+                ?isBold=${i}
+                ?isStandalone=${f}>
+                <slot></slot>
+            </a>`;
   }
 }
-e.styles = t(l);
-customElements.define(o, e);
+o.styles = k(u);
+a([
+  s({ type: String }),
+  v(p, y, "default")
+], o.prototype, "variant", 2);
+a([
+  s({ type: String }),
+  v(p, z, "medium")
+], o.prototype, "size", 2);
+a([
+  s({ type: String, reflect: !0 })
+], o.prototype, "href", 2);
+a([
+  s({ type: String, reflect: !0 })
+], o.prototype, "target", 2);
+a([
+  s({ type: String, reflect: !0 })
+], o.prototype, "rel", 2);
+a([
+  s({ type: Boolean })
+], o.prototype, "isBold", 2);
+a([
+  s({ type: Boolean })
+], o.prototype, "isStandalone", 2);
+customElements.define(p, o);
 export {
-  e as PieLink
+  o as PieLink,
+  z as sizes,
+  y as variants
 };

package/dist/react.js

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

package/dist/types/index.d.ts

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

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

@@ -0,0 +1,33 @@
+export declare const variants: readonly ["default", "high-visibility", "inverse"];
+export declare const sizes: readonly ["small", "medium"];
+export interface LinkProps {
+    /**
+     * What style variant the link should be such as default, high-visibility or inverse.
+     */
+    variant?: typeof variants[number];
+    /**
+     * What size the link should be.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The URL that the hyperlink should point to
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL such as _self, _blank, _parent or _top
+     */
+    target?: string;
+    /**
+     * What the relationship of the linked URL is
+     */
+    rel?: string;
+    /**
+     * When true, the link text will be bold.
+     */
+    isBold?: boolean;
+    /**
+     * When true, the link will be treated as a block box
+     */
+    isStandalone?: boolean;
+}
+//# sourceMappingURL=defs.d.ts.map

package/dist/types/packages/components/pie-link/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,oDAAqD,CAAC;AAC3E,eAAO,MAAM,KAAK,8BAA+B,CAAC;AAElD,MAAM,WAAW,SAAS;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC;IAClC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,KAAK,CAAC,MAAM,CAAC,CAAC;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B"}

package/dist/types/{src → packages/components/pie-link/src}/index.d.ts

@@ -1,8 +1,15 @@
 import { LitElement } from 'lit';
-import { LinkProps } from './defs';
-export { type LinkProps, };
+import { LinkProps, variants, sizes } from './defs';
+export { type LinkProps, variants, sizes, };
 declare const componentSelector = "pie-link";
 export declare class PieLink extends LitElement implements LinkProps {
+    variant: LinkProps['variant'];
+    size: LinkProps['size'];
+    href?: string;
+    target?: string;
+    rel?: string;
+    isBold: boolean;
+    isStandalone: boolean;
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult;
 }

package/dist/types/packages/components/pie-link/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;AAKlD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,QAAQ,CAAC;AAGpD,OAAO,EACH,KAAK,SAAS,EACd,QAAQ,EACR,KAAK,GACR,CAAC;AAEF,QAAA,MAAM,iBAAiB,aAAa,CAAC;AAErC,qBAAa,OAAQ,SAAQ,UAAW,YAAW,SAAS;IAGjD,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAa;IAI1C,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAY;IAGnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAGd,MAAM,CAAC,EAAE,MAAM,CAAC;IAGhB,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,MAAM,UAAS;IAGf,YAAY,UAAS;IAE5B,MAAM;IAqBN,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/react.d.ts

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

package/package.json

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

package/src/defs.ts

@@ -1,3 +1,33 @@
-// 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 LinkProps {}
+export const variants = ['default', 'high-visibility', 'inverse'] as const;
+export const sizes = ['small', 'medium'] as const;
+
+export interface LinkProps {
+    /**
+     * What style variant the link should be such as default, high-visibility or inverse.
+     */
+    variant?: typeof variants[number];
+    /**
+     * What size the link should be.
+     */
+    size?: typeof sizes[number];
+    /**
+     * The URL that the hyperlink should point to
+     */
+    href?: string;
+    /**
+     * Where to display the linked URL such as _self, _blank, _parent or _top
+     */
+    target?: string;
+    /**
+     * What the relationship of the linked URL is
+     */
+    rel?: string;
+    /**
+     * When true, the link text will be bold.
+     */
+    isBold?: boolean;
+    /**
+     * When true, the link will be treated as a block box
+     */
+    isStandalone?: boolean;
+}

package/src/index.ts

@@ -1,18 +1,61 @@
 import { LitElement, html, unsafeCSS } from 'lit';
-
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './link.scss?inline';
-import { LinkProps } from './defs';
+import { LinkProps, variants, sizes } from './defs';
 
 // Valid values available to consumers
 export {
     type LinkProps,
+    variants,
+    sizes,
 };
 
 const componentSelector = 'pie-link';
 
 export class PieLink extends LitElement implements LinkProps {
+    @property({ type: String })
+    @validPropertyValues(componentSelector, variants, 'default')
+    public variant: LinkProps['variant'] = 'default';
+
+    @property({ type: String })
+    @validPropertyValues(componentSelector, sizes, 'medium')
+    public size: LinkProps['size'] = 'medium';
+
+    @property({ type: String, reflect: true })
+    public href?: string;
+
+    @property({ type: String, reflect: true })
+    public target?: string;
+
+    @property({ type: String, reflect: true })
+    public rel?: string;
+
+    @property({ type: Boolean })
+    public isBold = false;
+
+    @property({ type: Boolean })
+    public isStandalone = false;
+
     render () {
-        return html`<h1 data-test-id="pie-link">Hello world!</h1>`;
+        const {
+            variant, size, href, target, rel, isBold, isStandalone,
+        } = this;
+
+        return html`
+            <a  
+                data-test-id="pie-link"
+                class="c-link"
+                variant=${variant}
+                size=${size}
+                href=${ifDefined(href)}
+                target=${ifDefined(target)}
+                rel=${ifDefined(rel)}
+                ?isBold=${isBold}
+                ?isStandalone=${isStandalone}>
+                <slot></slot>
+            </a>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/link.scss

@@ -1 +1,47 @@
 @use '@justeattakeaway/pie-css/scss' as p;
+
+.c-link {
+    --link-font-family: var(--dt-font-interactive-m-family);
+    --link-font-size: #{p.font-size(--dt-font-size-16)};
+    --link-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
+    --link-font-weight: var(--dt-font-weight-regular);
+    --link-text-color: var(--dt-color-content-link);
+    --link-text-decoration: var(--dt-font-style-underline);
+
+    font-family: var(--link-font-family);
+    font-size: var(--link-font-size);
+    line-height: var(--link-line-height);
+    font-weight: var(--link-font-weight);
+    color: var(--link-text-color);
+    text-decoration: var(--link-text-decoration);
+    cursor: pointer;
+
+    &[variant='default'] {
+        /* Same as default styles */
+    }
+
+    &[variant='high-visibility'] {
+        --link-text-color: var(--dt-color-content-link-distinct);
+    }
+
+    &[variant='inverse'] {
+        --link-text-color: var(--dt-color-content-link-inverse);
+    }
+
+    &[size='small'] {
+        --link-font-size: #{p.font-size(--dt-font-size-14)};
+        --link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
+    }
+
+    &[size='medium'] {
+        /* Same as default styles */
+    }
+
+    &[isBold] {
+        --link-font-weight: var(--dt-font-weight-bold);
+    }
+
+    &[isStandalone] {
+        display: block;
+    }
+}

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

@@ -4,17 +4,25 @@ import { PieLink, LinkProps } from '@/index';
 
 const componentSelector = '[data-test-id="pie-link"]';
 
+const props: LinkProps = {
+    href: '#',
+    target: '_blank',
+};
+
 test.describe('PieLink - Component tests', () => {
-    test('should render successfully', async ({ mount, page }) => {
+    test('should be visible', async ({ mount, page }) => {
         // Arrange
         await mount(PieLink, {
-            props: {} as LinkProps,
+            props,
+            slots: { default: 'Link!' },
         });
 
         // Act
         const link = page.locator(componentSelector);
 
         // Assert
-        expect(link).toBeVisible();
+        await expect(link).toBeVisible();
+        await expect(link).toHaveAttribute('href', '#');
+        await expect(link).toHaveAttribute('target', '_blank');
     });
 });

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

@@ -1,14 +1,54 @@
 
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
-import { PieLink, LinkProps } 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, sizes } from '@/defs';
+import { PieLink } from '@/index';
 
-test.describe('PieLink - Visual tests`', () => {
-    test('should display the PieLink component successfully', async ({ page, mount }) => {
-        await mount(PieLink, {
-            props: {} as LinkProps,
-        });
+const props: PropObject = {
+    variant: variants,
+    size: sizes,
+    href: 'pie.design',
+    target: '_blank',
+    isBold: [true, false],
+    isStandalone: [true, false],
+};
 
-        await percySnapshot(page, 'PieLink - Visual Test');
+const renderTestPieLink = (propVals: WebComponentPropValues) => `<pie-link variant="${propVals.variant}" size="${propVals.size}" href="${propVals.href}" target="${propVals.target}" ${propVals.isBold ? 'isBold' : ''} ${propVals.isStandalone ? 'isStandalone' : ''} />`;
+
+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(PieLink, {});
+    await page.evaluate(() => {
+        const element : Element | null = document.querySelector('pie-link');
+        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, renderTestPieLink);
+        const propKeyValues = `size: ${testComponent.propValues.size}, isBold: ${testComponent.propValues.isBold}, isStandalone: ${testComponent.propValues.isStandalone}, href: ${testComponent.propValues.href}, target: ${testComponent.propValues.target}, target: ${testComponent.propValues.target}`;
+
+        await mount(
+            WebComponentTestWrapper,
+            { props: { propKeyValues, darkMode: variant === 'inverse' } },
+        );
+    }));
+
+    await percySnapshot(page, `PIE Link - Variant: ${variant}`);
+}));

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

@@ -1,3 +0,0 @@
-export interface LinkProps {
-}
-//# 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,SAAS;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,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"}