Merge branch 'v1/contrib' into feature/inline-button-create-href

packages/uui-badge/lib/uui-badge.element.ts

@@ -2,8 +2,8 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import type {
-  InterfaceColor,
-  InterfaceLook,
+  UUIInterfaceColor,
+  UUIInterfaceLook,
 } from '@umbraco-ui/uui-base/lib/types';
 
 /**
@@ -21,7 +21,7 @@ export class UUIBadgeElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  color: InterfaceColor = 'default';
+  color: UUIInterfaceColor = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -30,7 +30,7 @@ export class UUIBadgeElement extends LitElement {
    * @default "default"
    */
   @property({ reflect: true })
-  look: InterfaceLook = 'primary';
+  look: UUIInterfaceLook = 'primary';
 
   /**
    * Bring attention to this badge by applying a bounce animation.

packages/uui-base/lib/types/InterfaceColor.ts

@@ -1,8 +1,13 @@
-export const InterfaceColorValues: Readonly<InterfaceColor[]> = [
+export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [
   'default',
   'positive',
   'warning',
   'danger',
 ] as const;
 
-export type InterfaceColor = '' | 'default' | 'positive' | 'warning' | 'danger';
+export type UUIInterfaceColor =
+  | ''
+  | 'default'
+  | 'positive'
+  | 'warning'
+  | 'danger';

packages/uui-base/lib/types/InterfaceHeading.ts

@@ -1,4 +1,4 @@
-export const InterfaceHeadingValues: Readonly<InterfaceHeading[]> = [
+export const UUIInterfaceHeadingValues: Readonly<UUIInterfaceHeading[]> = [
   'h1',
   'h2',
   'h3',
@@ -7,4 +7,4 @@ export const InterfaceHeadingValues: Readonly<InterfaceHeading[]> = [
   'h6',
 ] as const;
 
-export type InterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type UUIInterfaceHeading = '' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

packages/uui-base/lib/types/InterfaceLook.ts

@@ -1,12 +1,12 @@
-export const InterfaceLookValues: Readonly<InterfaceLook[]> = [
+export const UUIInterfaceLookValues: Readonly<UUIInterfaceLook[]> = [
   'default',
   'primary',
   'secondary',
   'outline',
   'placeholder',
 ] as const;
 
-export type InterfaceLook =
+export type UUIInterfaceLook =
   | ''
   | 'default'
   | 'primary'

packages/uui-box/lib/uui-box.element.ts

@@ -2,7 +2,7 @@ import { LitElement, css } from 'lit';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
 import { property, state } from 'lit/decorators.js';
 import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import type { InterfaceHeading } from '@umbraco-ui/uui-base/lib';
+import type { UUIInterfaceHeading } from '@umbraco-ui/uui-base/lib';
 import { StaticValue, html, literal, unsafeStatic } from 'lit/static-html.js';
 
 function slotHasContent(target: EventTarget | null): boolean {
@@ -41,7 +41,7 @@ export class UUIBoxElement extends LitElement {
    * @default "h5"
    */
   @property({ attribute: 'headline-variant' })
-  set headlineVariant(value: InterfaceHeading) {
+  set headlineVariant(value: UUIInterfaceHeading) {
     if (!value) {
       this._headlineVariantTag = literal`h5`;
     } else {

packages/uui-box/lib/uui-box.test.ts

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 
 import { UUIBoxElement } from './uui-box.element';
-import { InterfaceHeadingValues } from '@umbraco-ui/uui-base/lib/types';
+import { UUIInterfaceHeadingValues } from '@umbraco-ui/uui-base/lib/types';
 
 describe('UUIBox', () => {
   let element: UUIBoxElement;
@@ -16,7 +16,7 @@ describe('UUIBox', () => {
   });
 
   it('passes the a11y audit', async () => {
-    for (const headlineVariant of InterfaceHeadingValues) {
+    for (const headlineVariant of UUIInterfaceHeadingValues) {
       element = await fixture(
         html` <uui-box
           headline="headline"

packages/uui-button/lib/uui-button.element.ts

@@ -16,7 +16,10 @@ import {
 import { css, html, LitElement, nothing, TemplateResult } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { InterfaceColor, InterfaceLook } from '@umbraco-ui/uui-base/lib/types';
+import {
+  UUIInterfaceColor,
+  UUIInterfaceLook,
+} from '@umbraco-ui/uui-base/lib/types';
 
 export type UUIButtonState = undefined | 'waiting' | 'success' | 'failed';
 
@@ -74,7 +77,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  look: InterfaceLook = 'default';
+  look: UUIInterfaceLook = 'default';
 
   /**
    * Changes the look of the button to one of the predefined, symbolic looks. For example - set this to positive if you want nice, green "confirm" button.
@@ -83,7 +86,7 @@ export class UUIButtonElement extends FormControlMixin(
    * @default "default"
    */
   @property({ reflect: true })
-  color: InterfaceColor = 'default';
+  color: UUIInterfaceColor = 'default';
 
   /**
    * Makes the left and right padding of the button narrower.

packages/uui-button/lib/uui-button.test.ts

@@ -6,8 +6,8 @@ import {
   oneEvent,
 } from '@open-wc/testing';
 import {
-  InterfaceColorValues,
-  InterfaceLookValues,
+  UUIInterfaceColorValues,
+  UUIInterfaceLookValues,
 } from '@umbraco-ui/uui-base/lib/types';
 
 import { UUIButtonElement } from './uui-button.element';
@@ -41,8 +41,8 @@ describe('UuiButton', () => {
   });
 
   it('passes the a11y audit', async () => {
-    for (const color of InterfaceColorValues) {
-      for (const look of InterfaceLookValues) {
+    for (const color of UUIInterfaceColorValues) {
+      for (const look of UUIInterfaceLookValues) {
         for (const disabled of [true, false]) {
           element = await fixture(
             html` <uui-button

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 = {