@justeattakeaway/pie-link 0.9.0 → 0.11.0

package/README.md

@@ -14,10 +14,8 @@
 2. [Installation](#installation)
 3. [Importing the component](#importing-the-component)
 4. [Peer Dependencies](#peer-dependencies)
-5. [Local Development](#local-development)
-6. [Props](#props)
-7. [Testing](#testing)
-
+5. [Props](#props)
+6. [Contributing](#contributing)
 
 ## pie-link
 
@@ -57,31 +55,6 @@ import { PieLink } from '@justeattakeaway/pie-link/dist/react';
 > [!IMPORTANT]
 > When using `pie-link`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
 
-
-## Local development
-
-Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
-
-```bash
-yarn
-```
-
-To build the `pie-link` package, run the following command:
-
-```bash
-yarn build --filter=pie-link
-```
-
-If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
-
-```bash
-yarn watch --filter=pie-link
-
-# in a separate terminal tab, run
-yarn dev --filter=pie-storybook
-```
-
-
 ## Props
 
 | Property      | Type        | Default       | Description                                                                                          |
@@ -132,36 +105,6 @@ We recommend using `pie-icons-webc` when using the `icon` slot. Here is an examp
 </pie-link>
 ```
 
-## Testing
-
-### Browser tests
-
-To run the browser tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:browsers --filter=pie-link
-```
-
-### Visual tests
-
-To run the visual regression tests, run the following command from the root of the monorepo:
-
-```bash
-yarn test:visual --filter=pie-link
-```
-
-Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
-
-#### Setup via bash
-
-```bash
-export PERCY_TOKEN_PIE_LINK=abcde
-```
+## Contributing
 
-#### Setup via package.json
-
-Under scripts `test:visual` replace the environment variable with the below:
-
-```bash
-PERCY_TOKEN_PIE_LINK=abcde
-```
+Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).

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;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"], $ = ["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.9.0",
+  "version": "0.11.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 {