@justeattakeaway/pie-link 0.17.3 → 0.17.5

package/custom-elements.json

@@ -59,6 +59,14 @@
             "text": "['default', 'reversed']"
           },
           "default": "['default', 'reversed']"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultProps",
+          "type": {
+            "text": "DefaultProps"
+          },
+          "default": "{\n    tag: 'a',\n    variant: 'default',\n    size: 'medium',\n    underline: 'default',\n    iconPlacement: 'leading',\n    isBold: false,\n    isStandalone: false,\n    hasVisited: false,\n    type: 'submit',\n}"
         }
       ],
       "exports": [
@@ -109,6 +117,14 @@
             "name": "underlineTypes",
             "module": "src/defs.js"
           }
+        },
+        {
+          "kind": "js",
+          "name": "defaultProps",
+          "declaration": {
+            "name": "defaultProps",
+            "module": "src/defs.js"
+          }
         }
       ]
     },
@@ -138,7 +154,6 @@
                 "text": "LinkProps['tag']"
               },
               "privacy": "public",
-              "default": "'a'",
               "attribute": "tag"
             },
             {
@@ -148,7 +163,6 @@
                 "text": "LinkProps['variant']"
               },
               "privacy": "public",
-              "default": "'default'",
               "attribute": "variant"
             },
             {
@@ -158,7 +172,6 @@
                 "text": "LinkProps['size']"
               },
               "privacy": "public",
-              "default": "'medium'",
               "attribute": "size"
             },
             {
@@ -168,7 +181,6 @@
                 "text": "LinkProps['underline']"
               },
               "privacy": "public",
-              "default": "'default'",
               "attribute": "underline"
             },
             {
@@ -178,7 +190,6 @@
                 "text": "LinkProps['iconPlacement']"
               },
               "privacy": "public",
