fix: Dont show a link when no href is supplied (#797)

* dont show a tag when no href is supplied

* cleanup

* chore: prettier

* chore: update tests to reflect the new possibilities in breadcrumb-item

---------

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

Author: JesmoDev

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.element.ts

@@ -20,10 +20,10 @@ export class UUIBreadcrumbItemElement extends LitElement {
   /**
    * Specifies the link href.
    * @type {String}
-   * @default '#'
+   * @default undefined
    */
   @property()
-  href = '#';
+  href?: string;
 
   /**
    * Specifies if the element is the last item in the uui-breadcrumbs. Last item will not render as a link
@@ -35,8 +35,11 @@ export class UUIBreadcrumbItemElement extends LitElement {
   lastItem = false;
 
   renderLinkAndSeparator() {
-    return html`<a id="link" href=${this.href}><slot></slot></a
-      ><span part="separator"></span>`;
+    const item = this.href
+      ? html`<a id="link" href=${this.href}><slot></slot></a>`
+      : html`<span id="link"><slot></slot></span>`;
+
+    return html`${item}<span part="separator"></span>`;
   }
 
   renderCurrent() {
@@ -84,10 +87,6 @@ export class UUIBreadcrumbItemElement extends LitElement {
         overflow: hidden;
         text-overflow: ellipsis;
       }
-
-      #link {
-        cursor: pointer;
-      }
     `,
   ];
 }

packages/uui-breadcrumbs/lib/uui-breadcrumb-item.test.ts

@@ -13,7 +13,7 @@ describe('UuiBreadcrumbItem', () => {
 
   it('is a link if not last item', async () => {
     const element = await fixture<UUIBreadcrumbItemElement>(html`
-      <uui-breadcrumb-item>One</uui-breadcrumb-item>
+      <uui-breadcrumb-item href="/test">One</uui-breadcrumb-item>
     `);
 
     const link = element.shadowRoot!.querySelector('a')!;
@@ -27,4 +27,12 @@ describe('UuiBreadcrumbItem', () => {
     const span = element.shadowRoot!.querySelector('span')!;
     expect(span).to.exist;
   });
+
+  it('is a span if no href', async () => {
+    const element = await fixture<UUIBreadcrumbItemElement>(html`
+      <uui-breadcrumb-item>One</uui-breadcrumb-item>
+    `);
+    const span = element.shadowRoot!.querySelector('span')!;
+    expect(span).to.exist;
+  });
 });

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

@@ -48,7 +48,10 @@ export class UUITagElement extends LitElement {
         font-size: var(--uui-tag-font-size, var(--uui-type-small-size));
         font-weight: 700;
         line-height: 1;
-        padding: var(--uui-tag-padding, var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em));
+        padding: var(
+          --uui-tag-padding,
+          var(--uui-size-space-1) calc(var(--uui-size-space-1) + 0.5em)
+        );
         border-radius: 100px;
         user-select: none;
         border-radius: var(--uui-tag-border-radius, var(--uui-size-4));