@statistikzh/leu 0.3.0 → 0.4.0

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

@@ -0,0 +1,180 @@
+import { html } from "lit"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { spy } from "sinon"
+
+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)}
+      ?active=${args.active}
+      ?disabled=${args.disabled}
+    ></leu-menu-item>
+  `)
+}
+
+describe("LeuMenuItem", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-menu-item")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture({ label: "Download" })
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit with a link", async () => {
+    const el = await defaultFixture({
+      label: "Download",
+      href: "https://zh.ch",
+    })
+
+    await expect(el).shadowDom.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")
+  })
+
+  it("renders a button", async () => {
+    const el = await defaultFixture({ label: "Download" })
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.exist
+  })
+
+  it("renders a link", async () => {
+    const el = await defaultFixture({
+      label: "Kanton Zürich",
+      href: "https://zh.ch",
+    })
+
+    const link = el.shadowRoot.querySelector("a")
+
+    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>"
+    )
+  })
+
+  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
+
+    expect(el).shadowDom.to.equal(
+      "<button class='button'><span class='label'>Download</span><span class='after'></span></button>"
+    )
+  })
+
+  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")
+
+    expect(el).shadowDom.to.equal(
+      "<button class='button'><span class='label'>Download</span><span class='after'>DE</span></button>"
+    )
+  })
+
+  it("renders a after placeholder", async () => {
+    const el = await defaultFixture({ label: "Download", after: "EMPTY" })
+
+    const after = el.shadowRoot.querySelector(".after")
+    expect(after).to.exist
+    expect(after).to.not.have.trimmed.text()
+
+    const iconPlaceholder = after.querySelector(".icon-placeholder")
+    expect(iconPlaceholder).to.exist
+
+    expect(el).shadowDom.to.equal(
+      "<button class='button'><span class='label'>Download</span><span class='after'><div class='icon-placeholder'></div></span></button>"
+    )
+  })
+
+  it("passes the disabled attribute to the button", async () => {
+    const el = await defaultFixture({ label: "Download", disabled: true })
+
+    const button = el.shadowRoot.querySelector("button")
+    expect(button).to.have.attribute("disabled")
+  })
+
+  it("lets the click event bubble up", async () => {
+    const el = await defaultFixture({ label: "Download" })
+
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => {
+      button.click()
+    })
+
+    const event = await oneEvent(el, "click")
+
+    expect(event).to.exist
+  })
+
+  it("does not let the click event bubble up when disabled", async () => {
+    const el = await defaultFixture({ label: "Download", disabled: true })
+
+    const button = el.shadowRoot.querySelector("button")
+    const clickSpy = spy()
+    button.addEventListener("click", clickSpy)
+
+    el.click()
+
+    expect(clickSpy).to.have.not.been.called
+  })
+})

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

@@ -2,14 +2,22 @@ import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
 import "../leu-menu.js"
+import "../leu-menu-item.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-menu /> `)
+  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>
+    <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>`)
 }
 
 describe("LeuMenu", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-menu")
+    const el = customElements.get("leu-menu")
 
     await expect(el).not.to.be.undefined
   })

package/src/components/pagination/Pagination.js

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
-import { defineButtonElements } from "../button/Button.js"
+import { live } from "lit/directives/live.js"
 
+import "../button/leu-button.js"
 import styles from "./pagination.css"
 
 const MIN_PAGE = 1
@@ -12,16 +12,22 @@ const MIN_PAGE = 1
 export class LeuPagination extends LitElement {
   static styles = styles
 
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
   static events = {
     range: {},
   }
 
   static properties = {
     page: { type: Number, reflect: true },
-    itemsOnAPage: { type: Number, reflect: true },
-    dataLength: { type: Number, reflect: true },
-
-    _minPage: { type: Number, state: true },
+    itemsPerPage: { type: Number, reflect: true },
+    numOfItems: { type: Number, reflect: true },
   }
 
   constructor() {
@@ -29,45 +35,55 @@ export class LeuPagination extends LitElement {
     /** @type {number} */
     this.page = 1
     /** @type {number} */
-    this.dataLength = 0
+    this.numOfItems = 1
     /** @type {number} */
-    this.itemsOnAPage = 30
+    this.itemsPerPage = 1
   }
 
   get maxPage() {
-    return Math.ceil(this.dataLength / this.itemsOnAPage)
+    return Math.ceil(this.numOfItems / this.itemsPerPage)
   }
 
   get firstPage() {
-    return this.page === MIN_PAGE
+    return this.boundPage === MIN_PAGE
   }
 
   get lastPage() {
-    return this.page === this.maxPage
+    return this.boundPage === this.maxPage
   }
 
-  holdInRange(value) {
-    return Math.min(Math.max(value, MIN_PAGE), this.maxPage)
+  /**
+   * The boundPage getter is necessary to ensure that the current page (this.page) is always within the valid range of pages.
+   * It prevents the page number from going below the minimum page limit (MIN_PAGE) or above the maximum page limit (this.maxPage).
+   * This is important for the correct functioning of the pagination system, as it prevents users from navigating to non-existent pages.
+   *
+   * @returns {number}
+   */
+  get boundPage() {
+    return Math.min(Math.max(this.page, MIN_PAGE), this.maxPage)
   }
 
   numberUpdate(number) {
-    this.page = this.holdInRange(number)
-
-    const min = (this.page - 1) * this.itemsOnAPage
-    const max = Math.min(min + this.itemsOnAPage, this.dataLength)
-    this.dispatchEvent(
-      new CustomEvent("range-updated", {
-        detail: {
-          min,
-          max,
-        },
-        bubbles: false,
-      })
-    )
+    const prevPage = this.page
+    this.page = number
+
+    if (this.page !== prevPage) {
+      const startIndex = (this.boundPage - 1) * this.itemsPerPage
+      const endIndex = Math.min(startIndex + this.itemsPerPage, this.numOfItems)
+      this.dispatchEvent(
+        new CustomEvent("leu:pagechange", {
+          detail: {
+            startIndex,
+            endIndex,
+            page: this.boundPage,
+          },
+          bubbles: false,
+        })
+      )
+    }
   }
 
   change(event) {
-    // target.value = this.page // eslint-disable-line
     this.numberUpdate(parseInt(event.target.value, 10) || 0)
   }
 
@@ -79,46 +95,23 @@ export class LeuPagination extends LitElement {
   }
 
   keydown(event) {
-    const specialKeys = [
-      "ArrowUp",
-      "ArrowDown",
-      "ArrowLeft",
-      "ArrowRight",
-      "Backspace",
-      "Enter",
-      "Tab",
-    ]
-    const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
-    if (!numberKeys.includes(event.key) && !specialKeys.includes(event.key)) {
+    if (event.key === "ArrowUp") {
       event.preventDefault()
-    } else {
-      if (event.key === "ArrowUp") {
-        event.preventDefault()
-        this.numberUpdate(this.page + 1)
-      }
-      if (event.key === "ArrowDown") {
-        event.preventDefault()
-        this.numberUpdate(this.page - 1)
-      }
+      this.numberUpdate(this.boundPage + 1)
     }
-  }
-
-  firstUpdated() {
-    this.numberUpdate(this.page)
-  }
-
-  requestUpdate(name, oldValue, newValue) {
-    if (name === "itemsOnAPage") {
-      this.numberUpdate(this.page)
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this.numberUpdate(this.boundPage - 1)
     }
-    return super.requestUpdate(name, oldValue, newValue)
   }
 
   render() {
     return html`
       <input
         class="input"
