@justeattakeaway/pie-link 0.0.0 → 0.2.0

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.d.ts

@@ -0,0 +1,52 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { TemplateResult } from 'lit-html';
+
+export declare 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;
+}
+
+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(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export declare const sizes: readonly ["small", "medium"];
+
+export declare const variants: readonly ["default", "high-visibility", "inverse"];
+
+export { }

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.d.ts

@@ -0,0 +1,55 @@
+import type { CSSResult } from 'lit';
+import type { LitElement } from 'lit';
+import type { ReactWebComponent } from '@lit-labs/react';
+import type { TemplateResult } from 'lit-html';
+
+export declare 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;
+}
+
+export declare const PieLink: ReactWebComponent<PieLink_2, {}>;
+
+declare class PieLink_2 extends LitElement implements LinkProps {
+    variant: LinkProps['variant'];
+    size: LinkProps['size'];
+    href?: string;
+    target?: string;
+    rel?: string;
+    isBold: boolean;
+    isStandalone: boolean;
+    render(): TemplateResult<1>;
+    static styles: CSSResult;
+}
+
+export declare const sizes: readonly ["small", "medium"];
+
+export declare const variants: readonly ["default", "high-visibility", "inverse"];
+
+export { }

package/dist/react.js

@@ -1,5 +1,9 @@
 import { PieLink as Lr } from "./index.js";
+import { sizes as Zr, variants as en } 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];
@@ -30,7 +34,7 @@ var Ve = { exports: {} }, p = {};
  * LICENSE file in the root directory of this source tree.
  */
 var Ct;
