@statistikzh/leu 0.3.0 → 0.5.0

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-removable.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, "leu: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, "leu: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
@@ -22,34 +22,82 @@ export class LeuDropdown extends LitElement {
 
     this.label = ""
     this.expanded = false
+    this.menuItems = []
   }
 
-  handleClick() {
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("keyup", this._keyUpHandler)
+    document.addEventListener("click", this._documentClickHandler)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this._removeMenuItemListeners()
+    this.removeEventListener("keyup", this._keyUpHandler)
+    document.removeEventListener("click", this._documentClickHandler)
+  }
+
+  _documentClickHandler = (event) => {
+    if (!this.contains(event.target)) {
+      this.expanded = false
+    }
+  }
+
+  _keyUpHandler(event) {
+    if (event.key === "Escape") {
+      this.expanded = false
+    }
+  }
+
+  _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"
+          expanded=${this.expanded ? "true" : "false"}
+          aria-expanded=${this.expanded ? "true" : "false"}
+          aria-controls="content"
+          ?active=${this.expanded}
+          @click=${this._handleToggleClick}
+          >${this.label}</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)
+  })
+})

package/src/components/input/Input.js

@@ -1,10 +1,10 @@
 import { html, LitElement, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
+import { live } from "lit/directives/live.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
 
 import styles from "./input.css"
 
@@ -56,6 +56,7 @@ const VALIDATION_MESSAGES = {
  * @prop {string} maxlength - The maximum length of the input element.
  * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
  * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
  *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
@@ -91,12 +92,13 @@ export class LeuInput extends LitElement {
     /* Validation attributes */
     pattern: { type: String, reflect: true },
     type: { type: String, reflect: true },
-    min: { type: Number, reflect: true },
-    max: { type: Number, reflect: true },
-    maxlength: { type: Number, reflect: true },
-    minlength: { type: Number, reflect: true },
+    min: { type: String, reflect: true },
+    max: { type: String, reflect: true },
+    maxlength: { type: String, reflect: true },
+    minlength: { type: String, reflect: true },
     validationMessages: { type: Object },
     novalidate: { type: Boolean, reflect: true },
+    step: { type: String, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },
@@ -117,19 +119,9 @@ export class LeuInput extends LitElement {
     this.required = false
     this.clearable = false
 
-    this.value = ""
-    this.name = ""
-    this.error = ""
-
-    this.label = ""
-    this.prefix = ""
-    this.suffix = ""
-
     /** @type {keyof typeof SIZE_TYPES} */
     this.size = SIZE_TYPES.REGULAR
 
-    this.icon = ""
-
     this.type = "text"
     this._validity = null
     this.validationMessages = {}
@@ -201,7 +193,9 @@ export class LeuInput extends LitElement {
    * @returns {void}
    */
   handleChange(event) {
-    this.value = event.target.value
+    if (event.target.validity.valid) {
+      this.value = event.target.value
+    }
 
     const customEvent = new CustomEvent(event.type, event)
     this.dispatchEvent(customEvent)
@@ -217,6 +211,12 @@ export class LeuInput extends LitElement {
    */
   handleInput(event) {
     this.value = event.target.value
+
+    const customEvent = new CustomEvent("input", {
+      bubbles: true,
+      composed: true,
+    })
+    this.dispatchEvent(customEvent)
   }
 
   /**
@@ -348,7 +348,7 @@ export class LeuInput extends LitElement {
       return html`<div class="error-icon">${Icon("caution")}</div>`
     }
 
-    if (this.clearable && this.value !== "") {
+    if (this.clearable && this.value) {
       return html`<button
         class="clear-button"
         @click=${this.clear}
@@ -359,7 +359,7 @@ export class LeuInput extends LitElement {
       </button>`
     }
 
-    if (this.icon !== "") {
+    if (this.icon) {
       return html`<div class="icon">${Icon(this.icon)}</div>`
     }
 
@@ -367,7 +367,7 @@ export class LeuInput extends LitElement {
   }
 
   isInvalid() {
-    if (this.error !== "") {
+    if (this.error) {
       return true
     }
 
@@ -381,7 +381,7 @@ export class LeuInput extends LitElement {
 
     const inputWrapperClasses = {
       "input-wrapper": true,
-      "input-wrapper--empty": this.value === "",
+      "input-wrapper--empty": !this.value,
       "input-wrapper--invalid": isInvalid,
     }
 
@@ -403,20 +403,21 @@ export class LeuInput extends LitElement {
           @invalid=${this.handleInvalid}
           ?disabled=${this.disabled}
           ?required=${this.required}
+          .value=${live(this.value ?? "")}
           pattern=${ifDefined(this.pattern)}
           min=${ifDefined(this.min)}
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
-          .value=${this.value}
+          step=${ifDefined(this.step)}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />
-        <label for="input-${this.getId()}" class="label"><slot></slot></label>
-        ${this.prefix !== ""
+        <label for="input-${this.getId()}" class="label">${this.label}</label>
+        ${this.prefix
           ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>`
           : nothing}
-        ${this.suffix !== ""
+        ${this.suffix
           ? html`<div class="suffix" .aria-hidden=${true}>${this.suffix}</div>`
           : nothing}
         ${this.renderAfterContent()}
@@ -425,7 +426,3 @@ export class LeuInput extends LitElement {
     `
   }
 }
-
-export function defineInputElements() {
-  defineElement("input", LeuInput)
-}

package/src/components/input/input.css

@@ -26,8 +26,8 @@
 
   --input-clear-color: var(--leu-color-black-60);
 
-  --input-font-regular: var(--leu-font-regular);
-  --input-font-black: var(--leu-font-black);
+  --input-font-regular: var(--leu-font-family-regular);
+  --input-font-black: var(--leu-font-family-black);
 
   display: block;
   font-family: var(--input-font-regular);
@@ -115,6 +115,7 @@
 }
 
 /* is size regular AND (has focus OR contains a value) */
+.input-wrapper--invalid .label,
 :host(:not([size])) .label,
 :host([size="regular"]) .label {
   top: calc(0.75rem - var(--input-border-width));
@@ -138,18 +139,20 @@
   content: "*";
 }
 
+/* is not disabled AND has focus AND is empty */
+:host(:not([disabled], :focus-within)) .input-wrapper--empty .label {
+  --input-label-color: var(--input-label-color-empty);
+}
+
 /* is empty AND has no focus */
-:host(:not(:focus-within)) .input-wrapper--empty .label {
+:host(:not(:focus-within))
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   font-family: var(--input-font-regular);
   font-size: 1rem;
   top: calc(1.5rem - var(--input-border-width));
 }
 
-/* is not disabled AND has focus AND is empty */
-:host(:not([disabled], :focus-within)) .input-wrapper--empty .label {
-  --input-label-color: var(--input-label-color-empty);
-}
-
 /* is size small AND has no focus AND is empty */
 :host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
   top: calc(0.75rem - var(--input-border-width));

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

@@ -1,3 +1,6 @@
-import { defineInputElements } from "./Input.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuInput } from "./Input.js"
 
-defineInputElements()
+export { LeuInput }
+
+defineElement("input", LeuInput)