@statistikzh/leu 0.3.0 → 0.4.0

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

package/src/components/menu/MenuItem.js

@@ -1,5 +1,7 @@
-import { html, LitElement, nothing } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
+import { LitElement, nothing } from "lit"
+import { html, unsafeStatic } from "lit/static-html.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+
 import styles from "./menu-item.css"
 
 import { Icon, ICON_NAMES } from "../icon/icon.js"
@@ -35,6 +37,8 @@ export class LeuMenuItem extends LitElement {
     active: { type: Boolean, reflect: true },
     highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
+    label: { type: String, reflect: true },
+    href: { type: String, reflect: true },
   }
 
   constructor() {
@@ -42,8 +46,6 @@ export class LeuMenuItem extends LitElement {
 
     this.active = false
     this.disabled = false
-    this.before = ""
-    this.after = ""
 
     /**
      * A programmatic way to highlight the menu item like it is hovered.
@@ -65,7 +67,7 @@ export class LeuMenuItem extends LitElement {
   }
 
   renderBefore() {
-    if (this.before !== "") {
+    if (this.before) {
       const content = LeuMenuItem.getIconOrText(this.before)
       return html`<span class="before">${content}</span>`
     }
@@ -74,7 +76,7 @@ export class LeuMenuItem extends LitElement {
   }
 
   renderAfter() {
-    if (this.after !== "") {
+    if (this.after) {
       const content = LeuMenuItem.getIconOrText(this.after)
       return html`<span class="after">${content}</span>`
     }
@@ -82,14 +84,19 @@ export class LeuMenuItem extends LitElement {
     return nothing
   }
 
+  getTagName() {
+    return this.href ? "a" : "button"
+  }
+
   render() {
-    return html`<button class="button" ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label"><slot></slot></span
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(
+      this.getTagName()
+    )} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label">${this.label}</span
       >${this.renderAfter()}
-    </button>`
+    </${unsafeStatic(this.getTagName())}>`
+    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }
-
-export function defineMenuItemElements() {
-  defineElement("menu-item", LeuMenuItem)
-}

package/src/components/menu/leu-menu-item.js

@@ -1,3 +1,6 @@
-import { defineMenuItemElements } from "./MenuItem.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuMenuItem } from "./MenuItem.js"
 
-defineMenuItemElements()
+export { LeuMenuItem }
+
+defineElement("menu-item", LeuMenuItem)

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

@@ -1,3 +1,6 @@
-import { defineMenuElements } from "./Menu.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuMenu } from "./Menu.js"
 
-defineMenuElements()
+export { LeuMenu }
+
+defineElement("menu", LeuMenu)

package/src/components/menu/menu-item.css

@@ -7,15 +7,17 @@
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
   --background-active: var(--leu-color-func-cyan);
-  --background-disabled: var(--leu-color-black-0);
+  --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-regular);
   --font-black: var(--leu-font-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--leu-font-regular);
 }
 
 .button {
+  text-decoration: none;
   appearance: none;
   border: none;
   cursor: pointer;
@@ -51,6 +53,7 @@
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
+  --color: var(--color-disabled);
   cursor: default;
 }
 

package/src/components/menu/stories/menu-item.stories.js

@@ -9,16 +9,24 @@ export default {
   args: {
     label: "Menu Item",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template(args) {
   return html`
     <leu-menu-item
+      label=${args.label}
       before=${ifDefined(args.before)}
       after=${ifDefined(args.after)}
+      href=${ifDefined(args.href)}
       ?active=${args.active}
-      >${args.label}</leu-menu-item
-    >
+      ?disabled=${args.disabled}
+    ></leu-menu-item>
   `
 }
 
@@ -34,9 +42,10 @@ IconBefore.args = {
   before: "check",
 }
 
-export const IconAfter = Template.bind({})
-IconAfter.args = {
+export const IconAfterLink = Template.bind({})
+IconAfterLink.args = {
   after: "arrowRight",
+  href: "https://www.zh.ch",
 }
 
 export const IconAndTextLabel = Template.bind({})

package/src/components/menu/stories/menu.stories.js

@@ -5,16 +5,22 @@ import "../leu-menu-item.js"
 export default {
   title: "Menu",
   component: "leu-menu",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template() {
   return html` <leu-menu>
-    <leu-menu-item before="EMPTY">Menu Item 1</leu-menu-item>
-    <leu-menu-item before="check" active>Menu Item 2</leu-menu-item>
-    <leu-menu-item before="EMPTY">Menu Item 3</leu-menu-item>
+    <leu-menu-item label="Menu Item 1" before="EMPTY"></leu-menu-item>
+    <leu-menu-item label="Menu Item 2" before="check" active></leu-menu-item>
+    <leu-menu-item label="Menu Item 3" before="EMPTY"></leu-menu-item>
     <hr />
-    <leu-menu-item before="pin" after="CH">Menu Item 3</leu-menu-item>
-    <leu-menu-item>Menu Item 4</leu-menu-item>
+    <leu-menu-item label="Menu Item 3" before="pin" after="CH"></leu-menu-item>
+    <leu-menu-item label="Menu Item 4"></leu-menu-item>
   </leu-menu>`
 }