@statistikzh/leu 0.28.0 → 0.28.2

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

@@ -1,78 +0,0 @@
-import { html, nothing } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./chart-wrapper.css?inline"
-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

@@ -1,87 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-import { LeuChartWrapper } from "./ChartWrapper.js"
-
-export { LeuChartWrapper }
-
-LeuChartWrapper.define("leu-chart-wrapper")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-chart-wrapper": LeuChartWrapper
-  }
-}

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

@@ -1,58 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-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

@@ -1,77 +0,0 @@
-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,129 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import styles from "./checkbox.css?inline"
-
-/**
- * @tagname leu-checkbox
- */
-export class LeuCheckbox extends FormAssociatedMixin(LeuElement) {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  /** @internal */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: Boolean, reflect: true })
-  required: boolean = false
-
-  @property({ type: Boolean, reflect: true, attribute: "checked" })
-  defaultChecked: boolean = false
-
-  protected _checked: boolean
-
-  @property({ type: Boolean, attribute: false })
-  set checked(isChecked: boolean) {
-    this._checked = isChecked
-  }
-
-  get checked(): boolean {
-    if (typeof this._checked === "boolean") {
-      return this._checked
-    }
-
-    return this.defaultChecked
-  }
-
-  @property({ type: String, reflect: true })
-  value: string
-
-  willUpdate(changedProperties: PropertyValues<this>): void {
-    super.willUpdate(changedProperties)
-    let checkedChanged = false
-
-    // Match the bevavior of native checkboxes.
-    // Changes to the defaultChecked property only hav an effect
-    // if the user has not interacted with the checkbox yet.
-    if (
-      changedProperties.has("defaultChecked") &&
-      !changedProperties.has("checked") &&
-      !this.hasInteracted
-    ) {
-      this.checked = this.defaultChecked
-      checkedChanged = true
-    }
-
-    if (
-      checkedChanged ||
-      changedProperties.has("checked") ||
-      changedProperties.has("value") ||
-      changedProperties.has("name") ||
-      changedProperties.has("disabled")
-    ) {
-      this.setFormValue()
-    }
-  }
-
-  private handleChange(event: Event & { target: HTMLInputElement }) {
-    this.hasInteracted = true
-    this.checked = event.target.checked
-
-    const customEvent = new CustomEvent(event.type, event)
-    this.dispatchEvent(customEvent)
-  }
-
-  private handleInput(event: InputEvent & { target: HTMLInputElement }) {
-    this.hasInteracted = true
-    this.checked = event.target.checked
-  }
-
-  public formResetCallback() {
-    this.checked = this.defaultChecked
-    super.formResetCallback()
-  }
-
-  setFormValue() {
-    this.internals.setFormValue(
-      this.checked && !this.disabled ? (this.value ?? "on") : null,
-    )
-
-    if (this.required && !this.checked) {
-      // @todo i18n and/or custom validation message
-      this.internals.setValidity(
-        { valueMissing: true },
-        "Bitte klicken Sie dieses Kästchen an, um fortfahren zu können.",
-      )
-    } else {
-      this.internals.setValidity({})
-    }
-  }
-
-  render() {
-    return html`
-      <input
-        id="checkbox"
-        class="checkbox"
-        type="checkbox"
-        name="${this.name}"
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        .checked=${this.checked}
-        ?disabled=${this.disabled}
-        .value=${this.value}
-        ?required=${this.required}
-      />
-      <label for="checkbox" class="label"><slot></slot></label>
-      <leu-icon class="icon" name="check"></leu-icon>
-    `
-  }
-}

package/src/components/checkbox/CheckboxGroup.ts

@@ -1,57 +0,0 @@
-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 "./checkbox-group.css?inline"
-import { LeuCheckbox } from "./Checkbox.js"
-
-/**
- *
- * @slot - Place the checkboxes inside the default slot.
- * @tagname leu-checkbox-group
- */
-export class LeuCheckboxGroup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * Defines how the checkboxes should be aligned.
-   */
-  @property({ type: String, reflect: true })
-  orientation: "horizontal" | "vertical" = "horizontal"
-
-  /**
-   * The label of the checkbox group
-   */
-  @property({ type: String, reflect: true })
-  label?: string
-
-  private items: LeuCheckbox[] = []
-
-  get value() {
-    return this.items.filter((i) => i.checked).map((i) => i.value)
-  }
-
-  private handleSlotChange() {
-    this.items = Array.from(
-      this.querySelectorAll(":scope > *:not([slot])"),
-    ).filter((el) => el instanceof LeuCheckbox)
-  }
-
-  render() {
-    const fieldsetClasses = {
-      fieldset: "true",
-      "fieldset--vertical": this.orientation === "vertical",
-    }
-
-    return html`
-      <fieldset class=${classMap(fieldsetClasses)}>
-        ${this.label
-          ? html`<legend class="legend">${this.label}</legend>`
-          : html``}
-        <slot @slotchange=${this.handleSlotChange}></slot>
-      </fieldset>
-    `
-  }
-}

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

