@statistikzh/leu 0.5.0 → 0.6.0

package/src/components/chip/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from "lit"
 
 import { LeuChipBase } from "./Chip.js"
-import { Icon } from "../icon/icon.js"
+import { LeuIcon } from "../icon/Icon.js"
 
 /**
  * @slot - The content of the chip
@@ -9,20 +9,17 @@ import { Icon } from "../icon/icon.js"
  * @fires remove - Dispatched when the user clicks on the chip
  */
 export class LeuChipRemovable extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
+  static dependencies = {
+    "leu-icon": LeuIcon,
   }
 
-  constructor() {
-    super()
-
-    /** @internal */
-    this._removeIcon = Icon("close", 16)
+  static properties = {
+    ...LeuChipBase.properties,
   }
 
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
-      bubble: true,
+      bubbles: true,
       composed: true,
     })
     this.dispatchEvent(customEvent)
@@ -30,8 +27,8 @@ export class LeuChipRemovable extends LeuChipBase {
 
   render() {
     return html`<button @click=${(e) => this.handleClick(e)} class="button">
-      <span class="label">${this.label}</span>
-      <div class="icon">${this._removeIcon}</div>
+      <span class="label"><slot></slot></span>
+      <leu-icon name="close" class="icon"></leu-icon>
     </button>`
   }
 }

package/src/components/chip/ChipSelectable.js

