@justeattakeaway/pie-link 0.18.0 → 0.18.2

package/dist/index.js

@@ -1,10 +1,9 @@
-import { unsafeCSS as y, LitElement as g, html as c, nothing as v } from "lit";
-import { property as i } from "lit/decorators.js";
+import { LitElement as y, html as c, nothing as v, unsafeCSS as g } from "lit";
+import { property as n } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { ifDefined as d } from "lit/directives/if-defined.js";
 import { validPropertyValues as a, defineCustomElement as m } from "@justeattakeaway/pie-webc-core";
-const b = `*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var(--dt-font-interactive-l-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);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;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:hover,.c-link:active{--link-text-decoration: none}.c-link.c-link--high-visibility{--link-text-color: var(--dt-color-content-link-distinct)}.c-link.c-link--inverse{--link-text-color: var(--dt-color-content-link-inverse)}.c-link.c-link--small{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link.c-link--underline-reversed.c-link--standalone{--link-text-decoration: none}.c-link.c-link--underline-reversed.c-link--standalone:hover,.c-link.c-link--underline-reversed.c-link--standalone:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link.c-link--bold{--link-font-weight: var(--dt-font-weight-bold)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.c-link--hasVisited:visited{color:var(--dt-color-content-link-visited)}.c-link.c-link--hasVisited:visited.c-link--inverse{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}button.c-link{outline:none;border:none;-webkit-user-select:none;user-select:none;background:transparent;padding:0}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}
-`, x = ["default", "high-visibility", "inverse"], z = ["small", "medium"], S = ["leading", "trailing"], P = ["a", "button"], $ = ["submit", "button", "reset", "menu"], w = ["default", "reversed"], t = {
+const b = "*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var(--dt-font-interactive-l-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);--link-icon-size: 16px;--link-icon-offset-top: var(--dt-spacing-a);display:inline-block;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:hover,.c-link:active{--link-text-decoration: none}.c-link.c-link--high-visibility{--link-text-color: var(--dt-color-content-link-distinct)}.c-link.c-link--inverse{--link-text-color: var(--dt-color-content-link-inverse)}.c-link.c-link--small{--link-font-size: calc(var(--dt-font-size-14) * 1px);--link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--link-icon-offset-top: 2px}.c-link.c-link--underline-reversed.c-link--standalone{--link-text-decoration: none}.c-link.c-link--underline-reversed.c-link--standalone:hover,.c-link.c-link--underline-reversed.c-link--standalone:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link.c-link--bold{--link-font-weight: var(--dt-font-weight-bold)}.c-link.c-link--standalone{display:block;width:fit-content}.c-link.c-link--hasVisited:visited{color:var(--dt-color-content-link-visited)}.c-link.c-link--hasVisited:visited.c-link--inverse{color:var(--dt-color-content-link-visited-inverse)}.c-link:focus-visible{outline:none;border-radius:2px;box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer)}button.c-link{outline:none;border:none;-webkit-user-select:none;user-select:none;background:transparent;padding:0}.c-link-content{display:flex;gap:var(--dt-spacing-a)}::slotted(.c-pieIcon),::slotted(svg){display:inline-flex;margin-block-start:var(--link-icon-offset-top);height:var(--link-icon-size);width:var(--link-icon-size)}", x = ["default", "high-visibility", "inverse"], z = ["small", "medium"], S = ["leading", "trailing"], $ = ["a", "button"], w = ["submit", "button", "reset", "menu"], B = ["default", "reversed"], e = {
   tag: "a",
   variant: "default",
   size: "medium",
@@ -15,15 +14,14 @@ const b = `*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var
   iconPlacement: "leading",
   type: "submit"
 };
-var B = Object.defineProperty, V = Object.getOwnPropertyDescriptor, o = (h, n, l, p) => {
-  for (var r = p > 1 ? void 0 : p ? V(n, l) : n, k = h.length - 1, f; k >= 0; k--)
-    (f = h[k]) && (r = (p ? f(n, l, r) : f(r)) || r);
-  return p && r && B(n, l, r), r;
+var P = Object.defineProperty, i = (h, o, l, V) => {
+  for (var s = void 0, p = h.length - 1, f; p >= 0; p--)
+    (f = h[p]) && (s = f(o, l, s) || s);
+  return s && P(o, l, s), s;
 };
-const s = "pie-link";
-class e extends g {
+const r = "pie-link", k = class k extends y {
   constructor() {
-    super(...arguments), this.tag = t.tag, this.variant = t.variant, this.size = t.size, this.underline = t.underline, this.iconPlacement = t.iconPlacement, this.isBold = t.isBold, this.isStandalone = t.isStandalone, this.hasVisited = t.hasVisited, this.type = t.type;
+    super(...arguments), this.tag = e.tag, this.variant = e.variant, this.size = e.size, this.underline = e.underline, this.iconPlacement = e.iconPlacement, this.isBold = e.isBold, this.isStandalone = e.isStandalone, this.hasVisited = e.hasVisited, this.type = e.type;
   }
   /**
    * Renders the link content.
@@ -31,12 +29,12 @@ class e extends g {
    * @private
    */
   renderContent() {
-    const { iconPlacement: n, isStandalone: l } = this;
+    const { iconPlacement: o, isStandalone: l } = this;
     return c`
             <span class="c-link-content">
-                ${l && n === "leading" ? c`<slot name="icon"></slot>` : v}
+                ${l && o === "leading" ? c`<slot name="icon"></slot>` : v}
                 <slot></slot>
-                ${l && n === "trailing" ? c`<slot name="icon"></slot>` : v}
+                ${l && o === "trailing" ? c`<slot name="icon"></slot>` : v}
             </span>`;
   }
   /**
@@ -44,12 +42,12 @@ class e extends g {
    *
    * @private
    */
-  renderButton(n) {
+  renderButton(o) {
     var l;
     return c`
             <button
                 data-test-id="pie-link"
-                class="${u(n)}"
+                class="${u(o)}"
                 type=${this.type}
                 aria-label=${d((l = this.aria) == null ? void 0 : l.label)}>
                 ${this.renderContent()}
@@ -60,12 +58,12 @@ class e extends g {
    *
    * @private
    */
-  renderAnchor(n) {
+  renderAnchor(o) {
     var l;
     return c`
             <a
                 data-test-id="pie-link"
-                class="${u(n)}"
+                class="${u(o)}"
                 href=${d(this.href)}
                 target=${d(this.target)}
                 rel=${d(this.rel)}
@@ -74,7 +72,7 @@ class e extends g {
             </a>`;
   }
   render() {
-    const n = {
+    const o = {
       "c-link": !0,
       [`c-link--${this.variant}`]: !0,
       [`c-link--${this.size}`]: !0,
@@ -83,63 +81,64 @@ class e extends g {
       "c-link--standalone": this.isStandalone,
       "c-link--hasVisited": this.hasVisited
     };
-    return this.tag === "button" ? this.renderButton(n) : this.renderAnchor(n);
+    return this.tag === "button" ? this.renderButton(o) : this.renderAnchor(o);
   }
-}
-e.styles = y(b);
-o([
-  i(),
-  a(s, P, t.tag)
-], e.prototype, "tag", 2);
-o([
-  i({ type: String }),
-  a(s, x, t.variant)
-], e.prototype, "variant", 2);
-o([
-  i({ type: String }),
-  a(s, z, t.size)
-], e.prototype, "size", 2);
-o([
-  i({ type: String }),
-  a(s, w, t.underline)
-], e.prototype, "underline", 2);
-o([
-  i({ type: String }),
-  a(s, S, t.iconPlacement)
-], e.prototype, "iconPlacement", 2);
-o([
-  i({ type: String, reflect: !0 })
-], e.prototype, "href", 2);
-o([
-  i({ type: String, reflect: !0 })
-], e.prototype, "target", 2);
-o([
-  i({ type: String, reflect: !0 })
-], e.prototype, "rel", 2);
-o([
-  i({ type: Boolean })
-], e.prototype, "isBold", 2);
-o([
-  i({ type: Boolean })
-], e.prototype, "isStandalone", 2);
-o([
-  i({ type: Boolean })
-], e.prototype, "hasVisited", 2);
-o([
-  i({ type: String }),
-  a(s, $, t.type)
-], e.prototype, "type", 2);
-o([
-  i({ type: Object })
-], e.prototype, "aria", 2);
-m(s, e);
+};
+k.styles = g(b);
+let t = k;
+i([
+  n(),
+  a(r, $, e.tag)
+], t.prototype, "tag");
+i([
+  n({ type: String }),
+  a(r, x, e.variant)
+], t.prototype, "variant");
+i([
+  n({ type: String }),
+  a(r, z, e.size)
+], t.prototype, "size");
+i([
+  n({ type: String }),
+  a(r, B, e.underline)
+], t.prototype, "underline");
+i([
+  n({ type: String }),
+  a(r, S, e.iconPlacement)
+], t.prototype, "iconPlacement");
+i([
+  n({ type: String, reflect: !0 })
+], t.prototype, "href");
+i([
+  n({ type: String, reflect: !0 })
+], t.prototype, "target");
+i([
+  n({ type: String, reflect: !0 })
+], t.prototype, "rel");
+i([
+  n({ type: Boolean })
+], t.prototype, "isBold");
+i([
+  n({ type: Boolean })
+], t.prototype, "isStandalone");
+i([
+  n({ type: Boolean })
+], t.prototype, "hasVisited");
+i([
+  n({ type: String }),
+  a(r, w, e.type)
+], t.prototype, "type");
+i([
+  n({ type: Object })
+], t.prototype, "aria");
+m(r, t);
 export {
-  e as PieLink,
-  $ as buttonTypes,
-  t as defaultProps,
+  t as PieLink,
+  w as buttonTypes,
+  e as defaultProps,
   S as iconPlacements,
   z as sizes,
-  P as tags,
-  w as underlineTypes,
+  $ as tags,
+  B as underlineTypes,
   x as variants
 };

package/dist/react.js

@@ -1,26 +1,21 @@
 import * as e from "react";
 import { createComponent as t } from "@lit/react";
 import { PieLink as i } from "./index.js";
-import { buttonTypes as f, defaultProps as L, iconPlacements as d, sizes as u, tags as y, underlineTypes as g, variants as v } from "./index.js";
-import "lit";
-import "lit/decorators.js";
-import "lit/directives/class-map.js";
-import "lit/directives/if-defined.js";
-import "@justeattakeaway/pie-webc-core";
-const o = t({
+import { buttonTypes as p, defaultProps as c, iconPlacements as l, sizes as P, tags as k, underlineTypes as f, variants as L } from "./index.js";
+const n = t({
   displayName: "PieLink",
   elementClass: i,
   react: e,
   tagName: "pie-link",
   events: {}
-}), l = o;
+}), s = n;
 export {
-  l as PieLink,
-  f as buttonTypes,
-  L as defaultProps,
-  d as iconPlacements,
-  u as sizes,
-  y as tags,
-  g as underlineTypes,
-  v as variants
+  s as PieLink,
+  p as buttonTypes,
+  c as defaultProps,
+  l as iconPlacements,
+  P as sizes,
+  k as tags,
+  f as underlineTypes,
+  L as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,13 +37,13 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
-    "@justeattakeaway/pie-css": "0.12.1",
-    "@justeattakeaway/pie-icons-webc": "0.25.1",
-    "@justeattakeaway/pie-wrapper-react": "0.14.1",
+    "@justeattakeaway/pie-css": "0.13.1",
+    "@justeattakeaway/pie-icons-webc": "0.25.3",
+    "@justeattakeaway/pie-wrapper-react": "0.14.2",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.24.0"
+    "@justeattakeaway/pie-webc-core": "0.24.2"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/react.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createComponent } from '@lit/react';
 import { PieLink as PieLinkLit } from './index';
-import { LinkProps } from './defs';
+import { type LinkProps } from './defs';
 
 export * from './defs';