@statistikzh/leu 0.3.0 → 0.5.0

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

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

@@ -0,0 +1,76 @@
+: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;
+}
+
+.icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: var(--checkbox-tick-color);
+  pointer-events: none;
+}

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

@@ -1,3 +1,6 @@
-import { defineCheckboxGroupElements } from "./CheckboxGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuCheckboxGroup } from "./CheckboxGroup.js"
 
-defineCheckboxGroupElements()
+export { LeuCheckboxGroup }
+
+defineElement("checkbox-group", LeuCheckboxGroup)

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

@@ -1,3 +1,6 @@
-import { defineCheckboxElements } from "./Checkbox.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuCheckbox } from "./Checkbox.js"
 
-defineCheckboxElements()
+export { LeuCheckbox }
+
+defineElement("checkbox", LeuCheckbox)

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

@@ -1,6 +1,7 @@
 import { html } from "lit"
 import "../leu-checkbox.js"
 import "../leu-checkbox-group.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
   title: "Checkbox/Group",
@@ -12,32 +13,54 @@ export default {
       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({ legend, orientation }) {
+function Template({ label, 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
+      orientation=${ifDefined(orientation)}
+      label=${ifDefined(label)}
+    >
+      <leu-checkbox
+        identifier="1"
+        value="1"
+        name="checkbox-button"
+        label="Kurz"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="2"
+        value="2"
+        name="checkbox-button"
+        label="Etwas Länger"
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="3"
+        value="3"
+        name="checkbox-button"
+        disabled
+        label="Deaktiviert dazwischen"
+      ></leu-checkbox>
+      <leu-checkbox
+        identifier="4"
+        value="4"
+        name="checkbox-button"
+        label="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 HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  label: "Anrede",
 }
 
 export const Vertical = Template.bind({})
@@ -45,8 +68,8 @@ Vertical.args = {
   orientation: "VERTICAL",
 }
 
-export const VerticalLegend = Template.bind({})
-VerticalLegend.args = {
+export const VerticalLabel = Template.bind({})
+VerticalLabel.args = {
   orientation: "VERTICAL",
-  legend: "Anrede",
+  label: "Anrede",
 }

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

@@ -9,6 +9,12 @@ export default {
       control: "text",
     },
   },
+  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 = "Label", value, checked, disabled }) {
@@ -17,9 +23,9 @@ function Template({ label = "Label", value, checked, disabled }) {
       .value=${value}
       ?checked=${checked}
       ?disabled=${disabled}
+      label=${label}
       identifier="checkbox-1"
     >
-      ${label}
     </leu-checkbox>
   `
 }

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

@@ -0,0 +1,124 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
+
+import "../leu-checkbox.js"
+import "../leu-checkbox-group.js"
+
+async function defaultFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox
+        label="Option 1"
+        identifier="a"
+        value="1"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox label="Option 2" identifier="b" value="2"></leu-checkbox>
+      <leu-checkbox label="Option 3" identifier="c" value="3"></leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+async function checkedFixture() {
+  return fixture(html`
+    <leu-checkbox-group>
+      <leu-checkbox
+        label="Option 1"
+        identifier="a"
+        value="1"
+        disabled
+      ></leu-checkbox>
+      <leu-checkbox
+        label="Option 2"
+        identifier="b"
+        value="2"
+        checked
+      ></leu-checkbox>
+      <leu-checkbox label="Option 3" identifier="c" value="3"></leu-checkbox>
+    </leu-checkbox-group>
+  `)
+}
+
+describe("LeuCheckboxGroup", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-checkbox-group")
+
+    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("has a default value of an empty array", async () => {
+    const el = await defaultFixture()
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("updates 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("allows multiple checkboxes to be checked", async () => {
+    const el = await defaultFixture()
+    const leuCheckbox2 = el.querySelector('leu-checkbox[value="2"]')
+    const leuCheckbox3 = el.querySelector('leu-checkbox[value="3"]')
+    const checkbox2 = leuCheckbox2.shadowRoot.querySelector("input")
+    const checkbox3 = leuCheckbox3.shadowRoot.querySelector("input")
+
+    checkbox2.click()
+    checkbox3.click()
+
+    expect(el.value).to.deep.equal(["2", "3"])
+  })
+
+  it("updates 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("doesn't 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("has a default value that reflects all checked checkboxes", async () => {
+    const el = await checkedFixture()
+
+    expect(el.value).to.deep.equal(["2"])
+  })
+
+  it("delegates 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 sendKeys({
+      press: "Tab",
+    })
+
+    expect(document.activeElement).to.equal(leuCheckbox)
+    expect(leuCheckbox.shadowRoot.activeElement).to.equal(checkbox)
+  })
+})

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

@@ -1,32 +1,22 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 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>
+    <leu-checkbox
+      identifier="b"
+      value="2"
+      label="Das ist ein Label"
+    ></leu-checkbox>
   `)
 }
 
 describe("LeuCheckbox", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-checkbox")
+    const el = customElements.get("leu-checkbox")
 
     await expect(el).not.to.be.undefined
   })