-        .value=${this.page}
+        min=${MIN_PAGE}
+        max=${this.maxPage}
+        .value=${live(this.boundPage.toString())}
         @input=${this.input}
         @change=${this.change}
         @keydown=${this.keydown}
@@ -129,7 +122,7 @@ export class LeuPagination extends LitElement {
         icon="angleLeft"
         variant="secondary"
         @click=${(_) => {
-          this.numberUpdate(this.page - 1)
+          this.numberUpdate(this.boundPage - 1)
         }}
         ?disabled=${this.firstPage}
       ></leu-button>
@@ -137,7 +130,7 @@ export class LeuPagination extends LitElement {
         icon="angleRight"
         variant="secondary"
         @click=${(_) => {
-          this.numberUpdate(this.page + 1)
+          this.numberUpdate(this.boundPage + 1)
         }}
         ?disabled=${this.lastPage}
         style="margin-left:4px;"
@@ -145,8 +138,3 @@ export class LeuPagination extends LitElement {
     `
   }
 }
-
-export function definePaginationElements() {
-  defineButtonElements()
-  defineElement("pagination", LeuPagination)
-}

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

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

package/src/components/pagination/stories/pagination.stories.js

@@ -56,18 +56,26 @@ const items = [
 export default {
   title: "Pagination",
   component: "leu-pagination",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82468&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ min, max }, { id }) {
+function Template({ startIndex, endIndex }, { id }) {
   return html`
-    ${items.slice(min, max).map((item) => html`<div>${item.label}</div>`)}
+    ${items
+      .slice(startIndex, endIndex)
+      .map((item) => html`<div>${item.label}</div>`)}
     <leu-pagination
-      dataLength=${items.length}
-      itemsOnAPage="5"
-      @range-updated=${(e) => {
+      numOfItems=${items.length}
+      itemsPerPage="5"
+      @leu:pagechange=${(e) => {
         updateStorybookArgss(id, {
-          min: e.detail.min,
-          max: e.detail.max,
+          startIndex: e.detail.startIndex,
+          endIndex: e.detail.endIndex,
         })
       }}
     >
@@ -77,6 +85,6 @@ function Template({ min, max }, { id }) {
 
 export const Regular = Template.bind({})
 Regular.args = {
-  min: 0,
-  max: 5,
+  startIndex: 0,
+  endIndex: 5,
 }

package/src/components/pagination/test/pagination.test.js

@@ -1,22 +1,208 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { sendKeys } from "@web/test-runner-commands"
+import { spy } from "sinon"
 
 import "../leu-pagination.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-pagination></leu-button>`)
+async function defaultFixture(args = {}) {
+  return fixture(html`<leu-pagination
+    numOfItems=${ifDefined(args.numOfItems)}
+    itemsPerPage=${ifDefined(args.itemsPerPage)}
+    page=${ifDefined(args.page)}
+  >
+  </leu-pagination>`)
 }
 
 describe("LeuPagination", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-pagination")
+    const el = customElements.get("leu-pagination")
 
     await expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 1,
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("disables the previous button on the first page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 1,
+    })
+
+    const previous = el.shadowRoot.querySelectorAll("leu-button")[0]
+
+    expect(previous).to.have.attribute("disabled")
+  })
+
+  it("disables the next button on the last page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 14,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    expect(next).to.have.attribute("disabled")
+  })
+
+  it("renders the correct number of available pages", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 1,
+    })
+
+    const label = el.shadowRoot.querySelectorAll(".label")
+
+    expect(label).to.have.trimmed.text("von 14")
+  })
+
+  it("displays the current page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 2,
+    })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(input.value).to.equal("2")
+  })
+
+  it("increments the page with a click on the next button", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 1,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    next.click()
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(2)
+  })
+
+  it("decrements the page with a click on the prev button", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 10,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[0]
+
+    next.click()
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(9)
+  })
+
+  it("increments the page with pressing the arrow up key", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 1,
+    })
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowUp",
+    })
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(2)
+  })
+
+  it("decrements the page with pressing the arrow down key", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 13,
+    })
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowDown",
+    })
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(12)
+  })
+
+  it("bounds the page to the max and min values", async () => {
+    const el = await defaultFixture({
+      numOfItems: 50,
+      itemsPerPage: 10,
+      page: 6,
+    })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(el.boundPage).to.equal(5)
+    expect(input.value).to.equal("5")
+
+    el.page = 0
+    await elementUpdated(el)
+
+    expect(el.boundPage).to.equal(1)
+    expect(input.value).to.equal("1")
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowDown",
+    })
+    await elementUpdated(el)
+
+    expect(el.boundPage).to.equal(1)
+    expect(input.value).to.equal("1")
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+
+    expect(el.boundPage).to.equal(5)
+    expect(input.value).to.equal("5")
+  })
+
+  it("fires a leu:pagechange event", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 14,
+    })
+
+    const eventSpy = spy()
+    el.addEventListener("leu:pagechange", eventSpy)
+
+    const prevButton = el.shadowRoot.querySelectorAll("leu-button")[0]
+    const nextButton = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    nextButton.click()
+    prevButton.click()
+
+    el.focus()
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowDown" })
+
+    expect(eventSpy).to.have.been.called.callCount(4)
+  })
 })