@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/menu/test/menu-item.test.ts

@@ -1,210 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, oneEvent, elementUpdated } from "@open-wc/testing"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { spy } from "sinon"
-
-import "../leu-menu.js"
-import "../leu-menu-item.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(html`
-    <leu-menu-item
-      href=${ifDefined(args.href)}
-      componentRole=${ifDefined(args.componentRole)}
-      value=${ifDefined(args.value)}
-      ?active=${args.active}
-      ?disabled=${args.disabled}
-      ?tabbable=${args.tabbable}
-      ?multipleSelection=${args.multipleSelection}
-    >
-      ${args.label}
-    </leu-menu-item>
-  `)
-}
-
-async function wrappedFixture(args = {}) {
-  return fixture(html`
-    <leu-menu role=${ifDefined(args.menuRole)}>
-      ${await defaultFixture(args)}
-    </leu-menu>
-  `)
-}
-
-describe("LeuMenuItem", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-menu-item")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await wrappedFixture({ label: "Download" })
-
-    await expect(el).dom.to.be.accessible()
-  })
-
-  it("passes the a11y audit with a link", async () => {
-    const el = await wrappedFixture({
-      label: "Download",
-      href: "https://zh.ch",
-      menuRole: "none",
-    })
-
-    await expect(el).dom.to.be.accessible()
-  })
-
-  it("renders a label", async () => {
-    const el = await defaultFixture({ label: "Download" })
-
-    expect(el).to.have.trimmed.text("Download")
-  })
-
-  it("renders a button", async () => {
-    const el = await defaultFixture({ label: "Download" })
-
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.exist
-  })
-
-  it("renders a link", async () => {
-    const el = await defaultFixture({
-      label: "Kanton Zürich",
-      href: "https://zh.ch",
-    })
-
-    const link = el.shadowRoot.querySelector("a")
-
-    expect(link).to.exist
-    expect(link).to.have.attribute("href", "https://zh.ch")
-    expect(el).to.have.trimmed.text("Kanton Zürich")
-  })
-
-  it("sets the aria-disabled attribute to the button", async () => {
-    const el = await defaultFixture({ label: "Download", disabled: true })
-
-    const button = el.shadowRoot.querySelector("button")
-    expect(button).to.have.attribute("aria-disabled", "true")
-  })
-
-  it("sets the defined role on the button", async () => {
-    const el = await defaultFixture({
-      label: "Download",
-    })
-
-    const button = el.shadowRoot.querySelector("button")
-    expect(button).to.have.attribute("role", "menuitem")
-
-    el.componentRole = "menuitemcheckbox"
-    await elementUpdated(el)
-    expect(button).to.have.attribute("role", "menuitemcheckbox")
-
-    el.componentRole = "menuitemradio"
-    await elementUpdated(el)
-    expect(button).to.have.attribute("role", "menuitemradio")
-
-    el.componentRole = "option"
-    await elementUpdated(el)
-    expect(button).to.have.attribute("role", "option")
-
-    el.componentRole = "none"
-    await elementUpdated(el)
-    expect(button).to.not.have.attribute("role")
-  })
-
-  it("adds either the aria-checked or aria-selected attribute to the button when the item is active", async () => {
-    const el = await defaultFixture({
-      label: "Download",
-      componentRole: "option",
-      active: true,
-    })
-
-    const button = el.shadowRoot.querySelector("button")
-    expect(button).to.have.attribute("aria-selected", "true")
-    expect(button).not.to.have.attribute("aria-checked")
-
-    el.componentRole = "menuitemcheckbox"
-    await elementUpdated(el)
-    expect(button).to.have.attribute("aria-checked", "true")
-    expect(button).not.to.have.attribute("aria-selected")
-
-    el.componentRole = "menuitemradio"
-    await elementUpdated(el)
-    expect(button).to.have.attribute("aria-checked", "true")
-    expect(button).not.to.have.attribute("aria-selected")
-  })
-
-  it("lets the click event bubble up", async () => {
-    const el = await defaultFixture({ label: "Download" })
-
-    const button = el.shadowRoot.querySelector("button")
-
-    setTimeout(() => {
-      button.click()
-    })
-
-    const event = await oneEvent(el, "click")
-
-    expect(event).to.exist
-  })
-
-  it("does not let the click event bubble up when disabled", async () => {
-    const el = await defaultFixture({ label: "Download", disabled: true })
-
-    const button = el.shadowRoot.querySelector("button")
-    const clickSpy = spy()
-    button.addEventListener("click", clickSpy)
-
-    el.click()
-
-    expect(clickSpy).to.have.not.been.called
-  })
-
-  it("reflects the tabbable property as tabindex to the button", async () => {
-    const el = await defaultFixture({ label: "Download", tabbable: true })
-
-    const button = el.shadowRoot.querySelector("button")
-    expect(button).to.have.attribute("tabindex", "0")
-
-    el.tabbable = false
-    await elementUpdated(el)
-    expect(button).to.have.attribute("tabindex", "-1")
-
-    el.tabbable = undefined
-    await elementUpdated(el)
-    expect(button).to.not.have.attribute("tabindex")
-  })
-
-  it("returns the value or label when getValue is called", async () => {
-    const el = await defaultFixture({ label: "Download          " })
-
-    expect(el.getValue()).to.equal("Download")
-
-    el.value = "download-01"
-
-    expect(el.getValue()).to.equal("download-01")
-  })
-
-  it("renders a placeholder icon when the menu item is part of multiple selection but not active", async () => {
-    const el = await defaultFixture({
-      label: "Download",
-      multipleSelection: true,
-    })
-
-    const icon = el.shadowRoot.querySelector("leu-icon")
-    expect(icon).to.exist
-    expect(icon).to.have.attribute("name", "")
-  })
-
-  it("renders a check icon when the menu item is part of multiple selection and is active", async () => {
-    const el = await defaultFixture({
-      label: "Download",
-      multipleSelection: true,
-      active: true,
-    })
-
-    const icon = el.shadowRoot.querySelector("leu-icon")
-    expect(icon).to.exist
-    expect(icon).to.have.attribute("name", "check")
-  })
-})

package/src/components/menu/test/menu.test.ts

@@ -1,125 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { fixture, expect } from "@open-wc/testing"
-import { sendKeys } from "@web/test-runner-commands"
-
-import "../leu-menu.js"
-import "../leu-menu-item.js"
-import "../../icon/leu-icon.js"
-
-async function defaultFixture(args = {}) {
-  return fixture(
-    html` <leu-menu
-      role=${ifDefined(args.role)}
-      selects=${ifDefined(args.selects)}
-    >
-      <leu-menu-item
-        ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
-      >
-      <leu-menu-item active
-        ><leu-icon slot="before" name="check"></leu-icon>Menu Item
-        2</leu-menu-item
-      >
-      <leu-menu-item
-        ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
-      >
-      <hr />
-      <leu-menu-item
-        ><leu-icon name="pin" slot="before"></leu-icon>Menu Item 3<slot
-          name="after"
-          >CH</slot
-        ></leu-menu-item
-      >
-      <leu-menu-item>Menu Item 4</leu-menu-item>
-    </leu-menu>`,
-  )
-}
-
-describe("LeuMenu", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-menu")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).dom.to.be.accessible()
-  })
-
-  it("sets 'menu' as the default role", async () => {
-    const el = await defaultFixture()
-
-    expect(el.getAttribute("role")).to.equal("menu")
-  })
-
-  it("sets 'menuitem' as the default role for menu items", async () => {
-    const el = await defaultFixture()
-
-    const menuItems = el.querySelectorAll("leu-menu-item")
-
-    menuItems.forEach((menuItem) => {
-      expect(menuItem.componentRole).to.equal("menuitem")
-    })
-  })
-
-  it("sets 'menuitemradio' as the role for menu items when only one item can be selected", async () => {
-    const el = await defaultFixture({ selects: "single" })
-
-    const menuItems = el.querySelectorAll("leu-menu-item")
-
-    menuItems.forEach((menuItem) => {
-      expect(menuItem.componentRole).to.equal("menuitemradio")
-    })
-  })
-
-  it("sets 'menuitemcheckbox' as the role for menu items when multiple items can be selected", async () => {
-    const el = await defaultFixture({ selects: "multiple" })
-
-    const menuItems = el.querySelectorAll("leu-menu-item")
-
-    menuItems.forEach((menuItem) => {
-      expect(menuItem.componentRole).to.equal("menuitemcheckbox")
-    })
-  })
-
-  it("sets 'option' as the role for menu items when the menu role is 'listbox'", async () => {
-    const el = await defaultFixture({ role: "listbox" })
-
-    const menuItems = el.querySelectorAll("leu-menu-item")
-
-    menuItems.forEach((menuItem) => {
-      expect(menuItem.componentRole).to.equal("option")
-    })
-  })
-
-  it("moves the focus when the arrow keys are pressed", async () => {
-    const el = await defaultFixture()
-
-    const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
-
-    await sendKeys({ press: "Tab" })
-    expect(document.activeElement).to.equal(menuItems[0])
-
-    await sendKeys({ press: "ArrowDown" })
-    await sendKeys({ press: "ArrowDown" })
-
-    expect(document.activeElement).to.equal(menuItems[2])
-
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-    await sendKeys({ press: "ArrowUp" })
-
-    expect(document.activeElement).to.equal(menuItems.at(-1))
-
-    await sendKeys({ press: "Home" })
-    expect(document.activeElement).to.equal(menuItems[0])
-
-    await sendKeys({ press: "End" })
-    expect(document.activeElement).to.equal(menuItems.at(-1))
-
-    await sendKeys({ press: "ArrowDown" })
-    expect(document.activeElement).to.equal(menuItems[0])
-  })
-})

package/src/components/message/Message.ts

@@ -1,118 +0,0 @@
-import { html, nothing } from "lit"
-import { property } from "lit/decorators.js"
-import { classMap } from "lit/directives/class-map.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./message.css?inline"
-import { LeuIcon } from "../icon/Icon.js"
-import { HasSlotController } from "../../lib/hasSlotController.js"
-
-/**
- * @tagname leu-message
- * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
- * @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
- * @slot cta - A call to action button that is only allowed for `size=large`
- * @fires leu:remove - Fired when the close button is clicked.
- */
-export class LeuMessage extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * @internal
-   */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  /**
-   * @internal
-   */
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  /**
-   * @internal
-   */
-  static iconToTypeMap = {
-    info: "getInformation",
-    error: "caution",
-    success: "confirm",
-    warning: "caution",
-  }
-
-  /**
-   * The type of the message. `error` and `success` will be displayed as filled boxes.
-   */
-  @property({ type: String, reflect: true })
-  type: "error" | "success" | "info" | "warning" = "success"
-
-  /**
-   * The size of the message. A call to action button is only allowed for `large` messages.
-   */
-  @property({ type: String, reflect: true })
-  size: "regular" | "large" = "regular"
-
-  /**
-   * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
-   */
-  @property({ type: Boolean, reflect: true })
-  removable: boolean = false
-
-  /**
-   * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
-   */
-  @property({ type: Boolean, reflect: true })
-  popup: boolean = false
-
-  private hasSlotController = new HasSlotController(this, ["cta"])
-
-  protected renderIcon() {
-    const name = LeuMessage.iconToTypeMap[this.type]
-
-    return html`<leu-icon class="message__icon" name=${name}></leu-icon>`
-  }
-
-  protected handleRemove() {
-    this.dispatchEvent(
-      new CustomEvent("leu:remove", {
-        bubbles: true,
-        composed: true,
-      }),
-    )
-  }
-
-  render() {
-    const hasCta = this.hasSlotController.test("cta")
-    const classes = classMap({
-      message: true,
-      "message--filled": this.type === "error" || this.type === "success",
-      "message--popup": this.popup,
-      [`message--${this.size}`]: true,
-      [`message--${this.type}`]: true,
-    })
-
-    return html`
-      <div class="${classes}">
-        ${this.renderIcon()}
-        <p class="message__content">
-          <slot></slot>
-        </p>
-        ${hasCta
-          ? html`<slot class="message__cta" name="cta"></slot>`
-          : nothing}
-        ${this.removable
-          ? html`<button
-              class="message__remove"
-              aria-label="Meldung schliessen"
-              @click=${this.handleRemove}
-            >
-              <leu-icon class="message__remove-icon" name="close"></leu-icon>
-            </button>`
-          : nothing}
-      </div>
-    `
-  }
-}

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

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

package/src/components/message/message.css

@@ -1,163 +0,0 @@
-@import url("../../styles/custom-media.css");
-
-:host {
-  font-family: var(--leu-font-family-regular);
-}
-
-.message {
-  position: relative;
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-
-  padding: var(--_padding);
-  border-radius: 0.25rem;
-  overflow: hidden;
-
-  background-color: var(--leu-color-black-0);
-  color: var(--_accent-color);
-}
-
-.message::before {
-  content: "";
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  width: 0.25rem;
-  height: 100%;
-  background-color: var(--_accent-color);
-}
-
-.message--error {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
-}
-
-.message--warning {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
-}
-
-.message--success {
-  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-green));
-}
-
-.message--info {
-  --_accent-color: var(
-    --leu-message-accent-color,
-    var(--leu-color-accent-violet)
-  );
-}
-
-.message--filled {
-  background-color: var(--_accent-color);
-  color: var(--leu-color-black-0);
-}
-
-.message--filled::before {
-  content: none;
-}
-
-.message--regular {
-  --_padding: 0.75rem;
-  --_icon-size: 24px;
-
-  @media (--viewport-large) {
-    --_padding: 1rem;
-  }
-}
-
-.message--large {
-  --_padding: 1rem;
-  --_icon-size: 32px;
-
-  @media (--viewport-small-max) {
-    flex-flow: column;
-    align-items: start;
-    gap: 0.75rem;
-  }
-
-  @media (--viewport-regular) {
-    --_padding: 1.25rem;
-  }
-
-  @media (--viewport-large) {
-    --_padding: 1.5rem;
-  }
-}
-
-.message--popup {
-  box-shadow: var(--leu-box-shadow-regular);
-}
-
-.message__icon {
-  --leu-icon-size: var(--_icon-size);
-
-  display: block;
-  flex: 0 0 min-content;
-}
-
-.message__content {
-  flex: 1 1 auto;
-  font: var(--leu-t-curve-small-regular-font);
-  margin: 0 0.5rem;
-
-  @media (--viewport-regular) {
-    margin-inline: 0.75rem;
-  }
-
-  @media (--viewport-large) {
-    margin-inline: 1rem;
-  }
-}
-
-.message--large .message__content {
-  @media (--viewport-small-max) {
-    margin-inline: 0;
-  }
-}
-
-.message__content ::slotted(strong) {
-  font-family: var(--leu-font-family-black);
-  font-weight: normal;
-}
-
-.message__cta {
-  display: block;
-  flex: 0 0 min-content;
-  margin-inline-end: 0.5rem;
-}
-
-.message__remove {
-  flex: 0 0 min-content;
-  border: none;
-  background: none;
-  padding: 0;
-  color: var(--leu-color-black-60);
-  cursor: pointer;
-}
-
-.message__remove:where(:hover, :focus-visible) {
-  color: var(--leu-color-black-40);
-}
-
-.message--filled .message__remove {
-  color: var(--leu-color-black-0);
-}
-
-.message--filled .message__remove:where(:hover, :focus-visible) {
-  color: var(--leu-color-white-transp-70);
-}
-
-.message--large .message__remove {
-  position: absolute;
-  inset-block-start: var(--_padding);
-  inset-inline-end: var(--_padding);
-
-  @media (--viewport-regular) {
-    position: static;
-    inset: auto;
-  }
-}
-
-.message__remove-icon {
-  --leu-icon-size: 1.5rem;
-}

package/src/components/message/stories/message.mdx

@@ -1,76 +0,0 @@
-import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks"
-
-import * as MessageStories from "./message.stories"
-
-<Meta of={MessageStories} />
-
-# Message
-
-A message component that can be used to display feedback, alerts, or important information to the user.
-
-[Meldungen | Design System | zh.ch](https://www.zh.ch/de/webangebote-entwickeln-und-gestalten/inhalt/designsystem/komponenten/meldungen.zhweb-noredirect.zhweb-cache.html?node-id=18369%3A164719&node-id=18369%3A163396&node-id=18369%3A166594&search=meldung) <br />
-
-## Background
-
-The message can appear with a colored background or with a white background. The appearance depends on the `type` attribute:
-
-`success` and `warning` will have a colored background.
-
-<Canvas of={MessageStories.Success} />
-<Canvas of={MessageStories.Error} />
-
-While `error` and `info` will have a white background.
-
-<Canvas of={MessageStories.Warning} />
-<Canvas of={MessageStories.Info} />
-
-## Content
-
-The text content can simply be passed into the default slot. The optional title of the message has to be marked up with a `<strong>` tag.
-
-```html
-<leu-message>
-  <strong>Title of the message</strong><br />
-  This is the content of the message. It can span multiple lines.
-</leu-message>
-```
-
-## Size
-
-The message component can be rendered in two sizes: `small` and `large`.
-The `small` size does not allow for a call to action button and a title.
-
-## Call to action button
-
-A call to action button can added to the message by using the `cta` slot. This is only allowed for the `large` size.
-Be aware that you have to set the `inverted` attribute on the button if you use it on a colored background.
-The component does not handle any events of the button.
-
-## Remove button
-
-With setting the `removable` attribute, a close button will be displayed in the top right corner of the message.
-The component does not remove itself from the DOM, but it will dispatch a `leu:remove` event when the close button is clicked.
-
-## Popup / Toast
-
-If you use the message as a toast or lay it over other content, you can set the `popup` attribute.
-This will add box shadow to the message.
-
-<Canvas of={MessageStories.Popup} />
-
-## Custom accent colored
-
-While `success`, `warning`, and `error` have a predefined accent color, you can set a custom accent color for the `info` type.
-Just set the `--leu-message-accent-color` css custom property on the message element.
-
-<Canvas of={MessageStories.CustomColor} />
-
-## Accessibility
-
-We have decided to not use the `role="alert"` or the
-`aria-live` attribute as the message component can be used in various contexts.
-We simply can't predict which role or which `aria-live` value would make sense.
-Please ensure that you add the appropriate role or attribute yourself.
-
-<Controls />
-```