@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/menu/MenuItem.js

@@ -1,5 +1,7 @@
-import { html, LitElement, nothing } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
+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"
@@ -25,16 +27,18 @@ export class LeuMenuItem extends LitElement {
      * 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 },
+    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 },
+    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 },
+    href: { type: String, reflect: true },
   }
 
   constructor() {
@@ -42,8 +46,6 @@ export class LeuMenuItem extends LitElement {
 
     this.active = false
     this.disabled = false
-    this.before = ""
-    this.after = ""
 
     /**
      * A programmatic way to highlight the menu item like it is hovered.
@@ -65,7 +67,7 @@ export class LeuMenuItem extends LitElement {
   }
 
   renderBefore() {
-    if (this.before !== "") {
+    if (this.before) {
       const content = LeuMenuItem.getIconOrText(this.before)
       return html`<span class="before">${content}</span>`
     }
@@ -74,7 +76,7 @@ export class LeuMenuItem extends LitElement {
   }
 
   renderAfter() {
-    if (this.after !== "") {
+    if (this.after) {
       const content = LeuMenuItem.getIconOrText(this.after)
       return html`<span class="after">${content}</span>`
     }
@@ -82,14 +84,19 @@ export class LeuMenuItem extends LitElement {
     return nothing
   }
 
+  getTagName() {
+    return this.href ? "a" : "button"
+  }
+
   render() {
-    return html`<button class="button" ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label"><slot></slot></span
+    /* 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 */
   }
 }
-
-export function defineMenuItemElements() {
-  defineElement("menu-item", LeuMenuItem)
-}

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

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

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

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

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

@@ -7,15 +7,17 @@
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
   --background-active: var(--leu-color-func-cyan);
-  --background-disabled: var(--leu-color-black-0);
+  --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-disabled: var(--leu-color-black-transp-20);
   --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;
@@ -51,6 +53,7 @@
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
+  --color: var(--color-disabled);
   cursor: default;
 }
 

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

@@ -9,16 +9,24 @@ export default {
   args: {
     label: "Menu Item",
   },
+  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(args) {
   return html`
     <leu-menu-item
+      label=${args.label}
       before=${ifDefined(args.before)}
       after=${ifDefined(args.after)}
+      href=${ifDefined(args.href)}
       ?active=${args.active}
-      >${args.label}</leu-menu-item
-    >
+      ?disabled=${args.disabled}
+    ></leu-menu-item>
   `
 }
 
@@ -34,9 +42,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({})

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,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 },
-    dataLength: { type: Number },
-
-    _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,
 }