@justeattakeaway/pie-link 0.5.0 → 0.7.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,44 +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";
-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>`;
   }
   /**
@@ -48,7 +48,7 @@ class e extends k {
    */
   renderButton() {
     var t;
-    return u`
+    return v`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -59,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>`;
   }
@@ -71,7 +71,7 @@ class e extends k {
    */
   renderAnchor() {
     var t;
-    return u`
+    return v`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -82,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>`;
   }
@@ -93,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 })
@@ -134,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -25,15 +25,18 @@
     "test:visual": "run -T cross-env-shell PERCY_TOKEN=${PERCY_TOKEN_PIE_LINK} percy exec --allowed-hostname cloudfront.net -- npx playwright test -c ./playwright-lit-visual.config.ts",
     "test:visual:ci": "yarn test:visual"
   },
-  "author": "JustEatTakeaway.com - Design System Web Team",
+  "author": "Just Eat Takeaway.com - Design System 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.1"
   },
   "volta": {
     "extends": "../../../package.json"
-  }
+  },
+  "sideEffects": [
+    "dist/*.js"
+  ]
 }

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

@@ -73,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);
 }