@statistikzh/leu 0.2.0 → 0.4.0

package/src/components/chip/test/chip-group.test.js

@@ -0,0 +1,124 @@
+import { html } from "lit"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+
+import "../leu-chip-selectable.js"
+import "../leu-chip-removable.js"
+import "../leu-chip-group.js"
+
+async function removableFixture() {
+  return fixture(
+    html`
+      <leu-chip-group>
+        <leu-chip-removable label="Publikationen"></leu-chip-removable>
+        <leu-chip-removable label="Daten" value="2"></leu-chip-removable>
+        <leu-chip-removable
+          label="Schnittstellen"
+          value="3"
+        ></leu-chip-removable>
+      </leu-chip-group>
+    `
+  )
+}
+
+async function singleSelectionFixture() {
+  return fixture(
+    html`
+      <leu-chip-group selection-mode="single">
+        <leu-chip-selectable
+          label="Publikationen"
+          value="1"
+          variant="radio"
+        ></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Daten"
+          value="2"
+          variant="radio"
+        ></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Schnittstellen"
+          value="3"
+          variant="radio"
+        ></leu-chip-selectable>
+      </leu-chip-group>
+    `
+  )
+}
+
+async function multipleSelectionFixture() {
+  return fixture(
+    html`
+      <leu-chip-group selection-mode="multiple">
+        <leu-chip-selectable
+          label="Publikationen"
+          value="1"
+        ></leu-chip-selectable>
+        <leu-chip-selectable label="Daten" value="2"></leu-chip-selectable>
+        <leu-chip-selectable
+          label="Schnittstellen"
+          value="3"
+        ></leu-chip-selectable>
+      </leu-chip-group>
+    `
+  )
+}
+
+describe("LeuChipGroup", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-selectable")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit with removable chips", async () => {
+    const el = await removableFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit with selectable chips", async () => {
+    const el = await multipleSelectionFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit with selectable radio chips", async () => {
+    const el = await singleSelectionFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("updates the value when a chip is selected", async () => {
+    const el = await singleSelectionFixture()
+    const chip = el.querySelector("leu-chip-selectable")
+    const chipButton = chip.shadowRoot.querySelector("button")
+    chipButton.click()
+
+    await expect(el.value).to.deep.equal(["1"])
+  })
+
+  it("updates the value when multiple chips are selected", async () => {
+    const el = await multipleSelectionFixture()
+    const chips = el.querySelectorAll("leu-chip-selectable")
+    const chipButton2 = chips[1].shadowRoot.querySelector("button")
+    const chipButton3 = chips[2].shadowRoot.querySelector("button")
+
+    chipButton2.click()
+    chipButton3.click()
+
+    await expect(el.value).to.deep.equal(["2", "3"])
+  })
+
+  it("fires an input event when a chip is selected", async () => {
+    const el = await singleSelectionFixture()
+    const chip = el.querySelector("leu-chip-selectable")
+    const chipButton = chip.shadowRoot.querySelector("button")
+
+    setTimeout(() => {
+      chipButton.click()
+    }, 0)
+
+    const event = await oneEvent(el, "input")
+
+    await expect(event).to.exist
+  })
+})

package/src/components/chip/test/chip-link.test.js

@@ -0,0 +1,58 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-chip-link.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`
+      <leu-chip-link label="Daten" href="https://zh.ch/daten"></leu-chip-link>
+    `
+  )
+}
+
+describe("LeuChipLink", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-link")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the label", async () => {
+    const el = await defaultFixture()
+
+    const link = el.shadowRoot.querySelector("a")
+
+    expect(link).to.have.trimmed.text("Daten")
+  })
+
+  it("renders a link element", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("a")).to.exist
+  })
+
+  it("passes the href attribute to the link", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("a").getAttribute("href")).to.equal(
+      "https://zh.ch/daten"
+    )
+  })
+
+  it("delegates the focus to the a element", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+
+    expect(el.shadowRoot.querySelector("a")).to.equal(
+      el.shadowRoot.activeElement
+    )
+  })
+})

package/src/components/chip/test/chip-removable.test.js

@@ -0,0 +1,79 @@
+import { html } from "lit"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
+
+import { iconPaths } from "../../icon/icon.js"
+
+import "../leu-chip-group.js"
+
+async function defaultFixture() {
+  return fixture(
+    html` <leu-chip-removable label="Daten"></leu-chip-removable> `
+  )
+}
+
+describe("LeuChipRemovable", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-removable")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the label", async () => {
+    const el = await defaultFixture()
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.trimmed.text("Daten")
+  })
+
+  it("renders a button element", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("button")).to.exist
+  })
+
+  it("renders a remove icon", async () => {
+    const el = await defaultFixture()
+
+    const iconPath = el.shadowRoot.querySelector("svg path")
+
+    expect(iconPath.getAttribute("d")).to.equal(iconPaths.close)
+  })
+
+  it("delegates the focus to the button element", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+
+    expect(el.shadowRoot.querySelector("button")).to.equal(
+      el.shadowRoot.activeElement
+    )
+  })
+
+  it("fires a remove event when the button is clicked", async () => {
+    const el = await defaultFixture()
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+    const event = await oneEvent(el, "remove")
+
+    expect(event).to.exist
+  })
+
+  it("fires a remove event when the enter key is pressed", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+    setTimeout(() => sendKeys({ press: "Enter" }))
+    const event = await oneEvent(el, "remove")
+
+    expect(event).to.exist
+  })
+})

