@statistikzh/leu 0.0.2

package/src/components/checkbox/CheckboxGroup.js

@@ -0,0 +1,80 @@
+import { html, css, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+import { defineElement } from "../../lib/defineElement.js"
+
+/**
+ * @tagname leu-checkbox-group
+ */
+export class LeuCheckboxGroup extends LitElement {
+  static styles = css`
+    :host {
+      --group-font-regular: var(--leu-font-regular);
+      --group-font-black: var(--leu-font-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;
+    }
+  `
+
+  static properties = {
+    orientation: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.orientation = "HORIZONTAL"
+    this.items = []
+  }
+
+  get value() {
+    return this.items.filter((i) => i.checked).map((i) => i.value)
+  }
+
+  handleSlotChange() {
+    this.handleItems()
+  }
+
+  handleItems() {
+    this.items = [...this.querySelectorAll(":scope > *:not([slot])")]
+  }
+
+  render() {
+    const fieldsetClasses = {
+      fieldset: "true",
+      "fieldset--vertical": this.orientation === "VERTICAL",
+    }
+
+    return html`
+      <fieldset class=${classMap(fieldsetClasses)}>
+        <legend class="legend"><slot name="legend"></slot></legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `
+  }
+}
+
+export function defineCheckboxGroupElements() {
+  defineElement("checkbox-group", LeuCheckboxGroup)
+}

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

@@ -0,0 +1,3 @@
+import { defineCheckboxGroupElements } from "./CheckboxGroup.js"
+
+defineCheckboxGroupElements()

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

@@ -0,0 +1,3 @@
+import { defineCheckboxElements } from "./Checkbox.js"
+
+defineCheckboxElements()

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

@@ -0,0 +1,52 @@
+import { html } from "lit"
+import "../leu-checkbox.js"
+import "../leu-checkbox-group.js"
+
+export default {
+  title: "Checkbox/Group",
+  component: "leu-checkbox-group",
+  argTypes: {
+    legend: { control: "text" },
+    orientation: {
+      options: ["VERTICAL", "HORIZONTAL"],
+      control: { type: "checkbox" },
+    },
+  },
+}
+
+function Template({ legend, orientation }) {
+  return html`
+    <leu-checkbox-group orientation=${orientation}>
+      <span slot="legend">${legend}</span>
+      <leu-checkbox identifier="1" value="1" name="checkbox-button" disabled
+        >Kurz</leu-checkbox
+      >
+      <leu-checkbox identifier="2" value="2" name="checkbox-button"
+        >Etwas Länger</leu-checkbox
+      >
+      <leu-checkbox identifier="3" value="3" name="checkbox-button" disabled
+        >Deaktiviert dazwischen</leu-checkbox
+      >
+      <leu-checkbox identifier="4" 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 HorizontalLegend = Template.bind({})
+HorizontalLegend.args = {
+  legend: "Anrede",
+}
+
+export const Vertical = Template.bind({})
+Vertical.args = {
+  orientation: "VERTICAL",
+}
+
+export const VerticalLegend = Template.bind({})
+VerticalLegend.args = {
+  orientation: "VERTICAL",
+  legend: "Anrede",
+}

package/src/components/checkbox/stories/checkbox.stories.js

@@ -0,0 +1,43 @@
+import { html } from "lit"
+import "../leu-checkbox.js"
+
+export default {
+  title: "Checkbox",
+  component: "leu-checkbox",
+  argTypes: {
+    label: {
+      control: "text",
+    },
+  },
+}
+
+function Template({ label = "Label", value, checked, disabled }) {
+  return html`
+    <leu-checkbox
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      identifier="checkbox-1"
+    >
+      ${label}
+    </leu-checkbox>
+  `
+}
+
+export const Regular = Template.bind({})
+
+export const Checked = Template.bind({})
+Checked.args = {
+  checked: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+}
+
+export const CheckedDisabled = Template.bind({})
+CheckedDisabled.args = {
+  checked: true,
+  disabled: true,
+}

package/src/components/checkbox/test/checkbox.test.js

@@ -0,0 +1,101 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-checkbox.js"
+import "../leu-checkbox-group.js"
+
+async function defaultFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox identifier="a" value="1" disabled>1</leu-checkbox>
+      <leu-checkbox identifier="b" value="2">2</leu-checkbox>
+      <leu-checkbox identifier="c" value="3">3</leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+async function checkedFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox identifier="a" value="1" disabled>1</leu-checkbox>
+      <leu-checkbox identifier="b" value="2" checked>2</leu-checkbox>
+      <leu-checkbox identifier="c" value="3">3</leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+describe("LeuCheckbox", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-checkbox")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  describe("LeuCheckboxGroup", () => {
+    it("is a defined element", async () => {
+      const el = await customElements.get("leu-checkbox-group")
+
+      await expect(el).not.to.be.undefined
+    })
+
+    it("should have a default value of an empty array", async () => {
+      const el = await defaultFixture()
+
+      expect(el.value).to.deep.equal([])
+    })
+
+    it("should update the value when a checkbox is checked", async () => {
+      const el = await defaultFixture()
+      const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+      const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+      checkbox.click()
+
+      expect(el.value).to.deep.equal(["2"])
+    })
+
+    it("should update the value when a checkbox is unchecked", async () => {
+      const el = await defaultFixture()
+      const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+      const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+      checkbox.click()
+      checkbox.click()
+
+      expect(el.value).to.deep.equal([])
+    })
+
+    it("should not update the value when a disabled checkbox is clicked", async () => {
+      const el = await defaultFixture()
+      const leuCheckbox = el.querySelector('leu-checkbox[value="1"]')
+      const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+      checkbox.click()
+
+      expect(el.value).to.deep.equal([])
+    })
+
+    it("should have the option checked by default as a value", async () => {
+      const el = await checkedFixture()
+
+      expect(el.value).to.deep.equal(["2"])
+    })
+
+    it("should delegate focus to the first active checkbox", async () => {
+      const el = await defaultFixture()
+      const leuCheckbox = el.querySelector('leu-checkbox[value="2"]')
+      const checkbox = leuCheckbox.shadowRoot.querySelector("input")
+
+      await leuCheckbox.focus()
+
+      expect(document.activeElement).to.equal(leuCheckbox)
+      expect(leuCheckbox.shadowRoot.activeElement).to.equal(checkbox)
+    })
+  })
+})

package/src/components/chip/Chip.js

@@ -0,0 +1,24 @@
+import { LitElement } from "lit"
+import styles from "./chip.css"
+
+/* Design: https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=21161-184433&mode=design&t=Kjo5VDiqivihn8dh-11 */
+
+export class LeuChipBase extends LitElement {
+  static styles = styles
+
+  /** @internal */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    inverted: { type: Boolean },
+  }
+
+  constructor() {
+    super()
+
+    this.inverted = false
+  }
+}

package/src/components/chip/ChipGroup.js

@@ -0,0 +1,71 @@
+import { LitElement, html } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./chip-group.css"
+
+/* Figma https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=131766-248643&mode=design&t=Kjo5VDiqivihn8dh-11 */
+
+export const SELECTION_MODES = {
+  single: "single",
+  multiple: "multiple",
+  none: "none",
+}
+
+/**
+ * @slot - Place leu-chip-* elements inside this slot
+ * @tagname leu-chip-group
+ */
+export class LeuChipGroup extends LitElement {
+  static styles = styles
+
+  static properties = {
+    selectionMode: { type: String, attribute: "selection-mode" },
+  }
+
+  constructor() {
+    super()
+
+    /** @internal */
+    this.items = []
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.addEventListener("input", this.handleInput)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    this.removeEventListener("input", this.handleInput)
+  }
+
+  get value() {
+    return this.items.filter((i) => i.selected).map((i) => i.value)
+  }
+
+  /** @internal */
+  handleInput = (e) => {
+    if (this.selectionMode === SELECTION_MODES.single) {
+      this.items.forEach((item) => {
+        item.selected = item === e.target // eslint-disable-line no-param-reassign
+      })
+    }
+  }
+
+  /** @internal */
+  handleSlotChange = (e) => {
+    const slot = e.target
+    const items = slot.assignedElements({ flatten: true })
+
+    this.items = items
+  }
+
+  render() {
+    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+  }
+}
+
+export function defineChipGroupElements() {
+  defineElement("chip-group", LeuChipGroup)
+}

package/src/components/chip/ChipLink.js

@@ -0,0 +1,45 @@
+import { html } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+
+import { LeuChipBase } from "./Chip.js"
+
+export const SIZES = {
+  regular: "regular",
+  large: "large",
+}
+
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-link
+ */
+export class LeuChipLink extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+
+    /**
+     * The size of the chip
+     * @type {keyof typeof SIZES}
+     */
+    size: { type: String },
+
+    href: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    this.inverted = false
+    this.size = SIZES.regular
+    this.href = ""
+  }
+
+  render() {
+    return html`<a href=${this.href} class="button">
+      <span class="label"><slot></slot></span>
+    </a>`
+  }
+}
+
+export function defineChipLinkElements() {
+  defineElement("chip-link", LeuChipLink)
+}

package/src/components/chip/ChipRemovable.js

@@ -0,0 +1,42 @@
+import { html } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+
+import { LeuChipBase } from "./Chip.js"
+import { Icon } from "../icon/icon.js"
+
+/**
+ * @slot - The content of the chip
+ * @tagname leu-chip-removable
+ * @fires remove - Dispatched when the user clicks on the chip
+ */
+export class LeuChipRemovable extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+  }
+
+  constructor() {
+    super()
+
+    /** @internal */
+    this._removeIcon = Icon("close", 16)
+  }
+
+  handleClick() {
+    const customEvent = new CustomEvent("remove", {
+      bubble: true,
+      composed: true,
+    })
+    this.dispatchEvent(customEvent)
+  }
+
+  render() {
+    return html`<button @click=${(e) => this.handleClick(e)} class="button">
+      <span class="label"><slot></slot></span>
+      <div class="icon">${this._removeIcon}</div>
+    </button>`
+  }
+}
+
+export function defineChipRemovableElements() {
+  defineElement("chip-removable", LeuChipRemovable)
+}

package/src/components/chip/ChipSelectable.js

@@ -0,0 +1,91 @@
+import { html } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+
+import { LeuChipBase } from "./Chip.js"
+
+export const SIZES = {
+  small: "small",
+  regular: "regular",
+}
+
+export const VARIANTS = {
+  default: "default",
+  radio: "radio",
+}
+
+/**
+ * A chip component that can be selected.
+ * @slot - The content of the chip
+ * @tagname leu-chip-selectable
+ */
+export class LeuChipSelectable extends LeuChipBase {
+  static properties = {
+    ...LeuChipBase.properties,
+
+    /**
+     * The size of the chip. Not supported for radio variant.
+     * @type {keyof typeof SIZES}
+     * @default "regular"
+     */
+    size: { type: String },
+
+    /**
+     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
+     * - `default`: The chip behaves like a toggle button.
+     * - `radio`: The chip behaves like a radio button.
+     *
+     * @type {keyof typeof VARIANTS}
+     * @default "default"
+     */
+    variant: { type: String },
+
+    selected: { type: Boolean, reflect: true },
+    value: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.size = SIZES.regular
+    this.variant = VARIANTS.toggle
+    this.selected = false
+
+    if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
+      console.warn("Small size has no effect on radio variant")
+    }
+  }
+
+  handleClick() {
+    let nextSelectedState = this.selected
+
+    if (this.variant === VARIANTS.radio) {
+      nextSelectedState = true
+    } else {
+      nextSelectedState = !this.selected
+    }
+
+    if (nextSelectedState !== this.selected) {
+      this.selected = nextSelectedState
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          detail: { selected: this.selected },
+          bubbles: true,
+          composed: true,
+        })
+      )
+    }
+  }
+
+  render() {
+    return html`<button
+      @click=${(e) => this.handleClick(e)}
+      class="button"
+      aria-selected=${this.selected ? "true" : "false"}
+    >
+      <span class="label"><slot></slot></span>
+    </button>`
+  }
+}
+
+export function defineChipSelectableElements() {
+  defineElement("chip-selectable", LeuChipSelectable)
+}

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

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}

package/src/components/chip/chip.css

@@ -0,0 +1,130 @@
+:host,
+:host *,
+:host *::before,
+:host *::after {
+  box-sizing: border-box;
+}
+
+:host {
+  --chip-background-color-default: var(--leu-color-black-transp-10);
+  --chip-background-color-hover: var(--leu-color-black-transp-20);
+  --chip-background-color-selected: var(--leu-color-black-100);
+  --chip-background-color-selected-hover: var(--leu-color-black-transp-80);
+
+  --chip-color-default: var(--leu-color-black-transp-60);
+  --chip-color-hover: var(--leu-color-black-100);
+  --chip-color-selected: var(--leu-color-black-0);
+
+  --chip-radio-border-default: var(--leu-color-black-transp-40);
+  --chip-radio-border-selected: var(--leu-color-black-0);
+  --chip-radio-background-default: var(--leu-color-black-0);
+  --chip-radio-background-selected: var(--leu-color-func-cyan);
+
+  --chip-font-regular: var(--leu-font-regular);
+  --chip-font-black: var(--leu-font-black);
+
+  --chip-background-color: var(--chip-background-color-default);
+  --chip-color: var(--chip-color-default);
+  --chip-radio-border: var(--chip-radio-border-default);
+  --chip-radio-background: var(--chip-radio-background-default);
+
+  font-family: var(--chip-font-regular);
+}
+
+:host([inverted]) {
+  --chip-background-color: var(--leu-color-black-transp-20);
+  --chip-background-color-hover: var(--leu-color-black-transp-40);
+
+  --chip-color-default: var(--leu-color-black-0);
+  --chip-color-hover: var(--leu-color-black-0);
+  --chip-color-selected: var(--leu-color-black-0);
+}
+
+:host([selected]) {
+  --chip-background-color: var(--chip-background-color-selected);
+  --chip-color: var(--chip-color-selected);
+  --chip-radio-border: var(--chip-radio-border-selected);
+  --chip-radio-background: var(--chip-radio-background-selected);
+}
+
+.button {
+  appearance: none;
+  border: none;
+  border-radius: 1rem;
+  background-color: var(--chip-background-color);
+  padding: 0.5rem 1rem;
+
+  color: var(--chip-color);
+  font-size: 0.875rem;
+  line-height: 1rem;
+
+  cursor: pointer;
+
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.button:hover,
+.button:focus-visible {
+  --chip-background-color: var(--chip-background-color-hover);
+  --chip-color: var(--chip-color-hover);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+:host([href]) .button {
+  border-radius: 1.25rem;
+  padding: 0.5rem 1rem;
+
+  font-family: var(--chip-font-black);
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  text-decoration: none;
+}
+
+:host([selected]) .button:hover,
+:host([selected]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-selected-hover);
+  --chip-color: var(--chip-color-selected);
+}
+
+:host([href][size="large"]) .button {
+  border-radius: 1.5rem;
+  padding: 0.3125rem 1.5rem;
+
+  font-size: 2rem;
+  line-height: 2.375rem;
+}
+
+:host([size="small"]:not([variant="radio"])) .button {
+  padding: 0.5625rem 0.75rem 0.4375rem;
+
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+:host([variant="radio"]) .button::before {
+  content: "";
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--chip-radio-background);
+  border: 2px solid var(--chip-radio-border);
+  border-radius: 50%;
+}
+
+:host([variant="radio"][selected]) .button::before {
+  border-width: 3px;
+}
+
+.label {
+  position: relative;
+  top: -0.0625rem;
+}
+
+.icon svg {
+  display: block;
+}