@justeattakeaway/pie-link 0.11.2 → 0.12.0

package/README.md

@@ -8,15 +8,6 @@
   </a>
 </p>
 
-# Table of Contents
-
-1. [Introduction](#pie-link)
-2. [Installation](#installation)
-3. [Importing the component](#importing-the-component)
-4. [Peer Dependencies](#peer-dependencies)
-5. [Props](#props)
-6. [Contributing](#contributing)
-
 ## pie-link
 
 `pie-link` is a Web Component built using the Lit library.
@@ -36,89 +27,14 @@ $ npm i @justeattakeaway/pie-link
 $ yarn add @justeattakeaway/pie-link
 ```
 
-For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
-
-
-### Importing the component
-
-#### JavaScript
-```js
-// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
-import { PieLink } from '@justeattakeaway/pie-link';
-
-// If you don't need to reference the imported object, you can simply
-// import the module which registers the component as a custom element.
-import '@justeattakeaway/pie-link';
-```
-
-#### React
-```js
-// React
-// For React, you will need to import our React-specific component build
-// which wraps the web component using ​@lit/react
-import { PieLink } from '@justeattakeaway/pie-link/dist/react';
-```
-
-> [!NOTE]
-> When using the React version of the component, please make sure to also
-> include React as a [peer dependency](#peer-dependencies) in your project.
-
-
-## Peer Dependencies
-
-> [!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.
-
-## Props
-
-| Property      | Type      | Default     | Description                                                                                          |
-| ------------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------- |
-| 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 behaviour 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                                                                     |
-| type          | `String`  | `submit`    | Native html `type` attribute if the tag is set to `button`                                       |
-| 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`. 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:
-
-```html
-<!-- Native HTML -->
-<pie-link></pie-link>
-
-<!-- JSX -->
-<PieLink></PieLink>
-```
-
-## Slots
+## Documentation
 
-| Slot         | Description                                                                                                                                                                                                                |
-| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Default slot | The default slot is used to pass text into the link component.                                                                                                                                                             |
-| icon         | Used to pass in an icon to the link component. The icon placement can be controlled via the `iconPlacement` prop and we recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
+Visit  [Link | PIE Design System](https://pie.design/components/link/overview) to view more information on this component.
 
-### Using `pie-icons-webc` with the `pie-link` icon slot
+## Questions
 
-We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
-
-```html
-<!--
-  Note that pie-link and the icons that you want to use will need to be imported as components into your application.
-  See the `pie-icons-webc` README for more info on importing these icons.
--->
-<pie-link>
-    <icon-plus-circle slot="icon"></icon-plus-circle>
-    Search
-</pie-link>
-```
+Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
 
 ## Contributing
 
-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).
+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.js

@@ -1,33 +1,15 @@
-import { unsafeCSS as v, LitElement as g, html as u, nothing as l } from "lit";
+import { unsafeCSS as u, LitElement as f, html as c, nothing as o } from "lit";
 import { property as i } from "lit/decorators.js";
-const p = (o, t, r) => function(s, a) {
-  const c = `#${a}`;
-  Object.defineProperty(s, a, {
-    get() {
-      return this[c];
-    },
-    set(f) {
-      t.includes(f) ? this[c] = f : (console.error(
-        `<${o}> Invalid value "${f}" provided for property "${a}".`,
-        `Must be one of: ${t.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), this[c] = r);
-    },
-    configurable: !0
-  });
+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;
 };
-function k(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 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"], z = ["submit", "button", "reset", "menu"], S = ["default", "reversed"];
-var P = Object.defineProperty, B = Object.getOwnPropertyDescriptor, n = (o, t, r, h) => {
-  for (var s = h > 1 ? void 0 : h ? B(t, r) : t, a = o.length - 1, c; a >= 0; a--)
-    (c = o[a]) && (s = (h ? c(t, r, s) : c(s)) || s);
-  return h && s && P(t, r, s), s;
-};
-const d = "pie-link";
-class e extends g {
+const l = "pie-link";
+class t extends f {
   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";
   }
@@ -37,12 +19,12 @@ class e extends g {
    * @private
    */
   renderContent() {
-    const { iconPlacement: t, isStandalone: r } = this;
-    return u`
+    const { iconPlacement: e, isStandalone: s } = this;
+    return c`
                 <span class="c-link-content">
-                    ${r && t === "leading" ? u`<slot name="icon"></slot>` : l}
+                    ${s && e === "leading" ? c`<slot name="icon"></slot>` : o}
                     <slot></slot>
-                    ${r && t === "trailing" ? u`<slot name="icon"></slot>` : l}
+                    ${s && e === "trailing" ? c`<slot name="icon"></slot>` : o}
                 </span>`;
   }
   /**
@@ -51,8 +33,8 @@ class e extends g {
    * @private
    */
   renderButton() {
-    var t;
-    return u`
+    var e;
+    return c`
             <button
                 data-test-id="pie-link"
                 class="c-link"
@@ -63,8 +45,8 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                type=${this.type || l}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
+                type=${this.type || o}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
                     ${this.renderContent()}
             </button>`;
   }
@@ -74,8 +56,8 @@ class e extends g {
    * @private
    */
   renderAnchor() {
-    var t;
-    return u`
+    var e;
+    return c`
             <a
                 data-test-id="pie-link"
                 class="c-link"
@@ -86,10 +68,10 @@ class e extends g {
                 ?isBold=${this.isBold}
                 ?isStandalone=${this.isStandalone}
                 ?hasVisited=${this.hasVisited}
-                href=${this.href || l}
-                target=${this.target || l}
-                rel=${this.rel || l}
-                aria-label=${((t = this.aria) == null ? void 0 : t.label) || l}>
+                href=${this.href || o}
+                target=${this.target || o}
+                rel=${this.rel || o}
+                aria-label=${((e = this.aria) == null ? void 0 : e.label) || o}>
                     ${this.renderContent()}
             </a>`;
   }
@@ -97,59 +79,59 @@ class e extends g {
     return this.tag === "button" ? this.renderButton() : this.renderAnchor();
   }
 }
-e.styles = v(y);
+t.styles = u(g);
 n([
   i(),
-  p(d, x, "a")
-], e.prototype, "tag", 2);
+  a(l, x, "a")
+], t.prototype, "tag", 2);
 n([
   i({ type: String }),
-  p(d, m, "default")
-], e.prototype, "variant", 2);
+  a(l, y, "default")
+], t.prototype, "variant", 2);
 n([
   i({ type: String }),
-  p(d, b, "medium")
-], e.prototype, "size", 2);
+  a(l, m, "medium")
+], t.prototype, "size", 2);
 n([
   i({ type: String }),
-  p(d, S, "default")
-], e.prototype, "underline", 2);
+  a(l, S, "default")
+], t.prototype, "underline", 2);
 n([
   i({ type: String }),
-  p(d, $, "leading")
-], e.prototype, "iconPlacement", 2);
+  a(l, b, "leading")
+], t.prototype, "iconPlacement", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "href", 2);
+], t.prototype, "href", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "target", 2);
+], t.prototype, "target", 2);
 n([
   i({ type: String, reflect: !0 })
-], e.prototype, "rel", 2);
+], t.prototype, "rel", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "isBold", 2);
+], t.prototype, "isBold", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "isStandalone", 2);
+], t.prototype, "isStandalone", 2);
 n([
   i({ type: Boolean })
-], e.prototype, "hasVisited", 2);
+], t.prototype, "hasVisited", 2);
 n([
   i(),
-  p(d, z, "submit")
-], e.prototype, "type", 2);
+  a(l, $, "submit")
+], t.prototype, "type", 2);
 n([
   i({ type: Object })
-], e.prototype, "aria", 2);
-k(d, e);
+], t.prototype, "aria", 2);
+k(l, t);
 export {
-  e as PieLink,
-  z as buttonTypes,
-  $ as iconPlacements,
-  b as sizes,
+  t as PieLink,
+  $ as buttonTypes,
+  b as iconPlacements,
+  m as sizes,
   x as tags,
   S as underlineTypes,
-  m as variants
+  y as variants
 };