-function Mr() {
+function xr() {
   if (Ct)
     return p;
   Ct = 1;
@@ -72,8 +76,8 @@ function Mr() {
     if (b === 1)
       v.children = d;
     else if (1 < b) {
-      for (var E = Array(b), M = 0; M < b; M++)
-        E[M] = arguments[M + 2];
+      for (var E = Array(b), x = 0; x < b; x++)
+        E[x] = arguments[x + 2];
       v.children = E;
     }
     if (r && r.defaultProps)
@@ -117,8 +121,8 @@ function Mr() {
           }
       }
     if (S)
-      return S = r, v = v(S), r = h === "" ? "." + se(S, 0) : h, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(M) {
-        return M;
+      return S = r, v = v(S), r = h === "" ? "." + se(S, 0) : h, Q(v) ? (d = "", r != null && (d = r.replace(ve, "$&/") + "/"), ne(v, u, d, "", function(x) {
+        return x;
       })) : v != null && (ie(v) && (v = pe(v, d + (!v.key || S && S.key === v.key ? "" : ("" + v.key).replace(ve, "$&/") + "/") + r)), u.push(v)), 1;
     if (S = 0, h = h === "" ? "." : h + ":", Q(r))
       for (var b = 0; b < r.length; b++) {
@@ -187,8 +191,8 @@ function Mr() {
       h.children = d;
     else if (1 < E) {
       b = Array(E);
-      for (var M = 0; M < E; M++)
-        b[M] = arguments[M + 2];
+      for (var x = 0; x < E; x++)
+        b[x] = arguments[x + 2];
       h.children = b;
     }
     return { $$typeof: g, type: r.type, key: v, ref: _, props: h, _owner: S };
@@ -258,7 +262,7 @@ var de = { exports: {} };
  */
 de.exports;
 var St;
-function xr() {
+function Mr() {
   return St || (St = 1, function(g, c) {
     process.env.NODE_ENV !== "production" && function() {
       typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
@@ -428,11 +432,11 @@ function xr() {
       function E() {
       }
       E.prototype = v.prototype;
-      function M(e, t, n) {
+      function x(e, t, n) {
         this.props = e, this.context = t, this.refs = h, this.updater = n || u;
       }
-      var Te = M.prototype = new E();
-      Te.constructor = M, d(Te, v.prototype), Te.isPureReactComponent = !0;
+      var Te = x.prototype = new E();
+      Te.constructor = x, d(Te, v.prototype), Te.isPureReactComponent = !0;
       function Tt() {
         var e = {
           current: null
@@ -624,7 +628,7 @@ function xr() {
         var n = je(e.type, t, e.ref, e._self, e._source, e._owner, e.props);
         return n;
       }
-      function Mt(e, t, n) {
+      function xt(e, t, n) {
         if (e == null)
           throw new Error("React.cloneElement(...): The argument must be a React element, but you passed " + e + ".");
         var a, o = d({}, e.props), s = e.key, i = e.ref, l = e._self, y = e._source, m = e._owner;
@@ -648,7 +652,7 @@ function xr() {
       function ae(e) {
         return typeof e == "object" && e !== null && e.$$typeof === k;
       }
-      var Ke = ".", xt = ":";
+      var Ke = ".", Mt = ":";
       function Ut(e) {
         var t = /[=:]/g, n = {
           "=": "=0",
@@ -705,7 +709,7 @@ function xr() {
             )), t.push(y));
           return 1;
         }
-        var w, C, O = 0, $ = a === "" ? Ke : a + xt;
+        var w, C, O = 0, $ = a === "" ? Ke : a + Mt;
         if (he(e))
           for (var Oe = 0; Oe < e.length; Oe++)
             w = e[Oe], C = $ + Ae(w, Oe), O += ge(w, t, n, C, o);
@@ -956,7 +960,7 @@ Your code should look like:
         }
         return n;
       }
-      function x() {
+      function M() {
         var e = K.current;
         return e === null && f(`Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
 1. You might have mismatching versions of React and the renderer (such as React DOM)
@@ -965,7 +969,7 @@ Your code should look like:
 See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`), e;
       }
       function Xt(e) {
-        var t = x();
+        var t = M();
         if (e._context !== void 0) {
           var n = e._context;
           n.Consumer === e ? f("Calling useContext(Context.Consumer) is not supported, may cause bugs, and will be removed in a future major release. Did you mean to call useContext(Context) instead?") : n.Provider === e && f("Calling useContext(Context.Provider) is not supported. Did you mean to call useContext(Context) instead?");
@@ -973,61 +977,61 @@ See https://reactjs.org/link/invalid-hook-call for tips about how to debug and f
         return t.useContext(e);
       }
       function Zt(e) {
-        var t = x();
+        var t = M();
         return t.useState(e);
       }
       function er(e, t, n) {
-        var a = x();
+        var a = M();
         return a.useReducer(e, t, n);
       }
       function tr(e) {
-        var t = x();
+        var t = M();
         return t.useRef(e);
       }
       function rr(e, t) {
-        var n = x();
+        var n = M();
         return n.useEffect(e, t);
       }
       function nr(e, t) {
-        var n = x();
+        var n = M();
         return n.useInsertionEffect(e, t);
       }
       function ar(e, t) {
-        var n = x();
+        var n = M();
         return n.useLayoutEffect(e, t);
       }
       function or(e, t) {
-        var n = x();
+        var n = M();
         return n.useCallback(e, t);
       }
       function ur(e, t) {
-        var n = x();
+        var n = M();
         return n.useMemo(e, t);
       }
       function ir(e, t, n) {
-        var a = x();
+        var a = M();
         return a.useImperativeHandle(e, t, n);
       }
       function sr(e, t) {
         {
-          var n = x();
+          var n = M();
           return n.useDebugValue(e, t);
         }
       }
       function cr() {
-        var e = x();
+        var e = M();
         return e.useTransition();
       }
       function fr(e) {
-        var t = x();
+        var t = M();
         return t.useDeferredValue(e);
       }
       function lr() {
-        var e = x();
+        var e = M();
         return e.useId();
       }
       function dr(e, t, n) {
-        var a = x();
+        var a = M();
         return a.useSyncExternalStore(e, t, n);
       }
       var le = 0, tt, rt, nt, at, ot, ut, it;
@@ -1383,7 +1387,7 @@ Check the top-level render call using <` + n + ">.");
         }), t;
       }
       function Cr(e, t, n) {
-        for (var a = Mt.apply(this, arguments), o = 2; o < arguments.length; o++)
+        for (var a = xt.apply(this, arguments), o = 2; o < arguments.length; o++)
           yt(arguments[o], a.type);
         return ht(a), a;
       }
@@ -1425,7 +1429,7 @@ Check the top-level render call using <` + n + ">.");
           try {
             if (j.isBatchingLegacy = !0, a = e(), !n && j.didScheduleLegacyUpdate) {
               var o = j.current;
-              o !== null && (j.didScheduleLegacyUpdate = !1, xe(o));
+              o !== null && (j.didScheduleLegacyUpdate = !1, Me(o));
             }
           } catch (C) {
             throw Se(t), C;
@@ -1450,7 +1454,7 @@ Check the top-level render call using <` + n + ">.");
             var y = a;
             if (Se(t), ue === 0) {
               var m = j.current;
-              m !== null && (xe(m), j.current = null);
+              m !== null && (Me(m), j.current = null);
               var R = {
                 then: function(C, O) {
                   j.current === null ? (j.current = [], Fe(y, C, O)) : C(y);
@@ -1476,7 +1480,7 @@ Check the top-level render call using <` + n + ">.");
           var a = j.current;
           if (a !== null)
             try {
-              xe(a), Or(function() {
+              Me(a), Or(function() {
                 a.length === 0 ? (j.current = null, t(e)) : Fe(e, t, n);
               });
             } catch (o) {
@@ -1486,10 +1490,10 @@ Check the top-level render call using <` + n + ">.");
             t(e);
         }
       }
-      var Me = !1;
-      function xe(e) {
-        if (!Me) {
-          Me = !0;
+      var xe = !1;
+      function Me(e) {
+        if (!xe) {
+          xe = !0;
           var t = 0;
           try {
             for (; t < e.length; t++) {
@@ -1502,7 +1506,7 @@ Check the top-level render call using <` + n + ">.");
           } catch (a) {
             throw e = e.slice(t + 1), a;
           } finally {
-            Me = !1;
+            xe = !1;
           }
         }
       }
@@ -1513,11 +1517,11 @@ Check the top-level render call using <` + n + ">.");
         toArray: zt,
         only: Bt
       };
-      c.Children = Ar, c.Component = v, c.Fragment = T, c.Profiler = I, c.PureComponent = M, c.StrictMode = V, c.Suspense = H, c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = q, c.cloneElement = Pr, c.createContext = Ht, c.createElement = Tr, c.createFactory = jr, c.createRef = Tt, c.forwardRef = Qt, c.isValidElement = ae, c.lazy = Kt, c.memo = Jt, c.startTransition = Sr, c.unstable_act = kr, c.useCallback = or, c.useContext = Xt, c.useDebugValue = sr, c.useDeferredValue = fr, c.useEffect = rr, c.useId = lr, c.useImperativeHandle = ir, c.useInsertionEffect = nr, c.useLayoutEffect = ar, c.useMemo = ur, c.useReducer = er, c.useRef = tr, c.useState = Zt, c.useSyncExternalStore = dr, c.useTransition = cr, c.version = U, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
+      c.Children = Ar, c.Component = v, c.Fragment = T, c.Profiler = I, c.PureComponent = x, c.StrictMode = V, c.Suspense = H, c.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = q, c.cloneElement = Pr, c.createContext = Ht, c.createElement = Tr, c.createFactory = jr, c.createRef = Tt, c.forwardRef = Qt, c.isValidElement = ae, c.lazy = Kt, c.memo = Jt, c.startTransition = Sr, c.unstable_act = kr, c.useCallback = or, c.useContext = Xt, c.useDebugValue = sr, c.useDeferredValue = fr, c.useEffect = rr, c.useId = lr, c.useImperativeHandle = ir, c.useInsertionEffect = nr, c.useLayoutEffect = ar, c.useMemo = ur, c.useReducer = er, c.useRef = tr, c.useState = Zt, c.useSyncExternalStore = dr, c.useTransition = cr, c.version = U, typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ < "u" && typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop == "function" && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
     }();
   }(de, de.exports)), de.exports;
 }
-process.env.NODE_ENV === "production" ? Ve.exports = Mr() : Ve.exports = xr();
+process.env.NODE_ENV === "production" ? Ve.exports = xr() : Ve.exports = Mr();
 var kt = Ve.exports;
 const Ur = /* @__PURE__ */ Fr(kt), Vr = /* @__PURE__ */ Nr({
   __proto__: null,
@@ -1577,7 +1581,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 +1589,7 @@ const qr = zr({
   events: {}
 });
 export {
-  qr as PieLink
+  Qr as PieLink,
+  Zr as sizes,
+  en as variants
 };

package/package.json

@@ -1,11 +1,16 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.0.0",
+  "version": "0.2.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-link && run -T vite build",
     "lint:scripts": "run -T eslint .",

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,57 @@
 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,
-};
+export * from './defs';
 
 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/.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 @@
-[8:54:51 PM] @custom-elements-manifest/analyzer: Created new manifest.
-react wrapper has been added!
-vite v4.3.9 building for production...
-transforming...
-✓ 12 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
-
-[vite:dts] Start generate declaration files...
-✓ built in 11.55s
-[vite:dts] Declaration files built in 10712ms.
-

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export * from './src/index'

package/dist/types/react.d.ts

@@ -1 +0,0 @@
-export * from './src/react'

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

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

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"}

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

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

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

@@ -1 +0,0 @@
-{"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/playwright/index.html

@@ -1,56 +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;
-        }
-
-        #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-link.spec.ts

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

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

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

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

@@ -1,14 +0,0 @@
-
-import { test } from '@sand4rt/experimental-ct-web';
-import percySnapshot from '@percy/playwright';
-import { PieLink, LinkProps } from '@/index';
-
-test.describe('PieLink - Visual tests`', () => {
-    test('should display the PieLink component successfully', async ({ page, mount }) => {
-        await mount(PieLink, {
-            props: {} as LinkProps,
-        });
-
-        await percySnapshot(page, 'PieLink - Visual Test');
-    });
-});

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;