@@ -37,65 +27,88 @@ describe("LeuCheckbox", () => {
     await expect(el).shadowDom.to.be.accessible()
   })
 
-  describe("LeuCheckboxGroup", () => {
-    it("is a defined element", async () => {
-      const el = await customElements.get("leu-checkbox-group")
+  it("is not checked by default", async () => {
+    const el = await defaultFixture()
 
-      await expect(el).not.to.be.undefined
-    })
+    expect(el.checked).to.be.false
+  })
 
-    it("should have a default value of an empty array", async () => {
-      const el = await defaultFixture()
+  it("toggles the checked property when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+    const label = el.shadowRoot.querySelector("label")
 
-      expect(el.value).to.deep.equal([])
-    })
+    checkbox.click()
+    await elementUpdated(el)
 
-    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")
+    expect(el.checked).to.be.true
 
-      checkbox.click()
+    label.click()
+    await elementUpdated(el)
 
-      expect(el.value).to.deep.equal(["2"])
-    })
+    expect(el.checked).to.be.false
+  })
 
-    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")
+  it("does not toggle the checked property when disabled", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+    const label = el.shadowRoot.querySelector("label")
 
-      checkbox.click()
-      checkbox.click()
+    el.disabled = true
+    await elementUpdated(el)
 
-      expect(el.value).to.deep.equal([])
-    })
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.false
+
+    label.click()
+    await elementUpdated(el)
 
-    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")
+    expect(el.checked).to.be.false
+  })
 
-      checkbox.click()
+  it("toggles the checked property when the space key is pressed", async () => {
+    const el = await defaultFixture()
+    el.focus()
 
-      expect(el.value).to.deep.equal([])
+    await sendKeys({
+      press: "Space",
     })
 
-    it("should have the option checked by default as a value", async () => {
-      const el = await checkedFixture()
+    expect(el.checked).to.be.true
 
-      expect(el.value).to.deep.equal(["2"])
+    await sendKeys({
+      press: "Space",
     })
 
-    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")
+    expect(el.checked).to.be.false
+  })
+
+  it("fires a change event when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
 
-      await leuCheckbox.focus()
+    setTimeout(() => checkbox.click())
+    const event = await oneEvent(el, "change")
 
-      expect(document.activeElement).to.equal(leuCheckbox)
-      expect(leuCheckbox.shadowRoot.activeElement).to.equal(checkbox)
-    })
+    expect(event).to.exist
+  })
+
+  it("fires an input event when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    setTimeout(() => checkbox.click())
+    const event = await oneEvent(el, "input")
+
+    expect(event).to.exist
+  })
+
+  it("applies the identifier to the input and the label", async () => {
+    const el = await defaultFixture()
+
+    expect(el.shadowRoot.querySelector("input").id).to.equal("b")
+    expect(el.shadowRoot.querySelector("label").htmlFor).to.equal("b")
   })
 })

