@statistikzh/leu 0.28.1 → 0.28.2

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

@@ -1,417 +0,0 @@
-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<LeuButton>(html` <leu-button>button</leu-button>`)
-}
-
-describe("LeuButton", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-button")
-
-    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("passes the a11y audit with no visible text", async () => {
-    const el = await fixture(
-      html` <leu-button label="sichern">
-        <leu-icon name="download"></leu-icon>
-      </leu-button>`,
-    )
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("passes the a11y audit when rendered as link", async () => {
-    const el = await fixture(
-      html` <leu-button href="https://datenkatalog.statistik.zh.ch/"
-        >Link</leu-button
-      >`,
-    )
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders the label", async () => {
-    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
-
-    expect(el).to.have.trimmed.text("Sichern")
-  })
-
-  it("sets the aria-label attribute", async () => {
-    const el = await fixture(
-      html` <leu-button label="Dokument herunterladen"
-        ><leu-icon name="download"></leu-icon
-      ></leu-button>`,
-    )
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.attribute("aria-label", "Dokument herunterladen")
-  })
-
-  it("renders the icon slots at the correct position", async () => {
-    const el = await fixture(
-      html` <leu-button
-        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`,
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).dom.to.equal(
-      "<button><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
-      { ignoreAttributes: ["class", "type"] },
-    )
-  })
-
-  it("renders the expanded icon only when the variant is ghost", async () => {
-    const el = await fixture<LeuButton>(
-      html` <leu-button variant="ghost" expanded="true"
-        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`,
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).dom.to.equal(
-      "<button aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div><div class='icon-expanded'><leu-icon name='angleDropDown' size='24'></leu-icon></div></button>",
-      { ignoreAttributes: ["class", "type"] },
-    )
-
-    el.variant = "primary"
-
-    await elementUpdated(el)
-
-    expect(button).dom.to.equal(
-      "<button class='primary regular' aria-expanded='true'><div><slot name='before'></slot></div><span><slot></slot></span><div><slot name='after'></slot></div></button>",
-      { ignoreAttributes: ["class", "type"] },
-    )
-  })
-
-  it("sets the dissabled attrbiute", async () => {
-    const el = await fixture<LeuButton>(
-      html` <leu-button variant="ghost" expanded="true" disabled>
-        <leu-icon name="addNew" slot="before"></leu-icon>
-        Sichern
-      </leu-button>`,
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.attribute("disabled")
-
-    el.disabled = false
-    await elementUpdated(el)
-
-    expect(button).to.not.have.attribute("disabled")
-  })
-
-  it("reflects the role attribute", async () => {
-    const el = await fixture<LeuButton>(
-      html` <leu-button variant="ghost" componentRole="menuitemradio"
-        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`,
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.attribute("role", "menuitemradio")
-  })
-
-  it("sets the either checked or selected attribute depending on the role", async () => {
-    const el = await fixture<LeuButton>(
-      html` <leu-button variant="ghost" componentRole="menuitemradio" active
-        ><leu-icon name="addNew" slot="before"></leu-icon>Sichern</leu-button
-      >`,
-    )
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.attribute("aria-checked", "true")
-    expect(button).to.not.have.attribute("aria-selected")
-
-    el.componentRole = "tab"
-
-    await elementUpdated(el)
-
-    expect(button).to.have.attribute("aria-selected", "true")
-    expect(button).to.not.have.attribute("aria-checked")
-
-    el.componentRole = "checkbox"
-    el.active = false
-
-    await elementUpdated(el)
-
-    expect(button).to.have.attribute("aria-checked", "false")
-    expect(button).to.not.have.attribute("aria-selected")
-
-    el.componentRole = undefined
-    el.active = true
-
-    await elementUpdated(el)
-
-    expect(button).to.not.have.attribute("aria-checked")
-    expect(button).to.not.have.attribute("aria-selected")
-  })
-
-  it("dispatches the click event", async () => {
-    const button = await fixture<LeuButton>(
-      html` <leu-button>Sichern</leu-button>`,
-    )
-
-    setTimeout(() => button.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
-  })
-
-  it("renders as an anchor when href is set", async () => {
-    const el = await fixture(
-      html` <leu-button
-        href="https://datenkatalog.statistik.zh.ch/"
-        target="_blank"
-        >Zu den Daten <leu-icon name="link" slot="before"></leu-icon
-      ></leu-button>`,
-    )
-
-    const anchor = el.shadowRoot.querySelector("a")
-
-    expect(anchor).to.exist
-    expect(anchor).to.have.attribute(
-      "href",
-      "https://datenkatalog.statistik.zh.ch/",
-    )
-    expect(anchor).to.have.attribute("target", "_blank")
-  })
-
-  it("does not set disabled or type attribute on anchor", async () => {
-    const el = await fixture(
-      html` <leu-button
-        href="https://datenkatalog.statistik.zh.ch/"
-        disabled
-        type="submit"
-        >Zu den Daten <leu-icon name="link" slot="before"></leu-icon
-      ></leu-button>`,
-    )
-
-    const anchor = el.shadowRoot.querySelector("a")
-
-    expect(anchor).to.exist
-    expect(anchor).to.not.have.attribute("disabled")
-    expect(anchor).to.not.have.attribute("type")
-  })
-
-  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

@@ -1,97 +0,0 @@
-import { html } from "lit"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { LeuButton } from "../button/Button.js"
-
-import styles from "./button-group.css?inline"
-
-/**
- * A radio input-like button group component.
- * It allows only one button to be active at a time.
- * @tagname leu-button-group
- * @slot - Slot for the buttons
- * @fires input - When the value of the group changes by clicking a button
- */
-export class LeuButtonGroup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  private _items: LeuButton[] = []
-
-  /**
-   * Retrieves the value or the text content of a given LeuButton element.
-   */
-  private static getButtonValue(button: LeuButton) {
-    return button.getAttribute("value") ?? button.textContent.trim()
-  }
-
-  /**
-   * The value of the currently selected (active) button
-   */
-  get value() {
-    const activeButton = this._items.find((item) => item.active)
-    return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null
-  }
-
-  set value(newValue) {
-    this._items.forEach((item) => {
-      item.active = LeuButtonGroup.getButtonValue(item) === newValue
-    })
-  }
-
-  private _handleSlotChange() {
-    /**
-     * Remove all event listeners that were added before.
-     * Just because a slotchange event was fired, it doesn't mean that all of the
-     * children of the slot have changed.
-     */
-    this._items.forEach((item) => {
-      item.removeEventListener("click", this._handleButtonClick)
-    })
-
-    const slot = this.shadowRoot.querySelector("slot")
-    this._items = slot
-      .assignedElements({ flatten: true })
-      .filter((el) => el instanceof LeuButton)
-
-    let foundActiveButtonBefore = false
-
-    this._items.forEach((item) => {
-      item.addEventListener("click", this._handleButtonClick)
-      item.componentRole = "menuitemradio"
-
-      /**
-       * In case there are multiple active buttons
-       * only the first one will be kept active.
-       */
-      if (item.active && foundActiveButtonBefore) {
-        item.active = false
-      } else if (item.active) {
-        foundActiveButtonBefore = true
-      }
-    })
-  }
-
-  private _handleButtonClick = (event: MouseEvent) => {
-    const button = event.currentTarget as LeuButton
-
-    if (!button.active) {
-      this.value = LeuButtonGroup.getButtonValue(button)
-
-      this.dispatchEvent(
-        new CustomEvent("input", {
-          bubbles: true,
-          composed: true,
-          detail: { value: LeuButtonGroup.getButtonValue(button) },
-        }),
-      )
-    }
-  }
-
-  render() {
-    return html`
-      <div role="menubar" class="group">
-        <slot @slotchange=${this._handleSlotChange}></slot>
-      </div>
-    `
-  }
-}

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

@@ -1,5 +0,0 @@
-.group {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}

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

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

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

@@ -1,54 +0,0 @@
-import { html } from "lit"
-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/internal/core-events"
-function updateStorybookArgss(id, args) {
-  const channel = window.__STORYBOOK_ADDONS_CHANNEL__
-  channel.emit(UPDATE_STORY_ARGS, {
-    storyId: id,
-    updatedArgs: args,
-  })
-}
-
-export default {
-  title: "Components/ButtonGroup",
-  component: "leu-button-group",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=18180-165796&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-}
-
-function Template({ items, value }, { id }) {
-  return html` <leu-button-group
-      .value=${value}
-      @input=${(event) => {
-        updateStorybookArgss(id, {
-          value: event.target.value,
-        })
-      }}
-    >
-      ${items.map(
-        (i) =>
-          html`<leu-button
-            variant="secondary"
-            ?active=${value === i || value === `${i}-attr`}
-            value=${`${i}-attr`}
-            >${i}
-          </leu-button>`,
-      )}
-    </leu-button-group>
-    <br />
-    <br />
-    <pre>value = '${value}'</pre>`
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  items: ["Eins", "Zwei", "Drei"],
-  value: "Zwei",
-}

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

@@ -1,105 +0,0 @@
-import { html } from "lit"
-import {
-  fixture,
-  expect,
-  oneEvent,
-  elementUpdated,
-  aTimeout,
-} from "@open-wc/testing"
-
-import "../leu-button-group.js"
-import "../../button/leu-button.js"
-
-async function defaultFixture() {
-  return fixture(html`
-    <leu-button-group>
-      <leu-button variant="secondary" value="Eins">Eins</leu-button>
-      <leu-button variant="secondary" value="Zweierlei">Zwei</leu-button>
-      <leu-button variant="secondary">Drei</leu-button>
-    </leu-button-group>
-  `)
-}
-
-describe("LeuButtonGroup", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-button-group")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).to.be.accessible()
-  })
-
-  it("has no value by default", async () => {
-    const el = await defaultFixture()
-
-    await expect(el.value).to.be.null
-  })
-
-  it("has the correct value after clicking a button", async () => {
-    const el = await defaultFixture()
-
-    const buttons = Array.from(el.querySelectorAll("leu-button"))
-
-    setTimeout(() => buttons[1].click())
-    await oneEvent(el, "input")
-    await expect(el.value).to.equal("Zweierlei")
-
-    setTimeout(() => buttons[0].click())
-    await oneEvent(el, "input")
-    await expect(el.value).to.equal("Eins")
-
-    setTimeout(() => buttons[2].click())
-    await oneEvent(el, "input")
-    await expect(el.value).to.equal("Drei")
-
-    // Should not change after clicking the same button again
-    setTimeout(() => buttons[2].click())
-    await aTimeout(100) // There is no event to wait for so
-    await expect(el.value).to.equal("Drei")
-  })
-
-  it("sets the active attribute on the active button", async () => {
-    const el = await defaultFixture()
-    el.value = "Zweierlei"
-    await elementUpdated(el)
-
-    const buttons = el.querySelectorAll("leu-button")
-
-    await expect(buttons[0].active).to.be.false
-    await expect(buttons[1].active).to.be.true
-    await expect(buttons[2].active).to.be.false
-
-    buttons[0].click()
-
-    await expect(buttons[0].variant).to.equal("secondary")
-    await expect(buttons[1].variant).to.equal("secondary")
-    await expect(buttons[2].variant).to.equal("secondary")
-  })
-
-  it("sets the menuitemradio role on the buttons", async () => {
-    const el = await defaultFixture()
-    const buttons = el.querySelectorAll("leu-button")
-
-    await expect(buttons[0].componentRole).to.equal("menuitemradio")
-    await expect(buttons[1].componentRole).to.equal("menuitemradio")
-    await expect(buttons[2].componentRole).to.equal("menuitemradio")
-  })
-
-  it("dispatches an input event when the value changes", async () => {
-    const el = await defaultFixture()
-    el.value = "Drei"
-    await elementUpdated(el)
-
-    const buttons = el.querySelectorAll("leu-button")
-
-    setTimeout(() => buttons[0].click())
-
-    const inputEvent = await oneEvent(el, "input")
-
-    await expect(inputEvent.detail.value).to.be.equal("Eins")
-  })
-})