@justeattakeaway/pie-link 1.1.1 → 1.2.1

package/custom-elements.json

@@ -66,7 +66,7 @@
           "type": {
             "text": "DefaultProps"
           },
-          "default": "{\n    tag: 'a',\n    variant: 'default',\n    size: 'medium',\n    underline: 'default',\n    isBold: false,\n    isStandalone: false,\n    hasVisited: false,\n    iconPlacement: 'leading',\n    type: 'submit',\n}"
+          "default": "{\r\n    tag: 'a',\r\n    variant: 'default',\r\n    size: 'medium',\r\n    underline: 'default',\r\n    isBold: false,\r\n    isStandalone: false,\r\n    hasVisited: false,\r\n    iconPlacement: 'leading',\r\n    type: 'submit',\r\n}"
         }
       ],
       "exports": [
@@ -244,7 +244,7 @@
               "kind": "method",
               "name": "renderContent",
               "privacy": "private",
-              "description": "Renders the link content.\nIcons are only shown in block elements"
+              "description": "Renders the link content.\r\nIcons are only shown in block elements"
             },
             {
               "kind": "method",

package/dist/index.js

@@ -1,22 +1,16 @@
-import { LitElement as m, nothing as v, html as h, unsafeCSS as b } from "lit";
+import { LitElement as m, unsafeCSS as b, nothing as g, html as c } from "lit";
 import { property as o } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
-import { ifDefined as k } from "lit/directives/if-defined.js";
-import { validPropertyValues as d, defineCustomElement as x } from "@justeattakeaway/pie-webc-core";
-var z = Object.defineProperty, S = (c, e, i, g) => {
-  for (var r = void 0, s = c.length - 1, p; s >= 0; s--)
-    (p = c[s]) && (r = p(e, i, r) || r);
-  return r && z(e, i, r), r;
-};
-class y extends m {
-  constructor() {
-    super(...arguments), this.v = "1.1.1";
+import { classMap as y } from "lit/directives/class-map.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { validPropertyValues as s, safeCustomElement as x } from "@justeattakeaway/pie-webc-core";
+const h = class h extends m {
+  willUpdate() {
+    this.getAttribute("v") || this.setAttribute("v", h.v);
   }
-}
-S([
-  o({ type: String, reflect: !0 })
-], y.prototype, "v");
-const $ = "*,*: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)}", P = ["default", "high-visibility", "inverse"], w = ["small", "medium"], B = ["leading", "trailing"], V = ["a", "button"], C = ["submit", "button", "reset", "menu"], _ = ["default", "reversed"], n = {
+};
+h.v = "1.2.1";
+let u = h;
+const z = "*,*:after,*:before{box-sizing:inherit}:host{--link-font-weight: var(--dt-font-weight-regular);--link-text-color: var(--dt-color-content-link)}.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-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)}", S = ["default", "high-visibility", "inverse"], $ = ["small", "medium"], w = ["leading", "trailing"], P = ["a", "button"], B = ["submit", "button", "reset", "menu"], V = ["default", "reversed"], e = {
   tag: "a",
   variant: "default",
   size: "medium",
@@ -27,14 +21,15 @@ const $ = "*,*:after,*:before{box-sizing:inherit}.c-link{--link-font-family: var
   iconPlacement: "leading",
   type: "submit"
 };
-var j = Object.defineProperty, l = (c, e, i, g) => {
-  for (var r = void 0, s = c.length - 1, p; s >= 0; s--)
-    (p = c[s]) && (r = p(e, i, r) || r);
-  return r && j(e, i, r), r;
+var C = Object.defineProperty, O = Object.getOwnPropertyDescriptor, i = (l, n, k, p) => {
+  for (var r = p > 1 ? void 0 : p ? O(n, k) : n, v = l.length - 1, f; v >= 0; v--)
+    (f = l[v]) && (r = (p ? f(n, k, r) : f(r)) || r);
+  return p && r && C(n, k, r), r;
 };
-const a = "pie-link", f = class f extends y {
+const a = "pie-link";
+let t = class extends u {
   constructor() {
-    super(...arguments), this.tag = n.tag, this.variant = n.variant, this.size = n.size, this.underline = n.underline, this.iconPlacement = n.iconPlacement, this.isBold = n.isBold, this.isStandalone = n.isStandalone, this.hasVisited = n.hasVisited, this.type = n.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.
@@ -42,12 +37,12 @@ const a = "pie-link", f = class f extends y {
    * @private
    */
   renderContent() {
-    const { iconPlacement: e, isStandalone: i } = this;
-    return h`
+    const { iconPlacement: l, isStandalone: n } = this;
+    return c`
             <span class="c-link-content">
-                ${i && e === "leading" ? h`<slot name="icon"></slot>` : v}
+                ${n && l === "leading" ? c`<slot name="icon"></slot>` : g}
                 <slot></slot>
-                ${i && e === "trailing" ? h`<slot name="icon"></slot>` : v}
+                ${n && l === "trailing" ? c`<slot name="icon"></slot>` : g}
             </span>`;
   }
   /**
@@ -55,14 +50,14 @@ const a = "pie-link", f = class f extends y {
    *
    * @private
    */
-  renderButton(e) {
-    var i;
-    return h`
+  renderButton(l) {
+    var n;
+    return c`
             <button
                 data-test-id="pie-link-button"
-                class="${u(e)}"
+                class="${y(l)}"
                 type=${this.type}
-                aria-label=${k((i = this.aria) == null ? void 0 : i.label)}>
+                aria-label=${d((n = this.aria) == null ? void 0 : n.label)}>
                 ${this.renderContent()}
             </button>`;
   }
@@ -71,21 +66,21 @@ const a = "pie-link", f = class f extends y {
    *
    * @private
    */
-  renderAnchor(e) {
-    var i;
-    return h`
+  renderAnchor(l) {
+    var n;
+    return c`
             <a
                 data-test-id="pie-link-anchor"
-                class="${u(e)}"
-                href=${k(this.href)}
-                target=${k(this.target)}
-                rel=${k(this.rel)}
-                aria-label=${k((i = this.aria) == null ? void 0 : i.label)}>
+                class="${y(l)}"
+                href=${d(this.href)}
+                target=${d(this.target)}
+                rel=${d(this.rel)}
+                aria-label=${d((n = this.aria) == null ? void 0 : n.label)}>
                 ${this.renderContent()}
             </a>`;
   }
   render() {
-    const e = {
+    const l = {
       "c-link": !0,
       [`c-link--${this.variant}`]: !0,
       [`c-link--${this.size}`]: !0,
@@ -94,64 +89,65 @@ const a = "pie-link", f = class f extends y {
       "c-link--standalone": this.isStandalone,
       "c-link--hasVisited": this.hasVisited
     };
-    return this.tag === "button" ? this.renderButton(e) : this.renderAnchor(e);
+    return this.tag === "button" ? this.renderButton(l) : this.renderAnchor(l);
   }
 };
-f.styles = b($);
-let t = f;
-l([
+t.styles = b(z);
+i([
   o({ type: String }),
-  d(a, V, n.tag)
-], t.prototype, "tag");
-l([
+  s(a, P, e.tag)
+], t.prototype, "tag", 2);
+i([
   o({ type: String }),
-  d(a, P, n.variant)
-], t.prototype, "variant");
-l([
+  s(a, S, e.variant)
+], t.prototype, "variant", 2);
+i([
   o({ type: String }),
-  d(a, w, n.size)
-], t.prototype, "size");
-l([
+  s(a, $, e.size)
+], t.prototype, "size", 2);
+i([
   o({ type: String }),
-  d(a, _, n.underline)
-], t.prototype, "underline");
-l([
+  s(a, V, e.underline)
+], t.prototype, "underline", 2);
+i([
   o({ type: String }),
-  d(a, B, n.iconPlacement)
-], t.prototype, "iconPlacement");
-l([
+  s(a, w, e.iconPlacement)
+], t.prototype, "iconPlacement", 2);
+i([
   o({ type: String, reflect: !0 })
-], t.prototype, "href");
-l([
+], t.prototype, "href", 2);
+i([
   o({ type: String, reflect: !0 })
-], t.prototype, "target");
-l([
+], t.prototype, "target", 2);
+i([
   o({ type: String, reflect: !0 })
-], t.prototype, "rel");
-l([
+], t.prototype, "rel", 2);
+i([
   o({ type: Boolean })
-], t.prototype, "isBold");
-l([
+], t.prototype, "isBold", 2);
+i([
   o({ type: Boolean })
-], t.prototype, "isStandalone");
-l([
+], t.prototype, "isStandalone", 2);
+i([
   o({ type: Boolean })
-], t.prototype, "hasVisited");
-l([
+], t.prototype, "hasVisited", 2);
+i([
   o({ type: String }),
-  d(a, C, n.type)
-], t.prototype, "type");
-l([
+  s(a, B, e.type)
+], t.prototype, "type", 2);
+i([
   o({ type: Object })
-], t.prototype, "aria");
-x(a, t);
+], t.prototype, "aria", 2);
+t = i([
+  x("pie-link")
+], t);
 export {
   t as PieLink,
-  C as buttonTypes,
-  n as defaultProps,
-  B as iconPlacements,
-  w as sizes,
-  V as tags,
-  _ as underlineTypes,
-  P as variants
+  B as buttonTypes,
+  e as defaultProps,
+  w as iconPlacements,
+  $ as sizes,
+  P as tags,
+  V as underlineTypes,
+  S as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -39,15 +39,15 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.19.1",
+    "@justeattakeaway/pie-components-config": "0.20.1",
     "@justeattakeaway/pie-css": "0.16.0",
-    "@justeattakeaway/pie-icons-webc": "1.6.2",
-    "@justeattakeaway/pie-monorepo-utils": "0.5.0",
+    "@justeattakeaway/pie-icons-webc": "1.10.0",
+    "@justeattakeaway/pie-monorepo-utils": "0.5.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.3",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.25.1"
+    "@justeattakeaway/pie-webc-core": "0.26.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -5,7 +5,7 @@ import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElem
 import { property } from 'lit/decorators.js';
 import { classMap, type ClassInfo } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
+import { safeCustomElement, validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './link.scss?inline';
 import {
     type LinkProps,
@@ -29,6 +29,7 @@ const componentSelector = 'pie-link';
  * @slot - Default slot
  */
 
+@safeCustomElement('pie-link')
 export class PieLink extends PieElement implements LinkProps {
     @property({ type: String })
     @validPropertyValues(componentSelector, tags, defaultProps.tag)
@@ -146,8 +147,6 @@ export class PieLink extends PieElement implements LinkProps {
     static styles = unsafeCSS(styles);
 }
 
-defineCustomElement(componentSelector, PieLink);
-
 declare global {
     interface HTMLElementTagNameMap {
         [componentSelector]: PieLink;

package/src/link.scss

@@ -1,5 +1,9 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 
+:host {
+    --link-font-weight: var(--dt-font-weight-regular);
+    --link-text-color: var(--dt-color-content-link);
+}
 
 @mixin link-interactive-states($mode: 'default') {
     &:hover,
@@ -16,8 +20,6 @@
     --link-font-family: var(--dt-font-interactive-l-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);
     --link-icon-size: 16px;
     --link-icon-offset-top: var(--dt-spacing-a);