package/src/components/chip/test/chip-selectable.test.js

@@ -0,0 +1,95 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { fixture, expect, oneEvent } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
+
+import "../leu-chip-selectable.js"
+
+async function defaultFixture(args = {}) {
+  return fixture(
+    html`
+      <leu-chip-selectable
+        label="Publikationen"
+        value="Publikationen"
+        variant=${ifDefined(args.variant)}
+        ?selected=${args.selected}
+      ></leu-chip-selectable>
+    `
+  )
+}
+
+describe("LeuChipSelectable", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-chip-selectable")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders the label", async () => {
+    const el = await defaultFixture()
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.trimmed.text("Publikationen")
+  })
+
+  it("renders a button element", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("button")).to.exist
+  })
+
+  it("delegates the focus to the button element", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+
+    expect(el.shadowRoot.querySelector("button")).to.equal(
+      el.shadowRoot.activeElement
+    )
+  })
+
+  it("fires a input event when the button is clicked", async () => {
+    const el = await defaultFixture()
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+    const event = await oneEvent(el, "input")
+
+    expect(event).to.exist
+  })
+
+  it("fires a input event when the enter key is pressed", async () => {
+    const el = await defaultFixture()
+
+    el.focus()
+    setTimeout(() => sendKeys({ press: "Enter" }))
+    const event = await oneEvent(el, "input")
+
+    expect(event).to.exist
+  })
+
+  it("removes the selected state when the button is clicked", async () => {
+    const el = await defaultFixture({ selected: true })
+    const button = el.shadowRoot.querySelector("button")
+
+    button.click()
+
+    expect(el.selected).to.be.false
+  })
+
+  it("doesn't remove the selected state of a selected radio chip", async () => {
+    const el = await defaultFixture({ variant: "radio", selected: true })
+
+    const button = el.shadowRoot.querySelector("button")
+    button.click()
+
+    expect(el.selected).to.be.true
+  })
+})

package/src/components/chip/test/chip.test.js

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

package/src/components/dropdown/Dropdown.js

@@ -1,10 +1,10 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./dropdown.css"
 
