@statistikzh/leu 0.14.4 → 0.15.0

package/src/components/pagination/stories/pagination.stories.ts

@@ -1,11 +1,20 @@
 import { html } from "lit"
-import { action } from "@storybook/addon-actions"
-
-import "../leu-pagination.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
-import { ifDefined } from "lit/directives/if-defined.js"
+import { action, HandlerFunction } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/web-components"
+
+import "../leu-pagination.js"
+import { LeuPagination } from "../Pagination.js"
+
+interface ExtraArgs {
+  onPageChange: HandlerFunction
+}
+
+type StoryArgs = LeuPagination & ExtraArgs
+type Story = StoryObj<StoryArgs>
 
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
@@ -69,13 +78,13 @@ export default {
       url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82468&mode=design&t=lzVrtq8lxYVJU5TB-11",
     },
   },
-}
+} satisfies Meta<StoryArgs>
 
-function Template(
-  { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
-  { id },
-) {
-  return html`
+const Template: Story = {
+  render: (
+    { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
+    { id },
+  ) => html`
     ${items
       .slice(startIndex, endIndex)
       .map((item) => html`<div>${item.label}</div>`)}
@@ -92,13 +101,15 @@ function Template(
       }}
     >
     </leu-pagination>
-  `
+  `,
 }
 
-export const Regular = Template.bind({})
-Regular.args = {
-  startIndex: 0,
-  endIndex: 5,
-  itemsPerPage: 5,
-  // defaultPage: 2,
+export const Regular: Story = {
+  ...Template,
+  args: {
+    startIndex: 0,
+    endIndex: 5,
+    itemsPerPage: 5,
+    // defaultPage: 2,
+  },
 }

package/src/components/placeholder/Placeholder.ts

@@ -0,0 +1,33 @@
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./placeholder.css"
+
+/**
+ * @summary * A placeholder to display when no content is available.
+ * @tagname leu-placeholder
+ * @slot title - The placeholders title. Use a heading tag (h1-6) depeneding on your context.
+ * @slot description - A description of the placeholder. Content is wrapped in a `<p>` tag by the component.
+ * @slot cta - A call to action button like "Reload" or "Create". Add a single `<leu-button>`.
+ *
+ * @todo Add pending state with a skeleton.
+ */
+export class LeuPlaceholder extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  render() {
+    return html`
+      <div class="placeholder">
+        <slot class="placeholder__title" name="title"></slot>
+        <p><slot class="placeholder__description" name="description"></slot></p>
+        <slot name="cta"></slot>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuPlaceholder } from "./Placeholder.js"
+
+export { LeuPlaceholder }
+
+LeuPlaceholder.define("leu-placeholder")

package/src/components/placeholder/placeholder.css

@@ -0,0 +1,59 @@
+@import url("../../styles/custom-media.css");
+
+:host {
+  --placeholder-font-regular: var(--leu-font-family-regular);
+  --placeholder-font-black: var(--leu-font-family-black);
+
+  --placeholder-border-color: var(--leu-color-black-20);
+
+  font-family: var(--placeholder-font-regular);
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  border: 2px dashed var(--placeholder-border-color);
+  border-radius: 0.25rem;
+
+  padding: 2rem 1.5rem;
+
+  @media (--viewport-regular) {
+    padding: 2.5rem 2rem;
+  }
+
+  @media (--viewport-xlarge) {
+    padding: 3.5rem 2.5rem;
+  }
+}
+
+.placeholder__title {
+  display: block;
+}
+
+.placeholder__title::slotted(:where(h1, h2, h3, h4, h5, h6)) {
+  font: var(--leu-t-curve-regular-black-font);
+  color: var(--leu-color-black-100);
+  margin: 0 0 0.5rem;
+}
+
+.placeholder__description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+
+  margin-bottom: 0.75rem;
+
+  @media (--viewport-small) {
+    margin-bottom: 2rem;
+  }
+
+  @media (--viewport-regular) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+  }
+}

package/src/components/placeholder/stories/placeholder.stories.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+
+import "../../button/leu-button.js"
+import "../../icon/leu-icon.js"
+import "../leu-placeholder.js"
+import { LeuPlaceholder } from "../Placeholder.js"
+
+type StoryArgs = LeuPlaceholder
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Placeholder",
+  component: "leu-placeholder",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (_args) =>
+    html` <leu-placeholder>
+      <h2 slot="title">Keine Ergebnisse zu «Regoin Zürich» gefunden.</h2>
+      <p slot="description">
+        Überprüfen Sie die Schreibweise der eingegebenen Wörter. Versuchen Sie
+        andere Stichwörter. Versuchen Sie allgemeinere Stichwörter.
+      </p>
+      <leu-button slot="cta"> Suche zurücksetzen </leu-button>
+    </leu-placeholder>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    // Add default args here
+  },
+}

package/src/components/placeholder/test/placeholder.test.ts

@@ -0,0 +1,31 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-placeholder.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`<leu-placeholder>
+      <h2 slot="title">Keine Ergebnisse zu «Regoin Zürich» gefunden.</h2>
+      <p slot="description">
+        Überprüfen Sie die Schreibweise der eingegebenen Wörter. Versuchen Sie
+        andere Stichwörter. Versuchen Sie allgemeinere Stichwörter.
+      </p>
+      <leu-button slot="cta"> Suche zurücksetzen </leu-button>
+    </leu-placeholder>`,
+  )
+}
+
+describe("LeuPlaceholder", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-placeholder")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/radio/Radio.ts

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
@@ -16,29 +17,26 @@ export class LeuRadio 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
   }
 

package/src/components/radio/RadioGroup.ts

@@ -1,28 +1,39 @@
 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"
