@statistikzh/leu 0.2.0 → 0.4.0

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

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

package/src/components/chip/ChipGroup.js

@@ -1,5 +1,4 @@
 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 */
@@ -18,7 +17,7 @@ export class LeuChipGroup extends LitElement {
   static styles = styles
 
   static properties = {
-    selectionMode: { type: String, attribute: "selection-mode" },
+    selectionMode: { type: String, attribute: "selection-mode", reflect: true },
   }
 
   constructor() {
@@ -65,7 +64,3 @@ export class LeuChipGroup extends LitElement {
     return html`<slot @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"
 
@@ -20,8 +19,7 @@ export class LeuChipLink extends LeuChipBase {
      * The size of the chip
      * @type {keyof typeof SIZES}
      */
-    size: { type: String },
-
+    size: { type: String, reflect: true },
     href: { type: String, reflect: true },
   }
 
@@ -35,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"
@@ -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)
-}

package/src/components/chip/ChipSelectable.js

@@ -1,5 +1,4 @@
 import { html } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 
 import { LeuChipBase } from "./Chip.js"
 
@@ -27,7 +26,7 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof SIZES}
      * @default "regular"
      */
-    size: { type: String },
+    size: { type: String, reflect: true },
 
     /**
      * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
@@ -37,10 +36,10 @@ export class LeuChipSelectable extends LeuChipBase {
      * @type {keyof typeof VARIANTS}
      * @default "default"
      */
-    variant: { type: String },
+    variant: { type: String, reflect: true },
 
     selected: { type: Boolean, reflect: true },
-    value: { type: String },
+    value: { type: String, reflect: true },
   }
 
   constructor() {
@@ -81,11 +80,7 @@ export class LeuChipSelectable extends LeuChipBase {
       class="button"
       aria-selected=${this.selected ? "true" : "false"}
     >
-      <span class="label"><slot></slot></span>
+      <span class="label">${this.label}</span>
     </button>`
   }
 }
-
-export function defineChipSelectableElements() {
-  defineElement("chip-selectable", LeuChipSelectable)
-}

package/src/components/chip/exports.js

@@ -1,10 +1,4 @@
-export { LeuChipGroup, defineChipGroupElements } from "./ChipGroup.js"
-export { LeuChipLink, defineChipLinkElements } from "./ChipLink.js"
-export {
-  LeuChipRemovable,
-  defineChipRemovableElements,
-} from "./ChipRemovable.js"
-export {
-  LeuChipSelectable,
-  defineChipSelectableElements,
-} from "./ChipSelectable.js"
+export { LeuChipGroup } from "./ChipGroup.js"
+export { LeuChipLink } from "./ChipLink.js"
+export { LeuChipRemovable } from "./ChipRemovable.js"
+export { LeuChipSelectable } from "./ChipSelectable.js"

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

@@ -1,3 +1,6 @@
-import { defineChipGroupElements } from "./ChipGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipGroup } from "./ChipGroup.js"
 
-defineChipGroupElements()
+export { LeuChipGroup }
+
+defineElement("chip-group", LeuChipGroup)

package/src/components/chip/leu-chip-link.js

@@ -1,3 +1,6 @@
-import { defineChipLinkElements } from "./ChipLink.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipLink } from "./ChipLink.js"
 
-defineChipLinkElements()
+export { LeuChipLink }
+
+defineElement("chip-link", LeuChipLink)

package/src/components/chip/leu-chip-removable.js

@@ -1,3 +1,6 @@
-import { defineChipRemovableElements } from "./ChipRemovable.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipRemovable } from "./ChipRemovable.js"
 
-defineChipRemovableElements()
+export { LeuChipRemovable }
+
+defineElement("chip-removable", LeuChipRemovable)

package/src/components/chip/leu-chip-selectable.js

@@ -1,3 +1,6 @@
-import { defineChipSelectableElements } from "./ChipSelectable.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuChipSelectable } from "./ChipSelectable.js"
 
-defineChipSelectableElements()
+export { LeuChipSelectable }
+
+defineElement("chip-selectable", LeuChipSelectable)

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

@@ -8,7 +8,7 @@ import { SELECTION_MODES } from "../ChipGroup.js"
 import { VARIANTS as SELECTABLE_VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip Group",
+  title: "Chip/Group",
   component: "leu-chip-group",
   argTypes: {
     selectionMode: {
@@ -21,6 +21,15 @@ export default {
     selectionMode: "",
     inverted: false,
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 const chips = ["Chip 1", "Chip 2", "Chip 3"]
@@ -31,6 +40,7 @@ function invertedBackground(args, content) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
       ${content}
     </div>
@@ -42,8 +52,7 @@ function DefaultTemplate(args) {
     <leu-chip-group selection-mode=${args.selectionMode}>
       ${chips.map(
         (chip) => html`
-          <leu-chip-removable ?inverted=${args.inverted}>
-            ${chip}
+          <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
           </leu-chip-removable>
         `
       )}
@@ -62,8 +71,8 @@ function SingleTemplate(args) {
             ?inverted=${args.inverted}
             variant=${SELECTABLE_VARIANTS.radio}
             value="chip-${chip}"
+            label=${chip}
           >
-            ${chip}
           </leu-chip-selectable>
         `
       )}
@@ -78,8 +87,11 @@ function MultipleTemplate(args) {
     <leu-chip-group selection-mode=${args.selectionMode}>
       ${chips.map(
         (chip) => html`
-          <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
-            ${chip}
+          <leu-chip-selectable
+            ?inverted=${args.inverted}
+            value="chip-${chip}"
+            label=${chip}
+          >
           </leu-chip-selectable>
         `
       )}

package/src/components/chip/stories/chip-link.stories.js

@@ -6,7 +6,7 @@ import "../leu-chip-link.js"
 import { SIZES } from "../ChipLink.js"
 
 export default {
-  title: "Chip Link",
+  title: "Chip/Link",
   component: "leu-chip-link",
   argTypes: {
     size: { control: "select", options: Object.values(SIZES) },
@@ -14,6 +14,15 @@ export default {
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -22,10 +31,13 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
-      <leu-chip-link size=${ifDefined(args.size)} ?inverted=${args.inverted}
-        >${args.label}</leu-chip-link
-      >
+      <leu-chip-link
+        size=${ifDefined(args.size)}
+        ?inverted=${args.inverted}
+        label=${args.label}
+      ></leu-chip-link>
     </div>
   `
 }

package/src/components/chip/stories/chip-removable.stories.js

@@ -3,11 +3,20 @@ import { html } from "lit"
 import "../leu-chip-removable.js"
 
 export default {
-  title: "Chip Removable",
+  title: "Chip/Removable",
   component: "leu-chip-removable",
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -16,10 +25,12 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
-      <leu-chip-removable ?inverted=${args.inverted}
-        >${args.label}</leu-chip-removable
-      >
+      <leu-chip-removable
+        ?inverted=${args.inverted}
+        label=${args.label}
+      ></leu-chip-removable>
     </div>
   `
 }

package/src/components/chip/stories/chip-selectable.stories.js

@@ -6,7 +6,7 @@ import "../leu-chip-selectable.js"
 import { SIZES, VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip Selectable",
+  title: "Chip/Selectable",
   component: "leu-chip-selectable",
   argTypes: {
     variant: { control: "select", options: Object.values(VARIANTS) },
@@ -16,6 +16,15 @@ export default {
   args: {
     label: "Publikationen",
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81933&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
 }
 
 function Template(args) {
@@ -24,14 +33,15 @@ function Template(args) {
       style="background: ${args.inverted
         ? "hsla(209, 83%, 59%, 1)"
         : "var(--leu-color-black-5)"}; padding: 1rem;"
+      data-root
     >
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
+        label=${args.label}
         ?selected=${args.selected}
         ?inverted=${args.inverted}
-        >${args.label}</leu-chip-selectable
-      >
+      ></leu-chip-selectable>
     </div>
   `
 }