@statistikzh/leu 0.5.1 → 0.7.0

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")
+  })
 })

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

@@ -1,17 +1,35 @@
 import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
 import { fixture, expect } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-menu.js"
 import "../leu-menu-item.js"
+import "../../icon/leu-icon.js"
 
-async function defaultFixture() {
-  return fixture(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>
+async function defaultFixture(args = {}) {
+  return fixture(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 name="pin" slot="before"></leu-icon>Menu Item 3<slot
+        name="after"
+        >CH</slot
+      ></leu-menu-item
+    >
+    <leu-menu-item>Menu Item 4</leu-menu-item>
   </leu-menu>`)
 }
 
@@ -25,6 +43,81 @@ describe("LeuMenu", () => {
   it("passes the a11y audit", async () => {
     const el = await defaultFixture()
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).dom.to.be.accessible()
+  })
+
+  it("sets 'menu' as the default role", async () => {
+    const el = await defaultFixture()
+
+    expect(el.getAttribute("role")).to.equal("menu")
+  })
+
+  it("sets 'menuitem' as the default role for menu items", async () => {
+    const el = await defaultFixture()
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitem")
+    })
+  })
+
+  it("sets 'menuitemradio' as the role for menu items when only one item can be selected", async () => {
+    const el = await defaultFixture({ selects: "single" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitemradio")
+    })
+  })
+
+  it("sets 'menuitemcheckbox' as the role for menu items when multiple items can be selected", async () => {
+    const el = await defaultFixture({ selects: "multiple" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("menuitemcheckbox")
+    })
+  })
+
+  it("sets 'option' as the role for menu items when the menu role is 'listbox'", async () => {
+    const el = await defaultFixture({ role: "listbox" })
+
+    const menuItems = el.querySelectorAll("leu-menu-item")
+
+    menuItems.forEach((menuItem) => {
+      expect(menuItem.componentRole).to.equal("option")
+    })
+  })
+
+  it("moves the focus when the arrow keys are pressed", async () => {
+    const el = await defaultFixture()
+
+    const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
+
+    await sendKeys({ press: "Tab" })
+    expect(document.activeElement).to.equal(menuItems[0])
+
+    await sendKeys({ press: "ArrowDown" })
+    await sendKeys({ press: "ArrowDown" })
+
+    expect(document.activeElement).to.equal(menuItems[2])
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+
+    expect(document.activeElement).to.equal(menuItems.at(-1))
+
+    await sendKeys({ press: "Home" })
+    expect(document.activeElement).to.equal(menuItems[0])
+
+    await sendKeys({ press: "End" })
+    expect(document.activeElement).to.equal(menuItems.at(-1))
+
+    await sendKeys({ press: "ArrowDown" })
+    expect(document.activeElement).to.equal(menuItems[0])
   })
 })

package/src/components/pagination/Pagination.js

@@ -1,24 +1,33 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import { live } from "lit/directives/live.js"
 
-import "../button/leu-button.js"
-import styles from "./pagination.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+import { LeuIcon } from "../icon/Icon.js"
 
-import "../visually-hidden/leu-visually-hidden.js"
+// @ts-ignore
+import styles from "./pagination.css"
 
 const MIN_PAGE = 1
 
 /**
  * @tagname leu-pagination
  */
-export class LeuPagination extends LitElement {
+export class LeuPagination extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -26,15 +35,6 @@ export class LeuPagination extends LitElement {
     defaultPage: { type: Number, reflect: true },
     itemsPerPage: { type: Number, reflect: true },
     numOfItems: { type: Number, reflect: true },
-
-    /**
-     * Internal page state that contains an
-     * already clamped page number. Should only
-     * be accessed through the `page` getter and
-     * setter.
-     * @type {Number}
-     * @internal
-     */
     _page: { state: true },
   }
 
@@ -43,9 +43,18 @@ export class LeuPagination extends LitElement {
 
     /** @type {Number} */
     this.numOfItems = 1
+
     /** @type {Number} */
     this.itemsPerPage = 1
-    /** @type {Number} */
+
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @type {Number}
+     * @internal
+     */
     this._page = 1
   }
 
@@ -148,22 +157,22 @@ export class LeuPagination extends LitElement {
       <div class="label">von ${this._maxPage}</div>
       <div class="button-group">
         <leu-button
-          icon="angleLeft"
           variant="secondary"
           label="Vorherige Seite"
           @click=${(_) => {
             this._updatePage(this.page - 1)
           }}
           ?disabled=${this._isFirstPage()}
+          ><leu-icon name="angleLeft"></leu-icon
         ></leu-button>
         <leu-button
-          icon="angleRight"
           variant="secondary"
           label="Nächste Seite"
           @click=${(_) => {
             this._updatePage(this.page + 1)
           }}
           ?disabled=${this._isLastPage()}
+          ><leu-icon name="angleRight"></leu-icon
         ></leu-button>
       </div>
     `

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPagination } from "./Pagination.js"
 
 export { LeuPagination }
 
-defineElement("pagination", LeuPagination)
+LeuPagination.define("leu-pagination")

package/src/components/popup/Popup.js

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
 import {
   autoUpdate,
   computePosition,
@@ -6,34 +6,37 @@ import {
   shift,
   size,
 } from "@floating-ui/dom"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 import styles from "./popup.css"
 
+/**
+ * @typedef {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"} Placement
+ */
+
 /**
  * @tagname leu-popup
  */
-export class LeuPopup extends LitElement {
+export class LeuPopup extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   static properties = {
     anchor: {},
-    active: { type: Boolean },
-    /**
-     * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
-     */
-    placement: { type: String },
-    flip: { type: Boolean },
-    shift: { type: Boolean },
-    shiftPadding: { type: Number },
-    /** @type {"width" | "height" | "both"} */
-    matchSize: { type: String },
-    /** @type {"width" | "height" | "both"} */
-    autoSize: { type: String },
-    autoSizePadding: { type: Number },
+    active: { type: Boolean, reflect: true },
+    placement: { type: String, reflect: true },
+    flip: { type: Boolean, reflect: true },
+    shift: { type: Boolean, reflect: true },
+    shiftPadding: { type: Number, reflect: true },
+    matchSize: { type: String, reflect: true },
+    autoSize: { type: String, reflect: true },
+    autoSizePadding: { type: Number, reflect: true },
   }
 
   constructor() {
@@ -43,6 +46,23 @@ export class LeuPopup extends LitElement {
     this.cleanup = undefined
     this.flip = false
     this.shift = false
+
+    this.active = false
+
+    /** @type {Placement} */
+    this.placement = undefined
+
+    /** @type {"width" | "height" | "both"} */
+    this.matchSize = undefined
+
+    /** @type {"width" | "height" | "both"} */
+    this.autoSize = undefined
+
+    this.shiftPadding = 0
+    this.autoSizePadding = 0
+
+    /** @type {string | HTMLElement} */
+    this.anchor = undefined
   }
 
   disconnectedCallback() {
@@ -68,6 +88,9 @@ export class LeuPopup extends LitElement {
     }
   }
 
+  /**
+   * @returns {HTMLElement | null}
+   */
   get popupEl() {
     return this.renderRoot?.querySelector(".popup") ?? null
   }

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuPopup } from "./Popup.js"
 
 export { LeuPopup }
 
-defineElement("popup", LeuPopup)
+LeuPopup.define("leu-popup")

package/src/components/popup/popup.css

@@ -19,6 +19,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  z-index: var(--leu-z-index-popup);
 }
 
 /* TODO: Should visibility be a matter of the popup component? */