@statistikzh/leu 0.24.2 → 0.26.0

package/src/components/button/test/button.test.ts

@@ -2,10 +2,11 @@ import { html } from "lit"
 import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 
 import "../leu-button.js"
+import type { LeuButton } from "../leu-button.js"
 import "../../icon/leu-icon.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-button>button</leu-button>`)
+  return fixture<LeuButton>(html` <leu-button>button</leu-button>`)
 }
 
 describe("LeuButton", () => {
@@ -51,7 +52,7 @@ describe("LeuButton", () => {
   it("renders the icon slots at the correct position", async () => {
     const el = await fixture(
       html` <leu-button
-        ><leu-icon name="addBew" slot="before"></leu-icon>Sichern</leu-button
+        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
     )
 
@@ -64,7 +65,7 @@ describe("LeuButton", () => {
   })
 
   it("renders the expanded icon only when the variant is ghost", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" expanded="true"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -88,7 +89,7 @@ describe("LeuButton", () => {
   })
 
   it("sets the dissabled attrbiute", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" expanded="true" disabled>
         <leu-icon name="addNew" slot="before"></leu-icon>
         Sichern
@@ -106,7 +107,7 @@ describe("LeuButton", () => {
   })
 
   it("reflects the role attribute", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" componentRole="menuitemradio"
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -118,7 +119,7 @@ describe("LeuButton", () => {
   })
 
   it("sets the either checked or selected attribute depending on the role", async () => {
-    const el = await fixture(
+    const el = await fixture<LeuButton>(
       html` <leu-button variant="ghost" componentRole="menuitemradio" active
         ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
       >`,
@@ -154,13 +155,217 @@ describe("LeuButton", () => {
   })
 
   it("dispatches the click event", async () => {
-    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
-    const button = el.shadowRoot.querySelector("button")
+    const button = await fixture<LeuButton>(
+      html` <leu-button>Sichern</leu-button>`,
+    )
 
     setTimeout(() => button.click())
 
-    const event = await oneEvent(el, "click")
+    const event = await oneEvent(button, "click")
 
     expect(event).to.exist
   })
+
+  it("disables the button when loading", async () => {
+    const el = await fixture<LeuButton>(
+      html` <leu-button loading>Sichern</leu-button>`,
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("disabled")
+  })
+
+  it("doesn't dispatch click events when loading", async () => {
+    const button = await fixture<LeuButton>(
+      html` <leu-button loading>Sichern</leu-button>`,
+    )
+
+    let clicked = false
+
+    button.addEventListener("click", () => {
+      clicked = true
+    })
+
+    button.click()
+
+    expect(clicked).to.be.false
+  })
+
+  describe("form association", () => {
+    it("submits the form when type is submit", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form @submit=${(e: Event) => e.preventDefault()}>
+          <leu-button type="submit">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      const event = await oneEvent(form, "submit")
+
+      expect(event).to.exist
+    })
+
+    it("submits the form with the button name and value", async () => {
+      let submittedData: FormData | null = null
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: SubmitEvent) => {
+            e.preventDefault()
+            submittedData = new FormData(form, e.submitter)
+          }}
+        >
+          <input type="text" name="field" value="test" />
+          <leu-button type="submit" name="action" value="save">Save</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      await oneEvent(form, "submit")
+
+      expect(submittedData).to.not.be.null
+      expect(submittedData.get("action")).to.equal("save")
+      expect(submittedData.get("field")).to.equal("test")
+    })
+
+    it("submits an empty string as value when no value attribute is set", async () => {
+      let submittedData: FormData | null = null
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: SubmitEvent) => {
+            e.preventDefault()
+            submittedData = new FormData(form, e.submitter)
+          }}
+        >
+          <leu-button type="submit" name="action">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      setTimeout(() => button.click())
+      await oneEvent(form, "submit")
+
+      expect(submittedData.get("action")).to.equal("")
+    })
+
+    it("resets the form when type is reset", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <input type="text" name="field" value="initial" />
+          <leu-button type="reset">Reset</leu-button>
+        </form>
+      `)
+
+      const input = form.querySelector<HTMLInputElement>("input")
+      input.value = "modified"
+      expect(input.value).to.equal("modified")
+
+      const button = form.querySelector<LeuButton>("leu-button")
+      button.click()
+
+      expect(input.value).to.equal("initial")
+    })
+
+    it("does not submit or reset the form when type is button", async () => {
+      let submitted = false
+      let reset = false
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: Event) => {
+            e.preventDefault()
+            submitted = true
+          }}
+          @reset=${() => {
+            reset = true
+          }}
+        >
+          <leu-button type="button">Click</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+      button.click()
+
+      expect(submitted).to.be.false
+      expect(reset).to.be.false
+    })
+
+    it("does not submit or reset when the button is not inside a form", async () => {
+      const el = await fixture<LeuButton>(
+        html`<leu-button type="submit">Submit</leu-button>`,
+      )
+
+      // Should not throw
+      el.click()
+    })
+
+    it("does not submit or reset the form when disabled", async () => {
+      let submitted = false
+      let reset = false
+
+      const form = await fixture<HTMLFormElement>(html`
+        <form
+          @submit=${(e: Event) => {
+            e.preventDefault()
+            submitted = true
+          }}
+          @reset=${() => {
+            reset = true
+          }}
+        >
+          <leu-button type="submit" disabled>Submit</leu-button>
+          <leu-button type="reset" disabled>Reset</leu-button>
+        </form>
+      `)
+
+      const submitBtn = form.querySelectorAll<LeuButton>("leu-button")[0]
+      const resetBtn = form.querySelectorAll<LeuButton>("leu-button")[1]
+
+      submitBtn.click()
+      resetBtn.click()
+
+      expect(submitted).to.be.false
+      expect(reset).to.be.false
+    })
+
+    it("is form associated", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <leu-button type="submit" name="btn">Submit</leu-button>
+        </form>
+      `)
+
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      expect(button.form).to.equal(form)
+    })
+
+    it("responds to formDisabledCallback", async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <fieldset>
+            <leu-button type="submit">Submit</leu-button>
+          </fieldset>
+        </form>
+      `)
+
+      const fieldset = form.querySelector("fieldset")
+      const button = form.querySelector<LeuButton>("leu-button")
+
+      expect(button.disabled).to.be.false
+
+      fieldset.disabled = true
+      await elementUpdated(button)
+
+      expect(button.disabled).to.be.true
+    })
+  })
 })