@@ -1,29 +0,0 @@
-:host {
-  --group-font-regular: var(--leu-font-family-regular);
-  --group-font-black: var(--leu-font-family-black);
-
-  font-family: var(--group-font-regular);
-}
-
-.fieldset {
-  display: flex;
-  align-items: flex-start;
-  flex-wrap: wrap;
-  gap: 0.5rem 1rem;
-
-  border: none;
-  padding: 0;
-}
-
-.fieldset--vertical {
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.legend {
-  font-family: var(--group-font-black);
-  font-size: 1.125rem;
-  line-height: 1.5;
-
-  margin-bottom: 0.5rem;
-}

package/src/components/checkbox/checkbox.css

@@ -1,81 +0,0 @@
-:host {
-  --checkbox-color: var(--leu-color-black-40);
-  --checkbox-color-disabled: var(--leu-color-black-20);
-  --checkbox-color-focus: var(--leu-color-func-cyan);
-
-  --checkbox-label-color: var(--leu-color-black-100);
-  --checkbox-label-color-disabled: var(--checkbox-color-disabled);
-
-  --checkbox-tick-color: var(--leu-color-black-0);
-
-  --checkbox-font-regular: var(--leu-font-family-regular);
-
-  position: relative;
-
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 0.5rem;
-
-  font-family: var(--checkbox-font-regular);
-}
-
-.checkbox {
-  --_length: 1.5rem;
-  appearance: none;
-  cursor: pointer;
-
-  width: var(--_length);
-  height: var(--_length);
-  margin: 0;
-
-  border: 2px solid var(--checkbox-color);
-  border-radius: 2px;
-
-  flex: 1 0 var(--_length);
-
-  display: grid;
-  place-items: center;
-}
-
-.checkbox:checked {
-  background-color: var(--checkbox-color);
-}
-
-.checkbox:is(:hover, :checked, :focus) {
-  --checkbox-color: var(--checkbox-color-focus);
-}
-
-.checkbox:focus-visible {
-  outline: 2px solid var(--checkbox-color-focus);
-  outline-offset: 2px;
-}
-
-.checkbox:disabled {
-  --checkbox-color: var(--checkbox-color-disabled);
-  cursor: not-allowed;
-}
-
-.label {
-  cursor: pointer;
-  color: var(--checkbox-label-color);
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.checkbox:disabled + .label {
-  --checkbox-label-color: var(--checkbox-label-color-disabled);
-  cursor: not-allowed;
-}
-
-.checkbox:required + .label::after {
-  content: "*";
-}
-
-.icon {
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  color: var(--checkbox-tick-color);
-  pointer-events: none;
-}

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

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

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

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

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

@@ -1,59 +0,0 @@
-import { html } from "lit"
-import "../leu-checkbox.js"
-import "../leu-checkbox-group.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-export default {
-  title: "Components/Checkbox/Group",
-  component: "leu-checkbox-group",
-  argTypes: {
-    legend: { control: "text" },
-    orientation: {
-      options: ["vertical", "horizontal"],
-      control: { type: "checkbox" },
-    },
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-}
-
-function Template({ label, orientation }) {
-  return html`
-    <leu-checkbox-group
-      orientation=${ifDefined(orientation)}
-      label=${ifDefined(label)}
-    >
-      <leu-checkbox value="1" name="checkbox-button" disabled
-        >Kurz</leu-checkbox
-      >
-      <leu-checkbox value="2" name="checkbox-button">Etwas Länger</leu-checkbox>
-      <leu-checkbox value="3" name="checkbox-button" disabled
-        >Deaktiviert dazwischen</leu-checkbox
-      >
-      <leu-checkbox value="4" name="checkbox-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-checkbox
-      >
-    </leu-checkbox-group>
-  `
-}
-
-export const Horizontal = Template.bind({})
-export const HorizontalLabel = Template.bind({})
-HorizontalLabel.args = {
-  label: "Anrede",
-}
-
-export const Vertical = Template.bind({})
-Vertical.args = {
-  orientation: "vertical",
-}
-
-export const VerticalLabel = Template.bind({})
-VerticalLabel.args = {
-  orientation: "vertical",
-  label: "Anrede",
-}