-import { defineButtonElements } from "../button/Button.js"
-import { defineMenuElements } from "../menu/Menu.js"
-import { defineMenuItemElements } from "../menu/MenuItem.js"
+import "../button/leu-button.js"
+import "../menu/leu-menu.js"
+import "../menu/leu-menu-item.js"
+import "../popup/leu-popup.js"
 
 /**
  * @tagname leu-dropdown
@@ -13,7 +13,7 @@ export class LeuDropdown extends LitElement {
   static styles = styles
 
   static properties = {
-    label: { type: String },
+    label: { type: String, reflect: true },
     expanded: { type: Boolean, reflect: true },
   }
 
@@ -22,34 +22,62 @@ export class LeuDropdown extends LitElement {
 
     this.label = ""
     this.expanded = false
+    this.menuItems = []
   }
 
-  handleClick() {
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this._removeMenuItemListeners()
+  }
+
+  _handleSlotChange() {
+    this._removeMenuItemListeners()
+    this.menuItems = [...this.querySelectorAll("leu-menu > leu-menu-item")]
+
+    this.menuItems.forEach((item) =>
+      item.addEventListener("click", this._handleMenuItemClick)
+    )
+  }
+
+  _removeMenuItemListeners() {
+    this.menuItems.forEach((item) => {
+      item.removeEventListener("click", this._handleMenuItemClick)
+    })
+  }
+
+  _handleMenuItemClick = () => {
+    this.expanded = false
+  }
+
+  _handleToggleClick() {
     this.expanded = !this.expanded
   }
 
   render() {
     return html`
-      <leu-button
-        icon="download"
-        variant="ghost"
-        label=${this.label}
-        expanded=${this.expanded ? "open" : "closed"}
-        aria-expanded=${this.expanded ? "true" : "false"}
-        aria-controls="content"
+      <leu-popup
         ?active=${this.expanded}
-        @click=${this.handleClick}
-      ></leu-button>
-      <div id="content" class="content" ?hidden=${!this.expanded}>
-        <slot></slot>
-      </div>
+        placement="bottom-start"
+        shift
+        shiftPadding="8"
+        autoSize="width"
+        autoSizePadding="8"
+      >
+        <leu-button
+          slot="anchor"
+          icon="download"
+          variant="ghost"
+          label=${this.label}
+          expanded=${this.expanded ? "open" : "closed"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-controls="content"
+          ?active=${this.expanded}
+          @click=${this._handleToggleClick}
+        ></leu-button>
+        <div id="content" class="content" ?hidden=${!this.expanded}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+        </div>
+      </leu-popup>
     `
   }
 }
-
-export function defineDropdownElements() {
-  defineElement("dropdown", LeuDropdown)
-  defineButtonElements()
-  defineMenuElements()
-  defineMenuItemElements()
-}

package/src/components/dropdown/dropdown.css

@@ -12,6 +12,5 @@
   box-shadow: var(--leu-box-shadow-short);
   border-radius: 2px;
 
-  position: absolute;
-  top: calc(100% + 0.5rem);
+  margin-top: 0.5rem;
 }

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

@@ -1,3 +1,6 @@
-import { defineDropdownElements } from "./Dropdown.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuDropdown } from "./Dropdown.js"
 
-defineDropdownElements()
+export { LeuDropdown }
+
+defineElement("dropdown", LeuDropdown)

package/src/components/dropdown/stories/dropdown.stories.js

@@ -4,17 +4,23 @@ import "../leu-dropdown.js"
 export default {
   title: "Dropdown",
   component: "leu-dropdown",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=136815-217650&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template({ label, expanded }) {
   return html` <leu-dropdown label=${label} ?expanded=${expanded}>
     <leu-menu>
-      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
-      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+      <leu-menu-item label="Als CSV Tabelle"></leu-menu-item>
+      <leu-menu-item label="Als XLS Tabelle"></leu-menu-item>
       <hr />
-      <leu-menu-item>Als PNG exportieren</leu-menu-item>
-      <leu-menu-item>Als SVG exportieren</leu-menu-item>
-      <leu-menu-item>Als PDF exportieren</leu-menu-item>
+      <leu-menu-item label="Als PNG exportieren"></leu-menu-item>
+      <leu-menu-item label="Als SVG exportieren"></leu-menu-item>
+      <leu-menu-item label="Als PDF exportieren" disabled></leu-menu-item>
     </leu-menu>
   </leu-dropdown>`
 }

package/src/components/dropdown/test/dropdown.test.js

@@ -6,19 +6,19 @@ import "../leu-dropdown.js"
 async function defaultFixture() {
   return fixture(html` <leu-dropdown label="Download">
     <leu-menu>
-      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
-      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
+      <leu-menu-item label="Als CSV Tabelle"></leu-menu-item>
+      <leu-menu-item label="Als XLS Tabelle"></leu-menu-item>
       <hr />
-      <leu-menu-item>Als PNG exportieren</leu-menu-item>
-      <leu-menu-item>Als SVG exportieren</leu-menu-item>
-      <leu-menu-item>Als PDF exportieren</leu-menu-item>
+      <leu-menu-item label="Als PNG exportieren"></leu-menu-item>
+      <leu-menu-item label="Als SVG exportieren"></leu-menu-item>
+      <leu-menu-item label="Als PDF exportieren"></leu-menu-item>
     </leu-menu>
   </leu-dropdown>`)
 }
 
 describe("LeuDropdown", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-dropdown")
+    const el = customElements.get("leu-dropdown")
 
     await expect(el).not.to.be.undefined
   })

package/src/components/icon/icon.js

@@ -5,7 +5,7 @@ import { html, svg } from "lit"
 // - click icon and then export as svg on the right drawer
 // - copy svg path (multiple with space between)
 // - update @param {TYPE} with console.log() below
-const iconPaths = {
+export const iconPaths = {
   addNew:
     "M12 1C5.926 1 1 5.925 1 12C1 18.075 5.926 23 12 23C18.074 23 23 18.075 23 12C23 5.925 18.074 1 12 1ZM17 13H13V17H11V13H7V11H11V7H13V11H17V13Z",
   angleDropDown: "M17 9.5L12 14.5L7 9.5L17 9.5Z",

package/src/components/icon/test/icon.test.js

@@ -0,0 +1,66 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import { Icon, iconPaths } from "../icon.js"
+
+async function defaultFixture(args = {}) {
+  const { name = "edit", size } = args
+  return fixture(html`${Icon(name, size)} `)
+}
+
+describe("Icon", () => {
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders an svg html element", async () => {
+    const el = await defaultFixture()
+
+    expect(el).to.have.tagName("svg")
+  })
+
+  it("renders a single path", async () => {
+    const el = await defaultFixture()
+
+    expect(el.querySelectorAll("path")).to.have.lengthOf(1)
+  })
+
+  it("renders the correct path", async () => {
+    const el = await defaultFixture({ name: "share" })
+
+    const d = el.querySelector("path").getAttribute("d")
+
+    expect(d).to.equal(iconPaths.share)
+  })
+
+  it("has the size 24x24 by default", async () => {
+    const el = await defaultFixture()
+
+    const width = el.getAttribute("width")
+    const height = el.getAttribute("height")
+
+    expect(width).to.equal("24")
+    expect(height).to.equal("24")
+  })
+
+  it("has the size 16x16", async () => {
+    const el = await defaultFixture({ size: "16" })
+
+    const width = el.getAttribute("width")
+    const height = el.getAttribute("height")
+
+    expect(width).to.equal("16")
+    expect(height).to.equal("16")
+  })
+
+  it("has always a square size", async () => {
+    const el = await defaultFixture({ size: "564" })
+
+    const width = el.getAttribute("width")
+    const height = el.getAttribute("height")
+
+    expect(width).to.equal(height)
+  })
+})