+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]
 
-  static properties = {
-    orientation: { type: String, reflect: true },
-    label: { type: String, reflect: true },
-  }
+  /**
+   * Defines how the radio buttons should be aligned.
+   */
+  @property({ type: String, reflect: true })
+  orientation: "horizontal" | "vertical" = "horizontal"
 
-  constructor() {
-    super()
-    /** @type {"horizontal" | "vertical"} */
-    this.orientation = "horizontal"
-    this._currentIndex = 0
-    this.items = []
-  }
+  /**
+   * 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
@@ -42,7 +53,7 @@ export class LeuRadioGroup extends LeuElement {
     this.removeEventListeners()
   }
 
-  addEventListeners() {
+  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
@@ -55,21 +66,21 @@ export class LeuRadioGroup extends LeuElement {
     this.addEventListener("keydown", this.handleKeyDown)
   }
 
-  removeEventListeners() {
+  private removeEventListeners() {
     this.removeEventListener("input", this.handleInput, { capture: true })
     this.removeEventListener("focusin", this.handleFocusIn)
     this.removeEventListener("keydown", this.handleKeyDown)
   }
 
-  handleSlotChange() {
+  private handleSlotChange() {
     this.handleItems()
   }
 
-  handleFocusIn = (e) => {
-    this._currentIndex = this.items.indexOf(e.target)
+  private handleFocusIn = (e: FocusEvent & { target: LeuRadio }) => {
+    this.currentIndex = this.items.indexOf(e.target)
   }
 
-  handleKeyDown = (e) => {
+  private handleKeyDown = (e: KeyboardEvent & { target: LeuRadio }) => {
     const currentIndex = this.items.indexOf(e.target)
 
     switch (e.key) {
@@ -93,19 +104,19 @@ export class LeuRadioGroup extends LeuElement {
     this.setTabIndex()
   }
 
-  handleInput = (e) => {
+  private handleInput = (e: InputEvent & { target: LeuRadio }) => {
     this.items.forEach((item) => {
       item.checked = item === e.target // eslint-disable-line no-param-reassign
     })
   }
 
-  selectItem(selectingItem) {
+  private selectItem(selectingItem: LeuRadio) {
     this.items.forEach((item) => {
       item.checked = item === selectingItem // eslint-disable-line no-param-reassign
     })
   }
 
-  selectNextItem(startingIndex, direction) {
+  private selectNextItem(startingIndex: number, direction: -1 | 1) {
     let selected = false
 
     for (let index = 0; index < this.items.length; index += 1) {
@@ -124,23 +135,26 @@ export class LeuRadioGroup extends LeuElement {
     }
   }
 
-  setTabIndex() {
+  private setTabIndex() {
     this.items.forEach((item, index) => {
-      if (index === this._currentIndex) {
-        item.tabIndex = "0" // eslint-disable-line no-param-reassign
+      if (index === this.currentIndex) {
+        item.tabIndex = 0 // eslint-disable-line no-param-reassign
       } else {
-        item.tabIndex = "-1" // eslint-disable-line no-param-reassign
+        item.tabIndex = -1 // eslint-disable-line no-param-reassign
       }
     })
   }
 
-  handleItems() {
-    this.items = Array.from(this.querySelectorAll(":scope > *:not([slot])"))
+  private handleItems() {
+    this.items = Array.from(
+      this.querySelectorAll(":scope > *:not([slot])"),
+    ).filter((el) => el instanceof LeuRadio)
+
     this.initializeIndex()
     this.setTabIndex()
   }
 
-  initializeIndex() {
+  private initializeIndex() {
     const index = this.items.findIndex(
       (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
     )
@@ -148,7 +162,7 @@ export class LeuRadioGroup extends LeuElement {
       (item) => !item.hasAttribute("disabled"),
     )
 
-    this._currentIndex = index >= 0 ? index : nextEnabledIndex
+    this.currentIndex = index >= 0 ? index : nextEnabledIndex
   }
 
   render() {

package/src/components/visualization/ChartWrapper.ts

@@ -0,0 +1,75 @@
+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>
+        <slot name="title" class="title"></slot>
+        ${hasDescription
+          ? html`<slot name="description" class="description"></slot>`
+          : nothing}
+        <div class="chart-container">
+          <slot name="chart" class="chart"></slot>
+          ${this.pending
+            ? html`<div class="spinner-container">
+                <leu-spinner class="spinner"></leu-spinner>
+              </div>`
+            : nothing}
+        </div>
+        ${hasCaption
+          ? html`<figcaption>
+              <slot name="caption" class="caption"></slot>
+            </figcaption>`
+          : nothing}
+        <hr class="ruler" />
+        ${hasDownload
+          ? html`<slot name="download" class="download"></slot>`
+          : nothing}
+      </figure>
+    `
+  }
+}

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

@@ -0,0 +1,78 @@
+@import url("../../styles/custom-media.css");
+
+.title::slotted(h2) {
+  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;
+  }
+}
+
+.title::slotted(h3) {
+  font: var(--leu-t-curve-medium-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.title::slotted(h4) {
+  font: var(--leu-t-curve-regular-black-font);
+  margin: 0 0 0.5rem;
+}
+
+.description,
+.chart {
+  display: block;
+  margin-bottom: 0.75rem;
+
+  @media (--viewport-medium) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.description {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.caption {
+  font: var(--leu-t-curve-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.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;
+  }
+}
+
+.download {
+  display: block;
+  margin-left: -0.5rem;
+}
+
+.chart-container {
+  position: relative;
+}
+
+.spinner-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-content: center;
+}

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

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

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

@@ -0,0 +1,52 @@
+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: {
+    // Add default args here
+    pending: false,
+  },
+}