From 12feafbbef3f736623503d452332eef7a5dea073 Mon Sep 17 00:00:00 2001 From: JesmoDev <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 23 Jan 2024 15:41:38 +0100 Subject: [PATCH] feat: uui-ref-node should have href and target properties (#715) * add href and target --------- Co-authored-by: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> --- .../uui-ref-node/lib/uui-ref-node.element.ts | 73 +++++++++++++++---- .../uui-ref-node/lib/uui-ref-node.story.ts | 22 ++++-- 2 files changed, 73 insertions(+), 22 deletions(-) diff --git a/packages/uui-ref-node/lib/uui-ref-node.element.ts b/packages/uui-ref-node/lib/uui-ref-node.element.ts index d3465d581..f2c042cf3 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.element.ts +++ b/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 { >`; } - private _renderFallbackIcon() { + #renderFallbackIcon() { return html``; } - public render() { + #renderContent() { + return html` + + + ${this._iconSlotHasContent === false ? this.#renderFallbackIcon() : ''} + +
+
${this.name}
+ ${this.renderDetail()} +
+ `; + } + + #renderLink() { + return html` + ${this.#renderContent()} + `; + } + + #renderButton() { return html` + `; + } + + public render() { + return html` + ${this.href ? this.#renderLink() : this.#renderButton()}
@@ -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; diff --git a/packages/uui-ref-node/lib/uui-ref-node.story.ts b/packages/uui-ref-node/lib/uui-ref-node.story.ts index d1fa8450d..c48780f60 100644 --- a/packages/uui-ref-node/lib/uui-ref-node.story.ts +++ b/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` html` - - + + Remove - - + + `; CustomIcon.parameters = {