@justeattakeaway/pie-link 0.2.0 → 0.3.0

package/README.md

@@ -57,15 +57,18 @@ import { PieLink } from '@justeattakeaway/pie-link/dist/react';
 
 ## Props
 
-| Property     | Type        | Default       | Description                                                                 |
-| ------------ | ----------- | ------------- | --------------------------------------------------------------------------- |
-| variant      | `String`  | `default`   | Variant of the link, one of variants – default, high-visibility or inverse |
-| size         | `String`  | `medium`    | Size of the link, one of `sizes` – `medium`, `small`                 |
-| href         | `String`  | `undefined` | Native html `href` attribute                                              |
-| rel          | `String`  | `undefined` | Native html `rel` attribute                                               |
-| target       | `String`  | `undefined` | Native html `target` attribute                                            |
-| isBold       | `Boolean` | `false`     | If `true`, sets the link text bold                                        |
-| isStandalone | `Boolean` | `false`     | If `true`, sets the link as a block element                               |
+| 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`                                          |
+| 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                                                        |
+| iconPlacement | `String`  | `leading`   | Icon placements of the icon slot, if provided, one of `iconPlacements` - `leading`, `trailing` |
 
 In your markup or JSX, you can then use these to set the properties for the `pie-link` component:
 
@@ -77,6 +80,28 @@ In your markup or JSX, you can then use these to set the properties for the `pie
 <PieLink></PieLink>
 ```
 
+## Slots
+
+| 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. |
+
+### Using `pie-icons-webc` with the `pie-link` icon slot
+
+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>
+```
+
 ## Testing
 
 ### Browser tests

package/dist/index.d.ts

@@ -2,15 +2,23 @@ import type { CSSResult } from 'lit';
 import type { LitElement } from 'lit';
 import type { TemplateResult } from 'lit-html';
 
+export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
+
+export declare const iconPlacements: readonly ["leading", "trailing"];
+
 export declare interface LinkProps {
+    /**
+     * What HTML element the link should be such as a or button.
+     */
+    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];
     /**
      * The URL that the hyperlink should point to
      */
@@ -26,27 +34,44 @@ 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 box
      */
-    isStandalone?: boolean;
+    isStandalone: boolean;
+    /**
+     * The placement of the icon slot, if provided, such as leading or trailing
+     */
+    iconPlacement?: typeof iconPlacements[number];
+    /**
+     * What type attribute should be applied if the tag is set to button. For example submit, button or menu.
+     */
+    type?: typeof buttonTypes[number];
 }
 