@@ -14,28 +14,15 @@ export const VARIANTS = {
 
 /**
  * A chip component that can be selected.
- * @slot - The content of the chip
  * @tagname leu-chip-selectable
+ * @slot - The content of the chip
+ * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
+ * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
  */
 export class LeuChipSelectable extends LeuChipBase {
   static properties = {
     ...LeuChipBase.properties,
-
-    /**
-     * The size of the chip. Not supported for radio variant.
-     * @type {keyof typeof SIZES}
-     * @default "regular"
-     */
     size: { type: String, reflect: true },
-
-    /**
-     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-     * - `toggle`: The chip behaves like a toggle button.
-     * - `radio`: The chip behaves like a radio button.
-     *
-     * @type {keyof typeof VARIANTS}
-     * @default "toggle"
-     */
     variant: { type: String, reflect: true },
 
     selected: { type: Boolean, reflect: true },
@@ -45,6 +32,13 @@ export class LeuChipSelectable extends LeuChipBase {
   constructor() {
     super()
     this.size = SIZES.regular
+
+    /**
+     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
+     * - `toggle`: The chip behaves like a toggle button.
+     * - `radio`: The chip behaves like a radio button.
+     * @default "toggle"
+     */
     this.variant = VARIANTS.toggle
     this.selected = false
 
@@ -80,7 +74,7 @@ export class LeuChipSelectable extends LeuChipBase {
       class="button"
       aria-pressed=${this.selected ? "true" : "false"}
     >
-      <span class="label">${this.label}</span>
+      <span class="label"><slot></slot></span>
     </button>`
   }
 }

package/src/components/chip/chip.css

@@ -28,6 +28,8 @@
   --chip-radio-border: var(--chip-radio-border-default);
   --chip-radio-background: var(--chip-radio-background-default);
 
+  --leu-icon-size: 1rem;
+
   font-family: var(--chip-font-regular);
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
@@ -58,6 +60,7 @@
   padding: 0.5rem 1rem;
 
   color: var(--chip-color);
+  font-family: inherit;
   font-size: 0.875rem;
   line-height: 1rem;
 
@@ -135,7 +138,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.icon svg {
-  display: block;
-}

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipGroup } from "./ChipGroup.js"
 
 export { LeuChipGroup }
 
-defineElement("chip-group", LeuChipGroup)
+LeuChipGroup.define("leu-chip-group")

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipLink } from "./ChipLink.js"
 
 export { LeuChipLink }
 
-defineElement("chip-link", LeuChipLink)
+LeuChipLink.define("leu-chip-link")

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipRemovable } from "./ChipRemovable.js"
 
 export { LeuChipRemovable }
 
-defineElement("chip-removable", LeuChipRemovable)
+LeuChipRemovable.define("leu-chip-removable")

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuChipSelectable } from "./ChipSelectable.js"
 
 export { LeuChipSelectable }
 
-defineElement("chip-selectable", LeuChipSelectable)
+LeuChipSelectable.define("leu-chip-selectable")

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

@@ -33,11 +33,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-link
-        size=${ifDefined(args.size)}
-        ?inverted=${args.inverted}
-        label=${args.label}
-      ></leu-chip-link>
+      <leu-chip-link size=${ifDefined(args.size)} ?inverted=${args.inverted}
+        >${args.label}</leu-chip-link
+      >
     </div>
   `
 }

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

@@ -27,10 +27,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-removable
-        ?inverted=${args.inverted}
-        label=${args.label}
-      ></leu-chip-removable>
+      <leu-chip-removable ?inverted=${args.inverted}
+        >${args.label}</leu-chip-removable
+      >
     </div>
   `
 }

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

@@ -38,10 +38,10 @@ function Template(args) {
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
-        label=${args.label}
         ?selected=${args.selected}
         ?inverted=${args.inverted}
-      ></leu-chip-selectable>
+        >${args.label}</leu-chip-selectable
+      >
     </div>
   `
 }

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

@@ -9,12 +9,9 @@ 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-removable>Publikationen</leu-chip-removable>
+        <leu-chip-removable value="2">Daten</leu-chip-removable>
+        <leu-chip-removable value="3">Schnittstellen</leu-chip-removable>
       </leu-chip-group>
     `
   )
@@ -24,21 +21,15 @@ 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-selectable value="1" variant="radio"
+          >Publikationen</leu-chip-selectable
+        >
+        <leu-chip-selectable value="2" variant="radio"
+          >Daten</leu-chip-selectable
+        >
+        <leu-chip-selectable value="3" variant="radio"
+          >Schnittstellen</leu-chip-selectable
+        >
       </leu-chip-group>
     `
   )
@@ -48,15 +39,9 @@ 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-selectable value="1">Publikationen</leu-chip-selectable>
+        <leu-chip-selectable value="2">Daten</leu-chip-selectable>
+        <leu-chip-selectable value="3">Schnittstellen</leu-chip-selectable>
       </leu-chip-group>
     `
   )

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

@@ -5,9 +5,7 @@ import "../leu-chip-link.js"
 
 async function defaultFixture() {
   return fixture(
-    html`
-      <leu-chip-link label="Daten" href="https://zh.ch/daten"></leu-chip-link>
-    `
+    html` <leu-chip-link href="https://zh.ch/daten">Daten</leu-chip-link> `
   )
 }
 
@@ -27,9 +25,7 @@ describe("LeuChipLink", () => {
   it("renders the label", async () => {
     const el = await defaultFixture()
 
-    const link = el.shadowRoot.querySelector("a")
-
-    expect(link).to.have.trimmed.text("Daten")
+    expect(el).to.have.trimmed.text("Daten")
   })
 
   it("renders a link element", async () => {

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

@@ -2,14 +2,10 @@ 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-removable.js"
 
 async function defaultFixture() {
-  return fixture(
-    html` <leu-chip-removable label="Daten"></leu-chip-removable> `
-  )
+  return fixture(html` <leu-chip-removable>Daten</leu-chip-removable> `)
 }
 
 describe("LeuChipRemovable", () => {
@@ -28,9 +24,7 @@ describe("LeuChipRemovable", () => {
   it("renders the label", async () => {
     const el = await defaultFixture()
 
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.trimmed.text("Daten")
+    expect(el).to.have.trimmed.text("Daten")
   })
 
   it("renders a button element", async () => {
@@ -42,9 +36,9 @@ describe("LeuChipRemovable", () => {
   it("renders a remove icon", async () => {
     const el = await defaultFixture()
 
-    const iconPath = el.shadowRoot.querySelector("svg path")
+    const iconPath = el.shadowRoot.querySelector("leu-icon")
 
-    expect(iconPath.getAttribute("d")).to.equal(iconPaths.close)
+    expect(iconPath.name).to.equal("close")
   })
 
   it("delegates the focus to the button element", async () => {

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

@@ -9,11 +9,11 @@ async function defaultFixture(args = {}) {
   return fixture(
     html`
       <leu-chip-selectable
-        label="Publikationen"
         value="Publikationen"
         variant=${ifDefined(args.variant)}
         ?selected=${args.selected}
-      ></leu-chip-selectable>
+        >Publikationen</leu-chip-selectable
+      >
     `
   )
 }
@@ -34,9 +34,7 @@ describe("LeuChipSelectable", () => {
   it("renders the label", async () => {
     const el = await defaultFixture()
 
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.trimmed.text("Publikationen")
+    expect(el).to.have.trimmed.text("Publikationen")
   })
 
   it("renders a button element", async () => {

package/src/components/dropdown/Dropdown.js

@@ -1,15 +1,28 @@
-import { html, LitElement } from "lit"
-import styles from "./dropdown.css"
+import { html, nothing } from "lit"
+import { createRef, ref } from "lit/directives/ref.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+
+import { LeuButton } from "../button/Button.js"
+import { LeuMenu } from "../menu/Menu.js"
+import { LeuMenuItem } from "../menu/MenuItem.js"
+import { LeuPopup } from "../popup/Popup.js"
 
-import "../button/leu-button.js"
-import "../menu/leu-menu.js"
-import "../menu/leu-menu-item.js"
-import "../popup/leu-popup.js"
+// @ts-ignore
+import styles from "./dropdown.css"
 
 /**
  * @tagname leu-dropdown
  */
-export class LeuDropdown extends LitElement {
+export class LeuDropdown extends LeuElement {
+  static dependencies = {
+    "leu-button": LeuButton,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-popup": LeuPopup,
+  }
+
   static styles = styles
 
   static properties = {
@@ -17,25 +30,38 @@ export class LeuDropdown extends LitElement {
     expanded: { type: Boolean, reflect: true },
   }
 
+  hasSlotController = new HasSlotController(this, ["icon"])
+
   constructor() {
     super()
 
     this.label = ""
     this.expanded = false
-    this.menuItems = []
+
+    /** @type {import("lit/directives/ref").Ref<HTMLButtonElement>} */
+    this._toggleRef = createRef()
   }
 
   connectedCallback() {
     super.connectedCallback()
     this.addEventListener("keyup", this._keyUpHandler)
     document.addEventListener("click", this._documentClickHandler)
+
+    const menu = this._getMenu()
+
+    menu.addEventListener("keydown", this._keyDownMenuHandler)
+    menu.addEventListener("click", this._menuItemClickHandler)
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
-    this._removeMenuItemListeners()
     this.removeEventListener("keyup", this._keyUpHandler)
     document.removeEventListener("click", this._documentClickHandler)
+
+    const menu = this._getMenu()
+
+    menu.removeEventListener("keydown", this._keyDownMenuHandler)
+    menu.removeEventListener("click", this._menuItemClickHandler)
   }
 
   _documentClickHandler = (event) => {
@@ -50,30 +76,56 @@ export class LeuDropdown extends LitElement {
     }
   }
 
-  _handleSlotChange() {
-    this._removeMenuItemListeners()
-    this.menuItems = [...this.querySelectorAll("leu-menu > leu-menu-item")]
+  async _keyDownToggleHandler(event) {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault()
+      const menu = this._getMenu()
 
-    this.menuItems.forEach((item) =>
-      item.addEventListener("click", this._handleMenuItemClick)
-    )
+      this.expanded = true
+
+      await this.updateComplete
+
+      if (event.key === "ArrowDown" || event.key === "Home") {
+        menu.focusItem(0)
+      } else if (event.key === "ArrowUp" || event.key === "End") {
+        menu.focusItem(-1)
+      }
+    }
   }
 
-  _removeMenuItemListeners() {
-    this.menuItems.forEach((item) => {
-      item.removeEventListener("click", this._handleMenuItemClick)
-    })
+  _menuItemClickHandler = (e) => {
+    if (e.target.tagName.toLowerCase() === "leu-menu-item") {
+      this.expanded = false
+      this._toggleRef.value.focus()
+    }
   }
 
-  _handleMenuItemClick = () => {
-    this.expanded = false
+  /**
+   * Close the dropdown when the user presses the Escape or the Tab key.
+   * Navigating the menu with the arrow keys is handled by the menu itself.
+   * @param {KeyboardEvent} e
+   */
+  _keyDownMenuHandler = (e) => {
+    if (e.key === "Escape" || e.key === "Tab") {
+      e.preventDefault()
+      this.expanded = false
+      this._toggleRef.value.focus()
+    }
   }
 
   _handleToggleClick() {
     this.expanded = !this.expanded
   }
 
+  /**
+   * @returns {import("../menu/Menu").LeuMenu}
+   */
+  _getMenu() {
+    return this.querySelector("leu-menu")
+  }
+
   render() {
+    const hasIcon = this.hasSlotController.test("icon")
     return html`
       <leu-popup
         ?active=${this.expanded}
@@ -84,18 +136,20 @@ export class LeuDropdown extends LitElement {
         autoSizePadding="8"
       >
         <leu-button
+          ref=${ref(this._toggleRef)}
+          class="button"
           slot="anchor"
-          icon="download"
           variant="ghost"
           expanded=${this.expanded ? "true" : "false"}
-          aria-expanded=${this.expanded ? "true" : "false"}
-          aria-controls="content"
           ?active=${this.expanded}
           @click=${this._handleToggleClick}
-          >${this.label}</leu-button
+          @keydown=${this._keyDownToggleHandler}
+        >
+          ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
+          ${this.label}</leu-button
         >
         <div id="content" class="content" ?hidden=${!this.expanded}>
-          <slot @slotchange=${this._handleSlotChange}></slot>
+          <slot></slot>
         </div>
       </leu-popup>
     `

package/src/components/dropdown/dropdown.css

@@ -14,3 +14,7 @@
 
   margin-top: 0.5rem;
 }
+
+.button {
+  max-width: 100%;
+}

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

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

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

@@ -1,6 +1,12 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import "../leu-dropdown.js"
+import "../../icon/leu-icon.js"
 
+import { paths as iconPaths } from "../../icon/paths.js"
+
+/**
+ * @type {import("@storybook/web-components").Meta}
+ */
 export default {
   title: "Dropdown",
   component: "leu-dropdown",
@@ -10,17 +16,28 @@ export default {
       url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=136815-217650&mode=design&t=lzVrtq8lxYVJU5TB-11",
     },
   },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: Object.keys(iconPaths),
+    },
+  },
 }
 
-function Template({ label, expanded }) {
+function Template({ label, expanded, icon }) {
   return html` <leu-dropdown label=${label} ?expanded=${expanded}>
+    ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
     <leu-menu>
-      <leu-menu-item label="Als CSV Tabelle"></leu-menu-item>
-      <leu-menu-item label="Als XLS Tabelle"></leu-menu-item>
+      <leu-menu-item
+        href="https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001120_00002165.csv"
+        >OGD Ressource</leu-menu-item
+      >
+      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
       <hr />
-      <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-item>Als PNG exportieren</leu-menu-item>
+      <leu-menu-item>Als SVG exportieren</leu-menu-item>
+      <leu-menu-item disabled>Als PDF exportieren</leu-menu-item>
     </leu-menu>
   </leu-dropdown>`
 }
@@ -28,4 +45,10 @@ function Template({ label, expanded }) {
 export const Regular = Template.bind({})
 Regular.args = {
   label: "Download",
+  icon: "download",
+}
+
+export const WithoutIcon = Template.bind({})
+WithoutIcon.args = {
+  label: "Download",
 }

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

@@ -6,12 +6,12 @@ import "../leu-dropdown.js"
 async function defaultFixture() {
   return fixture(html` <leu-dropdown label="Download">
     <leu-menu>
-      <leu-menu-item label="Als CSV Tabelle"></leu-menu-item>
-      <leu-menu-item label="Als XLS Tabelle"></leu-menu-item>
+      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
+      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
       <hr />
-      <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-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>
   </leu-dropdown>`)
 }