@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/select/test/select.test.js

@@ -1,29 +1,253 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "./fixtures.js"
 
-async function defaultFixture() {
-  return fixture(html`
-    <leu-select
-      options='[{"label":"Option 1", "value":"1"}, "Option 2", "Option 3", "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird."]'
-      label="Label"
-      value=${null}
-    >
-    </leu-select>
-  `)
+async function defaultFixture(args = {}) {
+  return fixture(html`<leu-select
+    .options=${args.options}
+    label=${ifDefined(args.label)}
+    .value=${args.value ?? []}
+    ?clearable=${args.clearable}
+    ?disabled=${args.disabled}
+    ?filterable=${args.filterable}
+    ?multiple=${args.multiple}
+  >
+  </leu-select> `)
 }
 
 describe("LeuSelect", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-select")
+    const el = customElements.get("leu-select")
 
     await expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("passes the a11y audit in the open state", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      open: true,
+    })
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders a label", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+
+    expect(toggleButton).to.have.trimmed.text("Gemeinde")
+  })
+
+  it("doesn't show the list of options by default", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog).to.not.have.attribute("open")
+  })
+
+  it("opens the list of options when the toggle button is clicked", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+    await elementUpdated(el)
+
+    expect(dialog).to.have.attribute("open")
+  })
+
+  it("has a default value of an empty array", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("marks the menu item as selected a the value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector(
+      "leu-menu-item[label='Affoltern am Albis']"
+    )
+
+    expect(menuItem).to.have.attribute("active")
+    expect(menuItem).to.have.attribute("aria-selected")
+  })
+
+  it("shows the clear button when a value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+      clearable: true,
+    })
+
+    const clearButton = el.shadowRoot.querySelector(".clear-button")
+
+    expect(clearButton).to.exist
+  })
+
+  it("renders a input field to filter the options", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+
+    expect(filterInput).to.exist
+  })
+
+  it("filters the options when the filter input is changed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(6)
+  })
+
+  it("resets the filter when the filter input is cleared", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const clearFilterButton =
+      filterInput.shadowRoot.querySelector(".clear-button")
+    clearFilterButton.click()
+    await elementUpdated(el)
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(MUNICIPALITIES.length)
+  })
+
+  it("renders a message when no options are available", async () => {
+    const el = await defaultFixture({
+      options: [],
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Optionen")
+  })
+
+  it("renders a message when no options are available after filtering", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albissss" })
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Resultate")
+  })
+
+  it("renders a apply button when multiple selection is allowed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const applyButton = el.shadowRoot.querySelector("leu-menu + .apply-button")
+    expect(applyButton).to.exist
+  })
+
+  it("updates the value when an option is selected", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item[label='Maur']")
+    menuItem.click()
+
+    expect(el.value).to.deep.equal(["Maur"])
+  })
+
+  it("allows a value with multiple values", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    el.shadowRoot.querySelector("leu-menu-item[label='Maur']").click()
+    el.shadowRoot.querySelector("leu-menu-item[label='Zollikon']").click()
+
+    expect(el.value).to.deep.equal(["Maur", "Zollikon"])
+  })
 })

package/src/components/table/Table.js