package/src/components/button-group/ButtonGroup.ts

@@ -3,7 +3,7 @@ import { html } from "lit"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuButton } from "../button/Button.js"
 
-import styles from "./button-group.css"
+import styles from "./button-group.css?inline"
 
 /**
  * A radio input-like button group component.
@@ -34,9 +34,7 @@ export class LeuButtonGroup extends LeuElement {
 
   set value(newValue) {
     this._items.forEach((item) => {
-      /* eslint-disable no-param-reassign */
       item.active = LeuButtonGroup.getButtonValue(item) === newValue
-      /* eslint-enable no-param-reassign */
     })
   }
 
@@ -58,7 +56,6 @@ export class LeuButtonGroup extends LeuElement {
     let foundActiveButtonBefore = false
 
     this._items.forEach((item) => {
-      /* eslint-disable no-param-reassign */
       item.addEventListener("click", this._handleButtonClick)
       item.componentRole = "menuitemradio"
 
@@ -71,8 +68,6 @@ export class LeuButtonGroup extends LeuElement {
       } else if (item.active) {
         foundActiveButtonBefore = true
       }
-
-      /* eslint-enable no-param-reassign */
     })
   }
 

package/src/components/button-group/stories/button-group.stories.ts

@@ -3,7 +3,7 @@ import "../leu-button-group.js"
 import "../../button/leu-button.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