+/**
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
 export declare class PieLink extends LitElement implements LinkProps {
+    tag: LinkProps['tag'];
     variant: LinkProps['variant'];
     size: LinkProps['size'];
+    iconPlacement: LinkProps['iconPlacement'];
     href?: string;
     target?: string;
     rel?: string;
     isBold: boolean;
     isStandalone: boolean;
-    render(): TemplateResult<1>;
+    type: LinkProps['type'];
+    render(): TemplateResult;
     static styles: CSSResult;
 }
 
 export declare const sizes: readonly ["small", "medium"];
 
+export declare const tags: readonly ["a", "button"];
+
 export declare const variants: readonly ["default", "high-visibility", "inverse"];
 
 export { }

package/dist/index.js

@@ -1,86 +1,110 @@
-import { unsafeCSS as k, LitElement as g, html as m } from "lit";
-import { property as s } from "lit/decorators.js";
-import { ifDefined as d } from "lit/directives/if-defined.js";
+import { unsafeCSS as b, LitElement as $, nothing as p } from "lit";
+import { unsafeStatic as z, html as u } from "lit/static-html.js";
+import { property as l } from "lit/decorators.js";
 import "lit/decorators/property.js";
-const v = (c, n, r) => function(t, e) {
-  const i = `#${e}`;
-  Object.defineProperty(t, e, {
+const g = (f, n, a) => function(t, i) {
+  const o = `#${i}`;
+  Object.defineProperty(t, i, {
     get() {
-      return this[i];
+      return this[o];
     },
-    set(f) {
-      const h = this[i];
-      n.includes(f) ? this[i] = f : (console.error(
-        `<${c}> Invalid value "${f}" provided for property "${e}".`,
+    set(c) {
+      const v = this[o];
+      n.includes(c) ? this[o] = c : (console.error(
+        `<${f}> Invalid value "${c}" provided for property "${i}".`,
         `Must be one of: ${n.join(" | ")}.`,
-        `Falling back to default value: "${r}"`
-      ), this[i] = r), this.requestUpdate(e, h);
+        `Falling back to default value: "${a}"`
+      ), this[o] = a), this.requestUpdate(i, v);
     }
   });
-}, u = `.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);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[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[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block}
-`, y = ["default", "high-visibility", "inverse"], z = ["small", "medium"];
-var x = Object.defineProperty, S = Object.getOwnPropertyDescriptor, a = (c, n, r, l) => {
-  for (var t = l > 1 ? void 0 : l ? S(n, r) : n, e = c.length - 1, i; e >= 0; e--)
-    (i = c[e]) && (t = (l ? i(n, r, t) : i(t)) || t);
-  return l && t && x(n, r, t), t;
+}, x = `.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[isBold]{--link-font-weight: var(--dt-font-weight-bold)}.c-link[isStandalone]{display:block}.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)}
+`, S = ["default", "high-visibility", "inverse"], P = ["small", "medium"], w = ["leading", "trailing"], B = ["a", "button"], _ = ["submit", "button", "reset", "menu"];
+var O = Object.defineProperty, j = Object.getOwnPropertyDescriptor, r = (f, n, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? j(n, a) : n, i = f.length - 1, o; i >= 0; i--)
+    (o = f[i]) && (t = (s ? o(n, a, t) : o(t)) || t);
+  return s && t && O(n, a, t), t;
 };
-const p = "pie-link";
-class o extends g {
+const d = "pie-link";
+class e extends $ {
   constructor() {
-    super(...arguments), this.variant = "default", this.size = "medium", this.isBold = !1, this.isStandalone = !1;
+    super(...arguments), this.tag = "a", this.variant = "default", this.size = "medium", this.iconPlacement = "leading", this.isBold = !1, this.isStandalone = !1, this.type = "submit";
   }
   render() {
     const {
-      variant: n,
-      size: r,
-      href: l,
-      target: t,
-      rel: e,
+      tag: n,
+      variant: a,
+      size: s,
+      iconPlacement: t,
       isBold: i,
-      isStandalone: f
-    } = this;
-    return m`
-            <a
+      isStandalone: o,
+      href: c,
+      target: v,
+      rel: m,
+      type: y
+    } = this, k = z(n), h = n === "button";
+    return u`
+            <${k}  
                 data-test-id="pie-link"
                 class="c-link"
-                variant=${n}
-                size=${r}
-                href=${d(l)}
-                target=${d(t)}
-                rel=${d(e)}
+                tag="${n}"
+                variant=${a}
+                size=${s}
                 ?isBold=${i}
-                ?isStandalone=${f}>
-                <slot></slot>
-            </a>`;
+                ?isStandalone=${o}
+                href=${!h && c ? c : p}
+                target=${!h && v ? v : p}
+                rel=${!h && m ? m : p}
+                type=${h && y ? y : p}>
+                    <span class="c-link-content">
+                        ${t === "leading" ? u`<slot name="icon"></slot>` : p}
+                        <slot></slot>
+                        ${t === "trailing" ? u`<slot name="icon"></slot>` : p}
+                    </span>
+            </${k}>`;
   }
 }
-o.styles = k(u);
-a([
-  s({ type: String }),
-  v(p, y, "default")
-], o.prototype, "variant", 2);
-a([
-  s({ type: String }),
-  v(p, z, "medium")
-], o.prototype, "size", 2);
-a([
-  s({ type: String, reflect: !0 })
-], o.prototype, "href", 2);
-a([
-  s({ type: String, reflect: !0 })
-], o.prototype, "target", 2);
-a([
-  s({ type: String, reflect: !0 })
-], o.prototype, "rel", 2);
-a([
-  s({ type: Boolean })
-], o.prototype, "isBold", 2);
-a([
-  s({ type: Boolean })
-], o.prototype, "isStandalone", 2);
-customElements.define(p, o);
+e.styles = b(x);
+r([
+  l(),
+  g(d, B, "a")
+], e.prototype, "tag", 2);
+r([
+  l({ type: String }),
+  g(d, S, "default")
+], e.prototype, "variant", 2);
+r([
+  l({ type: String }),
+  g(d, P, "medium")
+], e.prototype, "size", 2);
+r([
+  l({ type: String }),
+  g(d, w, "leading")
+], e.prototype, "iconPlacement", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "href", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "target", 2);
+r([
+  l({ type: String, reflect: !0 })
+], e.prototype, "rel", 2);
+r([
+  l({ type: Boolean })
+], e.prototype, "isBold", 2);
+r([
+  l({ type: Boolean })
+], e.prototype, "isStandalone", 2);
+r([
+  l(),
+  g(d, _, "submit")
+], e.prototype, "type", 2);
+customElements.define(d, e);
 export {
-  o as PieLink,
-  z as sizes,
-  y as variants
+  e as PieLink,
+  _ as buttonTypes,
+  w as iconPlacements,
+  P as sizes,
+  B as tags,
+  S as variants
 };

package/dist/react.d.ts

@@ -3,15 +3,23 @@ import type { LitElement } from 'lit';
 import type { ReactWebComponent } from '@lit-labs/react';
 import type { TemplateResult } from 'lit-html';
 
+export declare const buttonTypes: readonly ["submit", "button", "reset", "menu"];
+
+export declare const iconPlacements: readonly ["leading", "trailing"];
+
 export declare interface LinkProps {
+    /**
+     * What HTML element the link should be such as a or button.
+     */
+    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];
     /**
      * The URL that the hyperlink should point to
      */
@@ -27,29 +35,46 @@ 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 box
      */
-    isStandalone?: boolean;
+    isStandalone: boolean;
+    /**
+     * The placement of the icon slot, if provided, such as leading or trailing
+     */
+    iconPlacement?: typeof iconPlacements[number];
+    /**
+     * What type attribute should be applied if the tag is set to button. For example submit, button or menu.
+     */
+    type?: typeof buttonTypes[number];
 }
 
 export declare const PieLink: ReactWebComponent<PieLink_2, {}>;
 
+/**
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
 declare class PieLink_2 extends LitElement implements LinkProps {
+    tag: LinkProps['tag'];
     variant: LinkProps['variant'];
     size: LinkProps['size'];
+    iconPlacement: LinkProps['iconPlacement'];
     href?: string;
     target?: string;
     rel?: string;
     isBold: boolean;
     isStandalone: boolean;
-    render(): TemplateResult<1>;
+    type: LinkProps['type'];
+    render(): TemplateResult;
     static styles: CSSResult;
 }
 
 export declare const sizes: readonly ["small", "medium"];
 
+export declare const tags: readonly ["a", "button"];
+
 export declare const variants: readonly ["default", "high-visibility", "inverse"];
 
 export { }