@statistikzh/leu 0.4.0 → 0.5.0

package/src/components/button/test/button.test.js

@@ -4,7 +4,7 @@ import { fixture, expect, elementUpdated, oneEvent } from "@open-wc/testing"
 import "../leu-button.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-button label="button"></leu-button>`)
+  return fixture(html` <leu-button>button</leu-button>`)
 }
 
 describe("LeuButton", () => {
@@ -20,22 +20,41 @@ describe("LeuButton", () => {
     await expect(el).shadowDom.to.be.accessible()
   })
 
+  it("passes the a11y audit with no visible text", async () => {
+    const el = await fixture(
+      html` <leu-button icon="download" label="sichern"></leu-button>`
+    )
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
   it("renders the label", async () => {
-    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
+
+    expect(el).to.have.trimmed.text("Sichern")
+  })
+
+  it("sets the aria-label attribute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="download"
+        label="Dokument herunterladen"
+      ></leu-button>`
+    )
     const button = el.shadowRoot.querySelector("button")
 
-    expect(button).to.have.trimmed.text("Sichern")
+    expect(button).to.have.attribute("aria-label", "Dokument herunterladen")
   })
 
   it("renders the icon at the correct position", async () => {
     const el = await fixture(
-      html` <leu-button icon="addNew" label="Sichern"></leu-button>`
+      html` <leu-button icon="addNew">Sichern</leu-button>`
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button><div><svg><path /></svg></div>Sichern</div>",
+      "<button><div><svg><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
 
@@ -44,20 +63,20 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button>Sichern<div><svg><path /></svg></div></div>",
+      "<button><slot></slot><div><svg><path /></svg></div></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
   })
 
   it("renders the icon at the correct size", async () => {
     const el = await fixture(
-      html` <leu-button icon="addNew" label="Sichern"></leu-button>`
+      html` <leu-button icon="addNew">Sichern</leu-button>`
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button><div><svg width='24' height='24'><path /></svg></div>Sichern</div>",
+      "<button><div><svg width='24' height='24'><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
 
@@ -66,25 +85,22 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button><div><svg width='16' height='16'><path /></svg></div>Sichern</div>",
+      "<button><div><svg width='16' height='16'><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "class", "type"] }
     )
   })
 
   it("renders the expanded icon only when the variant is ghost", async () => {
     const el = await fixture(
-      html` <leu-button
-        icon="addNew"
-        label="Sichern"
-        variant="ghost"
-        expanded="open"
-      ></leu-button>`
+      html` <leu-button icon="addNew" variant="ghost" expanded="true"
+        >Sichern</leu-button
+      >`
     )
 
     const button = el.shadowRoot.querySelector("button")
 
     expect(button).dom.to.equal(
-      "<button class='ghost normal'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div>Sichern<div class='icon-wrapper icon-wrapper--expanded'><svg width='24' height='24'><path /></svg></div></div>",
+      "<button class='ghost regular'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div><slot></slot><div class='icon-wrapper icon-wrapper--expanded'><svg width='24' height='24'><path /></svg></div></div>",
       { ignoreAttributes: ["d", "type", "width", "height"] }
     )
 
@@ -93,7 +109,7 @@ describe("LeuButton", () => {
     await elementUpdated(el)
 
     expect(button).dom.to.equal(
-      "<button class='primary normal'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div>Sichern</div>",
+      "<button class='primary regular'><div class='icon-wrapper icon-wrapper--before'><svg width='24' height='24'><path /></svg></div><slot></slot></div>",
       { ignoreAttributes: ["d", "type"] }
     )
   })
@@ -104,7 +120,7 @@ describe("LeuButton", () => {
         icon="addNew"
         label="Sichern"
         variant="ghost"
-        expanded="open"
+        expanded="true"
         disabled
       ></leu-button>`
     )
@@ -119,8 +135,63 @@ describe("LeuButton", () => {
     expect(button).to.not.have.attribute("disabled")
   })
 
+  it("reflects the role attribute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        variant="ghost"
+        componentRole="menuitemradio"
+        >Sichern</leu-button
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("role", "menuitemradio")
+  })
+
+  it("sets the either checked or selected attribute depending on the role", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        variant="ghost"
+        componentRole="menuitemradio"
+        active
+        >Sichern</leu-button
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("aria-checked", "true")
+    expect(button).to.not.have.attribute("aria-selected")
+
+    el.componentRole = "tab"
+
+    await elementUpdated(el)
+
+    expect(button).to.have.attribute("aria-selected", "true")
+    expect(button).to.not.have.attribute("aria-checked")
+
+    el.componentRole = "checkbox"
+    el.active = false
+
+    await elementUpdated(el)
+
+    expect(button).to.have.attribute("aria-checked", "false")
+    expect(button).to.not.have.attribute("aria-selected")
+
+    el.componentRole = undefined
+    el.active = true
+
+    await elementUpdated(el)
+
+    expect(button).to.not.have.attribute("aria-checked")
+    expect(button).to.not.have.attribute("aria-selected")
+  })
+
   it("dispatches the click event", async () => {
-    const el = await fixture(html` <leu-button label="Sichern"></leu-button>`)
+    const el = await fixture(html` <leu-button>Sichern</leu-button>`)
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())

package/src/components/button-group/ButtonGroup.js

@@ -1,56 +1,98 @@
 import { html, LitElement } from "lit"
+// @ts-ignore
 import styles from "./button-group.css"
-import "../button/leu-button.js"
 
 /**
  * @tagname leu-button-group
+ * @slot - Slot for the buttons
+ * @prop {string} value - The value of the currenty selected (active) button
+ * @fires input - When the value of the group changes by clicking a button
  */
 export class LeuButtonGroup extends LitElement {
   static styles = styles
 
-  static properties = {
-    items: { type: Array, reflect: true },
-    value: { type: String, reflect: true },
-  }
-
   constructor() {
     super()
-    /** @type {Array} */
-    this.items = []
-    /** @type {string} */
-    this.value = null
+
+    this._items = []
+  }
+
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   * @returns {string}
+   */
+  static getButtonValue(button) {
+    return button.getAttribute("value") ?? button.innerText.trim()
+  }
+
+  get value() {
+    const activeButton = this._items.find((item) => item.active)
+    return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null
+  }
+
+  set value(newValue) {
+    this._items.forEach((item) => {
+      /* eslint-disable no-param-reassign */
+      item.active = LeuButtonGroup.getButtonValue(item) === newValue
+      /* eslint-enable no-param-reassign */
+    })
+  }
+
+  _handleSlotChange() {
+    /**
+     * Remove all event listeners that were added before.
+     * Just because a slotchange event was fired, it doesn't mean that all of the
+     * children of the slot have changed.
+     */
+    this._items.forEach((item) => {
+      item.removeEventListener("click", this._handleButtonClick)
+    })
+
+    const slot = this.shadowRoot.querySelector("slot")
+    this._items = slot.assignedElements({ flatten: true })
+
+    let foundActiveButtonBefore = false
+
+    this._items.forEach((item) => {
+      /* eslint-disable no-param-reassign */
+      item.addEventListener("click", () => this._handleButtonClick(item))
+      item.componentRole = "menuitemradio"
+
+      /**
+       * In case there are multiple active buttons
+       * only the first one will be kept active.
+       */
+      if (item.active && foundActiveButtonBefore) {
+        item.active = false
+      } else if (item.active) {
+        foundActiveButtonBefore = true
+      }
+
+      /* eslint-enable no-param-reassign */
+    })
   }
 
-  _setValue(newValue) {
-    this.value = newValue
+  /**
+   * @param {import("../button/Button").LeuButton} button
+   */
+  _handleButtonClick(button) {
+    if (!button.active) {
+      this.value = LeuButtonGroup.getButtonValue(button)
 
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        composed: true,
-        detail: { value: newValue },
-      })
-    )
+      this.dispatchEvent(
+        new CustomEvent("input", {
+          bubbles: true,
+          composed: true,
+          detail: { value: LeuButtonGroup.getButtonValue(button) },
+        })
+      )
+    }
   }
 
   render() {
     return html`
       <div role="menubar" class="group">
-        ${this.items.map(
-          (item) =>
-            html`
-              <leu-button
-                label=${item}
-                variant=${this.value === item ? "primary" : "secondary"}
-                @click=${() => {
-                  this._setValue(item)
-                }}
-                role="menuitemradio"
-                aria-checked=${this.value === item}
-              >
-              </leu-button>
-            `
-        )}
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
     `
   }

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

@@ -1,5 +1,6 @@
 import { html } from "lit"
 import "../leu-button-group.js"
+import "../../button/leu-button.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
@@ -23,21 +24,27 @@ export default {
 }
 
 function Template({ items, value }, { id }) {
-  return html`
-    <leu-button-group
-      .items=${items}
+  return html` <leu-button-group
       .value=${value}
-      @click=${(event) => {
+      @input=${(event) => {
         updateStorybookArgss(id, {
           value: event.target.value,
         })
       }}
     >
+      ${items.map(
+        (i) =>
+          html`<leu-button
+            variant="secondary"
+            ?active=${value === i}
+            value=${`${i}-attr`}
+            >${i}
+          </leu-button>`
+      )}
     </leu-button-group>
     <br />
     <br />
-    <pre>value = '${value}'</pre>
-  `
+    <pre>value = '${value}'</pre>`
 }
 
 export const Regular = Template.bind({})

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

@@ -1,12 +1,23 @@
 import { html } from "lit"
-import { fixture, expect, oneEvent, elementUpdated } from "@open-wc/testing"
+import {
+  fixture,
+  expect,
+  oneEvent,
+  elementUpdated,
+  aTimeout,
+} from "@open-wc/testing"
 
 import "../leu-button-group.js"
-
-const items = ["Eins", "Zwei", "Drei"]
+import "../../button/leu-button.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-button-group .items=${items}></leu-button-group> `)
+  return fixture(html`
+    <leu-button-group>
+      <leu-button variant="secondary" value="Eins">Eins</leu-button>
+      <leu-button variant="secondary" value="Zweierlei">Zwei</leu-button>
+      <leu-button variant="secondary">Drei</leu-button>
+    </leu-button-group>
+  `)
 }
 
 describe("LeuButtonGroup", () => {
@@ -19,7 +30,7 @@ describe("LeuButtonGroup", () => {
   it("passes the a11y audit", async () => {
     const el = await defaultFixture()
 
-    await expect(el).shadowDom.to.be.accessible()
+    await expect(el).to.be.accessible()
   })
 
   it("has no value by default", async () => {
@@ -31,32 +42,36 @@ describe("LeuButtonGroup", () => {
   it("has the correct value after clicking a button", async () => {
     const el = await defaultFixture()
 
-    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+    const buttons = Array.from(el.querySelectorAll("leu-button"))
 
-    buttons[1].click()
-    await expect(el.value).to.equal("Zwei")
+    setTimeout(() => buttons[1].click())
+    await oneEvent(el, "input")
+    await expect(el.value).to.equal("Zweierlei")
 
-    buttons[0].click()
+    setTimeout(() => buttons[0].click())
+    await oneEvent(el, "input")
     await expect(el.value).to.equal("Eins")
 
-    buttons[2].click()
+    setTimeout(() => buttons[2].click())
+    await oneEvent(el, "input")
     await expect(el.value).to.equal("Drei")
 
     // Should not change after clicking the same button again
-    buttons[2].click()
+    setTimeout(() => buttons[2].click())
+    await aTimeout(100) // There is no event to wait for so
     await expect(el.value).to.equal("Drei")
   })
 
-  it("renders the active button as a primary button", async () => {
+  it("sets the active attribute on the active button", async () => {
     const el = await defaultFixture()
-    el.value = "Zwei"
+    el.value = "Zweierlei"
     await elementUpdated(el)
 
-    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+    const buttons = el.querySelectorAll("leu-button")
 
-    await expect(buttons[0].variant).to.equal("secondary")
-    await expect(buttons[1].variant).to.equal("primary")
-    await expect(buttons[2].variant).to.equal("secondary")
+    await expect(buttons[0].active).to.be.false
+    await expect(buttons[1].active).to.be.true
+    await expect(buttons[2].active).to.be.false
 
     buttons[0].click()
 
@@ -65,21 +80,13 @@ describe("LeuButtonGroup", () => {
     await expect(buttons[2].variant).to.equal("secondary")
   })
 
-  it("sets the correct aria-checked attribute", async () => {
+  it("sets the menuitemradio role on the buttons", async () => {
     const el = await defaultFixture()
-    el.value = "Drei"
-    await elementUpdated(el)
-
-    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+    const buttons = el.querySelectorAll("leu-button")
 
-    await expect(buttons[0].getAttribute("aria-checked")).to.equal("false")
-    await expect(buttons[1].getAttribute("aria-checked")).to.equal("false")
-    await expect(buttons[2].getAttribute("aria-checked")).to.equal("true")
-
-    buttons[0].click()
-    await expect(buttons[0].getAttribute("aria-checked")).to.equal("false")
-    await expect(buttons[1].getAttribute("aria-checked")).to.equal("false")
-    await expect(buttons[2].getAttribute("aria-checked")).to.equal("false")
+    await expect(buttons[0].componentRole).to.equal("menuitemradio")
+    await expect(buttons[1].componentRole).to.equal("menuitemradio")
+    await expect(buttons[2].componentRole).to.equal("menuitemradio")
   })
 
   it("dispatches an input event when the value changes", async () => {
@@ -87,7 +94,7 @@ describe("LeuButtonGroup", () => {
     el.value = "Drei"
     await elementUpdated(el)
 
-    const buttons = el.shadowRoot.querySelectorAll("leu-button")
+    const buttons = el.querySelectorAll("leu-button")
 
     setTimeout(() => buttons[0].click())
 

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

@@ -1,6 +1,6 @@
 :host {
-  --group-font-regular: var(--leu-font-regular);
-  --group-font-black: var(--leu-font-black);
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-black);
 
   font-family: var(--group-font-regular);
 }

package/src/components/checkbox/checkbox.css

@@ -8,7 +8,7 @@
 
   --checkbox-tick-color: var(--leu-color-black-0);
 
-  --checkbox-font-regular: var(--leu-font-regular);
+  --checkbox-font-regular: var(--leu-font-family-regular);
 
   position: relative;
 

package/src/components/chip/ChipGroup.js

@@ -1,4 +1,5 @@
-import { LitElement, html } from "lit"
+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 */
@@ -11,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 = []
   }
@@ -43,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) {
@@ -61,6 +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>
+    `
   }
 }

package/src/components/chip/ChipRemovable.js

@@ -21,7 +21,7 @@ export class LeuChipRemovable extends LeuChipBase {
   }
 
   handleClick() {
-    const customEvent = new CustomEvent("remove", {
+    const customEvent = new CustomEvent("leu:remove", {
       bubble: true,
       composed: true,
     })

package/src/components/chip/ChipSelectable.js

@@ -8,7 +8,7 @@ export const SIZES = {
 }
 
 export const VARIANTS = {
-  default: "default",
+  toggle: "toggle",
   radio: "radio",
 }
 
@@ -30,11 +30,11 @@ export class LeuChipSelectable extends LeuChipBase {
 
     /**
      * 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.
+     * - `toggle`: The chip behaves like a toggle button.
      * - `radio`: The chip behaves like a radio button.
      *
      * @type {keyof typeof VARIANTS}
-     * @default "default"
+     * @default "toggle"
      */
     variant: { type: String, reflect: true },
 
@@ -78,7 +78,7 @@ export class LeuChipSelectable extends LeuChipBase {
     return html`<button
       @click=${(e) => this.handleClick(e)}
       class="button"
-      aria-selected=${this.selected ? "true" : "false"}
+      aria-pressed=${this.selected ? "true" : "false"}
     >
       <span class="label">${this.label}</span>
     </button>`

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

@@ -1,5 +1,15 @@
-:host {
+.label {
+  margin: 0 0 0.5rem;
+  font: var(--leu-t-curve-35-black-font);
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) .label {
+  color: var(--leu-color-black-0);
+}
+
+.group {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.5rem;
+  gap: var(--leu-chip-group-gap, 0.5rem);
 }