@justeattakeaway/pie-link 0.4.0 → 0.6.0

package/README.md

@@ -62,7 +62,7 @@ import { PieLink } from '@justeattakeaway/pie-link/dist/react';
 | tag           | `String`  | `a`         | The rendered HTML element of the link, one of `tags` – `a`, `button`                        |
 | variant       | `String`  | `default`   | Variant of the link, one of `variants` – `default`, `high-visibility`, `inverse`         |
 | size          | `String`  | `medium`    | Size of the link, one of `sizes` – `medium`, `small`                                          |
-| underline          | `String`  | `default`    | The underline behavior of the link, one of `underlineTypes` – `default`, `reversed`                                          |
+| underline          | `String`  | `default`    | The underline behavior of the link, one of `underlineTypes` – `default`, `reversed`. The `reverse` type can only be used if `isStandalone` is set to `true`                                          |
 | href          | `String`  | `undefined` | Native html `href` attribute                                                                       |
 | rel           | `String`  | `undefined` | Native html `rel` attribute                                                                        |
 | target        | `String`  | `undefined` | Native html `target` attribute                                                                     |
@@ -70,7 +70,7 @@ import { PieLink } from '@justeattakeaway/pie-link/dist/react';
 | isBold        | `Boolean` | `false`     | If `true`, sets the link text bold                                                                 |
 | isStandalone  | `Boolean` | `false`     | If `true`, sets the link as a block element                                                        |
 | hasVisited    | `Boolean` | `false`     | If `true`, the link will apply the styles for the visited state                                    |