package/src/components/chip/Chip.js

@@ -14,6 +14,7 @@ export class LeuChipBase extends LitElement {
 
   static properties = {
     inverted: { type: Boolean, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {

package/src/components/chip/ChipGroup.js

@@ -1,5 +1,5 @@
-import { LitElement, html } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
+import { LitElement } from "lit"
+import { html, unsafeStatic } from "lit/static-html.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 */
@@ -12,18 +12,26 @@ export const SELECTION_MODES = {
 
 /**
  * @slot - Place leu-chip-* elements inside this slot
+ * @cssproperty --leu-chip-group-gap - The gap between the chips
  * @tagname leu-chip-group
  */
 export class LeuChipGroup extends LitElement {
   static styles = styles
 
   static properties = {
+    inverted: { type: Boolean, reflect: true },
     selectionMode: { type: String, attribute: "selection-mode", reflect: true },
+    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
     super()
 
+    this.inverted = false
+    this.headingLevel = 2
+    this.label = ""
+
     /** @internal */
     this.items = []
   }
@@ -44,6 +52,22 @@ export class LeuChipGroup extends LitElement {
     return this.items.filter((i) => i.selected).map((i) => i.value)
   }
 
+  /**
+   * Determines the heading tag of the accordion toggle.
+   * The headingLevel shouldn't be used directly to render the heading tag
+   * in order to avoid XSS issues.
+   * @returns {String} The heading tag of the accordion toggle.
+   * @internal
+   */
+  _getHeadingTag() {
+    let level = 2
+    if (this.headingLevel > 0 && this.headingLevel < 7) {
+      level = this.headingLevel
+    }
+
+    return `h${level}`
+  }
+
   /** @internal */
   handleInput = (e) => {
     if (this.selectionMode === SELECTION_MODES.single) {
@@ -62,10 +86,21 @@ export class LeuChipGroup extends LitElement {
   }
 
   render() {
-    return html`<slot @slotchange=${this.handleSlotChange}></slot>`
+    const hTag = this._getHeadingTag()
+
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`
+      ${this.label
+        ? html`<${unsafeStatic(hTag)} class="label">
+            <span class="label">${this.label}</span>
+          </${unsafeStatic(hTag)}>`
+        : ""}
+      <slot
+        class="group"
+        part="group"
+        @slotchange=${this.handleSlotChange}
+      ></slot>
+    `
   }
 }
-
-export function defineChipGroupElements() {
-  defineElement("chip-group", LeuChipGroup)
-}

package/src/components/chip/ChipLink.js

@@ -1,5 +1,4 @@
 import { html } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 
 import { LeuChipBase } from "./Chip.js"
 
@@ -34,11 +33,7 @@ export class LeuChipLink extends LeuChipBase {
 
   render() {
     return html`<a href=${this.href} class="button">
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </a>`
   }
 }
-
-export function defineChipLinkElements() {
-  defineElement("chip-link", LeuChipLink)
-}

package/src/components/chip/ChipRemovable.js

@@ -1,5 +1,4 @@
 import { html } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 
 import { LeuChipBase } from "./Chip.js"
 import { Icon } from "../icon/icon.js"
@@ -22,7 +21,7 @@ export class LeuChipRemovable extends LeuChipBase {
   }
 
   handleClick() {
-    const customEvent = new CustomEvent("remove", {
+    const customEvent = new CustomEvent("leu:remove", {
       bubble: true,
       composed: true,
     })
@@ -31,12 +30,8 @@ export class LeuChipRemovable extends LeuChipBase {
 
   render() {
     return html`<button @click=${(e) => this.handleClick(e)} class="button">
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
       <div class="icon">${this._removeIcon}</div>
     </button>`
   }
 }
-
-export function defineChipRemovableElements() {
-  defineElement("chip-removable", LeuChipRemovable)
-}