-import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+import { UPDATE_STORY_ARGS } from "storybook/internal/core-events"
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {

package/src/components/chart-wrapper/ChartWrapper.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./chart-wrapper.css"
+import styles from "./chart-wrapper.css?inline"
 import { HasSlotController } from "../../lib/hasSlotController.js"
 import { LeuSpinner } from "../spinner/Spinner.js"
 

package/src/components/chart-wrapper/stories/chart-wrapper.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 
 import "../../dropdown/leu-dropdown.js"

package/src/components/checkbox/Checkbox.ts

@@ -1,15 +1,16 @@
-import { html } from "lit"
+import { html, PropertyValues } from "lit"
 import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
+import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
 import { LeuIcon } from "../icon/Icon.js"
 
-import styles from "./checkbox.css"
+import styles from "./checkbox.css?inline"
 
 /**
  * @tagname leu-checkbox
  */
-export class LeuCheckbox extends LeuElement {
+export class LeuCheckbox extends FormAssociatedMixin(LeuElement) {
   static dependencies = {
     "leu-icon": LeuIcon,
   }
@@ -23,18 +24,58 @@ export class LeuCheckbox extends LeuElement {
   }
 
   @property({ type: Boolean, reflect: true })
-  checked: boolean = false
+  required: boolean = false
 
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
+  @property({ type: Boolean, reflect: true, attribute: "checked" })
+  defaultChecked: boolean = false
 
-  @property({ type: String, reflect: true })
-  value: string = ""
+  protected _checked: boolean
+
+  @property({ type: Boolean, attribute: false })
+  set checked(isChecked: boolean) {
+    this._checked = isChecked
+  }
+
+  get checked(): boolean {
+    if (typeof this._checked === "boolean") {
+      return this._checked
+    }
+
+    return this.defaultChecked
+  }
 
   @property({ type: String, reflect: true })
-  name: string = ""
+  value: string
+
+  willUpdate(changedProperties: PropertyValues<this>): void {
+    super.willUpdate(changedProperties)
+    let checkedChanged = false
+
+    // Match the bevavior of native checkboxes.
+    // Changes to the defaultChecked property only hav an effect
+    // if the user has not interacted with the checkbox yet.
+    if (
+      changedProperties.has("defaultChecked") &&
+      !changedProperties.has("checked") &&
+      !this.hasInteracted
+    ) {
+      this.checked = this.defaultChecked
+      checkedChanged = true
+    }
+
+    if (
+      checkedChanged ||
+      changedProperties.has("checked") ||
+      changedProperties.has("value") ||
+      changedProperties.has("name") ||
+      changedProperties.has("disabled")
+    ) {
+      this.setFormValue()
+    }
+  }
 
   private handleChange(event: Event & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.checked = event.target.checked
 
     const customEvent = new CustomEvent(event.type, event)
@@ -42,13 +83,35 @@ export class LeuCheckbox extends LeuElement {
   }
 
   private handleInput(event: InputEvent & { target: HTMLInputElement }) {
+    this.hasInteracted = true
     this.checked = event.target.checked
   }
 
+  public formResetCallback() {
+    this.checked = this.defaultChecked
+    super.formResetCallback()
+  }
+
+  setFormValue() {
+    this.internals.setFormValue(
+      this.checked && !this.disabled ? (this.value ?? "on") : null,
+    )
+
+    if (this.required && !this.checked) {
+      // @todo i18n and/or custom validation message
+      this.internals.setValidity(
+        { valueMissing: true },
+        "Bitte klicken Sie dieses Kästchen an, um fortfahren zu können.",
+      )
+    } else {
+      this.internals.setValidity({})
+    }
+  }
+
   render() {
     return html`
       <input
-        id=${`checkbox-${this.name}`}
+        id="checkbox"
         class="checkbox"
         type="checkbox"
         name="${this.name}"
@@ -56,9 +119,10 @@ export class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value ?? ""}
+        .value=${this.value}
+        ?required=${this.required}
       />
-      <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
+      <label for="checkbox" class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>
     `
   }

package/src/components/checkbox/CheckboxGroup.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./checkbox-group.css"
+import styles from "./checkbox-group.css?inline"
 import { LeuCheckbox } from "./Checkbox.js"
 
 /**

package/src/components/checkbox/checkbox.css

@@ -67,6 +67,10 @@
   cursor: not-allowed;
 }
 
+.checkbox:required + .label::after {
+  content: "*";
+}
+
 .icon {
   position: absolute;
   display: block;

package/src/components/checkbox/stories/checkbox.stories.ts

@@ -8,6 +8,9 @@ export default {
     label: {
       control: "text",
     },
+    defaultChecked: {
+      control: "boolean",
+    },
   },
   parameters: {
     design: {
@@ -17,13 +20,23 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled, name = "" }) {
+function Template({
+  label = "Label",
+  value,
+  checked,
+  defaultChecked,
+  disabled,
+  name = "",
+  required,
+}) {
   return html`
     <leu-checkbox
-      .value=${value}
-      ?checked=${checked}
+      value=${value}
+      .checked=${checked}
+      ?checked=${defaultChecked}
       ?disabled=${disabled}
       name=${name}
+      ?required=${required}
     >
       ${label}
     </leu-checkbox>
@@ -37,6 +50,11 @@ Checked.args = {
   checked: true,
 }
 
+export const DefaultChecked = Template.bind({})
+DefaultChecked.args = {
+  defaultChecked: true,
+}
+
 export const Disabled = Template.bind({})
 Disabled.args = {
   disabled: true,
@@ -47,3 +65,8 @@ CheckedDisabled.args = {
   checked: true,
   disabled: true,
 }
+
+export const Required = Template.bind({})
+Required.args = {
+  required: true,
+}