@justeattakeaway/pie-link 0.8.0 → 0.10.0

package/dist/index.d.ts

@@ -68,6 +68,7 @@ export declare interface LinkProps {
 }
 
 /**
+ * @tagname pie-link
  * @slot icon - The icon slot
  * @slot - Default slot
  */

package/dist/index.js

@@ -1,29 +1,33 @@
-import { unsafeCSS as k, LitElement as g, html as v, nothing as a } from "lit";
+import { unsafeCSS as g, LitElement as k, html as u, nothing as c } from "lit";
 import { property as i } from "lit/decorators.js";
-const d = (p, t, o) => function(r, s) {
-  const l = `#${s}`;
-  Object.defineProperty(r, s, {
+const p = (o, t, s) => function(r, l) {
+  const a = `#${l}`;
+  Object.defineProperty(r, l, {
     get() {
-      return this[l];
+      return this[a];
     },
-    set(u) {
-      const f = this[l];
-      t.includes(u) ? this[l] = u : (console.error(
-        `<${p}> Invalid value "${u}" provided for property "${s}".`,
+    set(f) {
+      const v = this[a];
+      t.includes(f) ? this[a] = f : (console.error(
+        `<${o}> Invalid value "${f}" provided for property "${l}".`,
         `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${o}"`
-      ), this[l] = o), this.requestUpdate(s, f);
+        `Falling back to default value: "${s}"`
+      ), this[a] = s), this.requestUpdate(l, v);
     }
   });
-}, y = `.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);--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[tag=button]{outline:none;border:none;user-select:none;background:transparent;padding:0}.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);--link-icon-offset-top: 2px}.c-link[underline=reversed][isStandalone]{--link-text-decoration: none}.c-link[underline=reversed][isStandalone]:hover,.c-link[underline=reversed][isStandalone]:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block}.c-link[hasVisited]:visited{color:var(--dt-color-content-link-visited)}.c-link[hasVisited]:visited[variant=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)}.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)}
-`, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], $ = ["leading", "trailing"], x = ["a", "button"], S = ["submit", "button", "reset", "menu"], z = ["default", "reversed"];
-var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (p, t, o, h) => {
-  for (var r = h > 1 ? void 0 : h ? P(t, o) : t, s = p.length - 1, l; s >= 0; s--)
-    (l = p[s]) && (r = (h ? l(t, o, r) : l(r)) || r);
-  return h && r && B(t, o, r), r;
 };
-const c = "pie-link";
-class e extends g {
+function y(o, t) {
+  customElements.get(o) ? console.warn(`PIE Web Component: "${o}" has already been defined. Please ensure the component is only being defined once in your application.`) : customElements.define(o, t);
+}
+const m = `.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);--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[tag=button]{outline:none;border:none;user-select:none;background:transparent;padding:0}.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);--link-icon-offset-top: 2px}.c-link[underline=reversed][isStandalone]{--link-text-decoration: none}.c-link[underline=reversed][isStandalone]:hover,.c-link[underline=reversed][isStandalone]:active{--link-text-decoration: var(--dt-font-style-underline)}.c-link[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block;width:fit-content}.c-link[hasVisited]:visited{color:var(--dt-color-content-link-visited)}.c-link[hasVisited]:visited[variant=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)}.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)}
+`, b = ["default", "high-visibility", "inverse"], $ = ["small", "medium"], x = ["leading", "trailing"], z = ["a", "button"], S = ["submit", "button", "reset", "menu"], P = ["default", "reversed"];
+var B = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (o, t, s, h) => {
+  for (var r = h > 1 ? void 0 : h ? w(t, s) : t, l = o.length - 1, a; l >= 0; l--)
+    (a = o[l]) && (r = (h ? a(t, s, r) : a(r)) || r);
+  return h && r && B(t, s, r), r;
+};
+const d = "pie-link";
+class e extends k {
   constructor() {
     super(...arguments), this.tag = "a", this.variant = "default", this.size = "medium", this.underline = "default", this.iconPlacement = "leading", this.isBold = !1, this.isStandalone = !1, this.hasVisited = !1, this.type = "submit";
   }
@@ -33,12 +37,12 @@ class e extends g {
    * @private
    */
   renderContent() {
-    const { iconPlacement: t, isStandalone: o } = this;
-    return v`
+    const { iconPlacement: t, isStandalone: s } = this;
+    return u`
                 <span class="c-link-content">
-                    ${o && t === "leading" ? v`<slot name="icon"></slot>` : a}
+                    ${s && t === "leading" ? u`<slot name="icon"></slot>` : c}
                     <slot></slot>
-                    ${o && t === "trailing" ? v`<slot name="icon"></slot>` : a}
+                    ${s && t === "trailing" ? u`<slot name="icon"></slot>` : c}
                 </span>`;
   }
   /**
@@ -48,7 +52,7 @@ class e extends g {
    */
   renderButton() {
     var t;
-    return v`
+    return u`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -59,8 +63,8 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || a}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || a}>
+                type=${this.type || c}
+                aria-label=${((t = this.aria) == null ? void 0 : t.label) || c}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -71,7 +75,7 @@ class e extends g {
    */
   renderAnchor() {
     var t;
-    return v`
+    return u`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -82,10 +86,10 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || a}
-                target=${this.target || a}
-                rel=${this.rel || a}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || a}>
+                href=${this.href || c}
+                target=${this.target || c}
+                rel=${this.rel || c}
+                aria-label=${((t = this.aria) == null ? void 0 : t.label) || c}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -93,26 +97,26 @@ class e extends g {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-e.styles = k(y);
+e.styles = g(m);
 n([
   i(),
-  d(c, x, "a")
+  p(d, z, "a")
 ], e.prototype, "tag", 2);
 n([
   i({ type: String }),
-  d(c, m, "default")
+  p(d, b, "default")
 ], e.prototype, "variant", 2);
 n([
   i({ type: String }),
-  d(c, b, "medium")
+  p(d, $, "medium")
 ], e.prototype, "size", 2);
 n([
   i({ type: String }),
-  d(c, z, "default")
+  p(d, P, "default")
 ], e.prototype, "underline", 2);
 n([
   i({ type: String }),
-  d(c, $, "leading")
+  p(d, x, "leading")
 ], e.prototype, "iconPlacement", 2);
 n([
   i({ type: String, reflect: !0 })
@@ -134,18 +138,18 @@ n([
 ], e.prototype, "hasVisited", 2);
 n([
   i(),
-  d(c, S, "submit")
+  p(d, S, "submit")
 ], e.prototype, "type", 2);
 n([
   i({ type: Object })
 ], e.prototype, "aria", 2);
-customElements.define(c, e);
+y(d, e);
 export {
   e as PieLink,
   S as buttonTypes,
-  $ as iconPlacements,
-  b as sizes,
-  x as tags,
-  z as underlineTypes,
-  m as variants
+  x as iconPlacements,
+  $ as sizes,
+  z as tags,
+  P as underlineTypes,
+  b as variants
 };

package/dist/react.d.ts

@@ -71,6 +71,7 @@ export declare interface LinkProps {
 export declare const PieLink: ReactWebComponent<PieLink_2, {}>;
 
 /**
+ * @tagname pie-link
  * @slot icon - The icon slot
  * @slot - Default slot
  */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.8.0",
+  "version": "0.10.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -31,7 +31,7 @@
     "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.10.0"
+    "@justeattakeaway/pie-webc-core": "0.11.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/index.ts

@@ -2,7 +2,7 @@ import {
     html, LitElement, unsafeCSS, nothing, TemplateResult,
 } from 'lit';
 import { property } from 'lit/decorators.js';
-import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
+import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
 import styles from './link.scss?inline';
 import {
     LinkProps,
@@ -21,6 +21,7 @@ export * from './defs';
 const componentSelector = 'pie-link';
 
 /**
+ * @tagname pie-link
  * @slot icon - The icon slot
  * @slot - Default slot
  */
@@ -144,7 +145,7 @@ export class PieLink extends LitElement implements LinkProps {
     static styles = unsafeCSS(styles);
 }
 
-customElements.define(componentSelector, PieLink);
+defineCustomElement(componentSelector, PieLink);
 
 declare global {
     interface HTMLElementTagNameMap {

package/src/link.scss

@@ -84,6 +84,7 @@
 
     &[isStandalone] {
         display: block;
+        width: fit-content;
     }
 
     &[hasVisited]:visited {