feat: uui-ref-node should have href and target properties (#715)

* add href and target

---------

Co-authored-by: Jacob Overgaard <[email protected]>

Author: JesmoDev

packages/uui-ref-node/lib/uui-ref-node.element.ts

@@ -1,7 +1,8 @@
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { demandCustomElement } from '@umbraco-ui/uui-base/lib/utils';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { UUIRefElement } from '@umbraco-ui/uui-ref/lib';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { property, state } from 'lit/decorators.js';
 
 /**
@@ -36,6 +37,24 @@ export class UUIRefNodeElement extends UUIRefElement {
   @property({ type: String })
   detail = '';
 
+  /**
+   * Set an href, this will turns the name of the card into an anchor tag.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public href?: string;
+
+  /**
+   * Set an anchor tag target, only used when using href.
+   * @type {string}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: String })
+  public target?: '_blank' | '_parent' | '_self' | '_top';
+
   @state()
   private _iconSlotHasContent = false;
 
@@ -48,7 +67,7 @@ export class UUIRefNodeElement extends UUIRefElement {
     demandCustomElement(this, 'uui-icon');
   }
 
-  private _onSlotIconChange(event: Event) {
+  #onSlotIconChange(event: Event) {
     this._iconSlotHasContent =
       (event.target as HTMLSlotElement).assignedNodes({ flatten: true })
         .length > 0;
@@ -60,11 +79,37 @@ export class UUIRefNodeElement extends UUIRefElement {
     ></small>`;
   }
 
-  private _renderFallbackIcon() {
+  #renderFallbackIcon() {
     return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
   }
 
-  public render() {
+  #renderContent() {
+    return html`
+      <span id="icon">
+        <slot name="icon" @slotchange=${this.#onSlotIconChange}></slot>
+        ${this._iconSlotHasContent === false ? this.#renderFallbackIcon() : ''}
+      </span>
+      <div id="info">
+        <div id="name">${this.name}</div>
+        ${this.renderDetail()}
+      </div>
+    `;
+  }
+
+  #renderLink() {
+    return html`<a
+      id="open-part"
+      tabindex=${this.disabled ? (nothing as any) : '0'}
+      href=${ifDefined(!this.disabled ? this.href : undefined)}
+      target=${ifDefined(this.target || undefined)}
+      rel=${ifDefined(
+        this.target === '_blank' ? 'noopener noreferrer' : undefined
+      )}>
+      ${this.#renderContent()}
+    </a>`;
+  }
+
+  #renderButton() {
     return html`
       <button
         type="button"
@@ -73,17 +118,14 @@ export class UUIRefNodeElement extends UUIRefElement {
         @click=${this.handleOpenClick}
         @keydown=${this.handleOpenKeydown}
         ?disabled=${this.disabled}>
-        <span id="icon">
-          <slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
-          ${this._iconSlotHasContent === false
-            ? this._renderFallbackIcon()
-            : ''}
-        </span>
-        <div id="info">
-          <div id="name">${this.name}</div>
-          ${this.renderDetail()}
-        </div>
+        ${this.#renderContent()}
       </button>
+    `;
+  }
+
+  public render() {
+    return html`
+      ${this.href ? this.#renderLink() : this.#renderButton()}
       <!-- Select border must be right after #open-part -->
       <div id="select-border"></div>
 
@@ -102,7 +144,10 @@ export class UUIRefNodeElement extends UUIRefElement {
       }
 
       #open-part {
+        text-decoration: none;
+        color: inherit;
         align-self: stretch;
+        line-height: normal;
 
         display: flex;
         position: relative;

packages/uui-ref-node/lib/uui-ref-node.story.ts

@@ -1,11 +1,16 @@
-import '.';
-
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { ArrayOfUmbracoWords } from '../../../storyhelpers/UmbracoWordGenerator';
 import readme from '../README.md?raw';
 
+import './index';
+import '@umbraco-ui/uui-tag/lib';
+import '@umbraco-ui/uui-action-bar/lib';
+import '@umbraco-ui/uui-button/lib';
+import '@umbraco-ui/uui-icon/lib';
+import '@umbraco-ui/uui-icon-registry-essential/lib';
+
 export default {
   id: 'uui-ref-node',
   title: 'Displays/References/Node',
@@ -26,6 +31,8 @@ const Template: Story = props => html`
   <uui-ref-node
     name="${props.name}"
     detail="${props.detail}"
+    href="${props.href}"
+    target="${props.target}"
     ?selectable=${props.selectable}
     ?selectOnly=${props.selectOnly}
     ?error=${props.error}
@@ -42,6 +49,7 @@ export const AAAOverview = Template.bind({});
 AAAOverview.args = {
   name: 'Rabbit Suit Product Page',
   detail: 'path/to/nowhere',
+  href: 'umbraco.com',
 };
 AAAOverview.storyName = 'Overview';
 AAAOverview.parameters = {
@@ -62,16 +70,14 @@ AAAOverview.parameters = {
 };
 
 export const CustomIcon: Story = () => html`
-  <essential-icon-registry>
-    <uui-ref-node-data-type
-      name="Rabbit Suit Product Page"
-      detail="path/to/nowhere">
+  <uui-icon-registry-essential>
+    <uui-ref-node name="Rabbit Suit Product Page" detail="path/to/nowhere">
       <uui-icon slot="icon" name="colorpicker"></uui-icon>
       <uui-action-bar slot="actions">
         <uui-button label="Remove">Remove</uui-button>
       </uui-action-bar>
-    </uui-ref-node-data-type>
-  </essential-icon-registry>
+    </uui-ref-node>
+  </uui-icon-registry-essential>
 `;
 
 CustomIcon.parameters = {