feat(menu-item): add href property to use menu-item as a link

refactor(breadcrumb): use menu-item link option
statistikZH · Jan 22, 2024 · 6c203e8 · 6c203e8
1 parent d571d66
commit 6c203e8
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 9 deletions.
diff --git a/src/components/breadcrumb/Breadcrumb.js b/src/components/breadcrumb/Breadcrumb.js
@@ -168,9 +168,10 @@ export class LeuBreadcrumb extends LitElement {
                 ${this._menuItems.map(
                   (item) =>
                     html`
-                      <a href=${item.href} tabindex="0">
-                        <leu-menu-item label=${item.label}></leu-menu-item>
-                      </a>
+                      <leu-menu-item
+                        label=${item.label}
+                        href=${item.href}
+                      ></leu-menu-item>
                     `
                 )}
               </leu-menu>

diff --git a/src/components/menu/MenuItem.js b/src/components/menu/MenuItem.js
@@ -1,4 +1,6 @@
-import { html, LitElement, nothing } from "lit"
+import { LitElement, nothing } from "lit"
+import { html, unsafeStatic } from "lit/static-html.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 import styles from "./menu-item.css"
 
 import { Icon, ICON_NAMES } from "../icon/icon.js"
@@ -35,6 +37,7 @@ export class LeuMenuItem extends LitElement {
     highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
     label: { type: String, reflect: true },
+    href: { type: String, reflect: true },
   }
 
   constructor() {
@@ -80,10 +83,19 @@ export class LeuMenuItem extends LitElement {
     return nothing
   }
 
+  getTagName() {
+    return this.href ? "a" : "button"
+  }
+
   render() {
-    return html`<button class="button" ?disabled=${this.disabled}>
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(
+      this.getTagName()
+    )} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
       ${this.renderBefore()}<span class="label">${this.label}</span
       >${this.renderAfter()}
-    </button>`
+    </${unsafeStatic(this.getTagName())}>`
+    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
diff --git a/src/components/menu/menu-item.css b/src/components/menu/menu-item.css
@@ -12,10 +12,11 @@
   --font-regular: var(--leu-font-regular);
   --font-black: var(--leu-font-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--leu-font-regular);
 }
 
 .button {
+  text-decoration: none;
   appearance: none;
   border: none;
   cursor: pointer;

diff --git a/src/components/menu/stories/menu-item.stories.js b/src/components/menu/stories/menu-item.stories.js
@@ -23,6 +23,7 @@ function Template(args) {
       label=${args.label}
       before=${ifDefined(args.before)}
       after=${ifDefined(args.after)}
+      href=${ifDefined(args.href)}
       ?active=${args.active}
     ></leu-menu-item>
   `
@@ -40,9 +41,10 @@ IconBefore.args = {
   before: "check",
 }
 
-export const IconAfter = Template.bind({})
-IconAfter.args = {
+export const IconAfterLink = Template.bind({})
+IconAfterLink.args = {
   after: "arrowRight",
+  href: "https://www.zh.ch",
 }
 
 export const IconAndTextLabel = Template.bind({})