@statistikzh/leu 0.14.4 → 0.15.1

package/src/components/button/Button.ts

@@ -1,6 +1,7 @@
 import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
 
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuElement } from "../../lib/LeuElement.js"
@@ -9,31 +10,12 @@ import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
 import styles from "./button.css"
 
-/*
-Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
-Live Demo: zh.ch
-*/
-
-const BUTTON_VARIANTS = ["primary", "secondary", "ghost"]
-Object.freeze(BUTTON_VARIANTS)
-export { BUTTON_VARIANTS }
-
-const BUTTON_SIZES = ["regular", "small"]
-Object.freeze(BUTTON_SIZES)
-export { BUTTON_SIZES }
-
-const BUTTON_TYPES = ["button", "submit", "reset"]
-Object.freeze(BUTTON_TYPES)
-export { BUTTON_TYPES }
-
-export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
-Object.freeze(BUTTON_EXPANDED_OPTIONS)
-
 /**
  * @tagname leu-button
  * @slot before - The icon to display before the label
  * @slot after - The icon to display after the label
  * @slot - The label of the button or the icon if no label is set
+ * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
  */
 export class LeuButton extends LeuElement {
   static dependencies = {
@@ -42,72 +24,92 @@ export class LeuButton extends LeuElement {
 
   static styles = [LeuElement.styles, styles]
 
-  /**
-   * @internal
-   */
   static shadowRootOptions = {
     ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
-  /**
-   * @internal
-   */
-  hasSlotController = new HasSlotController(this, [
+  private hasSlotController = new HasSlotController(this, [
     "before",
     "after",
     "[default]",
   ])
 
-  static properties = {
-    label: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    variant: { type: String, reflect: true },
-    type: { type: String, reflect: true },
-    componentRole: { type: String, reflect: true },
-
-    disabled: { type: Boolean, reflect: true },
-    round: { type: Boolean, reflect: true },
-    active: { type: Boolean, reflect: true },
-    inverted: { type: Boolean, reflect: true },
-    expanded: { type: String, reflect: true },
-    fluid: { type: Boolean, reflect: true },
-  }
+  /**
+   * `aria-label` of the underlying button elements.
+   * Use it to provide a label when only an icon is visible.
+   */
+  @property({ type: String, reflect: true })
+  label: null | string = null
 
-  constructor() {
-    super()
-    /** @type {string} */
-    this.label = null
-    /** @type {string} */
-    this.size = "regular"
-    /** @type {string} */
-    this.variant = "primary"
-    /** @type {"button" | "submit" | "reset"} */
-    this.type = "button"
-
-    /** @type {string} */
-    this.componentRole = undefined
-
-    /** @type {boolean} */
-    this.disabled = false
-    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
-    this.round = false
-    /** @type {boolean} */
-    this.active = false
-    /** @type {boolean} - will be used on dark Background */
-    this.inverted = false
-
-    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
-    this.fluid = false
-
-    /**
-     * Only taken into account if variant is "ghost"
-     * @type {("true" | "false" | undefined)}
-     */
-    this.expanded = undefined
-  }
+  /**
+   * The size of the button.
+   */
+  @property({ type: String, reflect: true })
+  size: "regular" | "small" = "regular"
+
+  /**
+   * The visual variant of the button.
+   */
+  @property({ type: String, reflect: true })
+  variant: "primary" | "secondary" | "ghost" = "primary"
+
+  /**
+   * The `type` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  type: "button" | "submit" | "reset" = "button"
+
+  /**
+   * The `role` of the underlying button element.
+   */
+  @property({ type: String, reflect: true })
+  componentRole?: string
+
+  /**
+   * Whether the button is disabled or not.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  /**
+   * Whether the button should be round.
+   * Can only be applied when the button contains an icon without a visible label.
+   * @type {boolean}
+   */
+  @property({ type: Boolean, reflect: true })
+  round: boolean = false
+
+  /**
+   * Whether the button is active or not.
+   * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
+   */
+  @property({ type: Boolean, reflect: true })
+  active: boolean = false
+
+  /**
+   * Wheter the colors should be inverted. For use on dark backgrounds.
+   */
+  @property({ type: Boolean, reflect: true })
+  inverted: boolean = false
+
+  /**
+   * Whether the button is expanded or not.
+   * Only has an effect on the variant `ghost` to show an expanding icon.
+   * If the property is not set, the icon will not be shown.
+   * If it is set, the icon will either show an expanded or collapsed state.
+   */
+  @property({ type: String, reflect: true })
+  expanded?: "true" | "false"
+
+  /**
+   * Alters the shape of the button to be full width of its parent container
+   */
+  @property({ type: Boolean, reflect: true })
+  fluid: boolean = false
 
-  renderExpandingIcon() {
+  private renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-expanded">
         <leu-icon name="angleDropDown" size="24"></leu-icon>
@@ -117,16 +119,30 @@ export class LeuButton extends LeuElement {
     return nothing
   }
 
-  getAriaAttributes() {
-    const attributes = {
+  private getAriaAttributes() {
+    const attributes: {
+      role: string
+      label: string
+      checked?: "true" | "false"
+      selected?: "true" | "false"
+    } = {
       role: this.componentRole,
       label: this.label,
     }
 
+    // TODO: checked and selected roles are not mutually exclusive
     if (this.componentRole) {
-      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
+      if (
+        (ARIA_CHECKED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.checked = this.active ? "true" : "false"
-      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
+      } else if (
+        (ARIA_SELECTED_ROLES as ReadonlyArray<string>).includes(
+          this.componentRole,
+        )
+      ) {
         attributes.selected = this.active ? "true" : "false"
       }
     }
@@ -134,7 +150,7 @@ export class LeuButton extends LeuElement {
     return attributes
   }
 
-  hasTextContent() {
+  private hasTextContent() {
     return Array.from(this.childNodes).some(
       (node) =>
         node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "",

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

@@ -4,12 +4,11 @@ import { classMap } from "lit/directives/class-map.js"
 import "../leu-button.js"
 import "../../icon/leu-icon.js"
 import { paths as iconPaths } from "../../icon/paths.js"
-import {
-  BUTTON_VARIANTS,
-  BUTTON_TYPES,
-  BUTTON_SIZES,
-  BUTTON_EXPANDED_OPTIONS,
-} from "../Button.js"
+
+const BUTTON_VARIANTS = ["primary", "secondary", "ghost"] as const
+const BUTTON_SIZES = ["regular", "small"] as const
+const BUTTON_TYPES = ["button", "submit", "reset"] as const
+const BUTTON_EXPANDED_OPTIONS = ["true", "false"] as const
 
 function copyContent(e) {
   navigator.clipboard.writeText(e.target.outerHTML.replace(/<!--.*?-->/g, ""))

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

@@ -1,13 +1,15 @@
 import { html } from "lit"
+
 import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuButton } from "../button/Button.js"
 
 import styles from "./button-group.css"
-import { LeuButton } from "../button/Button.js"
 
 /**
+ * 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
- * @prop {string} value - The value of the currenty selected (active) button
  * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LeuElement {
@@ -16,13 +18,15 @@ export class LeuButtonGroup extends LeuElement {
   private _items: LeuButton[] = []
 
   /**
-   * @param {import("../button/Button.js").LeuButton} button
-   * @returns {string}
+   * Retrieves the value or the text content of a given LeuButton element.
    */
-  static getButtonValue(button) {
-    return button.getAttribute("value") ?? button.innerText.trim()
+  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
@@ -36,7 +40,7 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  _handleSlotChange() {
+  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
@@ -47,13 +51,15 @@ export class LeuButtonGroup extends LeuElement {
     })
 
     const slot = this.shadowRoot.querySelector("slot")
-    this._items = slot.assignedElements({ flatten: true })
+    this._items = slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuButton)
 
     let foundActiveButtonBefore = false
 
     this._items.forEach((item) => {
       /* eslint-disable no-param-reassign */
-      item.addEventListener("click", () => this._handleButtonClick(item))
+      item.addEventListener("click", this._handleButtonClick)
       item.componentRole = "menuitemradio"
 
       /**
@@ -70,10 +76,9 @@ export class LeuButtonGroup extends LeuElement {
     })
   }
 
-  /**
-   * @param {import("../button/Button.js").LeuButton} button
-   */
-  _handleButtonClick(button) {
+  private _handleButtonClick = (event: MouseEvent) => {
+    const button = event.currentTarget as LeuButton
+
     if (!button.active) {
       this.value = LeuButtonGroup.getButtonValue(button)
 

package/src/components/chart-wrapper/ChartWrapper.ts

@@ -0,0 +1,78 @@
+import { html, nothing } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./chart-wrapper.css"
+import { HasSlotController } from "../../lib/hasSlotController.js"
+import { LeuSpinner } from "../spinner/Spinner.js"
+
+/**
+ * A wrapper element for charts.
+ * @tagname leu-chart-wrapper
+ * @slot title - The title of the chart. Use a heading tag (h2-4) depending on your context.
+ * @slot description - A description of the chart. Content is wrapped in a `<p>` tag by the component.
+ * @slot chart - The actual chart
+ * @slot caption - A caption for the chart, e.g. a source or explanation of the data.
+ * @slot download - A download button or dropdown to export the chart in different formats.
+ */
+export class LeuChartWrapper extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static dependencies = {
+    "leu-spinner": LeuSpinner,
+  }
+
+  /**
+   * Whether the chart is currently loading or not.
+   * When set to `true`, a spinner will be shown in the chart container.
+   */
+  @property({ type: Boolean, reflect: true })
+  pending: boolean = false
+
+  hasSlotController = new HasSlotController(this, [
+    "description",
+    "caption",
+    "download",
+  ])
+
+  render() {
+    const hasDescription = this.hasSlotController.test("description")
+    const hasCaption = this.hasSlotController.test("caption")
+    const hasDownload = this.hasSlotController.test("download")
+
+    return html`
+      <figure class="chart-wrapper">
+        <slot name="title" class="chart-wrapper__title"></slot>
+        ${hasDescription
+          ? html`<slot
+              name="description"
+              class="chart-wrapper__description"
+            ></slot>`
+          : nothing}
+        <div class="chart-wrapper__container">
+          <slot name="chart" class="chart-wrapper__chart"></slot>
+          ${this.pending
+            ? html`<div class="chart-wrapper__spinner-container">
+                <leu-spinner class="chart-wrapper__spinner"></leu-spinner>
+              </div>`
+            : nothing}
+        </div>
+        ${hasCaption
+          ? html`<figcaption>
+              <slot name="caption" class="chart-wrapper__caption"></slot>
+            </figcaption>`
+          : nothing}
+        <hr class="chart-wrapper__ruler" />
+        ${hasDownload
+          ? html`<slot name="download" class="chart-wrapper__download"></slot>`
+          : nothing}
+      </figure>
+    `
+  }
+}

package/src/components/chart-wrapper/chart-wrapper.css

@@ -0,0 +1,87 @@
+@import url("../../styles/custom-media.css");
+
+.chart-wrapper {
+  display: block;
+  width: 100%;
+  margin: 0;
+}
+
+.chart-wrapper__title::slotted(h2) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-large-black-font);
+  margin: 0 0 0.75rem;
+
+  @media (--viewport-medium) {
+    margin: 0 0 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin: 0 0 1.5rem;
+  }
+}
+
+.chart-wrapper__title::slotted(h3) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-medium-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.chart-wrapper__title::slotted(h4) {
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-curve-regular-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.chart-wrapper__description,
+.chart-wrapper__chart {
+  display: block;
+  margin-bottom: 0.75rem;
+
+  @media (--viewport-medium) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.chart-wrapper__description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.chart-wrapper__caption {
+  font: var(--leu-t-curve-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.chart-wrapper__ruler {
+  display: block;
+  border: none;
+  border-top: 1px solid var(--leu-color-black-transp-20);
+  margin: 0.75rem 0;
+
+  @media (--viewport-xlarge) {
+    margin-block: 1rem;
+  }
+}
+
+.chart-wrapper__download {
+  display: block;
+  margin-left: -0.5rem;
+}
+
+.chart-wrapper__container {
+  position: relative;
+}
+
+.chart-wrapper__spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+}

package/src/components/chart-wrapper/leu-chart-wrapper.ts

@@ -0,0 +1,5 @@
+import { LeuChartWrapper } from "./ChartWrapper.js"
+
+export { LeuChartWrapper }
+
+LeuChartWrapper.define("leu-chart-wrapper")

package/src/components/chart-wrapper/stories/chart-wrapper.stories.ts

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+
+import "../../dropdown/leu-dropdown.js"
+import "../leu-chart-wrapper.js"
+import { LeuChartWrapper } from "../ChartWrapper.js"
+
+type StoryArgs = LeuChartWrapper
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/ChartWrapper",
+  component: "leu-chart-wrapper",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: ({ pending }) =>
+    html`<leu-chart-wrapper ?pending=${pending}>
+      <h2 slot="title">Entwicklung der Leerwohnungsziffer seit 1984</h2>
+      <span slot="description">Leerwohnungsziffer, in Prozent</span>
+      <img
+        style="display: block; width: 100%; height: auto;"
+        slot="chart"
+        src="https://placehold.co/1200x400"
+        alt="A placeholder to indicate where a chart would appear"
+      />
+      <span slot="caption">Quelle: Statistisches Amt des Kantons Zürich</span>
+      <leu-dropdown slot="download" label="Download">
+        <leu-icon name="download" slot="icon"></leu-icon>
+        <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>
+    </leu-chart-wrapper>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    pending: false,
+  },
+}
+
+export const Pending = {
+  ...Template,
+  args: {
+    pending: true,
+  },
+}

package/src/components/chart-wrapper/test/chart-wrapper.test.ts

@@ -0,0 +1,77 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-chart-wrapper.js"
+
+async function defaultFixture({ pending = false } = {}) {
+  return fixture(
+    html`<leu-chart-wrapper ?pending=${pending}>
+      <h2 slot="title">Entwicklung der Leerwohnungsziffer seit 1984</h2>
+      <span slot="description">Leerwohnungsziffer, in Prozent</span>
+      <img
+        style="display: block; width: 100%; height: auto;"
+        slot="chart"
+        src="https://placehold.co/1200x400"
+        alt="A placeholder to indicate where a chart would appear"
+      />
+      <span slot="caption">Quelle: Statistisches Amt des Kantons Zürich</span>
+      <leu-dropdown slot="download" label="Download">
+        <leu-icon name="download" slot="icon"></leu-icon>
+        <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>
+    </leu-chart-wrapper>`,
+  )
+}
+
+describe("LeuChartWrapper", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-chart-wrapper")
+
+    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("conditionally renders slots", async () => {
+    let el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).to.exist
+
+    el = await fixture(html`<leu-chart-wrapper></leu-chart-wrapper>`)
+
+    expect(el.shadowRoot.querySelector(".chart-wrapper__description")).not.to
+      .exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__caption")).not.to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__download")).not.to.exist
+
+    // Check that the title and chart slots are always present
+    expect(el.shadowRoot.querySelector(".chart-wrapper__title")).to.exist
+    expect(el.shadowRoot.querySelector(".chart-wrapper__chart")).to.exist
+  })
+
+  it("shows a spinner when pending is set", async () => {
+    const el = await defaultFixture({ pending: true })
+
+    expect(el.shadowRoot.querySelector(".chart-wrapper__spinner-container")).to
+      .exist
+    expect(el.shadowRoot.querySelector("leu-spinner.chart-wrapper__spinner")).to
+      .exist
+  })
+})

package/src/components/checkbox/Checkbox.ts

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 import { LeuIcon } from "../icon/Icon.js"
@@ -21,29 +22,26 @@ export class LeuCheckbox extends LeuElement {
     delegatesFocus: true,
   }
 
-  static properties = {
-    checked: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true },
-    value: { type: String, reflect: true },
-    name: { type: String, reflect: true },
-  }
+  @property({ type: Boolean, reflect: true })
+  checked: boolean = false
 
-  constructor() {
-    super()
-    this.checked = false
-    this.disabled = false
-    this.name = ""
-    this.value = ""
-  }
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  @property({ type: String, reflect: true })
+  value: string = ""
+
+  @property({ type: String, reflect: true })
+  name: string = ""
 
-  handleChange(event) {
+  private handleChange(event: Event & { target: HTMLInputElement }) {
     this.checked = event.target.checked
 
     const customEvent = new CustomEvent(event.type, event)
     this.dispatchEvent(customEvent)
   }
 
-  handleInput(event) {
+  private handleInput(event: InputEvent & { target: HTMLInputElement }) {
     this.checked = event.target.checked
   }