package/dist/react.js

@@ -1,10 +1,11 @@
 import * as e from "react";
 import { createComponent as i } from "@lit/react";
 import { PieLink as t } from "./index.js";
-import { buttonTypes as c, iconPlacements as l, sizes as k, tags as P, underlineTypes as f, variants as L } 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 "lit";
 import "lit/decorators.js";
-const m = i({
+import "@justeattakeaway/pie-webc-core";
+const s = i({
   displayName: "PieLink",
   elementClass: t,
   react: e,
@@ -12,11 +13,11 @@ const m = i({
   events: {}
 });
 export {
-  m as PieLink,
-  c as buttonTypes,
-  l as iconPlacements,
-  k as sizes,
-  P as tags,
-  f as underlineTypes,
-  L as variants
+  s as PieLink,
+  l as buttonTypes,
+  k as iconPlacements,
+  P as sizes,
+  f as tags,
+  L 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.11.2",
+  "version": "0.12.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -28,10 +28,10 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@justeattakeaway/pie-components-config": "0.6.0"
+    "@justeattakeaway/pie-components-config": "0.7.0"
   },
   "dependencies": {
-    "@justeattakeaway/pie-webc-core": "0.12.0"
+    "@justeattakeaway/pie-webc-core": "0.13.0"
   },
   "volta": {
     "extends": "../../../package.json"