@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/dialog/stories/dialog.stories.ts

@@ -1,142 +0,0 @@
-import { html } from "lit"
-import "../leu-dialog.js"
-import "../../input/leu-input.js"
-import "../../button/leu-button.js"
-
-export default {
-  title: "Components/Dialog",
-  component: "leu-dialog",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=16052-88818&node-type=canvas&t=swv3JY6UIoCBUpXa-11",
-    },
-  },
-}
-
-function openDialog() {
-  document.querySelector("leu-dialog").show()
-}
-
-function closeDialog() {
-  document.querySelector("leu-dialog").close()
-}
-
-function OpenDialogButton() {
-  return html` <leu-button @click=${() => openDialog()}>
-    Open dialog
-  </leu-button>`
-}
-
-function Template({ label, sublabel }) {
-  return html`
-    ${OpenDialogButton()}
-
-    <leu-dialog label="${label}" sublabel="${sublabel}">
-      <leu-input label="Eingabe"></leu-input>
-      <br />
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-    </leu-dialog>
-  `
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: "Property: label",
-  rubric: "Property: sublabel",
-}
-
-function ActionButtonsTemplate({ label, sublabel }) {
-  return html`
-    ${OpenDialogButton()}
-
-    <leu-dialog label="${label}" sublabel="${sublabel}">
-      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet.
-      <slot slot="actionbar">
-        <leu-button
-          variant="secondary"
-          @click=${() => {
-            alert("Fenster wird geschlossen")
-            closeDialog()
-          }}
-        >
-          Abbrechen
-        </leu-button>
-        <leu-button
-          @click=${() => {
-            alert("Fenster wird offen gelassen")
-          }}
-        >
-          Anwenden
-        </leu-button>
-      </slot>
-    </leu-dialog>
-  `
-}
-
-export const ActionButtons = ActionButtonsTemplate.bind({})
-ActionButtons.args = {
-  label: "Property: label",
-  sublabel: "Property: sublabel",
-}
-
-function SmallContentTemplate({ label, sublabel }) {
-  return html`
-    ${OpenDialogButton()}
-
-    <leu-dialog label="${label}" sublabel="${sublabel}">
-      <p>Ein kurzer Text</p>
-    </leu-dialog>
-  `
-}
-
-export const SmallContent = SmallContentTemplate.bind({})
-SmallContent.args = {
-  label: "Dialog Titel",
-  sublabel: "Property: sublabel",
-}
-
-function ScrollablePageTemplate({ label, sublabel }) {
-  return html`
-    <div style="height: 200vh">
-      ${OpenDialogButton()}
-
-      <leu-dialog label="${label}" sublabel="${sublabel}">
-        <leu-input label="Eingabe"></leu-input>
-        <br />
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
-        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
-        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-        ipsum dolor sit amet.
-      </leu-dialog>
-    </div>
-    <div style="height: 200vh">${OpenDialogButton()}</div>
-  `
-}
-
-export const ScrollablePage = ScrollablePageTemplate.bind({})
-ScrollablePage.args = {
-  label: "Dialog Titel",
-  sublabel: "Property: sublabel",
-}

package/src/components/dialog/test/dialog.test.ts