@@ -1,116 +1,30 @@
-import { html, css, LitElement, nothing } from "lit"
+import { html, LitElement, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
-import { definePaginationElements } from "../pagination/Pagination.js"
+import "../pagination/leu-pagination.js"
+
+import styles from "./table.css"
 
 /**
  * @tagname leu-table
  */
 export class LeuTable extends LitElement {
-  static styles = css`
-    :host {
-      position: relative;
-      display: block;
-    }
-    div.scroll {
-      display: inline-block;
-      width: 100%;
-      overflow: auto;
-    }
-    div.shadow {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      pointer-events: none;
-      z-index: 1;
-    }
-    div.pagination {
-      height: calc(100% - 66px);
-    }
-    table {
-      width: 100%;
-      border-spacing: 0;
-      color: rgb(0 0 0 / 60%);
-      font-size: 16px;
-      font-family: var(--leu-font-regular);
-      line-height: 1.5;
-    }
-    td {
-      padding: 12px;
-    }
-    th {
-      padding: 16px 16px 8px;
-      text-align: left;
-      font-size: 12px;
-      font-weight: normal;
-      font-family: var(--leu-font-black);
-      background: var(--table-even-row-bg);
-    }
-    td:first-child,
-    th:first-child {
-      left: 0;
-      background: inherit;
-      z-index: 1;
-    }
-    tr {
-      background: #fff;
-    }
-    tbody tr:nth-child(odd) {
-      background: var(--leu-color-black-5);
-    }
-    button {
-      background: none;
-      cursor: pointer;
-      line-height: 1.5;
-      padding: 0;
-      border: 0;
-      width: 100%;
-      display: flex;
-      align-items: flex-center;
-      font-size: inherit;
-      font-family: inherit;
-    }
-    thead svg {
-      display: inline-block;
-      color: var(--leu-color-accent-blue);
-      padding: 0;
-    }
-
-    table.sticky td:first-child,
-    table.sticky th:first-child {
-      position: sticky;
-    }
-    div.shadow-left table.sticky td:first-child,
-    div.shadow-left table.sticky th:first-child {
-      box-shadow: 0 0 5px rgb(0 0 0 / 50%);
-      clip-path: inset(0 -15px 0 0);
-    }
-    div.shadow-left {
-      box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-    div.shadow-right {
-      box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
-    }
-  `
+  static styles = styles
 
   static properties = {
     columns: { type: Array },
     data: { type: Array },
     firstColumnSticky: { type: Boolean, reflect: true },
-    itemsOnAPage: { type: Number, reflect: true },
+    itemsPerPage: { type: Number, reflect: true },
     sortIndex: { type: Number, reflect: true },
     sortOrderAsc: { type: Boolean, reflect: true },
     width: { type: Number, reflect: true },
 
-    _shadowLeft: { type: Boolean, state: true },
-    _shadowRight: { type: Boolean, state: true },
-    _min: { type: Number, state: true },
-    _max: { type: Number, state: true },
+    _shadowLeft: { state: true },
+    _shadowRight: { state: true },
+    _page: { state: true },
   }
 
   constructor() {
@@ -122,7 +36,7 @@ export class LeuTable extends LitElement {
     /** @type {boolean} */
     this.firstColumnSticky = false
     /** @type {number} */
-    this.itemsOnAPage = null
+    this.itemsPerPage = null
     /** @type {number} */
     this.sortIndex = null
     /** @type {boolean} */
@@ -140,14 +54,31 @@ export class LeuTable extends LitElement {
     this._shadowRight = false
     /** @internal */
     this._scrollRef = createRef()
+
     /** @internal */
-    this._min = 0
-    /** @internal */
-    this._max = null
+    this._page = 1
+
+    this._resizeObserver = new ResizeObserver(() => {
+      this.shadowToggle(this._scrollRef.value)
+    })
+  }
+
+  disconnectedCallback() {
+    this._resizeObserver.disconnect()
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal)
+
+    if (name === "itemsperpage" || name === "data") {
+      this._page = 1
+    }
   }
 
   firstUpdated() {
     this.shadowToggle(this._scrollRef.value)
+
+    this._resizeObserver.observe(this._scrollRef.value)
   }
 
   shadowToggle(target) {
@@ -205,8 +136,11 @@ export class LeuTable extends LitElement {
   }
 
   get _data() {
-    return this.itemsOnAPage && this.itemsOnAPage > 0
-      ? this._sortedData.slice(this._min, this._max)
+    return this.itemsPerPage && this.itemsPerPage > 0
+      ? this._sortedData.slice(
+          (this._page - 1) * this.itemsPerPage,
+          this._page * this.itemsPerPage
+        )
       : this._sortedData
   }
 
@@ -219,13 +153,13 @@ export class LeuTable extends LitElement {
     const shadowClassesLeft = {
       shadow: true,
       "shadow-left": !this.firstColumnSticky && this._shadowLeft,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const shadowClassesRight = {
       shadow: true,
       "shadow-right": this._shadowRight,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const stickyClass = {
@@ -274,18 +208,14 @@ export class LeuTable extends LitElement {
         <div class=${classMap(shadowClassesRight)}></div>
       </div>
 
-      ${this.itemsOnAPage > 0
+      ${this.itemsPerPage > 0
         ? html`
             <leu-pagination
-              .dataLength=${this._sortedData.length}
-              .itemsOnAPage=${this.itemsOnAPage}
-              @range-updated=${(e) => {
-                this._min = e.detail.min
-                this._max = e.detail.max
-                // after render
-                setTimeout(() => {
-                  this.shadowToggle(this._scrollRef.value)
-                }, 0)
+              .numOfItems=${this._sortedData.length}
+              .itemsPerPage=${this.itemsPerPage}
+              page=${this._page}
+              @leu:pagechange=${(e) => {
+                this._page = e.detail.page
               }}
             >
             </leu-pagination>
@@ -294,8 +224,3 @@ export class LeuTable extends LitElement {
     `
   }
 }
-
-export function defineTableElements() {
-  definePaginationElements()
-  defineElement("table", LeuTable)
-}

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

@@ -1,3 +1,6 @@
-import { defineTableElements } from "./Table.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuTable } from "./Table.js"
 
-defineTableElements()
+export { LeuTable }
+
+defineElement("table", LeuTable)

package/src/components/table/stories/table.stories.js

@@ -4,15 +4,17 @@ import "../leu-table.js"
 export default {
   title: "Table",
   component: "leu-table",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=316-2445&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ itemsOnAPage }) {
+function Template({ itemsPerPage }) {
   return html`
-    <leu-table
-      id="table"
-      itemsOnAPage=${itemsOnAPage}
-      style="max-width:500px;"
-    ></leu-table>
+    <leu-table id="table" itemsPerPage=${itemsPerPage}></leu-table>
     <script>
       {
         const table = document.querySelector("leu-table[id=table]")
@@ -39,7 +41,10 @@ function Template({ itemsOnAPage }) {
             value: (row) => row.menge,
             style: (row) => {
               return {
-                color: row.menge > 10 ? "green" : "red",
+                color:
+                  row.menge > 10
+                    ? "var(--leu-color-func-green)"
+                    : "var(--leu-color-func-red)",
               }
             },
             sort: {
@@ -96,7 +101,7 @@ function Template({ itemsOnAPage }) {
 
 export const Regular = Template.bind({})
 Regular.argTypes = {
-  itemsOnAPage: { type: "number" },
+  itemsPerPage: { type: "number" },
   columns: { table: { disable: true } },
   data: { table: { disable: true } },
   _columns: { table: { disable: true } },
@@ -108,9 +113,14 @@ Regular.argTypes = {
   _sortArrowDown: { table: { disable: true } },
   _sortArrowUp: { table: { disable: true } },
   _scrollRef: { table: { disable: true } },
-  _itemsOnAPage: { table: { disable: true } },
+  _itemsPerPage: { table: { disable: true } },
   _sortedData: { table: { disable: true } },
 }
 Regular.args = {
-  itemsOnAPage: null,
+  itemsPerPage: null,
+}
+
+export const Pagination = Template.bind({})
+Pagination.args = {
+  itemsPerPage: 10,
 }

package/src/components/table/table.css

@@ -0,0 +1,99 @@
+:host {
+  position: relative;
+  display: block;
+}
+
+div.scroll {
+  display: inline-block;
+  width: 100%;
+  overflow: auto;
+}
+
+div.shadow {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 1;
+}
+
+div.pagination {
+  height: calc(100% - 66px);
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  color: rgb(0 0 0 / 60%);
+  font-size: 16px;
+  font-family: var(--leu-font-family-regular);
+  line-height: 1.5;
+}
+
+td {
+  padding: 12px;
+}
+
+th {
+  padding: 16px 16px 8px;
+  text-align: left;
+  font-size: 12px;
+  font-weight: normal;
+  font-family: var(--leu-font-family-black);
+  background: var(--table-even-row-bg);
+}
+
+td:first-child,
+th:first-child {
+  left: 0;
+  background: inherit;
+  z-index: 1;
+}
+
+tr {
+  background: #fff;
+}
+
+tbody tr:nth-child(odd) {
+  background: var(--leu-color-black-5);
+}
+
+button {
+  background: none;
+  cursor: pointer;
+  line-height: 1.5;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-center;
+  font-size: inherit;
+  font-family: inherit;
+}
+
+thead svg {
+  display: inline-block;
+  color: var(--leu-color-accent-blue);
+  padding: 0;
+}
+
+table.sticky td:first-child,
+table.sticky th:first-child {
+  position: sticky;
+}
+
+div.shadow-left table.sticky td:first-child,
+div.shadow-left table.sticky th:first-child {
+  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
+  clip-path: inset(0 -15px 0 0);
+}
+
+div.shadow-left {
+  box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
+}
+
+div.shadow-right {
+  box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
+}

package/src/components/table/test/table.test.js

@@ -23,7 +23,7 @@ async function defaultFixture() {
 
 describe("LeuTable", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-table")
+    const el = customElements.get("leu-table")
 
     await expect(el).not.to.be.undefined
   })

package/src/components/visually-hidden/VisuallyHidden.js

@@ -0,0 +1,13 @@
+import { html, LitElement } from "lit"
+import styles from "./visually-hidden.css"
+
+/**
+ * @tagname leu-visually-hidden
+ */
+export class LeuVisuallyHidden extends LitElement {
+  static styles = styles
+
+  render() {
+    return html`<slot></slot>`
+  }
+}

package/src/components/visually-hidden/leu-visually-hidden.js

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuVisuallyHidden } from "./VisuallyHidden.js"
+
+export { LeuVisuallyHidden }
+
+defineElement("visually-hidden", LeuVisuallyHidden)