@statistikzh/leu 0.5.0 → 0.6.0

package/src/components/menu/MenuItem.js

@@ -1,44 +1,48 @@
-import { LitElement, nothing } from "lit"
-import { html, unsafeStatic } from "lit/static-html.js"
+import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
+
+// @ts-ignore
 import styles from "./menu-item.css"
 
-import { Icon, ICON_NAMES } from "../icon/icon.js"
+/**
+ * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
+ */
 
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
+ * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} disabled - Disables the underlying button or link
+ * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
+ * @property {string} href - The href of the underlying link
+ * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
+ * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
-export class LeuMenuItem extends LitElement {
+export class LeuMenuItem extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
-    /**
-     * Can be either an icon name or a text
-     * If no icon with this value is found, it will be displayed as text.
-     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
-     */
-    before: { type: String, reflect: true },
-    /**
-     * Can be either an icon name or a text
-     * If no icon with this value is found, it will be displayed as text
-     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
-     */
-    after: { type: String, reflect: true },
     active: { type: Boolean, reflect: true },
-    highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    label: { type: String, reflect: true },
+    tabbable: { type: Boolean, reflect: true },
     href: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
   }
 
   constructor() {
@@ -46,57 +50,105 @@ export class LeuMenuItem extends LitElement {
 
     this.active = false
     this.disabled = false
+    this.value = undefined
+    this.href = undefined
+    this.tabbable = undefined
 
-    /**
-     * A programmatic way to highlight the menu item like it is hovered.
-     * This is just a visual effect and does not change the active state.
-     */
-    this.highlighted = false
+    /** @type {MenuItemRole} */
+    this.componentRole = "menuitem"
   }
 
-  static getIconOrText(name) {
-    if (ICON_NAMES.includes(name)) {
-      return Icon(name)
-    }
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("click", this._handleClick, true)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("click", this._handleClick, true)
+  }
 
-    if (name === "EMPTY") {
-      return html`<div class="icon-placeholder"></div>`
+  _handleClick(event) {
+    if (this.disabled) {
+      event.stopPropagation()
+      event.preventDefault()
     }
+  }
 
-    return name
+  /**
+   * Returns the value of the item. If `value` is not set, it will return the inner text
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.innerText
   }
 
-  renderBefore() {
-    if (this.before) {
-      const content = LeuMenuItem.getIconOrText(this.before)
-      return html`<span class="before">${content}</span>`
+  _getAria() {
+    const commonAttributes = {
+      disabled: this.disabled,
+    }
+
+    if (this.href) {
+      return commonAttributes
     }
 
-    return nothing
+    return {
+      ...commonAttributes,
+      checked:
+        this.componentRole === "menuitemcheckbox" ||
+        this.componentRole === "menuitemradio"
+          ? this.active
+          : undefined,
+      selected: this.componentRole === "option" ? this.active : undefined,
+      role: this.componentRole === "none" ? undefined : this.componentRole,
+    }
   }
 
-  renderAfter() {
-    if (this.after) {
-      const content = LeuMenuItem.getIconOrText(this.after)
-      return html`<span class="after">${content}</span>`
+  _getTabIndex() {
+    if (typeof this.tabbable === "boolean") {
+      return this.tabbable ? 0 : -1
     }
 
-    return nothing
+    return undefined
+  }
+
+  _renderLink(content) {
+    const aria = this._getAria()
+
+    return html`<a
+      class="button"
+      href=${this.href}
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+      >${content}</a
+    >`
   }
 
-  getTagName() {
-    return this.href ? "a" : "button"
+  _renderButton(content) {
+    const aria = this._getAria()
+
+    return html`<button
+      class="button"
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+    >
+      ${content}
+    </button>`
   }
 
   render() {
-    /* 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()}
-    </${unsafeStatic(this.getTagName())}>`
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    const content = html`
+      <slot class="before" name="before"></slot>
+      <span class="label"><slot></slot></span>
+      <slot class="after" name="after"></slot>
+    `
+
+    return this.href ? this._renderLink(content) : this._renderButton(content)
   }
 }

package/src/components/menu/leu-menu-item.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenuItem } from "./MenuItem.js"
 
 export { LeuMenuItem }
 
-defineElement("menu-item", LeuMenuItem)
+LeuMenuItem.define("leu-menu-item")

package/src/components/menu/leu-menu.js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenu } from "./Menu.js"
 
 export { LeuMenu }
 
-defineElement("menu", LeuMenu)
+LeuMenu.define("leu-menu")

package/src/components/menu/menu-item.css

@@ -6,9 +6,10 @@
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-func-cyan);
+  --background-active: var(--leu-color-accent-blue);
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-active: var(--leu-color-black-0);
   --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-family-regular);
   --font-black: var(--leu-font-family-black);
@@ -29,6 +30,7 @@
 
   padding: 0.75rem;
 
+  font-family: inherit;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
@@ -43,21 +45,26 @@
 }
 
 .button:hover,
-:host([highlighted]) .button {
+.button:focus-visible {
   --background: var(--background-hover);
 }
 
+/*
+ * These colors do not match with the design system (yet).
+ * But at least they are compliant with the WCAG AA contrast ratio.
+ */
 :host([active]) .button {
   --background: var(--background-active);
+  --color: var(--color-active);
 }
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
   --color: var(--color-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 
-:is(.before, .after) svg {
+:is(.before, .after) leu-icon {
   display: block;
 }
 

package/src/components/menu/stories/menu-item.stories.js

@@ -2,6 +2,12 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-menu-item.js"
+import "../../icon/leu-icon.js"
+import { paths as iconPaths } from "../../icon/paths.js"
+
+function isIcon(name) {
+  return name === "EMPTY" || Object.keys(iconPaths).includes(name)
+}
 
 export default {
   title: "Menu/Item",
@@ -20,13 +26,18 @@ export default {
 function Template(args) {
   return html`
     <leu-menu-item
-      label=${args.label}
-      before=${ifDefined(args.before)}
-      after=${ifDefined(args.after)}
       href=${ifDefined(args.href)}
       ?active=${args.active}
       ?disabled=${args.disabled}
-    ></leu-menu-item>
+    >
+      ${isIcon(args.before)
+        ? html`<leu-icon slot="before" name=${args.before}></leu-icon>`
+        : html`<span slot="before">${args.before}</span>`}
+      ${args.label}
+      ${isIcon(args.after)
+        ? html`<leu-icon slot="after" name=${args.after}></leu-icon>`
+        : html`<span slot="after">${args.after}</span>`}
+    </leu-menu-item>
   `
 }
 

package/src/components/menu/stories/menu.stories.js

@@ -1,6 +1,8 @@
 import { html } from "lit"
 import "../leu-menu.js"
 import "../leu-menu-item.js"
+import "../../icon/leu-icon.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
   title: "Menu",
@@ -11,16 +13,41 @@ export default {
       url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
     },
   },
+  argTypes: {
+    selects: {
+      control: "select",
+      options: ["single", "multiple"],
+    },
+    role: {
+      control: "select",
+      options: ["menu", "listbox"],
+    },
+  },
 }
 
-function Template() {
-  return html` <leu-menu>
-    <leu-menu-item label="Menu Item 1" before="EMPTY"></leu-menu-item>
-    <leu-menu-item label="Menu Item 2" before="check" active></leu-menu-item>
-    <leu-menu-item label="Menu Item 3" before="EMPTY"></leu-menu-item>
+function Template(args) {
+  return html` <leu-menu
+    role=${ifDefined(args.role)}
+    selects=${ifDefined(args.selects)}
+  >
+    <leu-menu-item
+      ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
+    >
+    <leu-menu-item active
+      ><leu-icon slot="before" name="check"></leu-icon>Menu Item
+      2</leu-menu-item
+    >
+    <leu-menu-item
+      ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
+    >
     <hr />
-    <leu-menu-item label="Menu Item 3" before="pin" after="CH"></leu-menu-item>
-    <leu-menu-item label="Menu Item 4"></leu-menu-item>
+    <leu-menu-item
+      ><leu-icon slot="before" name="pin"></leu-icon>Menu Item 3<span
+        slot="after"
+        >CH</span
+      ></leu-menu-item
+    >
+    <leu-menu-item>Menu Item 4</leu-menu-item>
   </leu-menu>`
 }
 

package/src/components/menu/test/menu-item.test.js

@@ -1,20 +1,31 @@
 import { html } from "lit"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
+import { fixture, expect, oneEvent, elementUpdated } from "@open-wc/testing"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { spy } from "sinon"
 
+import "../leu-menu.js"
 import "../leu-menu-item.js"
 
 async function defaultFixture(args = {}) {
   return fixture(html`
     <leu-menu-item
-      label=${args.label}
-      before=${ifDefined(args.before)}
-      after=${ifDefined(args.after)}
       href=${ifDefined(args.href)}
+      componentRole=${ifDefined(args.componentRole)}
+      value=${ifDefined(args.value)}
       ?active=${args.active}
       ?disabled=${args.disabled}
-    ></leu-menu-item>
+      ?tabbable=${args.tabbable}
+    >
+      ${args.label}
+    </leu-menu-item>
+  `)
+}
+
+async function wrappedFixture(args = {}) {
+  return fixture(html`
+    <leu-menu role=${ifDefined(args.menuRole)}>
+      ${await defaultFixture(args)}
+    </leu-menu>
   `)
 }
 
@@ -26,26 +37,25 @@ describe("LeuMenuItem", () => {
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture({ label: "Download" })
+    const el = await wrappedFixture({ label: "Download" })
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).dom.to.be.accessible()
   })
 
   it("passes the a11y audit with a link", async () => {
-    const el = await defaultFixture({
+    const el = await wrappedFixture({
       label: "Download",
       href: "https://zh.ch",
+      menuRole: "none",
     })
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).dom.to.be.accessible()
   })
 
   it("renders a label", async () => {
     const el = await defaultFixture({ label: "Download" })
 
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.trimmed.text("Download")
+    expect(el).to.have.trimmed.text("Download")
   })
 
   it("renders a button", async () => {
@@ -66,90 +76,61 @@ describe("LeuMenuItem", () => {
 
     expect(link).to.exist
     expect(link).to.have.attribute("href", "https://zh.ch")
-    expect(link).to.have.trimmed.text("Kanton Zürich")
-  })
-
-  it("renders a before icon", async () => {
-    const el = await defaultFixture({ label: "Download", before: "download" })
-
-    const before = el.shadowRoot.querySelector(".before")
-    expect(before).to.exist
-
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='before'></span><span class='label'>Download</span></button>"
-    )
+    expect(el).to.have.trimmed.text("Kanton Zürich")
   })
 
-  it("renders a before label", async () => {
-    const el = await defaultFixture({ label: "Download", before: "DE" })
-
-    const before = el.shadowRoot.querySelector(".before")
-    expect(before).to.exist
-    expect(before).to.have.trimmed.text("DE")
-
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='before'>DE</span><span class='label'>Download</span></button>"
-    )
-  })
-
-  it("renders a before placeholder", async () => {
-    const el = await defaultFixture({ label: "Download", before: "EMPTY" })
-
-    const before = el.shadowRoot.querySelector(".before")
-    expect(before).to.exist
-    expect(before).to.not.have.trimmed.text()
-
-    const iconPlaceholder = before.querySelector(".icon-placeholder")
-    expect(iconPlaceholder).to.exist
-
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='before'><div class='icon-placeholder'></div></span><span class='label'>Download</span></button>"
-    )
-  })
-
-  it("renders a after icon", async () => {
-    const el = await defaultFixture({ label: "Download", after: "download" })
-
-    const after = el.shadowRoot.querySelector(".after")
-    expect(after).to.exist
+  it("sets the aria-disabled attribute to the button", async () => {
+    const el = await defaultFixture({ label: "Download", disabled: true })
 
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='label'>Download</span><span class='after'></span></button>"
-    )
+    const button = el.shadowRoot.querySelector("button")
+    expect(button).to.have.attribute("aria-disabled", "true")
   })
 
-  it("renders a after label", async () => {
-    const el = await defaultFixture({ label: "Download", after: "DE" })
-
-    const after = el.shadowRoot.querySelector(".after")
-    expect(after).to.exist
-    expect(after).to.have.trimmed.text("DE")
+  it("sets the defined role on the button", async () => {
+    const el = await defaultFixture({
+      label: "Download",
+    })
 
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='label'>Download</span><span class='after'>DE</span></button>"
-    )
-  })
+    const button = el.shadowRoot.querySelector("button")
+    expect(button).to.have.attribute("role", "menuitem")
 
-  it("renders a after placeholder", async () => {
-    const el = await defaultFixture({ label: "Download", after: "EMPTY" })
+    el.componentRole = "menuitemcheckbox"
+    await elementUpdated(el)
+    expect(button).to.have.attribute("role", "menuitemcheckbox")
 
-    const after = el.shadowRoot.querySelector(".after")
-    expect(after).to.exist
-    expect(after).to.not.have.trimmed.text()
+    el.componentRole = "menuitemradio"
+    await elementUpdated(el)
+    expect(button).to.have.attribute("role", "menuitemradio")
 
-    const iconPlaceholder = after.querySelector(".icon-placeholder")
-    expect(iconPlaceholder).to.exist
+    el.componentRole = "option"
+    await elementUpdated(el)
+    expect(button).to.have.attribute("role", "option")
 
-    expect(el).shadowDom.to.equal(
-      "<button class='button'><span class='label'>Download</span><span class='after'><div class='icon-placeholder'></div></span></button>"
-    )
+    el.componentRole = "none"
+    await elementUpdated(el)
+    expect(button).to.not.have.attribute("role")
   })
 
-  it("passes the disabled attribute to the button", async () => {
-    const el = await defaultFixture({ label: "Download", disabled: true })
+  it("adds either the aria-checked or aria-selected attribute to the button when the item is active", async () => {
+    const el = await defaultFixture({
+      label: "Download",
+      componentRole: "option",
+      active: true,
+    })
 
     const button = el.shadowRoot.querySelector("button")
-    expect(button).to.have.attribute("disabled")
+    expect(button).to.have.attribute("aria-selected", "true")
+    expect(button).not.to.have.attribute("aria-checked")
+
+    el.componentRole = "menuitemcheckbox"
+    await elementUpdated(el)
+    expect(button).to.have.attribute("aria-checked", "true")
+    expect(button).not.to.have.attribute("aria-selected")
+
+    el.componentRole = "menuitemradio"
+    await elementUpdated(el)
+    expect(button).to.have.attribute("aria-checked", "true")
+    expect(button).not.to.have.attribute("aria-selected")
   })
 
   it("lets the click event bubble up", async () => {
@@ -177,4 +158,29 @@ describe("LeuMenuItem", () => {
 
     expect(clickSpy).to.have.not.been.called
   })
+
+  it("reflects the tabbable property as tabindex to the button", async () => {
+    const el = await defaultFixture({ label: "Download", tabbable: true })
+
+    const button = el.shadowRoot.querySelector("button")
+    expect(button).to.have.attribute("tabindex", "0")
+
+    el.tabbable = false
+    await elementUpdated(el)
+    expect(button).to.have.attribute("tabindex", "-1")
+
+    el.tabbable = undefined
+    await elementUpdated(el)
+    expect(button).to.not.have.attribute("tabindex")
+  })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture({ label: "Download          " })
+
+    expect(el.getValue()).to.equal("Download")
+
+    el.value = "download-01"
+
+    expect(el.getValue()).to.equal("download-01")
+  })
 })