@@ -1,85 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-dialog.js"
-
-async function defaultFixture() {
-  return fixture(
-    html`<leu-dialog label="Title" sublabel="Category">
-      This is the content of the dialog.
-    </leu-dialog>`,
-  )
-}
-
-describe("LeuDialog", () => {
-  it("is a defined element", async () => {
-    const el = await customElements.get("leu-dialog")
-
-    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 when the modal is open", async () => {
-    const el = await defaultFixture()
-
-    el.show()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("opens the dialog when calling show()", async () => {
-    const el = await defaultFixture()
-
-    el.show()
-
-    const dialog = el.shadowRoot.querySelector("dialog")
-
-    expect(dialog.open).to.be.true
-  })
-
-  it("closes the dialog when calling close()", async () => {
-    const el = await defaultFixture()
-
-    el.show()
-    el.close()
-
-    const dialog = el.shadowRoot.querySelector("dialog")
-
-    expect(dialog.open).to.be.false
-  })
-
-  it("renders a label and a sublabel", async () => {
-    const el = await defaultFixture()
-
-    const label = el.shadowRoot.querySelector("h1")
-    const sublabel = el.shadowRoot.querySelector(".subtitle")
-
-    expect(label).to.have.text("Title")
-    expect(sublabel).to.have.text("Category")
-  })
-
-  it("renders a close button", async () => {
-    const el = await defaultFixture()
-
-    const closeButton = el.shadowRoot.querySelector(".close-button")
-
-    expect(closeButton).to.exist
-  })
-
-  it("closes the dialog when clicking the close button", async () => {
-    const el = await defaultFixture()
-    const dialog = el.shadowRoot.querySelector("dialog")
-
-    el.show()
-
-    const closeButton = el.shadowRoot.querySelector(".close-button")
-    expect(dialog.open).to.be.true
-    closeButton.click()
-    expect(dialog.open).to.be.false
-  })
-})

package/src/components/dropdown/Dropdown.ts

@@ -1,152 +0,0 @@
-import { html, nothing } from "lit"
-import { createRef, ref } from "lit/directives/ref.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { HasSlotController } from "../../lib/hasSlotController.js"
-
-import { LeuButton } from "../button/Button.js"
-import { LeuMenu } from "../menu/Menu.js"
-import { LeuMenuItem } from "../menu/MenuItem.js"
-import { LeuPopup } from "../popup/Popup.js"
-
-import styles from "./dropdown.css?inline"
-
-/**
- * @tagname leu-dropdown
- */
-export class LeuDropdown extends LeuElement {
-  static dependencies = {
-    "leu-button": LeuButton,
-    "leu-menu": LeuMenu,
-    "leu-menu-item": LeuMenuItem,
-    "leu-popup": LeuPopup,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  @property({ type: String, reflect: true })
-  label: string = ""
-
-  @property({ type: Boolean, reflect: true })
-  expanded: boolean = false
-
-  @property({ type: Boolean, reflect: true })
-  inverted: boolean = false
-
-  protected hasSlotController = new HasSlotController(this, ["icon"])
-
-  protected _toggleRef = createRef<HTMLButtonElement>()
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.addEventListener("keyup", this._keyUpHandler)
-    document.addEventListener("click", this._documentClickHandler)
-
-    const menu = this._getMenu()
-
-    menu.addEventListener("keydown", this._keyDownMenuHandler)
-    menu.addEventListener("click", this._menuItemClickHandler)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener("keyup", this._keyUpHandler)
-    document.removeEventListener("click", this._documentClickHandler)
-
-    const menu = this._getMenu()
-
-    menu.removeEventListener("keydown", this._keyDownMenuHandler)
-    menu.removeEventListener("click", this._menuItemClickHandler)
-  }
-
-  protected _documentClickHandler = (event: MouseEvent) => {
-    if (!event.composedPath().includes(this)) {
-      this.expanded = false
-    }
-  }
-
-  protected _keyUpHandler = (event: KeyboardEvent) => {
-    if (event.key === "Escape") {
-      this.expanded = false
-    }
-  }
-
-  protected async _keyDownToggleHandler(event: KeyboardEvent) {
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault()
-      const menu = this._getMenu()
-
-      this.expanded = true
-
-      await this.updateComplete
-
-      if (event.key === "ArrowDown" || event.key === "Home") {
-        menu.focusItem(0)
-      } else if (event.key === "ArrowUp" || event.key === "End") {
-        menu.focusItem(-1)
-      }
-    }
-  }
-
-  protected _menuItemClickHandler = (
-    e: MouseEvent & { target: HTMLElement },
-  ) => {
-    if (e.target.tagName.toLowerCase() === "leu-menu-item") {
-      this.expanded = false
-      this._toggleRef.value.focus()
-    }
-  }
-
-  /**
-   * Close the dropdown when the user presses the Escape or the Tab key.
-   * Navigating the menu with the arrow keys is handled by the menu itself.
-   */
-  protected _keyDownMenuHandler = (e: KeyboardEvent) => {
-    if (e.key === "Escape" || e.key === "Tab") {
-      e.preventDefault()
-      this.expanded = false
-      this._toggleRef.value.focus()
-    }
-  }
-
-  protected _handleToggleClick() {
-    this.expanded = !this.expanded
-  }
-
-  protected _getMenu() {
-    return this.querySelector<LeuMenu>("leu-menu")
-  }
-
-  render() {
-    const hasIcon = this.hasSlotController.test("icon")
-    return html`
-      <leu-popup
-        ?active=${this.expanded}
-        placement="bottom-start"
-        shift
-        shiftPadding="8"
-        autoSize="width"
-        autoSizePadding="8"
-      >
-        <leu-button
-          ref=${ref(this._toggleRef)}
-          class="button"
-          slot="anchor"
-          variant="ghost"
-          expanded=${this.expanded ? "true" : "false"}
-          ?active=${this.expanded}
-          ?inverted=${this.inverted}
-          @click=${this._handleToggleClick}
-          @keydown=${this._keyDownToggleHandler}
-        >
-          ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
-          ${this.label}</leu-button
-        >
-        <div id="content" class="content" ?hidden=${!this.expanded}>
-          <slot></slot>
-        </div>
-      </leu-popup>
-    `
-  }
-}

package/src/components/dropdown/dropdown.css

@@ -1,16 +0,0 @@
-:host {
-  position: relative;
-  display: contents;
-}
-
-.content {
-  overflow: hidden;
-  box-shadow: var(--leu-box-shadow-short);
-  border-radius: 2px;
-
-  margin-top: 0.5rem;
-}
-
-.button {
-  max-width: 100%;
-}

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

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

package/src/components/dropdown/stories/dropdown.stories.ts

@@ -1,58 +0,0 @@
-import { html, nothing } from "lit"
-import "../leu-dropdown.js"
-import "../../icon/leu-icon.js"
-
-import { paths as iconPaths } from "../../icon/paths.js"
-
-/**
- * @type {import("@storybook/web-components-vite").Meta}
- */
-export default {
-  title: "Components/Dropdown",
-  component: "leu-dropdown",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=136815-217650&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-  argTypes: {
-    icon: {
-      control: "select",
-      options: Object.keys(iconPaths),
-    },
-  },
-}
-
-function Template({ label, expanded, icon, inverted }) {
-  return html` <leu-dropdown
-    label=${label}
-    ?expanded=${expanded}
-    ?inverted=${inverted}
-  >
-    ${icon ? html`<leu-icon name=${icon} slot="icon"></leu-icon>` : nothing}
-    <leu-menu>
-      <leu-menu-item
-        href="https://www.web.statistik.zh.ch/ogd/daten/ressourcen/KTZH_00001120_00002165.csv"
-        >OGD Ressource</leu-menu-item
-      >
-      <leu-menu-item>Als CSV Tabelle</leu-menu-item>
-      <leu-menu-item>Als XLS Tabelle</leu-menu-item>
-      <hr />
-      <leu-menu-item>Als PNG exportieren</leu-menu-item>
-      <leu-menu-item>Als SVG exportieren</leu-menu-item>
-      <leu-menu-item disabled>Als PDF exportieren</leu-menu-item>
-    </leu-menu>
-  </leu-dropdown>`
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  label: "Download",
-  icon: "download",
-}
-
-export const WithoutIcon = Template.bind({})
-WithoutIcon.args = {
-  label: "Download",
-}

package/src/components/dropdown/test/dropdown.test.ts

@@ -1,59 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, elementUpdated } from "@open-wc/testing"
-
-import "../leu-dropdown.js"
-
-async function defaultFixture(args = { expanded: false, inverted: false }) {
-  return fixture(
-    html` <leu-dropdown
-      label="Download"
-      ?expanded=${args.expanded}
-      ?inverted=${args.inverted}
-    >
-      <leu-menu>
-        <leu-menu-item>Als CSV Tabelle</leu-menu-item>
-        <leu-menu-item>Als XLS Tabelle</leu-menu-item>
-        <hr />
-        <leu-menu-item>Als PNG exportieren</leu-menu-item>
-        <leu-menu-item>Als SVG exportieren</leu-menu-item>
-        <leu-menu-item>Als PDF exportieren</leu-menu-item>
-      </leu-menu>
-    </leu-dropdown>`,
-  )
-}
-
-describe("LeuDropdown", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-dropdown")
-
-    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("closes the popup when the document is clicked outside the component", async () => {
-    const el = await defaultFixture()
-
-    const toggleButton = el.shadowRoot.querySelector("leu-button")
-    toggleButton.click()
-    await elementUpdated(el)
-
-    expect(el.expanded).to.be.true
-
-    document.body.click()
-
-    expect(el.expanded).to.be.false
-  })
-
-  it("reflects the inverted property to the internal button", async () => {
-    const el = await defaultFixture({ inverted: true })
-    await elementUpdated(el)
-
-    const toggleButton = el.shadowRoot.querySelector("leu-button")
-    expect(toggleButton.inverted).to.be.true
-  })
-})