@justeattakeaway/pie-link 0.13.0 → 0.14.0

package/custom-elements.json

@@ -2,6 +2,12 @@
   "schemaVersion": "1.0.0",
   "readme": "",
   "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/defs-react.js",
+      "declarations": [],
+      "exports": []
+    },
     {
       "kind": "javascript-module",
       "path": "src/defs.js",

package/dist/index.d.ts

@@ -18,20 +18,20 @@ export declare interface LinkProps {
     /**
      * What HTML element the link should be such as a or button.
      */
-    tag: typeof tags[number];
+    tag?: typeof tags[number];
     /**
      * What style variant the link should be such as default, high-visibility or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * What size the link should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * 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];
+    underline?: typeof underlineTypes[number];
     /**
      * The URL that the hyperlink should point to
      */
@@ -47,15 +47,15 @@ export declare interface LinkProps {
     /**
      * When true, the link text will be bold.
      */
-    isBold: boolean;
+    isBold?: boolean;
     /**
      * When true, the link will be treated as a block element
      */
-    isStandalone: boolean;
+    isStandalone?: boolean;
     /**
      * When true, the link will apply the styles for the visited state',
      */
-    hasVisited: boolean;
+    hasVisited?: boolean;
     /**
      * 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)

package/dist/index.js

@@ -1,12 +1,12 @@
-import { unsafeCSS as u, LitElement as f, html as c, nothing as o } from "lit";
+import { unsafeCSS as v, LitElement as f, html as d, nothing as s } from "lit";
 import { property as i } from "lit/decorators.js";
 import { validPropertyValues as a, defineCustomElement as k } from "@justeattakeaway/pie-webc-core";
 const g = `.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)}
 `, y = ["default", "high-visibility", "inverse"], m = ["small", "medium"], b = ["leading", "trailing"], x = ["a", "button"], $ = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
-var z = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (p, e, s, d) => {
-  for (var r = d > 1 ? void 0 : d ? B(e, s) : e, h = p.length - 1, v; h >= 0; h--)
-    (v = p[h]) && (r = (d ? v(e, s, r) : v(r)) || r);
-  return d && r && z(e, s, r), r;
+var z = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (p, e, r, c) => {
+  for (var o = c > 1 ? void 0 : c ? B(e, r) : e, h = p.length - 1, u; h >= 0; h--)
+    (u = p[h]) && (o = (c ? u(e, r, o) : u(o)) || o);
+  return c && o && z(e, r, o), o;
 };
 const l = "pie-link";
 class t extends f {
@@ -19,12 +19,12 @@ class t extends f {
    * @private
    */
   renderContent() {
-    const { iconPlacement: e, isStandalone: s } = this;
-    return c`
+    const { iconPlacement: e, isStandalone: r } = this;
+    return d`
                 <span class="c-link-content">
-                    ${s && e === "leading" ? c`<slot name="icon"></slot>` : o}
+                    ${r && e === "leading" ? d`<slot name="icon"></slot>` : s}
                     <slot></slot>
-                    ${s && e === "trailing" ? c`<slot name="icon"></slot>` : o}
+                    ${r && e === "trailing" ? d`<slot name="icon"></slot>` : s}
                 </span>`;
   }
   /**
@@ -34,19 +34,19 @@ class t extends f {
    */
   renderButton() {
     var e;
-    return c`
+    return d`
             <button
                 data-test-id="pie-link"
                 class="c-link"
-                tag=${this.tag}
-                variant=${this.variant}
-                size=${this.size}
-                underline=${this.underline}
+                tag=${this.tag || "button"}
+                variant=${this.variant || "default"}
+                size=${this.size || "medium"}
+                underline=${this.underline || "default"}
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || o}
-                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
+                type=${this.type || "submit"}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || s}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -57,21 +57,21 @@ class t extends f {
    */
   renderAnchor() {
     var e;
-    return c`
+    return d`
             <a
                 data-test-id="pie-link"
                 class="c-link"
-                tag=${this.tag}
-                variant=${this.variant}
-                size=${this.size}
-                underline=${this.underline}
+                tag=${this.tag || "a"}
+                variant=${this.variant || "default"}
+                size=${this.size || "medium"}
+                underline=${this.underline || "default"}
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || o}
-                target=${this.target || o}
-                rel=${this.rel || o}
-                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
+                href=${this.href || ""}
+                target=${this.target || s}
+                rel=${this.rel || s}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || s}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -79,7 +79,7 @@ class t extends f {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-t.styles = u(g);
+t.styles = v(g);
 n([
   i(),
   a(l, x, "a")

package/dist/react.d.ts

@@ -1,6 +1,6 @@
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
-import type { ReactWebComponent } from '@lit/react';
+import * as React_2 from 'react';
 import type { TemplateResult } from 'lit';
 
 export declare type AriaProps = {
@@ -19,20 +19,20 @@ export declare interface LinkProps {
     /**
      * What HTML element the link should be such as a or button.
      */
-    tag: typeof tags[number];
+    tag?: typeof tags[number];
     /**
      * What style variant the link should be such as default, high-visibility or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * What size the link should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * 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];
+    underline?: typeof underlineTypes[number];
     /**
      * The URL that the hyperlink should point to
      */
@@ -48,15 +48,15 @@ export declare interface LinkProps {
     /**
      * When true, the link text will be bold.
      */
-    isBold: boolean;
+    isBold?: boolean;
     /**
      * When true, the link will be treated as a block element
      */
-    isStandalone: boolean;
+    isStandalone?: boolean;
     /**
      * When true, the link will apply the styles for the visited state',
      */
-    hasVisited: boolean;
+    hasVisited?: boolean;
     /**
      * 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)
@@ -68,7 +68,7 @@ export declare interface LinkProps {
     type?: typeof buttonTypes[number];
 }
 
-export declare const PieLink: ReactWebComponent<PieLink_2, {}>;
+export declare const PieLink: React_2.ForwardRefExoticComponent<LinkProps & React_2.RefAttributes<PieLink_2> & React_2.AnchorHTMLAttributes<HTMLAnchorElement> & React_2.ButtonHTMLAttributes<HTMLButtonElement>>;
 
 /**
  * @tagname pie-link

package/dist/react.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -32,12 +32,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeattakeaway/pie-components-config": "0.8.0",
-    "@justeattakeaway/pie-wrapper-react": "0.12.0",
+    "@justeattakeaway/pie-components-config": "0.9.0",
+    "@justeattakeaway/pie-wrapper-react": "0.13.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.16.0"
+    "@justeattakeaway/pie-webc-core": "0.17.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs-react.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>

package/src/defs.ts

@@ -17,20 +17,20 @@ export interface LinkProps {
     /**
      * What HTML element the link should be such as a or button.
      */
-    tag: typeof tags[number];
+    tag?: typeof tags[number];
     /**
      * What style variant the link should be such as default, high-visibility or inverse.
      */
-    variant: typeof variants[number];
+    variant?: typeof variants[number];
     /**
      * What size the link should be.
      */
-    size: typeof sizes[number];
+    size?: typeof sizes[number];
     /**
      * 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];
+    underline?: typeof underlineTypes[number];
     /**
      * The URL that the hyperlink should point to
      */
@@ -46,15 +46,15 @@ export interface LinkProps {
     /**
      * When true, the link text will be bold.
      */
-    isBold: boolean;
+    isBold?: boolean;
     /**
      * When true, the link will be treated as a block element
      */
-    isStandalone: boolean;
+    isStandalone?: boolean;
     /**
      * When true, the link will apply the styles for the visited state',
      */
-    hasVisited: boolean;
+    hasVisited?: boolean;
     /**
      * 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)

package/src/index.ts

@@ -97,14 +97,14 @@ export class PieLink extends LitElement implements LinkProps {
             <button
                 data-test-id="pie-link"
                 class="c-link"
-                tag=${this.tag}
-                variant=${this.variant}
-                size=${this.size}
-                underline=${this.underline}
+                tag=${this.tag || 'button'}
+                variant=${this.variant || 'default'}
+                size=${this.size || 'medium'}
+                underline=${this.underline || 'default'}
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || nothing}
+                type=${this.type || 'submit'}
                 aria-label=${this.aria?.label || nothing}>
                     ${this.renderContent()}
             </button>`;
@@ -120,14 +120,14 @@ export class PieLink extends LitElement implements LinkProps {
             <a
                 data-test-id="pie-link"
                 class="c-link"
-                tag=${this.tag}
-                variant=${this.variant}
-                size=${this.size}
-                underline=${this.underline}
+                tag=${this.tag || 'a'}
+                variant=${this.variant || 'default'}
+                size=${this.size || 'medium'}
+                underline=${this.underline || 'default'}
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || nothing}
+                href=${this.href || ''}
                 target=${this.target || nothing}
                 rel=${this.rel || nothing}
                 aria-label=${this.aria?.label || nothing}>

package/src/react.ts

@@ -1,14 +1,20 @@
-
 import * as React from 'react';
 import { createComponent } from '@lit/react';
-import { PieLink as PieLinkReact } from './index';
+import { PieLink as PieLinkLit } from './index';
+import { LinkProps } from './defs';
 
 export * from './defs';
 
-export const PieLink = createComponent({
+const PieLinkReact = createComponent({
     displayName: 'PieLink',
-    elementClass: PieLinkReact,
+    elementClass: PieLinkLit,
     react: React,
     tagName: 'pie-link',
     events: {},
 });
+
+type ReactBaseType = React.AnchorHTMLAttributes<HTMLAnchorElement> & React.ButtonHTMLAttributes<HTMLButtonElement>
+
+
+
+export const PieLink = PieLinkReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<LinkProps> & React.RefAttributes<PieLinkLit> & ReactBaseType>;