@statistikzh/leu 0.28.0 → 0.28.2

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

@@ -1,72 +0,0 @@
-import { html } from "lit"
-import "../leu-checkbox.js"
-
-export default {
-  title: "Components/Checkbox",
-  component: "leu-checkbox",
-  argTypes: {
-    label: {
-      control: "text",
-    },
-    defaultChecked: {
-      control: "boolean",
-    },
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-}
-
-function Template({
-  label = "Label",
-  value,
-  checked,
-  defaultChecked,
-  disabled,
-  name = "",
-  required,
-}) {
-  return html`
-    <leu-checkbox
-      value=${value}
-      .checked=${checked}
-      ?checked=${defaultChecked}
-      ?disabled=${disabled}
-      name=${name}
-      ?required=${required}
-    >
-      ${label}
-    </leu-checkbox>
-  `
-}
-
-export const Regular = Template.bind({})
-
-export const Checked = Template.bind({})
-Checked.args = {
-  checked: true,
-}
-
-export const DefaultChecked = Template.bind({})
-DefaultChecked.args = {
-  defaultChecked: true,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
-}
-
-export const CheckedDisabled = Template.bind({})
-CheckedDisabled.args = {
-  checked: true,
-  disabled: true,
-}
-
-export const Required = Template.bind({})
-Required.args = {
-  required: true,
-}

package/src/components/checkbox/test/checkbox-group.test.ts

@@ -1,109 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-
-import "../leu-checkbox.js"
-import "../leu-checkbox-group.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-checkbox-group>
-      <leu-checkbox value="1" disabled>Option 1</leu-checkbox>
-      <leu-checkbox value="2">Option 2</leu-checkbox>
-      <leu-checkbox value="3">Option 3</leu-checkbox>
-    </leu-checkbox-group>
-  `)
-}
-
-async function checkedFixture() {
-  return fixture(html`
-    <leu-checkbox-group>
-      <leu-checkbox value="1" disabled>Option 1</leu-checkbox>
-      <leu-checkbox value="2" checked>Option 2</leu-checkbox>
-      <leu-checkbox value="3">Option 3</leu-checkbox>
-    </leu-checkbox-group>
-  `)
-}
-
-describe("LeuCheckboxGroup", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-checkbox-group")
-
-    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("has a default value of an empty array", async () => {
-    const el = await defaultFixture()
-
-    expect(el.value).to.deep.equal([])
-  })
-
-  it("updates the value when a checkbox is checked", async () => {
-    const el = await defaultFixture()
-    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
-    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
-
-    checkbox.click()
-
-    expect(el.value).to.deep.equal(["2"])
-  })
-
-  it("allows multiple checkboxes to be checked", async () => {
-    const el = await defaultFixture()
-    const leuCheckbox2 = el.querySelector('leu-checkbox[value="2"]')
-    const leuCheckbox3 = el.querySelector('leu-checkbox[value="3"]')
-    const checkbox2 = leuCheckbox2.shadowRoot.querySelector("input")
-    const checkbox3 = leuCheckbox3.shadowRoot.querySelector("input")
-
-    checkbox2.click()
-    checkbox3.click()
-
-    expect(el.value).to.deep.equal(["2", "3"])
-  })
-
-  it("updates the value when a checkbox is unchecked", async () => {
-    const el = await defaultFixture()
-    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
-    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
-
-    checkbox.click()
-    checkbox.click()
-
-    expect(el.value).to.deep.equal([])
-  })
-
-  it("doesn't update the value when a disabled checkbox is clicked", async () => {
-    const el = await defaultFixture()
-    const leuCheckbox = el.querySelector('leu-checkbox[value="1"]')
-    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
-
-    checkbox.click()
-
-    expect(el.value).to.deep.equal([])
-  })
-
-  it("has a default value that reflects all checked checkboxes", async () => {
-    const el = await checkedFixture()
-
-    expect(el.value).to.deep.equal(["2"])
-  })
-
-  it("delegates focus to the first active checkbox", async () => {
-    const el = await defaultFixture()
-    const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
-    const checkbox = leuCheckbox.shadowRoot.querySelector("input")
-
-    await sendKeys({
-      press: "Tab",
-    })
-
-    expect(document.activeElement).to.equal(leuCheckbox)
-    expect(leuCheckbox.shadowRoot.activeElement).to.equal(checkbox)
-  })
-})

package/src/components/checkbox/test/checkbox.test.ts

@@ -1,247 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-
-import "../leu-checkbox.js"
-import type { LeuCheckbox } from "../leu-checkbox.js"
-
-async function defaultFixture() {
-  return fixture<LeuCheckbox>(html`
-    <leu-checkbox value="2">Das ist ein Label</leu-checkbox>
-  `)
-}
-
-describe("LeuCheckbox", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-checkbox")
-
-    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("is not checked by default", async () => {
-    const el = await defaultFixture()
-
-    expect(el.checked).to.be.false
-  })
-
-  it("toggles the checked property when clicked", async () => {
-    const el = await defaultFixture()
-    const checkbox = el.shadowRoot.querySelector("input")
-    const label = el.shadowRoot.querySelector("label")
-
-    checkbox.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.true
-
-    label.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.false
-  })
-
-  it("does not toggle the checked property when disabled", async () => {
-    const el = await defaultFixture()
-    const checkbox = el.shadowRoot.querySelector("input")
-    const label = el.shadowRoot.querySelector("label")
-
-    el.disabled = true
-    await elementUpdated(el)
-
-    checkbox.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.false
-
-    label.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.false
-  })
-
-  it("toggles the checked property when the space key is pressed", async () => {
-    const el = await defaultFixture()
-    el.focus()
-
-    await sendKeys({
-      press: "Space",
-    })
-
-    expect(el.checked).to.be.true
-
-    await sendKeys({
-      press: "Space",
-    })
-
-    expect(el.checked).to.be.false
-  })
-
-  it("fires a change event when clicked", async () => {
-    const el = await defaultFixture()
-    const checkbox = el.shadowRoot.querySelector("input")
-
-    setTimeout(() => checkbox.click())
-    const event = await oneEvent(el, "change", false)
-
-    expect(event).to.exist
-  })
-
-  it("fires an input event when clicked", async () => {
-    const el = await defaultFixture()
-    const checkbox = el.shadowRoot.querySelector("input")
-
-    setTimeout(() => checkbox.click())
-    const event = await oneEvent(el, "input", false)
-
-    expect(event).to.exist
-  })
-
-  it("appends the value to the form data when checked", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
-      </form>
-    `)
-
-    const formData = new FormData(form)
-    expect(formData.get("checkbox")).to.equal("2")
-  })
-
-  it("appends 'on' to the form data when checked and no value is set", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" checked></leu-checkbox>
-      </form>
-    `)
-
-    let formData = new FormData(form)
-    expect(formData.get("checkbox")).to.equal("on")
-
-    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
-    checkbox.value = ""
-    await elementUpdated(checkbox)
-
-    formData = new FormData(form)
-    expect(formData.get("checkbox")).to.equal("")
-  })
-
-  it("does not append the value to the form data when unchecked", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2"></leu-checkbox>
-      </form>
-    `)
-
-    const formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.null
-  })
-
-  it("does not append the value to the form data when disabled", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2" checked disabled></leu-checkbox>
-      </form>
-    `)
-
-    const formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.null
-  })
-
-  it("resets to the default checked state when the form is reset", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
-        <button type="reset">Reset</button>
-      </form>
-    `)
-
-    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
-    checkbox.checked = false
-    await elementUpdated(checkbox)
-
-    form.reset()
-    await elementUpdated(checkbox)
-
-    expect(checkbox.checked).to.be.true
-  })
-
-  it("updates the form data when the value and disabled state changes", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2"></leu-checkbox>
-      </form>
-    `)
-
-    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
-    checkbox.checked = true
-    await elementUpdated(checkbox)
-
-    let formData = new FormData(form)
-    expect(formData.get("checkbox")).to.equal("2")
-
-    checkbox.value = "another_value"
-    await elementUpdated(checkbox)
-
-    formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.equal("another_value")
-
-    checkbox.disabled = true
-    await elementUpdated(checkbox)
-
-    formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.null
-  })
-
-  it("updates the form data when the defaultChecked state changes before any interaction", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2" checked></leu-checkbox>
-      </form>
-    `)
-
-    // Reset the default value to unchecked. Should have an effect since the user has not interacted with the checkbox yet.
-    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
-    checkbox.defaultChecked = false
-    await elementUpdated(checkbox)
-
-    let formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.null
-
-    // Simulate user interaction by clicking the checkbox, which should check it and update the form data.
-    const innerCheckbox =
-      checkbox.shadowRoot.querySelector<HTMLInputElement>("input")
-    innerCheckbox.click()
-
-    await elementUpdated(checkbox)
-
-    formData = new FormData(form)
-    expect(formData.get("checkbox")).to.equal("2")
-
-    // This change of defaultChecked should not have an effect since the user has already interacted with the checkbox.
-    checkbox.defaultChecked = true
-    checkbox.checked = false
-    await elementUpdated(checkbox)
-
-    formData = new FormData(form)
-    expect(formData.get("checkbox")).to.be.null
-  })
-
-  it("should be invalid when the required attribute is set and not checked", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-checkbox name="checkbox" value="2" required></leu-checkbox>
-      </form>
-    `)
-
-    const checkbox = form.querySelector<LeuCheckbox>("leu-checkbox")
-
-    expect(checkbox.validity.valid).to.be.false
-    expect(form.checkValidity()).to.be.false
-  })
-})

package/src/components/chip/Chip.ts

@@ -1,19 +0,0 @@
-import { property } from "lit/decorators.js"
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./chip.css?inline"
-
-/* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
-
-export class LeuChipBase extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /** @internal */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: Boolean, reflect: true })
-  inverted: boolean = false
-}

package/src/components/chip/ChipGroup.ts

@@ -1,122 +0,0 @@
-import { html, unsafeStatic } from "lit/static-html.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./chip-group.css?inline"
-import { LeuChipSelectable } from "./ChipSelectable.js"
-
-/**
- * @slot - Place leu-chip-* elements inside this slot
- * @cssproperty --leu-chip-group-gap - The gap between the chips
- * @tagname leu-chip-group
- */
-export class LeuChipGroup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  @property({ type: Boolean, reflect: true })
-  inverted: boolean = false
-
-  @property({ type: String, attribute: "selection-mode", reflect: true })
-  selectionMode: "single" | "multiple" | "none" = "none"
-
-  @property({ type: Number, attribute: "heading-level", reflect: true })
-  headingLevel: number = 2
-
-  @property({ type: String, reflect: true })
-  label: string = ""
-
-  protected selectableItems: Array<LeuChipSelectable> = []
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    /**
-     * It is technically possible to add an event listener to the host element
-     * before it is connected to the dom. In that case the outside event listener would
-     * be called before the following event listener. But at this point multiple
-     * radio chips could be selected at the same time because `handleInput` hasn't been
-     * called yet. That's why we use the capture phase.
-     */
-    this.addEventListener("input", this.handleInput, { capture: true })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this.removeEventListener("input", this.handleInput, { capture: true })
-  }
-
-  get value() {
-    return this.selectableItems
-      .filter((i) => i.checked)
-      .map((i) => i.getValue())
-  }
-
-  /**
-   * Checks the items with the given values.
-   * If the selectionMode is single, only the first item with the given value is checked.
-   */
-  set value(valueList: string[]) {
-    let hasChanged = false
-
-    for (const item of this.selectableItems) {
-      item.checked = hasChanged ? false : valueList.includes(item.value)
-
-      if (this.selectionMode === "single" && item.checked) {
-        hasChanged = true
-      }
-    }
-  }
-
-  /**
-   * Determines the heading tag of the accordion toggle.
-   * The headingLevel shouldn't be used directly to render the heading tag
-   * in order to avoid XSS issues.
-   * @internal
-   */
-  protected _getHeadingTag() {
-    let level = 2
-    if (this.headingLevel > 0 && this.headingLevel < 7) {
-      level = this.headingLevel
-    }
-
-    return `h${level}`
-  }
-
-  protected handleInput = (e: Event & { target: LeuChipSelectable }) => {
-    if (this.selectionMode === "single") {
-      this.selectableItems.forEach((item) => {
-        item.checked = item === e.target
-      })
-    }
-  }
-
-  protected handleSlotChange = (e: Event & { target: HTMLSlotElement }) => {
-    const slot = e.target
-    const items = slot
-      .assignedElements({ flatten: true })
-      .filter((el) => el instanceof LeuChipSelectable)
-
-    this.selectableItems = items
-  }
-
-  render() {
-    const hTag = this._getHeadingTag()
-
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`
-      ${this.label
-        ? html`<${unsafeStatic(hTag)} class="label">
-            <span class="label">${this.label}</span>
-          </${unsafeStatic(hTag)}>`
-        : ""}
-      <slot
-        class="group"
-        part="group"
-        @slotchange=${this.handleSlotChange}
-      ></slot>
-    `
-  }
-}

package/src/components/chip/ChipLink.ts

@@ -1,24 +0,0 @@
-import { html } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuChipBase } from "./Chip.js"
-
-/**
- * @tagname leu-chip-link
- * @slot - The content of the chip
- */
-export class LeuChipLink extends LeuChipBase {
-  /** The size of the chip */
-  @property({ type: String, reflect: true })
-  size: "regular" | "large" = "regular"
-
-  /** The URL that the chip links to */
-  @property({ type: String, reflect: true })
-  href: string = ""
-
-  render() {
-    return html`<a href=${this.href} class="button">
-      <span class="label"><slot></slot></span>
-    </a>`
-  }
-}

package/src/components/chip/ChipRemovable.ts

@@ -1,45 +0,0 @@
-import { html } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuChipBase } from "./Chip.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-/**
- * @slot - The content of the chip
- * @tagname leu-chip-removable
- * @fires remove - Dispatched when the user clicks on the chip
- * @prop {string} value - The value of the chip.
- */
-export class LeuChipRemovable extends LeuChipBase {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  @property({ type: String, reflect: true })
-  value: string = ""
-
-  /**
-   * Returns the value of the chip. If `value` is not set, it will return the text content
-   */
-  getValue() {
-    return this.value || this.textContent.trim()
-  }
-
-  protected handleClick() {
-    const customEvent = new CustomEvent("leu:remove", {
-      bubbles: true,
-      composed: true,
-      detail: {
-        value: this.getValue(),
-      },
-    })
-    this.dispatchEvent(customEvent)
-  }
-
-  render() {
-    return html`<button @click=${(e) => this.handleClick(e)} class="button">
-      <span class="label"><slot></slot></span>
-      <leu-icon name="close" class="icon"></leu-icon>
-    </button>`
-  }
-}