-| iconPlacement | `String`  | `leading`   | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` |
+| iconPlacement | `String`  | `leading`   | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing`. Can only be used if `isStandalone` is `true` |
 | aria | `object` | `undefined` | The ARIA labels used for the link. |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-link` component:

package/dist/index.d.ts

@@ -28,7 +28,8 @@ export declare interface LinkProps {
      */
     size: typeof sizes[number];
     /**
-     * What underline behavior the link should have such as default or reversed
+     * Defines what underline behavior the link should have, such as default or reversed.
+     * The `reversed` type can only be used if the link is a block element (isStandalone = true)
      */
     underline: typeof underlineTypes[number];
     /**
@@ -56,7 +57,8 @@ export declare interface LinkProps {
      */
     hasVisited: boolean;
     /**
-     * The placement of the icon slot, if provided, such as leading or trailing
+     * The placement of the icon slot, if provided, such as leading or trailing.
+     * Will only apply if the link is a block element (isStandalone = true)
      */
     iconPlacement?: typeof iconPlacements[number];
     /**
@@ -85,7 +87,7 @@ export declare class PieLink extends LitElement implements LinkProps {
     aria: AriaProps;
     /**
      * Renders the link content.
-     *
+     * Icons are only shown in block elements
      * @private
      */
     private renderContent;

package/dist/index.js

@@ -1,45 +1,44 @@
-import { unsafeCSS as g, LitElement as k, html as u, nothing as s } from "lit";
+import { unsafeCSS as k, LitElement as g, html as v, nothing as a } from "lit";
 import { property as i } from "lit/decorators.js";
-import "lit/decorators/property.js";
-const d = (h, t, c) => function(o, r) {
-  const l = `#${r}`;
-  Object.defineProperty(o, r, {
+const d = (p, t, o) => function(r, s) {
+  const l = `#${s}`;
+  Object.defineProperty(r, s, {
     get() {
       return this[l];
     },
-    set(v) {
+    set(u) {
       const f = this[l];
-      t.includes(v) ? this[l] = v : (console.error(
-        `<${h}> Invalid value "${v}" provided for property "${r}".`,
+      t.includes(u) ? this[l] = u : (console.error(
+        `<${p}> Invalid value "${u}" provided for property "${s}".`,
         `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${c}"`
-      ), this[l] = c), this.requestUpdate(r, f);
+        `Falling back to default value: "${o}"`
+      ), this[l] = o), this.requestUpdate(s, f);
     }
   });
-}, 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;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[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)}.c-link[underline=default]:hover,.c-link[underline=default]:active,.c-link[underline=reversed]{--link-text-decoration: none}.c-link[underline=reversed]:hover,.c-link[underline=reversed]: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{box-shadow:0 0 0 2px 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(--dt-spacing-a);height:var(--link-icon-size);width:var(--link-icon-size)}
-`, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], $ = ["leading", "trailing"], x = ["a", "button"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
-var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (h, t, c, p) => {
-  for (var o = p > 1 ? void 0 : p ? P(t, c) : t, r = h.length - 1, l; r >= 0; r--)
-    (l = h[r]) && (o = (p ? l(t, c, o) : l(o)) || o);
-  return p && o && B(t, c, o), o;
+}, 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 a = "pie-link";
-class e extends k {
+const c = "pie-link";
+class e extends g {
   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";
   }
   /**
    * Renders the link content.
-   *
+   * Icons are only shown in block elements
    * @private
    */
   renderContent() {
-    const { iconPlacement: t } = this;
-    return u`
+    const { iconPlacement: t, isStandalone: o } = this;
+    return v`
                 <span class="c-link-content">
-                    ${t === "leading" ? u`<slot name="icon"></slot>` : s}
+                    ${o && t === "leading" ? v`<slot name="icon"></slot>` : a}
                     <slot></slot>
-                    ${t === "trailing" ? u`<slot name="icon"></slot>` : s}
+                    ${o && t === "trailing" ? v`<slot name="icon"></slot>` : a}
                 </span>`;
   }
   /**
@@ -49,7 +48,7 @@ class e extends k {
    */
   renderButton() {
     var t;
-    return u`
+    return v`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -60,8 +59,8 @@ class e extends k {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || s}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || s}>
+                type=${this.type || a}
+                aria-label=${((t = this.aria) == null ? void 0 : t.label) || a}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -72,7 +71,7 @@ class e extends k {
    */
   renderAnchor() {
     var t;
-    return u`
+    return v`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -83,10 +82,10 @@ class e extends k {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || s}
-                target=${this.target || s}
-                rel=${this.rel || s}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || s}>
+                href=${this.href || a}
+                target=${this.target || a}
+                rel=${this.rel || a}
+                aria-label=${((t = this.aria) == null ? void 0 : t.label) || a}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -94,26 +93,26 @@ class e extends k {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-e.styles = g(y);
+e.styles = k(y);
 n([
   i(),
-  d(a, x, "a")
+  d(c, x, "a")
 ], e.prototype, "tag", 2);
 n([
   i({ type: String }),
-  d(a, m, "default")
+  d(c, m, "default")
 ], e.prototype, "variant", 2);
 n([
   i({ type: String }),
-  d(a, b, "medium")
+  d(c, b, "medium")
 ], e.prototype, "size", 2);
 n([
   i({ type: String }),
-  d(a, S, "default")
+  d(c, z, "default")
 ], e.prototype, "underline", 2);
 n([
   i({ type: String }),
-  d(a, $, "leading")
+  d(c, $, "leading")
 ], e.prototype, "iconPlacement", 2);
 n([
   i({ type: String, reflect: !0 })
@@ -135,18 +134,18 @@ n([
 ], e.prototype, "hasVisited", 2);
 n([
   i(),
-  d(a, z, "submit")
+  d(c, S, "submit")
 ], e.prototype, "type", 2);
 n([
   i({ type: Object })
 ], e.prototype, "aria", 2);
-customElements.define(a, e);
+customElements.define(c, e);
 export {
   e as PieLink,
-  z as buttonTypes,
+  S as buttonTypes,
   $ as iconPlacements,
   b as sizes,
   x as tags,
-  S as underlineTypes,
+  z as underlineTypes,
   m as variants
 };

package/dist/react.d.ts

@@ -29,7 +29,8 @@ export declare interface LinkProps {
      */
     size: typeof sizes[number];
     /**
-     * What underline behavior the link should have such as default or reversed
+     * Defines what underline behavior the link should have, such as default or reversed.
+     * The `reversed` type can only be used if the link is a block element (isStandalone = true)
      */
     underline: typeof underlineTypes[number];
     /**
@@ -57,7 +58,8 @@ export declare interface LinkProps {
      */
     hasVisited: boolean;
     /**
-     * The placement of the icon slot, if provided, such as leading or trailing
+     * The placement of the icon slot, if provided, such as leading or trailing.
+     * Will only apply if the link is a block element (isStandalone = true)
      */
     iconPlacement?: typeof iconPlacements[number];
     /**
@@ -88,7 +90,7 @@ declare class PieLink_2 extends LitElement implements LinkProps {
     aria: AriaProps;
     /**
      * Renders the link content.
-     *
+     * Icons are only shown in block elements
      * @private
      */
     private renderContent;

package/dist/react.js

@@ -1,30 +1,29 @@
 import * as L from "react";
 import { PieLink as g } from "./index.js";
-import { buttonTypes as D, iconPlacements as G, sizes as O, tags as S, underlineTypes as _, variants as z } from "./index.js";
+import { buttonTypes as j, iconPlacements as D, sizes as G, tags as O, underlineTypes as S, variants as _ } from "./index.js";
 import "lit";
 import "lit/decorators.js";
-import "lit/decorators/property.js";
 /**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), P = (p, l, d, m, h) => {
+const E = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), w = /* @__PURE__ */ new WeakMap(), P = (d, l, p, m, h) => {
   const n = h == null ? void 0 : h[l];
-  n === void 0 || d === m ? d == null && l in HTMLElement.prototype ? p.removeAttribute(l) : p[l] = d : ((s, t, u) => {
+  n === void 0 || p === m ? p == null && l in HTMLElement.prototype ? d.removeAttribute(l) : d[l] = p : ((s, t, u) => {
     let o = w.get(s);
     o === void 0 && w.set(s, o = /* @__PURE__ */ new Map());
     let a = o.get(t);
     u !== void 0 ? a === void 0 ? (o.set(t, a = { handleEvent: u }), s.addEventListener(t, a)) : a.handleEvent = u : a !== void 0 && (o.delete(t), s.removeEventListener(t, a));
-  })(p, n, d);
+  })(d, n, p);
 };
-function b(p = window.React, l, d, m, h) {
+function b(d = window.React, l, p, m, h) {
   let n, s, t;
   if (l === void 0) {
-    const r = p;
+    const r = d;
     ({ tagName: s, elementClass: t, events: m, displayName: h } = r), n = r.react;
   } else
-    n = p, t = d, s = l;
+    n = d, t = p, s = l;
   const u = n.Component, o = n.createElement, a = new Set(Object.keys(m ?? {}));
   class f extends u {
     constructor() {
@@ -58,7 +57,7 @@ function b(p = window.React, l, d, m, h) {
   const N = n.forwardRef((r, e) => o(f, { ...r, _$Gl: e }, r == null ? void 0 : r.children));
   return N.displayName = f.displayName, N;
 }
-const T = b({
+const R = b({
   displayName: "PieLink",
   elementClass: g,
   react: L,
@@ -66,11 +65,11 @@ const T = b({
   events: {}
 });
 export {
-  T as PieLink,
-  D as buttonTypes,
-  G as iconPlacements,
-  O as sizes,
-  S as tags,
-  _ as underlineTypes,
-  z as variants
+  R as PieLink,
+  j as buttonTypes,
+  D as iconPlacements,
+  G as sizes,
+  O as tags,
+  S as underlineTypes,
+  _ as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "JustEatTakeaway.com - Design System Web Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "workspace:*"
+    "@justeattakeaway/pie-components-config": "0.4.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "workspace:*"
+    "@justeattakeaway/pie-webc-core": "0.9.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -27,7 +27,8 @@ export interface LinkProps {
      */
     size: typeof sizes[number];
     /**
-     * What underline behavior the link should have such as default or reversed
+     * Defines what underline behavior the link should have, such as default or reversed.
+     * The `reversed` type can only be used if the link is a block element (isStandalone = true)
      */
     underline: typeof underlineTypes[number];
     /**
@@ -55,7 +56,8 @@ export interface LinkProps {
      */
     hasVisited: boolean;
     /**
-     * The placement of the icon slot, if provided, such as leading or trailing
+     * The placement of the icon slot, if provided, such as leading or trailing.
+     * Will only apply if the link is a block element (isStandalone = true)
      */
     iconPlacement?: typeof iconPlacements[number];
     /**

package/src/index.ts

@@ -5,8 +5,14 @@ import { property } from 'lit/decorators.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './link.scss?inline';
 import {
-    LinkProps, variants, sizes, iconPlacements,
-    tags, buttonTypes, underlineTypes, type AriaProps,
+    LinkProps,
+    variants,
+    sizes,
+    iconPlacements,
+    tags,
+    buttonTypes,
+    underlineTypes,
+    type AriaProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -67,16 +73,16 @@ export class PieLink extends LitElement implements LinkProps {
 
     /**
      * Renders the link content.
-     *
+     * Icons are only shown in block elements
      * @private
      */
     private renderContent (): TemplateResult {
-        const { iconPlacement } = this;
+        const { iconPlacement, isStandalone } = this;
         return html`
                 <span class="c-link-content">
-                    ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                    ${isStandalone && iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
                     <slot></slot>
-                    ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+                    ${isStandalone && iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
                 </span>`;
     }
 

package/src/link.scss

@@ -20,6 +20,7 @@
     --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);
@@ -30,6 +31,9 @@
     text-decoration: var(--link-text-decoration);
     cursor: pointer;
 
+    @include link-interactive-states('default');
+
+
     &[tag='a'] {
         /* Same as default styles */
     }
@@ -57,6 +61,7 @@
     &[size='small'] {
         --link-font-size: #{p.font-size(--dt-font-size-14)};
         --link-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
+        --link-icon-offset-top: 2px;
     }
 
     &[size='medium'] {
@@ -65,11 +70,9 @@
 
     &[underline='default'] {
         /* Same as default styles */
-
-        @include link-interactive-states('default');
     }
 
-    &[underline='reversed'] {
+    &[underline='reversed'][isStandalone] {
         --link-text-decoration: none;
 
         @include link-interactive-states('reversed');
@@ -92,7 +95,9 @@
     }
 
     &:focus-visible {
-        box-shadow: 0 0 0 2px var(--dt-color-focus-outer);
+        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);
     }
 }
 
@@ -104,7 +109,7 @@
 ::slotted(.c-pieIcon),
 ::slotted(svg) {
     display: inline-flex;
-    margin-block-start: var(--dt-spacing-a);
+    margin-block-start: var(--link-icon-offset-top);
     height: var(--link-icon-size);
     width: var(--link-icon-size);
 }