@statistikzh/leu 0.3.0 → 0.5.0

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

@@ -5,16 +5,22 @@ import "../leu-menu-item.js"
 export default {
   title: "Menu",
   component: "leu-menu",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template() {
   return html` <leu-menu>
-    <leu-menu-item before="EMPTY">Menu Item 1</leu-menu-item>
-    <leu-menu-item before="check" active>Menu Item 2</leu-menu-item>
-    <leu-menu-item before="EMPTY">Menu Item 3</leu-menu-item>
+    <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 before="pin" after="CH">Menu Item 3</leu-menu-item>
-    <leu-menu-item>Menu Item 4</leu-menu-item>
+    <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>`
 }
 

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,9 +1,11 @@
 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"
 
+import "../visually-hidden/leu-visually-hidden.js"
+
 const MIN_PAGE = 1
 
 /**
@@ -12,141 +14,158 @@ const MIN_PAGE = 1
 export class LeuPagination extends LitElement {
   static styles = styles
 
-  static events = {
-    range: {},
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
   }
 
   static properties = {
-    page: { type: Number, reflect: true },
-    itemsOnAPage: { type: Number, reflect: true },
-    dataLength: { type: Number, reflect: true },
-
-    _minPage: { type: Number, state: true },
+    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 },
   }
 
   constructor() {
     super()
-    /** @type {number} */
-    this.page = 1
-    /** @type {number} */
-    this.dataLength = 0
-    /** @type {number} */
-    this.itemsOnAPage = 30
+
+    /** @type {Number} */
+    this.numOfItems = 1
+    /** @type {Number} */
+    this.itemsPerPage = 1
+    /** @type {Number} */
+    this._page = 1
   }
 
-  get maxPage() {
-    return Math.ceil(this.dataLength / this.itemsOnAPage)
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal)
+
+    if (name === "defaultpage" && newVal !== oldVal) {
+      this.page = parseInt(newVal, 10)
+    }
   }
 
-  get firstPage() {
-    return this.page === MIN_PAGE
+  get page() {
+    return this._page
   }
 
-  get lastPage() {
-    return this.page === this.maxPage
+  set page(page) {
+    this._page = this._clampPage(page)
   }
 
-  holdInRange(value) {
-    return Math.min(Math.max(value, MIN_PAGE), this.maxPage)
+  get startIndex() {
+    return (this.page - 1) * this.itemsPerPage
   }
 
-  numberUpdate(number) {
-    this.page = this.holdInRange(number)
+  get endIndex() {
+    return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems)
+  }
 
-    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,
-      })
-    )
+  get _maxPage() {
+    return Math.ceil(this.numOfItems / this.itemsPerPage)
   }
 
-  change(event) {
-    // target.value = this.page // eslint-disable-line
-    this.numberUpdate(parseInt(event.target.value, 10) || 0)
+  _isFirstPage() {
+    return this.page === MIN_PAGE
   }
 
-  input(event) {
-    if (event.target.value !== "") {
-      event.preventDefault()
-      this.change(event)
-    }
+  _isLastPage() {
+    return this.page === this._maxPage
   }
 
-  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)) {
-      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)
-      }
+  _clampPage(page) {
+    return Math.min(Math.max(page, MIN_PAGE), this._maxPage)
+  }
+
+  _updatePage(page) {
+    const prevPage = this.page
+    this.page = this._clampPage(page)
+
+    if (this.page !== prevPage) {
+      this.dispatchEvent(
+        new CustomEvent("leu:pagechange", {
+          detail: {
+            startIndex: this.startIndex,
+            endIndex: this.endIndex,
+            page: this.page,
+          },
+          bubbles: false,
+        })
+      )
     }
   }
 
-  firstUpdated() {
-    this.numberUpdate(this.page)
+  _handleChange(event) {
+    this._updatePage(parseInt(event.target.value, 10) || 0)
+  }
+
+  _handleInput(event) {
+    if (event.target.value !== "") {
+      event.preventDefault()
+      this._handleChange(event)
+    }
   }
 
-  requestUpdate(name, oldValue, newValue) {
-    if (name === "itemsOnAPage") {
-      this.numberUpdate(this.page)
+  _handleKeyDown(event) {
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      this._updatePage(this.page + 1)
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      this._updatePage(this.page - 1)
     }
-    return super.requestUpdate(name, oldValue, newValue)
   }
 
   render() {
     return html`
+      <leu-visually-hidden>
+        <label for="page-input">Aktuelle Seite</label>
+      </leu-visually-hidden>
       <input
+        id="page-input"
         class="input"
-        .value=${this.page}
-        @input=${this.input}
-        @change=${this.change}
-        @keydown=${this.keydown}
+        min=${MIN_PAGE}
+        max=${this._maxPage}
+        .value=${live(this.page.toString())}
+        @input=${this._handleInput}
+        @change=${this._handleChange}
+        @keydown=${this._handleKeyDown}
         type="number"
       />
-      <div class="label">von ${this.maxPage}</div>
-      <leu-button
-        icon="angleLeft"
-        variant="secondary"
-        @click=${(_) => {
-          this.numberUpdate(this.page - 1)
-        }}
-        ?disabled=${this.firstPage}
-      ></leu-button>
-      <leu-button
-        icon="angleRight"
-        variant="secondary"
-        @click=${(_) => {
-          this.numberUpdate(this.page + 1)
-        }}
-        ?disabled=${this.lastPage}
-        style="margin-left:4px;"
-      ></leu-button>
+      <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-button>
+        <leu-button
+          icon="angleRight"
+          variant="secondary"
+          label="Nächste Seite"
+          @click=${(_) => {
+            this._updatePage(this.page + 1)
+          }}
+          ?disabled=${this._isLastPage()}
+        ></leu-button>
+      </div>
     `
   }
 }
-
-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/pagination.css

@@ -2,7 +2,7 @@
   margin-top: 16px;
   display: flex;
   justify-content: end;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 .input {
@@ -47,3 +47,8 @@
   color: var(--leu-color-black-transp-60);
   white-space: nowrap;
 }
+
+.button-group {
+  display: flex;
+  gap: 0.25rem;
+}

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

@@ -1,8 +1,11 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
+
 import "../leu-pagination.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+import { ifDefined } from "lit/directives/if-defined.js"
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {
@@ -56,18 +59,34 @@ const items = [
 export default {
   title: "Pagination",
   component: "leu-pagination",
+  args: {
+    onPageChange: action("leu:pagechange"),
+  },
+  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, onPageChange, itemsPerPage, defaultPage },
+  { 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=${ifDefined(itemsPerPage)}
+      defaultPage=${ifDefined(defaultPage)}
+      @leu:pagechange=${(e) => {
+        onPageChange(e)
         updateStorybookArgss(id, {
-          min: e.detail.min,
-          max: e.detail.max,
+          startIndex: e.detail.startIndex,
+          endIndex: e.detail.endIndex,
         })
       }}
     >
@@ -77,6 +96,8 @@ function Template({ min, max }, { id }) {
 
 export const Regular = Template.bind({})
 Regular.args = {
-  min: 0,
-  max: 5,
+  startIndex: 0,
+  endIndex: 5,
+  itemsPerPage: 5,
+  // defaultPage: 2,
 }