-              "default": "'leading'",
               "attribute": "iconPlacement"
             },
             {
@@ -214,31 +225,19 @@
             {
               "kind": "field",
               "name": "isBold",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isBold"
             },
             {
               "kind": "field",
               "name": "isStandalone",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "isStandalone"
             },
             {
               "kind": "field",
               "name": "hasVisited",
-              "type": {
-                "text": "boolean"
-              },
               "privacy": "public",
-              "default": "false",
               "attribute": "hasVisited"
             },
             {
@@ -248,7 +247,6 @@
                 "text": "LinkProps['type']"
               },
               "privacy": "public",
-              "default": "'submit'",
               "attribute": "type"
             },
             {
@@ -300,7 +298,6 @@
               "type": {
                 "text": "LinkProps['tag']"
               },
-              "default": "'a'",
               "fieldName": "tag"
             },
             {
@@ -308,7 +305,6 @@
               "type": {
                 "text": "LinkProps['variant']"
               },
-              "default": "'default'",
               "fieldName": "variant"
             },
             {
@@ -316,7 +312,6 @@
               "type": {
                 "text": "LinkProps['size']"
               },
-              "default": "'medium'",
               "fieldName": "size"
             },
             {
@@ -324,7 +319,6 @@
               "type": {
                 "text": "LinkProps['underline']"
               },
-              "default": "'default'",
               "fieldName": "underline"
             },
             {
@@ -332,7 +326,6 @@
               "type": {
                 "text": "LinkProps['iconPlacement']"
               },
-              "default": "'leading'",
               "fieldName": "iconPlacement"
             },
             {
@@ -358,26 +351,14 @@
             },
             {
               "name": "isBold",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isBold"
             },
             {
               "name": "isStandalone",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "isStandalone"
             },
             {
               "name": "hasVisited",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
               "fieldName": "hasVisited"
             },
             {
@@ -385,7 +366,6 @@
               "type": {
                 "text": "LinkProps['type']"
               },
-              "default": "'submit'",
               "fieldName": "type"
             },
             {

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit';
@@ -8,6 +9,10 @@ export declare type AriaProps = {
 
 export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<LinkProps, 'tag' | 'variant' | 'size' | 'underline' | 'iconPlacement' | 'isBold' | 'isStandalone' | 'hasVisited' | 'type'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const iconPlacements: readonly ["leading", "trailing"];
 
 export declare interface LinkProps {

package/dist/index.js

@@ -1,17 +1,27 @@
-import { unsafeCSS as f, LitElement as v, 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 = `*,*: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[tag=button]{outline:none;border:none;-webkit-user-select: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, 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;
+import { unsafeCSS as f, LitElement as k, html as c, nothing as s } from "lit";
+import { property as n } from "lit/decorators.js";
+import { validPropertyValues as d, defineCustomElement as g } from "@justeattakeaway/pie-webc-core";
+const y = `*,*: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[tag=button]{outline:none;border:none;-webkit-user-select: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)}
+`, m = ["default", "high-visibility", "inverse"], b = ["small", "medium"], x = ["leading", "trailing"], $ = ["a", "button"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"], t = {
+  tag: "a",
+  variant: "default",
+  size: "medium",
+  underline: "default",
+  iconPlacement: "leading",
+  isBold: !1,
+  isStandalone: !1,
+  hasVisited: !1,
+  type: "submit"
 };
-const l = "pie-link";
-class t extends v {
+var B = Object.defineProperty, P = Object.getOwnPropertyDescriptor, o = (h, i, a, p) => {
+  for (var l = p > 1 ? void 0 : p ? P(i, a) : i, u = h.length - 1, v; u >= 0; u--)
+    (v = h[u]) && (l = (p ? v(i, a, l) : v(l)) || l);
+  return p && l && B(i, a, l), l;
+};
+const r = "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";
+    super(...arguments), this.tag = t.tag, this.variant = t.variant, this.size = t.size, this.underline = t.underline, this.iconPlacement = t.iconPlacement, this.isBold = t.isBold, this.isStandalone = t.isStandalone, this.hasVisited = t.hasVisited, this.type = t.type;
   }
   /**
    * Renders the link content.
@@ -19,12 +29,12 @@ class t extends v {
    * @private
    */
   renderContent() {
-    const { iconPlacement: e, isStandalone: r } = this;
-    return d`
+    const { iconPlacement: i, isStandalone: a } = this;
+    return c`
                 <span class="c-link-content">
-                    ${r && e === "leading" ? d`<slot name="icon"></slot>` : s}
+                    ${a && i === "leading" ? c`<slot name="icon"></slot>` : s}
                     <slot></slot>
-                    ${r && e === "trailing" ? d`<slot name="icon"></slot>` : s}
+                    ${a && i === "trailing" ? c`<slot name="icon"></slot>` : s}
                 </span>`;
   }
   /**
@@ -33,8 +43,8 @@ class t extends v {
    * @private
    */
   renderButton() {
-    var e;
-    return d`
+    var i;
+    return c`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -46,7 +56,7 @@ class t extends v {
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
                 type=${this.type || "submit"}
-                aria-label=${((e = this.aria) == null ? void 0 : e.label) || s}>
+                aria-label=${((i = this.aria) == null ? void 0 : i.label) || s}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -56,8 +66,8 @@ class t extends v {
    * @private
    */
   renderAnchor() {
-    var e;
-    return d`
+    var i;
+    return c`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -71,7 +81,7 @@ class t extends v {
                 href=${this.href || ""}
                 target=${this.target || s}
                 rel=${this.rel || s}
-                aria-label=${((e = this.aria) == null ? void 0 : e.label) || s}>
+                aria-label=${((i = this.aria) == null ? void 0 : i.label) || s}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -79,59 +89,60 @@ class t extends v {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-t.styles = f(g);
-n([
-  i(),
-  a(l, x, "a")
-], t.prototype, "tag", 2);
-n([
-  i({ type: String }),
-  a(l, y, "default")
-], t.prototype, "variant", 2);
-n([
-  i({ type: String }),
-  a(l, m, "medium")
-], t.prototype, "size", 2);
-n([
-  i({ type: String }),
-  a(l, S, "default")
-], t.prototype, "underline", 2);
-n([
-  i({ type: String }),
-  a(l, b, "leading")
-], t.prototype, "iconPlacement", 2);
-n([
-  i({ type: String, reflect: !0 })
-], t.prototype, "href", 2);
-n([
-  i({ type: String, reflect: !0 })
-], t.prototype, "target", 2);
-n([
-  i({ type: String, reflect: !0 })
-], t.prototype, "rel", 2);
-n([
-  i({ type: Boolean })
-], t.prototype, "isBold", 2);
-n([
-  i({ type: Boolean })
-], t.prototype, "isStandalone", 2);
-n([
-  i({ type: Boolean })
-], t.prototype, "hasVisited", 2);
-n([
-  i(),
-  a(l, $, "submit")
-], t.prototype, "type", 2);
-n([
-  i({ type: Object })
-], t.prototype, "aria", 2);
-k(l, t);
+e.styles = f(y);
+o([
+  n(),
+  d(r, $, t.tag)
+], e.prototype, "tag", 2);
+o([
+  n({ type: String }),
+  d(r, m, t.variant)
+], e.prototype, "variant", 2);
+o([
+  n({ type: String }),
+  d(r, b, t.size)
+], e.prototype, "size", 2);
+o([
+  n({ type: String }),
+  d(r, S, t.underline)
+], e.prototype, "underline", 2);
+o([
+  n({ type: String }),
+  d(r, x, t.iconPlacement)
+], e.prototype, "iconPlacement", 2);
+o([
+  n({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+o([
+  n({ type: String, reflect: !0 })
+], e.prototype, "target", 2);
+o([
+  n({ type: String, reflect: !0 })
+], e.prototype, "rel", 2);
+o([
+  n({ type: Boolean })
+], e.prototype, "isBold", 2);
+o([
+  n({ type: Boolean })
+], e.prototype, "isStandalone", 2);
+o([
+  n({ type: Boolean })
+], e.prototype, "hasVisited", 2);
+o([
+  n(),
+  d(r, z, t.type)
+], e.prototype, "type", 2);
+o([
+  n({ type: Object })
+], e.prototype, "aria", 2);
+g(r, e);
 export {
-  t as PieLink,
-  $ as buttonTypes,
-  b as iconPlacements,
-  m as sizes,
-  x as tags,
+  e as PieLink,
+  z as buttonTypes,
+  t as defaultProps,
+  x as iconPlacements,
+  b as sizes,
+  $ as tags,
   S as underlineTypes,
-  y as variants
+  m as variants
 };

package/dist/react.d.ts

@@ -1,3 +1,4 @@
+import { ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
 import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import * as React_2 from 'react';
@@ -9,6 +10,10 @@ export declare type AriaProps = {
 
 export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
 
+export declare type DefaultProps = ComponentDefaultPropsGeneric<LinkProps, 'tag' | 'variant' | 'size' | 'underline' | 'iconPlacement' | 'isBold' | 'isStandalone' | 'hasVisited' | 'type'>;
+
+export declare const defaultProps: DefaultProps;
+
 export declare const iconPlacements: readonly ["leading", "trailing"];
 
 export declare interface LinkProps {

package/dist/react.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.17.3",
+  "version": "0.17.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -37,12 +37,12 @@
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
     "@justeattakeaway/pie-components-config": "0.16.0",
-    "@justeattakeaway/pie-icons-webc": "0.22.0",
+    "@justeattakeaway/pie-icons-webc": "0.24.0",
     "@justeattakeaway/pie-wrapper-react": "0.14.0",
     "cem-plugin-module-file-extensions": "0.0.5"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.21.1"
+    "@justeattakeaway/pie-webc-core": "0.23.0"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/defs.ts

@@ -1,3 +1,5 @@
+import { type ComponentDefaultPropsGeneric } from '@justeattakeaway/pie-webc-core';
+
 export const variants = ['default', 'high-visibility', 'inverse'] as const;
 export const sizes = ['small', 'medium'] as const;
 export const iconPlacements = ['leading', 'trailing'] as const;
@@ -65,3 +67,17 @@ export interface LinkProps {
      */
     type?: typeof buttonTypes[number];
 }
+
+export type DefaultProps = ComponentDefaultPropsGeneric<LinkProps, 'tag' | 'variant' | 'size' | 'underline' | 'iconPlacement' | 'isBold' | 'isStandalone' | 'hasVisited' | 'type'>;
+
+export const defaultProps: DefaultProps = {
+    tag: 'a',
+    variant: 'default',
+    size: 'medium',
+    underline: 'default',
+    iconPlacement: 'leading',
+    isBold: false,
+    isStandalone: false,
+    hasVisited: false,
+    type: 'submit',
+};

package/src/index.ts

@@ -13,6 +13,7 @@ import {
     buttonTypes,
     underlineTypes,
     type AriaProps,
+    defaultProps,
 } from './defs';
 
 // Valid values available to consumers
@@ -28,24 +29,24 @@ const componentSelector = 'pie-link';
 
 export class PieLink extends LitElement implements LinkProps {
     @property()
-    @validPropertyValues(componentSelector, tags, 'a')
-    public tag: LinkProps['tag'] = 'a';
+    @validPropertyValues(componentSelector, tags, defaultProps.tag)
+    public tag: LinkProps['tag'] = defaultProps.tag;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, variants, 'default')
-    public variant: LinkProps['variant'] = 'default';
+    @validPropertyValues(componentSelector, variants, defaultProps.variant)
+    public variant: LinkProps['variant'] = defaultProps.variant;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, sizes, 'medium')
-    public size: LinkProps['size'] = 'medium';
+    @validPropertyValues(componentSelector, sizes, defaultProps.size)
+    public size: LinkProps['size'] = defaultProps.size;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, underlineTypes, 'default')
-    public underline: LinkProps['underline'] = 'default';
+    @validPropertyValues(componentSelector, underlineTypes, defaultProps.underline)
+    public underline: LinkProps['underline'] = defaultProps.underline;
 
     @property({ type: String })
-    @validPropertyValues(componentSelector, iconPlacements, 'leading')
-    public iconPlacement: LinkProps['iconPlacement'] = 'leading';
+    @validPropertyValues(componentSelector, iconPlacements, defaultProps.iconPlacement)
+    public iconPlacement: LinkProps['iconPlacement'] = defaultProps.iconPlacement;
 
     @property({ type: String, reflect: true })
     public href?: string;
@@ -57,17 +58,17 @@ export class PieLink extends LitElement implements LinkProps {
     public rel?: string;
 
     @property({ type: Boolean })
-    public isBold = false;
+    public isBold = defaultProps.isBold;
 
     @property({ type: Boolean })
-    public isStandalone = false;
+    public isStandalone = defaultProps.isStandalone;
 
     @property({ type: Boolean })
-    public hasVisited = false;
+    public hasVisited = defaultProps.hasVisited;
 
     @property()
-    @validPropertyValues(componentSelector, buttonTypes, 'submit')
-    public type: LinkProps['type'] = 'submit';
+    @validPropertyValues(componentSelector, buttonTypes, defaultProps.type)
+    public type: LinkProps['type'] = defaultProps.type;
 
     @property({ type: Object })
     public aria!: AriaProps;