@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/radio/RadioGroup.ts

@@ -1,181 +0,0 @@
-import { html } from "lit"
-import { classMap } from "lit/directives/class-map.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./radio-group.css?inline"
-import { LeuRadio } from "./Radio.js"
-
-/**
- * @summary Handles a group of radio buttons, allowing only one to be selected at a time. It provides keyboard navigation and manages focus within the group.
- * @slot - Place the radio buttons inside the default slot.
- * @tagname leu-radio-group
- */
-export class LeuRadioGroup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * Defines how the radio buttons should be aligned.
-   */
-  @property({ type: String, reflect: true })
-  orientation: "horizontal" | "vertical" = "horizontal"
-
-  /**
-   * The label of the radio group
-   */
-  @property({ type: String, reflect: true })
-  label?: string
-
-  /**
-   * Index of the radio button that would be focused
-   * when the focus moves into the group.
-   */
-  private currentIndex = 0
-
-  private items: LeuRadio[] = []
-
-  get value() {
-    const checkedValues = this.items
-      .filter((i) => i.checked)
-      .map((i) => i.value)
-    return checkedValues.length > 0 ? checkedValues[0] : ""
-  }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.handleItems()
-    this.addEventListeners()
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListeners()
-  }
-
-  private addEventListeners() {
-    /**
-     * 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 buttons 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 })
-    this.addEventListener("focusin", this.handleFocusIn)
-    this.addEventListener("keydown", this.handleKeyDown)
-  }
-
-  private removeEventListeners() {
-    this.removeEventListener("input", this.handleInput, { capture: true })
-    this.removeEventListener("focusin", this.handleFocusIn)
-    this.removeEventListener("keydown", this.handleKeyDown)
-  }
-
-  private handleSlotChange() {
-    this.handleItems()
-  }
-
-  private handleFocusIn = (e: FocusEvent & { target: LeuRadio }) => {
-    this.currentIndex = this.items.indexOf(e.target)
-  }
-
-  private handleKeyDown = (e: KeyboardEvent & { target: LeuRadio }) => {
-    const currentIndex = this.items.indexOf(e.target)
-
-    switch (e.key) {
-      case "ArrowUp":
-      case "ArrowLeft":
-        this.selectNextItem(currentIndex, -1)
-        break
-      case "ArrowDown":
-      case "ArrowRight":
-        this.selectNextItem(currentIndex, 1)
-        break
-      case "Home":
-        this.selectItem(this.items.find((item) => !item.disabled))
-        break
-      case "End":
-        this.selectItem(this.items.findLast((item) => !item.disabled))
-        break
-      default:
-    }
-
-    this.setTabIndex()
-  }
-
-  private handleInput = (e: InputEvent & { target: LeuRadio }) => {
-    this.items.forEach((item) => {
-      item.checked = item === e.target
-    })
-  }
-
-  private selectItem(selectingItem: LeuRadio) {
-    this.items.forEach((item) => {
-      item.checked = item === selectingItem
-    })
-  }
-
-  private selectNextItem(startingIndex: number, direction: -1 | 1) {
-    let selected = false
-
-    for (let index = 0; index < this.items.length; index += 1) {
-      const currentIndex =
-        (this.items.length + index * direction + startingIndex + direction) %
-        this.items.length
-      const currentItem = this.items[currentIndex]
-
-      if (!selected && !currentItem.disabled) {
-        currentItem.checked = true
-        currentItem.focus()
-        selected = true
-      } else if (selected) {
-        currentItem.checked = false
-      }
-    }
-  }
-
-  private setTabIndex() {
-    this.items.forEach((item, index) => {
-      if (index === this.currentIndex) {
-        item.tabIndex = 0
-      } else {
-        item.tabIndex = -1
-      }
-    })
-  }
-
-  private handleItems() {
-    this.items = Array.from(
-      this.querySelectorAll(":scope > *:not([slot])"),
-    ).filter((el) => el instanceof LeuRadio)
-
-    this.initializeIndex()
-    this.setTabIndex()
-  }
-
-  private initializeIndex() {
-    const index = this.items.findIndex(
-      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
-    )
-    const nextEnabledIndex = this.items.findIndex(
-      (item) => !item.hasAttribute("disabled"),
-    )
-
-    this.currentIndex = index >= 0 ? index : nextEnabledIndex
-  }
-
-  render() {
-    const fieldsetClasses = {
-      fieldset: "true",
-      "fieldset--vertical": this.orientation === "vertical",
-    }
-
-    return html`
-      <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend">${this.label}</legend>
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </fieldset>
-    `
-  }
-}

package/src/components/radio/leu-radio-group.ts

@@ -1,11 +0,0 @@
-import { LeuRadioGroup } from "./RadioGroup.js"
-
-export { LeuRadioGroup }
-
-LeuRadioGroup.define("leu-radio-group")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-radio-group": LeuRadioGroup
-  }
-}

package/src/components/radio/leu-radio.ts

@@ -1,11 +0,0 @@
-import { LeuRadio } from "./Radio.js"
-
-export { LeuRadio }
-
-LeuRadio.define("leu-radio")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-radio": LeuRadio
-  }
-}

package/src/components/radio/radio-group.css

@@ -1,29 +0,0 @@
-:host {
-  --group-font-regular: var(--leu-font-family-regular);
-  --group-font-black: var(--leu-font-family-black);
-
-  font-family: var(--group-font-regular);
-}
-
-.fieldset {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-
-  border: none;
-  padding: 0;
-}
-
-.fieldset--vertical {
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.legend {
-  font-family: var(--group-font-black);
-  font-size: 1.125rem;
-  line-height: 1.5;
-
-  margin-bottom: 0.5rem;
-}

package/src/components/radio/radio.css

@@ -1,76 +0,0 @@
-:host {
-  --radio-color: var(--leu-color-black-40);
-  --radio-color-disabled: var(--leu-color-black-20);
-  --radio-color-focus: var(--leu-color-func-cyan);
-
-  --radio-label-color: var(--leu-color-black-100);
-  --radio-label-color-disabled: var(--radio-color-disabled);
-
-  --radio-font-regular: var(--leu-font-family-regular);
-
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-
-  font-family: var(--radio-font-regular);
-}
-
-.radio {
-  --_length: 1.5rem;
-  appearance: none;
-  cursor: pointer;
-
-  width: var(--_length);
-  height: var(--_length);
-  margin: 0;
-
-  border: 2px solid var(--radio-color);
-  border-radius: 50%;
-
-  flex: 1 0 var(--_length);
-
-  display: grid;
-  place-items: center;
-}
-
-.radio::before {
-  content: "";
-  width: 0.75rem;
-  height: 0.75rem;
-
-  border-radius: 50%;
-  background-color: var(--radio-color);
-
-  transform: scale(0);
-}
-
-.radio:checked::before {
-  transform: scale(1);
-}
-
-.radio:is(:hover, :checked, :focus) {
-  --radio-color: var(--radio-color-focus);
-}
-
-.radio:focus-visible {
-  outline: 2px solid var(--radio-color-focus);
-  outline-offset: 2px;
-}
-
-.radio:disabled {
-  --radio-color: var(--radio-color-disabled);
-  cursor: not-allowed;
-}
-
-.label {
-  cursor: pointer;
-
-  color: var(--radio-label-color);
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.radio:disabled + .label {
-  --radio-label-color: var(--radio-label-color-disabled);
-  cursor: not-allowed;
-}

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

@@ -1,54 +0,0 @@
-import { html } from "lit"
-import "../leu-radio.js"
-import "../leu-radio-group.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-export default {
-  title: "Components/Radio/Group",
-  component: "leu-radio-group",
-  argTypes: {
-    label: { control: "text" },
-    orientation: {
-      options: ["vertical", "horizontal"],
-      control: { type: "radio" },
-    },
-  },
-  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, orientation }) {
-  return html`
-    <leu-radio-group
-      orientation=${ifDefined(orientation)}
-      label=${ifDefined(label)}
-    >
-      <leu-radio value="1" name="radio-button" disabled>Kurz</leu-radio>
-      <leu-radio value="2" name="radio-button">Etwas Länger</leu-radio>
-      <leu-radio value="3" name="radio-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-      >
-    </leu-radio-group>
-  `
-}
-
-export const Horizontal = Template.bind({})
-export const HorizontalLabel = Template.bind({})
-HorizontalLabel.args = {
-  label: "Anrede",
-}
-
-export const Vertical = Template.bind({})
-Vertical.args = {
-  orientation: "vertical",
-}
-
-export const VerticalLabel = Template.bind({})
-VerticalLabel.args = {
-  orientation: "vertical",
-  label: "Anrede",
-}

package/src/components/radio/stories/radio.stories.ts

@@ -1,55 +0,0 @@
-import { html } from "lit"
-import "../leu-radio.js"
-
-export default {
-  title: "Components/Radio",
-  component: "leu-radio",
-  argTypes: {
-    label: {
-      control: "text",
-    },
-  },
-  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 = false,
-  disabled = false,
-  name = "",
-}) {
-  return html`
-    <leu-radio
-      .value=${value}
-      ?checked=${checked}
-      ?disabled=${disabled}
-      name=${name}
-    >
-      ${label}
-    </leu-radio>
-  `
-}
-
-export const Regular = Template.bind({})
-
-export const Checked = Template.bind({})
-Checked.args = {
-  checked: true,
-}
-
-export const Disabled = Template.bind({})
-Disabled.args = {
-  disabled: true,
-}
-
-export const CheckedDisabled = Template.bind({})
-CheckedDisabled.args = {
-  checked: true,
-  disabled: true,
-}

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

@@ -1,83 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-radio.js"
-import "../leu-radio-group.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(html`
-    <leu-radio-group>
-      <span slot="legend">Legende</span>
-      <leu-radio
-        value="1"
-        name="radio-button"
-        disabled
-        ?checked=${args.checkedValue === "1"}
-        >Kurz</leu-radio
-      >
-      <leu-radio
-        value="2"
-        name="radio-button"
-        ?checked=${args.checkedValue === "2"}
-        >Etwas Länger</leu-radio
-      >
-      <leu-radio
-        value="3"
-        name="radio-button"
-        ?checked=${args.checkedValue === "3"}
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-      >
-    </leu-radio-group>
-  `)
-}
-
-describe("LeuRadio", () => {
-  it("is a defined element", async () => {
-    const elRadioGroup = customElements.get("leu-radio-group")
-
-    await expect(elRadioGroup).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("has an empty default value", async () => {
-    const el = await defaultFixture()
-
-    expect(el.value).to.equal("")
-  })
-
-  it("updates the value when a radio button is checked", async () => {
-    const el = await defaultFixture()
-    const leuRadio = el.querySelector('leu-radio[value="2"]')
-    const radio = leuRadio.shadowRoot.querySelector("input")
-
-    radio.click()
-
-    expect(el.value).to.equal("2")
-  })
-
-  it("doesn't allow multiple radio buttons to be checked", async () => {
-    const el = await defaultFixture()
-    const leuRadio2 = el.querySelector('leu-radio[value="2"]')
-    const leuRadio3 = el.querySelector('leu-radio[value="3"]')
-    const radio2 = leuRadio2.shadowRoot.querySelector("input")
-    const radio3 = leuRadio3.shadowRoot.querySelector("input")
-
-    radio2.click()
-    radio3.click()
-
-    expect(el.value).to.equal("3")
-    expect(leuRadio2.checked).to.be.false
-    expect(leuRadio3.checked).to.be.true
-  })
-
-  it("has a default value that reflects the checked radio button", async () => {
-    const el = await defaultFixture({ checkedValue: "2" })
-
-    expect(el.value).to.deep.equal("2")
-  })
-})

package/src/components/radio/test/radio.test.ts

@@ -1,119 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-
-import "../leu-radio.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-radio identifier="b" value="3" name="radio-button"
-      >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-    >
-  `)
-}
-
-describe("LeuRadio", () => {
-  it("is a defined element", async () => {
-    const elRadio = customElements.get("leu-radio")
-
-    await expect(elRadio).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("sets the checked property when the checkbox", async () => {
-    const el = await defaultFixture()
-    const checkbox = el.shadowRoot.querySelector("input")
-
-    checkbox.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.true
-
-    checkbox.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.true
-  })
-
-  it("sets the checked property when the checkbox", async () => {
-    const el = await defaultFixture()
-    const label = el.shadowRoot.querySelector("label")
-
-    label.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.true
-
-    label.click()
-    await elementUpdated(el)
-
-    expect(el.checked).to.be.true
-  })
-
-  it("does not set 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.true
-  })
-
-  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")
-
-    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")
-
-    expect(event).to.exist
-  })
-})