@statistikzh/leu 0.2.0 → 0.4.0

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"
 
@@ -78,25 +78,25 @@ export class LeuInput extends LitElement {
     required: { type: Boolean, reflect: true },
     clearable: { type: Boolean, reflect: true },
 
-    value: { type: String },
-    name: { type: String },
-    error: { type: String },
+    value: { type: String, reflect: true },
+    name: { type: String, reflect: true },
+    error: { type: String, reflect: true },
 
-    label: { type: String },
-    prefix: { type: String },
-    suffix: { type: String },
-    size: { type: String },
-    icon: { type: String },
+    label: { type: String, reflect: true },
+    prefix: { type: String, reflect: true },
+    suffix: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    icon: { type: String, reflect: true },
 
     /* Validation attributes */
-    pattern: { type: String },
-    type: { type: String },
-    min: { type: Number },
-    max: { type: Number },
-    maxlength: { type: Number },
-    minlength: { type: Number },
+    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 },
     validationMessages: { type: Object },
-    novalidate: { type: Boolean },
+    novalidate: { type: Boolean, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },
@@ -117,19 +117,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 +191,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 +209,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 +346,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 +357,7 @@ export class LeuInput extends LitElement {
       </button>`
     }
 
-    if (this.icon !== "") {
+    if (this.icon) {
       return html`<div class="icon">${Icon(this.icon)}</div>`
     }
 
@@ -367,7 +365,7 @@ export class LeuInput extends LitElement {
   }
 
   isInvalid() {
-    if (this.error !== "") {
+    if (this.error) {
       return true
     }
 
@@ -381,7 +379,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 +401,20 @@ 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}
           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 +423,3 @@ export class LeuInput extends LitElement {
     `
   }
 }
-
-export function defineInputElements() {
-  defineElement("input", LeuInput)
-}

package/src/components/input/input.css

@@ -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)

package/src/components/input/stories/input.stories.js

