@justeattakeaway/pie-link 0.2.0 → 0.3.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-link",
   "description": "PIE Design System Link built using Web Components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -1,15 +1,22 @@
 export const variants = ['default', 'high-visibility', 'inverse'] as const;
 export const sizes = ['small', 'medium'] as const;
+export const iconPlacements = ['leading', 'trailing'] as const;
+export const tags = ['a', 'button'] as const;
+export const buttonTypes = ['submit', 'button', 'reset', 'menu'] as const;
 
 export 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
      */
@@ -25,9 +32,17 @@ 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 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];
 }

package/src/index.ts

@@ -1,16 +1,27 @@
-import { LitElement, html, unsafeCSS } from 'lit';
+import { LitElement, unsafeCSS, nothing } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
 import { property } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { validPropertyValues } from '@justeattakeaway/pie-webc-core';
 import styles from './link.scss?inline';
-import { LinkProps, variants, sizes } from './defs';
+import {
+    LinkProps, variants, sizes, iconPlacements, tags, buttonTypes,
+} from './defs';
 
 // Valid values available to consumers
 export * from './defs';
 
 const componentSelector = 'pie-link';
 
+/**
+ * @slot icon - The icon slot
+ * @slot - Default slot
+ */
+
 export class PieLink extends LitElement implements LinkProps {
+    @property()
+    @validPropertyValues(componentSelector, tags, 'a')
+    public tag: LinkProps['tag'] = 'a';
+
     @property({ type: String })
     @validPropertyValues(componentSelector, variants, 'default')
     public variant: LinkProps['variant'] = 'default';
@@ -19,6 +30,10 @@ export class PieLink extends LitElement implements LinkProps {
     @validPropertyValues(componentSelector, sizes, 'medium')
     public size: LinkProps['size'] = 'medium';
 
+    @property({ type: String })
+    @validPropertyValues(componentSelector, iconPlacements, 'leading')
+    public iconPlacement: LinkProps['iconPlacement'] = 'leading';
+
     @property({ type: String, reflect: true })
     public href?: string;
 
@@ -34,24 +49,46 @@ export class PieLink extends LitElement implements LinkProps {
     @property({ type: Boolean })
     public isStandalone = false;
 
+    @property()
+    @validPropertyValues(componentSelector, buttonTypes, 'submit')
+    public type: LinkProps['type'] = 'submit';
+
     render () {
         const {
-            variant, size, href, target, rel, isBold, isStandalone,
+            tag,
+            variant,
+            size,
+            iconPlacement,
+            isBold,
+            isStandalone,
+            href,
+            target,
+            rel,
+            type,
         } = this;
 
+        const element = unsafeStatic(tag);
+        const isButton = tag === 'button';
+
         return html`
-            <a
+            <${element}  
                 data-test-id="pie-link"
                 class="c-link"
+                tag="${tag}"
                 variant=${variant}
                 size=${size}
-                href=${ifDefined(href)}
-                target=${ifDefined(target)}
-                rel=${ifDefined(rel)}
                 ?isBold=${isBold}
-                ?isStandalone=${isStandalone}>
-                <slot></slot>
-            </a>`;
+                ?isStandalone=${isStandalone}
+                href=${!isButton && href ? href : nothing}
+                target=${!isButton && target ? target : nothing}
+                rel=${!isButton && rel ? rel : nothing}
+                type=${isButton && type ? type : nothing}>
+                    <span class="c-link-content">
+                        ${iconPlacement === 'leading' ? html`<slot name="icon"></slot>` : nothing}
+                        <slot></slot>
+                        ${iconPlacement === 'trailing' ? html`<slot name="icon"></slot>` : nothing}
+                    </span>
+            </${element}>`;
     }
 
     // Renders a `CSSResult` generated from SCSS by Vite

package/src/link.scss

@@ -7,7 +7,9 @@
     --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);
@@ -16,6 +18,18 @@
     text-decoration: var(--link-text-decoration);
     cursor: pointer;
 
+    &[tag='a'] {
+        /* Same as default styles */
+    }
+
+    &[tag='button'] {
+        outline: none;
+        border: none;
+        user-select: none;
+        background: transparent;
+        padding: 0;
+    }
+
     &[variant='default'] {
         /* Same as default styles */
     }
@@ -45,3 +59,16 @@
         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);
+}