@statistikzh/leu 0.5.1 → 0.7.0

package/src/components/chip/ChipGroup.js

@@ -1,21 +1,24 @@
-import { LitElement } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+// @ts-ignore
 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 = {
+export const SELECTION_MODES = Object.freeze({
   single: "single",
   multiple: "multiple",
   none: "none",
-}
+})
 
 /**
  * @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 {
+export class LeuChipGroup extends LeuElement {
   static styles = styles
 
   static properties = {
@@ -34,22 +37,49 @@ export class LeuChipGroup extends LitElement {
 
     /** @internal */
     this.items = []
+
+    /** @type {"single" | "multiple" | "none"} */
+    this.selectionMode = SELECTION_MODES.none
   }
 
   connectedCallback() {
     super.connectedCallback()
 
-    this.addEventListener("input", this.handleInput)
+    /**
+     * 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
+     * be called before the following event listener. But at this point multiple
+     * radio chips could be selected at the same time because `handleInput` hasn't been
+     * called yet. That's why we use the capture phase.
+     */
+    this.addEventListener("input", this.handleInput, { capture: true })
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
-    this.removeEventListener("input", this.handleInput)
+    this.removeEventListener("input", this.handleInput, { capture: true })
   }
 
   get value() {
-    return this.items.filter((i) => i.selected).map((i) => i.value)
+    return this.items.filter((i) => i.checked).map((i) => i.value)
+  }
+
+  /**
+   * Checks the items with the given values.
+   * If the selectionMode is single, only the first item with the given value is checked.
+   * @param {string[]} valueList
+   */
+  set value(valueList) {
+    let hasChanged = false
+
+    for (const item of this.items) {
+      item.checked = hasChanged ? false : valueList.includes(item.value)
+
+      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+        hasChanged = true
+      }
+    }
   }
 
   /**
@@ -72,7 +102,7 @@ export class LeuChipGroup extends LitElement {
   handleInput = (e) => {
     if (this.selectionMode === SELECTION_MODES.single) {
       this.items.forEach((item) => {
-        item.selected = item === e.target // eslint-disable-line no-param-reassign
+        item.checked = item === e.target // eslint-disable-line no-param-reassign
       })
     }
   }

package/src/components/chip/ChipLink.js

@@ -8,17 +8,13 @@ export const SIZES = {
 }
 
 /**
- * @slot - The content of the chip
  * @tagname leu-chip-link
+ * @slot - The content of the chip
+ * @prop {keyof typeof SIZES} size - The size of the chip
  */
 export class LeuChipLink extends LeuChipBase {
   static properties = {
     ...LeuChipBase.properties,
-
-    /**
-     * The size of the chip
-     * @type {keyof typeof SIZES}
-     */
     size: { type: String, reflect: true },
     href: { type: String, reflect: true },
   }
@@ -33,7 +29,7 @@ export class LeuChipLink extends LeuChipBase {
 
   render() {
     return html`<a href=${this.href} class="button">
-      <span class="label">${this.label}</span>
+      <span class="label"><slot></slot></span>
     </a>`
   }
 }

package/src/components/chip/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from "lit"
 
 import { LeuChipBase } from "./Chip.js"
-import { Icon } from "../icon/icon.js"
+import { LeuIcon } from "../icon/Icon.js"
 
 /**
  * @slot - The content of the chip
@@ -9,20 +9,17 @@ import { Icon } from "../icon/icon.js"
  * @fires remove - Dispatched when the user clicks on the chip
  */
 export class LeuChipRemovable extends LeuChipBase {
-  static properties = {
-    ...LeuChipBase.properties,
+  static dependencies = {
+    "leu-icon": LeuIcon,
   }
 
-  constructor() {
-    super()
-
-    /** @internal */
-    this._removeIcon = Icon("close", 16)
+  static properties = {
+    ...LeuChipBase.properties,
   }
 
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
-      bubble: true,
+      bubbles: true,
       composed: true,
     })
     this.dispatchEvent(customEvent)
@@ -30,8 +27,8 @@ export class LeuChipRemovable extends LeuChipBase {
 
   render() {
     return html`<button @click=${(e) => this.handleClick(e)} class="button">
-      <span class="label">${this.label}</span>
-      <div class="icon">${this._removeIcon}</div>
+      <span class="label"><slot></slot></span>
+      <leu-icon name="close" class="icon"></leu-icon>
     </button>`
   }
 }

package/src/components/chip/ChipSelectable.js

@@ -14,39 +14,35 @@ export const VARIANTS = {
 
 /**
  * A chip component that can be selected.
- * @slot - The content of the chip
  * @tagname leu-chip-selectable
+ * @slot - The content of the chip
+ * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
+ * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
+ * @prop {boolean} checked - Whether the chip is selected.
+ * @prop {string} value - The value of the chip.
  */
 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, reflect: true },
-
-    /**
-     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
-     * - `toggle`: The chip behaves like a toggle button.
-     * - `radio`: The chip behaves like a radio button.
-     *
-     * @type {keyof typeof VARIANTS}
-     * @default "toggle"
-     */
     variant: { type: String, reflect: true },
 
-    selected: { type: Boolean, reflect: true },
+    checked: { type: Boolean, reflect: true },
     value: { type: String, reflect: true },
   }
 
   constructor() {
     super()
     this.size = SIZES.regular
+
+    /**
+     * The variant of the chip. Has an effect not only on the visual appearance but also on the behavior.
+     * - `toggle`: The chip behaves like a toggle button.
+     * - `radio`: The chip behaves like a radio button.
+     * @default "toggle"
+     */
     this.variant = VARIANTS.toggle
-    this.selected = false
+    this.checked = false
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -54,19 +50,19 @@ export class LeuChipSelectable extends LeuChipBase {
   }
 
   handleClick() {
-    let nextSelectedState = this.selected
+    let nextcheckedState = this.checked
 
     if (this.variant === VARIANTS.radio) {
-      nextSelectedState = true
+      nextcheckedState = true
     } else {
-      nextSelectedState = !this.selected
+      nextcheckedState = !this.checked
     }
 
-    if (nextSelectedState !== this.selected) {
-      this.selected = nextSelectedState
+    if (nextcheckedState !== this.checked) {
+      this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { selected: this.selected },
+          detail: { checked: this.checked },
           bubbles: true,
           composed: true,
         })
@@ -76,11 +72,11 @@ export class LeuChipSelectable extends LeuChipBase {
 
   render() {
     return html`<button
-      @click=${(e) => this.handleClick(e)}
+      @click=${() => this.handleClick()}
       class="button"
-      aria-pressed=${this.selected ? "true" : "false"}
+      aria-pressed=${this.checked ? "true" : "false"}
     >
-      <span class="label">${this.label}</span>
+      <span class="label"><slot></slot></span>
     </button>`
   }
 }

package/src/components/chip/chip.css

@@ -8,17 +8,17 @@
 :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-background-color-checked: var(--leu-color-black-100);
+  --chip-background-color-checked-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-color-checked: 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-border-checked: var(--leu-color-black-0);
   --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-selected: var(--leu-color-func-cyan);
+  --chip-radio-background-checked: var(--leu-color-func-cyan);
 
   --chip-font-regular: var(--leu-font-family-regular);
   --chip-font-black: var(--leu-font-family-black);
@@ -28,6 +28,8 @@
   --chip-radio-border: var(--chip-radio-border-default);
   --chip-radio-background: var(--chip-radio-background-default);
 
+  --leu-icon-size: 1rem;
+
   font-family: var(--chip-font-regular);
 
   /* Allow shrinking to achieve text truncation (ellipsis) */
@@ -40,14 +42,14 @@
 
   --chip-color-default: var(--leu-color-black-0);
   --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: 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);
+:host([checked]) {
+  --chip-background-color: var(--chip-background-color-checked);
+  --chip-color: var(--chip-color-checked);
+  --chip-radio-border: var(--chip-radio-border-checked);
+  --chip-radio-background: var(--chip-radio-background-checked);
 }
 
 .button {
@@ -58,6 +60,7 @@
   padding: 0.5rem 1rem;
 
   color: var(--chip-color);
+  font-family: inherit;
   font-size: 0.875rem;
   line-height: 1rem;
 
@@ -92,10 +95,10 @@
   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([checked]) .button:hover,
+:host([checked]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-checked-hover);
+  --chip-color: var(--chip-color-checked);
 }
 
 :host([href][size="large"]) .button {
@@ -123,7 +126,7 @@
   border-radius: 50%;
 }
 
-:host([variant="radio"][selected]) .button::before {
+:host([variant="radio"][checked]) .button::before {
   border-width: 3px;
 }
 
@@ -135,7 +138,3 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
-.icon svg {
-  display: block;
-}

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

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

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

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

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

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

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

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

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

@@ -95,7 +95,8 @@ function DefaultTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        <leu-chip-removable ?inverted=${args.inverted}>
+          ${chip}
         </leu-chip-removable>
       `
     )}
@@ -112,8 +113,8 @@ function SingleTemplate(args) {
           ?inverted=${args.inverted}
           variant=${SELECTABLE_VARIANTS.radio}
           value="chip-${chip}"
-          label=${chip}
         >
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -126,11 +127,8 @@ function MultipleTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-selectable
-          ?inverted=${args.inverted}
-          value="chip-${chip}"
-          label=${chip}
-        >
+        <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -143,8 +141,7 @@ function LabeledTemplate(args) {
   const content = html`
     ${links.map(
       (chip) => html`
-        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
-        </leu-chip-link>
+        <leu-chip-link ?inverted=${args.inverted}> ${chip} </leu-chip-link>
       `
     )}
   `

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

@@ -33,11 +33,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-link
-        size=${ifDefined(args.size)}
-        ?inverted=${args.inverted}
-        label=${args.label}
-      ></leu-chip-link>
+      <leu-chip-link size=${ifDefined(args.size)} ?inverted=${args.inverted}
+        >${args.label}</leu-chip-link
+      >
     </div>
   `
 }

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

@@ -27,10 +27,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-removable
-        ?inverted=${args.inverted}
-        label=${args.label}
-      ></leu-chip-removable>
+      <leu-chip-removable ?inverted=${args.inverted}
+        >${args.label}</leu-chip-removable
+      >
     </div>
   `
 }

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

@@ -38,10 +38,10 @@ function Template(args) {
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
-        label=${args.label}
-        ?selected=${args.selected}
+        ?checked=${args.checked}
         ?inverted=${args.inverted}
-      ></leu-chip-selectable>
+        >${args.label}</leu-chip-selectable
+      >
     </div>
   `
 }

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

@@ -9,12 +9,9 @@ async function removableFixture() {
   return fixture(
     html`
       <leu-chip-group>
-        <leu-chip-removable label="Publikationen"></leu-chip-removable>
-        <leu-chip-removable label="Daten" value="2"></leu-chip-removable>
-        <leu-chip-removable
-          label="Schnittstellen"
-          value="3"
-        ></leu-chip-removable>
+        <leu-chip-removable>Publikationen</leu-chip-removable>
+        <leu-chip-removable value="2">Daten</leu-chip-removable>
+        <leu-chip-removable value="3">Schnittstellen</leu-chip-removable>
       </leu-chip-group>
     `
   )
@@ -24,21 +21,15 @@ async function singleSelectionFixture() {
   return fixture(
     html`
       <leu-chip-group selection-mode="single">
-        <leu-chip-selectable
-          label="Publikationen"
-          value="1"
-          variant="radio"
-        ></leu-chip-selectable>
-        <leu-chip-selectable
-          label="Daten"
-          value="2"
-          variant="radio"
-        ></leu-chip-selectable>
-        <leu-chip-selectable
-          label="Schnittstellen"
-          value="3"
-          variant="radio"
-        ></leu-chip-selectable>
+        <leu-chip-selectable value="1" variant="radio"
+          >Publikationen</leu-chip-selectable
+        >
+        <leu-chip-selectable value="2" variant="radio"
+          >Daten</leu-chip-selectable
+        >
+        <leu-chip-selectable value="3" variant="radio"
+          >Schnittstellen</leu-chip-selectable
+        >
       </leu-chip-group>
     `
   )
@@ -48,15 +39,9 @@ async function multipleSelectionFixture() {
   return fixture(
     html`
       <leu-chip-group selection-mode="multiple">
-        <leu-chip-selectable
-          label="Publikationen"
-          value="1"
-        ></leu-chip-selectable>
-        <leu-chip-selectable label="Daten" value="2"></leu-chip-selectable>
-        <leu-chip-selectable
-          label="Schnittstellen"
-          value="3"
-        ></leu-chip-selectable>
+        <leu-chip-selectable value="1">Publikationen</leu-chip-selectable>
+        <leu-chip-selectable value="2">Daten</leu-chip-selectable>
+        <leu-chip-selectable value="3">Schnittstellen</leu-chip-selectable>
       </leu-chip-group>
     `
   )
@@ -121,4 +106,71 @@ describe("LeuChipGroup", () => {
 
     await expect(event).to.exist
   })
+
+  it("checks only chip when the value of the group is set (selection-mode=single)", async () => {
+    const el = await singleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("checks chips when the value of the group is set (selection-mode=multiple)", async () => {
+    const el = await multipleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
 })

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

@@ -5,9 +5,7 @@ import "../leu-chip-link.js"
 
 async function defaultFixture() {
   return fixture(
-    html`
-      <leu-chip-link label="Daten" href="https://zh.ch/daten"></leu-chip-link>
-    `
+    html` <leu-chip-link href="https://zh.ch/daten">Daten</leu-chip-link> `
   )
 }
 
@@ -27,9 +25,7 @@ describe("LeuChipLink", () => {
   it("renders the label", async () => {
     const el = await defaultFixture()
 
-    const link = el.shadowRoot.querySelector("a")
-
-    expect(link).to.have.trimmed.text("Daten")
+    expect(el).to.have.trimmed.text("Daten")
   })
 
   it("renders a link element", async () => {

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

@@ -2,14 +2,10 @@ import { html } from "lit"
 import { fixture, expect, oneEvent } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
 
-import { iconPaths } from "../../icon/icon.js"
-
 import "../leu-chip-removable.js"
 
 async function defaultFixture() {
-  return fixture(
-    html` <leu-chip-removable label="Daten"></leu-chip-removable> `
-  )
+  return fixture(html` <leu-chip-removable>Daten</leu-chip-removable> `)
 }
 
 describe("LeuChipRemovable", () => {
@@ -28,9 +24,7 @@ describe("LeuChipRemovable", () => {
   it("renders the label", async () => {
     const el = await defaultFixture()
 
-    const button = el.shadowRoot.querySelector("button")
-
-    expect(button).to.have.trimmed.text("Daten")
+    expect(el).to.have.trimmed.text("Daten")
   })
 
   it("renders a button element", async () => {
@@ -42,9 +36,9 @@ describe("LeuChipRemovable", () => {
   it("renders a remove icon", async () => {
     const el = await defaultFixture()
 
-    const iconPath = el.shadowRoot.querySelector("svg path")
+    const iconPath = el.shadowRoot.querySelector("leu-icon")
 
-    expect(iconPath.getAttribute("d")).to.equal(iconPaths.close)
+    expect(iconPath.name).to.equal("close")
   })
 
   it("delegates the focus to the button element", async () => {