@@ -14,11 +14,17 @@ export default {
     size: {
       control: {
         type: "select",
-        options: SIZE_TYPES,
       },
+      options: Object.values(SIZE_TYPES),
     },
     icon: { control: "select", options: ICON_NAMES },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81934&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template(args) {
@@ -56,12 +62,12 @@ function Template(args) {
       max=${ifDefined(max)}
       minlength=${ifDefined(minlength)}
       maxlength=${ifDefined(maxlength)}
+      label=${label}
       ?disabled=${disabled}
       ?required=${required}
       ?clearable=${clearable}
       ?novalidate=${novalidate}
     >
-      ${label}
     </leu-input>
   `
 }

package/src/components/input/test/input.test.js

@@ -1,15 +1,39 @@
 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 { spy } from "sinon"
 
 import "../leu-input.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-input> Name </leu-input> `)
+async function defaultFixture(args = {}) {
+  return fixture(html`
+    <leu-input
+      value=${ifDefined(args.value)}
+      error=${ifDefined(args.error)}
+      pattern=${ifDefined(args.pattern)}
+      prefix=${ifDefined(args.prefix)}
+      suffix=${ifDefined(args.suffix)}
+      size=${ifDefined(args.size)}
+      icon=${ifDefined(args.icon)}
+      type=${ifDefined(args.type)}
+      min=${ifDefined(args.min)}
+      max=${ifDefined(args.max)}
+      minlength=${ifDefined(args.minlength)}
+      maxlength=${ifDefined(args.maxlength)}
+      label=${args.label || "Label"}
+      ?disabled=${args.disabled}
+      ?required=${args.required}
+      ?clearable=${args.clearable}
+      ?novalidate=${args.novalidate}
+    >
+    </leu-input>
+  `)
 }
 
 describe("LeuInput", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-input")
+    const el = customElements.get("leu-input")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +43,407 @@ describe("LeuInput", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("delegates the focus to the input element", async () => {
+    const el = await defaultFixture()
+
+    const input = el.shadowRoot.querySelector("input")
+
+    el.focus()
+
+    expect(el.shadowRoot.activeElement).to.equal(input)
+  })
+
+  it("can't be focused when disabled", async () => {
+    const el = await defaultFixture({ disabled: true })
+
+    el.focus()
+
+    expect(el.shadowRoot.activeElement).to.be.null
+  })
+
+  it("renders the defined label", async () => {
+    const el = await defaultFixture({ label: "Vorname" })
+
+    const label = el.shadowRoot.querySelector("label")
+
+    expect(label).to.have.text("Vorname")
+  })
+
+  it("has type text by default", async () => {
+    const el = await defaultFixture()
+
+    expect(el.type).to.equal("text")
+  })
+
+  it("passes the defined type to the input element", async () => {
+    const el = await defaultFixture({ type: "email" })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(input.type).to.equal("email")
+
+    el.type = "password"
+    await elementUpdated(el)
+
+    expect(input.type).to.equal("password")
+  })
+
+  it("passes the defined value to the input element", async () => {
+    const el = await defaultFixture({ label: "Vorname", value: "John" })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(input.value).to.equal("John")
+
+    el.value = "Jane"
+    await elementUpdated(el)
+
+    expect(input.value).to.equal("Jane")
+  })
+
+  it("syncs the value property of the input and the value property of the component", async () => {
+    const el = await defaultFixture({ label: "Vorname", value: "John" })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    el.focus()
+
+    await sendKeys({ press: "Backspace" })
+    await sendKeys({ press: "Backspace" })
+    await sendKeys({ press: "Backspace" })
+    await sendKeys({ press: "Backspace" })
+    await sendKeys({ type: "Jane" })
+    await elementUpdated(el)
+
+    expect(el.value).to.equal("Jane")
+    expect(input.value).to.equal("Jane")
+  })
+
+  it("doesn't accept letters when type is set to number", async () => {
+    const el = await defaultFixture({ label: "Länge", type: "number" })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    el.focus()
+
+    await sendKeys({ type: "123" })
+    await elementUpdated(el)
+
+    expect(el.value).to.equal("123")
+    expect(input.value).to.equal("123")
+
+    await sendKeys({ type: "abc" })
+    await elementUpdated(el)
+
+    expect(el.value).to.not.equal("123abc")
+    expect(input.value).to.not.equal("123abc")
+  })
+
+  it("fires a change event after losing focus", async () => {
+    const el = await defaultFixture({ label: "Vorname" })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    const changeSpy = spy()
+    input.addEventListener("change", changeSpy)
+
+    el.focus()
+
+    await sendKeys({ type: "John" })
+    await sendKeys({ press: "Tab" })
+
+    expect(changeSpy).to.have.been.calledOnce
+  })
+
+  it("fires a input event while typing ", async () => {
+    const el = await defaultFixture({ label: "Vorname", maxlength: 3 })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    const inputSpy = spy()
+    input.addEventListener("input", inputSpy)
+
+    el.focus()
+
+    await sendKeys({ type: "John" })
+
+    // Should fire 3 times, because maxlength is set to 3
+    expect(inputSpy).to.have.been.called.calledThrice
+  })
+
+  it("fires a input event while typing ", async () => {})
+
+  it("renders a prefix", async () => {
+    const el = await defaultFixture({ label: "Preis", prefix: "CHF" })
+
+    const prefix = el.shadowRoot.querySelector(".prefix")
+
+    expect(prefix).to.have.text("CHF")
+  })
+
+  it("renders a suffix", async () => {
+    const el = await defaultFixture({ label: "Länge", suffix: "cm" })
+
+    const suffix = el.shadowRoot.querySelector(".suffix")
+
+    expect(suffix).to.have.text("cm")
+  })
+
+  it("renders an icon", async () => {
+    const _el = await defaultFixture({ label: "Vorname", icon: "user" })
+  })
+
+  it("renders a clear button", async () => {
+    const el = await defaultFixture({ label: "Vorname", clearable: true })
+
+    let clearButton = el.shadowRoot.querySelector(".clear-button")
+    expect(clearButton).to.not.exist
+
+    el.focus()
+    await sendKeys({ type: "John" })
+
+    clearButton = el.shadowRoot.querySelector(".clear-button")
+    expect(clearButton).to.not.be.null
+  })
+
+  it("clears the value when clicking the clear button", async () => {
+    const el = await defaultFixture({ label: "Vorname", clearable: true })
+
+    el.focus()
+
+    await sendKeys({ type: "John" })
+    await elementUpdated(el)
+
+    const clearButton = el.shadowRoot.querySelector(".clear-button")
+    clearButton.click()
+
+    expect(el.value).to.equal("")
+  })
+
+  it("renders an error message when value is less than min", async () => {
+    const el = await defaultFixture({ label: "Länge", min: 10, type: "number" })
+
+    el.focus()
+
+    await sendKeys({ type: "5" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when value greater than max", async () => {
+    const el = await defaultFixture({ label: "Länge", max: 10, type: "number" })
+
+    el.focus()
+
+    await sendKeys({ type: "15" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when the value doesn't match the step", async () => {
+    const el = await defaultFixture({
+      label: "Länge",
+      step: 10,
+      type: "number",
+    })
+
+    el.focus()
+
+    await sendKeys({ type: "15" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when value is shorter than minlength", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      minlength: 3,
+    })
+
+    el.focus()
+
+    await sendKeys({ type: "Jo" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when value is longer than maxlength", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      maxlength: 10,
+      value: "Andrea Gabathuler",
+    })
+
+    el.focus()
+
+    /* Remove the selection, if there is one */
+    await sendKeys({ press: "ArrowRight" })
+    /*
+     * Trigger an update of the value that is too long.
+     * Browser won't allow to type more than maxlength.
+     */
+    await sendKeys({ press: "Backspace" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when value doesn't match pattern", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      pattern: "([A-Z]{2}-)?d{4,5}", // Pseudo zip code e.g. CH-8000 or 8000 or DE-12345
+    })
+
+    el.focus()
+
+    await sendKeys({ type: "123" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    let error = el.shadowRoot.querySelector(".error")
+    expect(error).not.to.be.null
+
+    el.value = ""
+    await elementUpdated(el)
+
+    el.focus()
+
+    await sendKeys({ type: "DE-987" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    error = el.shadowRoot.querySelector(".error")
+    expect(error).not.to.be.null
+  })
+
+  it("renders an error message when value is required but is empty", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      required: true,
+    })
+
+    el.focus()
+
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).not.to.be.null
+  })
+
+  it("renders a custom error message", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      error: "Bitte geben Sie einen Vornamen ein.",
+    })
+
+    el.focus()
+
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).to.have.trimmed.text("Bitte geben Sie einen Vornamen ein.")
+  })
+
+  it("resets the error message as soon as value is valid again", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      required: true,
+    })
+
+    el.focus()
+
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    let error = el.shadowRoot.querySelector(".error")
+    expect(error).not.to.be.null
+
+    el.focus()
+
+    await sendKeys({ type: "Jacqueline" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    error = el.shadowRoot.querySelector(".error")
+    expect(error).to.be.null
+  })
+
+  it("doesn't render an error message when novalidate is set", async () => {
+    const el = await defaultFixture({
+      label: "Vorname",
+      required: true,
+      novalidate: true,
+    })
+
+    el.focus()
+
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    const error = el.shadowRoot.querySelector(".error")
+
+    expect(error).to.be.null
+  })
+
+  it("shows only one 'after' element", async () => {
+    const el = await defaultFixture({
+      label: "Länge",
+      type: "number",
+      min: 50,
+      icon: "user",
+      clearable: true,
+    })
+
+    const getErrorIcon = () => el.shadowRoot.querySelector(".error-icon")
+    const getClearButton = () => el.shadowRoot.querySelector(".clear-button")
+    const getIcon = () => el.shadowRoot.querySelector(".icon")
+
+    /* Priority: Error > Clear > Icon */
+    expect(getErrorIcon()).to.be.null
+    expect(getClearButton()).to.be.null
+    expect(getIcon()).not.to.be.null
+
+    el.focus()
+    await sendKeys({ type: "60" })
+
+    expect(getErrorIcon()).to.be.null
+    expect(getClearButton()).not.to.be.null
+    expect(getIcon()).to.be.null
+
+    el.value = ""
+    await elementUpdated(el)
+
+    el.focus()
+    await sendKeys({ type: "40" })
+    await sendKeys({ press: "Tab" })
+    await elementUpdated(el)
+
+    expect(getErrorIcon()).not.to.be.null
+    expect(getClearButton()).to.be.null
+    expect(getIcon()).to.be.null
+  })
 })

package/src/components/menu/Menu.js

@@ -1,5 +1,4 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./menu.css"
 
 /**
@@ -12,7 +11,3 @@ export class LeuMenu extends LitElement {
     return html`<slot></slot>`
   }
 }
-
-export function defineMenuElements() {
-  defineElement("menu", LeuMenu)
-}