@statistikzh/leu 0.3.0 → 0.5.0

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

@@ -1,15 +1,15 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+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", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-button")
+    const el = customElements.get("leu-button")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +19,185 @@ 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>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.attribute("aria-label", "Dokument herunterladen")
+  })
+
+  it("renders the icon at the correct position", async () => {
+    const el = await fixture(
+      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><slot></slot></div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+
+    el.iconPosition = "after"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<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">Sichern</leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).dom.to.equal(
+      "<button><div><svg width='24' height='24'><path /></svg></div><slot></slot></div>",
+      { ignoreAttributes: ["d", "class", "type"] }
+    )
+
+    el.size = "small"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<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" variant="ghost" expanded="true"
+        >Sichern</leu-button
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).dom.to.equal(
+      "<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"] }
+    )
+
+    el.variant = "primary"
+
+    await elementUpdated(el)
+
+    expect(button).dom.to.equal(
+      "<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"] }
+    )
+  })
+
+  it("sets the dissabled attrbiute", async () => {
+    const el = await fixture(
+      html` <leu-button
+        icon="addNew"
+        label="Sichern"
+        variant="ghost"
+        expanded="true"
+        disabled
+      ></leu-button>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.have.attribute("disabled")
+
+    el.disabled = false
+    await elementUpdated(el)
+
+    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>Sichern</leu-button>`)
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+
+    const event = await oneEvent(el, "click")
+
+    expect(event).to.exist
+  })
 })

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

@@ -1,63 +1,99 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
+// @ts-ignore
 import styles from "./button-group.css"
-import { defineButtonElements } from "../button/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 */
+    })
   }
 
-  _setValue(newValue) {
-    this.value = newValue
+  _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)
+    })
 
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        bubbles: true,
-        composed: true,
-        detail: { value: newValue },
-      })
-    )
+    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 */
+    })
+  }
+
+  /**
+   * @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: 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>
     `
   }
 }
-
-export function defineButtonGroupElements() {
-  defineButtonElements()
-  defineElement("button-group", LeuButtonGroup)
-}

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

@@ -1,3 +1,6 @@
-import { defineButtonGroupElements } from "./ButtonGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuButtonGroup } from "./ButtonGroup.js"
 
-defineButtonGroupElements()
+export { LeuButtonGroup }
+
+defineElement("button-group", LeuButtonGroup)

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
@@ -14,24 +15,36 @@ function updateStorybookArgss(id, args) {
 export default {
   title: "ButtonGroup",
   component: "leu-button-group",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=18180-165796&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 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,15 +1,28 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import {
+  fixture,
+  expect,
+  oneEvent,
+  elementUpdated,
+  aTimeout,
+} from "@open-wc/testing"
 
 import "../leu-button-group.js"
+import "../../button/leu-button.js"
 
 async function defaultFixture() {
-  return fixture(html` <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", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-button-group")
+    const el = customElements.get("leu-button-group")
 
     await expect(el).not.to.be.undefined
   })
@@ -17,6 +30,76 @@ 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 () => {
+    const el = await defaultFixture()
+
+    await expect(el.value).to.be.null
+  })
+
+  it("has the correct value after clicking a button", async () => {
+    const el = await defaultFixture()
+
+    const buttons = Array.from(el.querySelectorAll("leu-button"))
+
+    setTimeout(() => buttons[1].click())
+    await oneEvent(el, "input")
+    await expect(el.value).to.equal("Zweierlei")
+
+    setTimeout(() => buttons[0].click())
+    await oneEvent(el, "input")
+    await expect(el.value).to.equal("Eins")
+
+    setTimeout(() => buttons[2].click())
+    await oneEvent(el, "input")
+    await expect(el.value).to.equal("Drei")
+
+    // Should not change after clicking the same button again
+    setTimeout(() => buttons[2].click())
+    await aTimeout(100) // There is no event to wait for so
+    await expect(el.value).to.equal("Drei")
+  })
+
+  it("sets the active attribute on the active button", async () => {
+    const el = await defaultFixture()
+    el.value = "Zweierlei"
+    await elementUpdated(el)
+
+    const buttons = el.querySelectorAll("leu-button")
+
+    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()
+
+    await expect(buttons[0].variant).to.equal("secondary")
+    await expect(buttons[1].variant).to.equal("secondary")
+    await expect(buttons[2].variant).to.equal("secondary")
+  })
+
+  it("sets the menuitemradio role on the buttons", async () => {
+    const el = await defaultFixture()
+    const buttons = el.querySelectorAll("leu-button")
+
+    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 () => {
+    const el = await defaultFixture()
+    el.value = "Drei"
+    await elementUpdated(el)
+
+    const buttons = el.querySelectorAll("leu-button")
+
+    setTimeout(() => buttons[0].click())
+
+    const inputEvent = await oneEvent(el, "input")
+
+    await expect(inputEvent.detail.value).to.be.equal("Eins")
   })
 })

package/src/components/checkbox/Checkbox.js

@@ -1,89 +1,13 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
+
+import styles from "./checkbox.css"
 
 /**
  * @tagname leu-checkbox
  */
 export class LeuCheckbox extends LitElement {
-  static styles = css`
-    :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-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;
-    }
-  `
+  static styles = styles
 
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
@@ -96,6 +20,7 @@ export class LeuCheckbox extends LitElement {
     identifier: { type: String, reflect: true },
     value: { type: String, reflect: true },
     name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
@@ -130,12 +55,8 @@ export class LeuCheckbox extends LitElement {
         ?disabled=${this.disabled}
         .value=${this.value}
       />
-      <label for=${this.identifier} class="label"><slot></slot></label>
+      <label for=${this.identifier} class="label">${this.label}</label>
       <div class="icon">${this.checkIcon}</div>
     `
   }
 }
-
-export function defineCheckboxElements() {
-  defineElement("checkbox", LeuCheckbox)
-}

package/src/components/checkbox/CheckboxGroup.js

@@ -1,45 +1,17 @@
-import { html, css, LitElement } from "lit"
+import { html, LitElement } from "lit"
 import { classMap } from "lit/directives/class-map.js"
-import { defineElement } from "../../lib/defineElement.js"
+
+import styles from "./checkbox-group.css"
 
 /**
  * @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 styles = styles
 
   static properties = {
     orientation: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
@@ -68,13 +40,11 @@ export class LeuCheckboxGroup extends LitElement {
 
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
+        ${this.label
+          ? html`<legend class="legend">${this.label}</legend>`
+          : html``}
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
     `
   }
 }
-
-export function defineCheckboxGroupElements() {
-  defineElement("checkbox-group", LeuCheckboxGroup)
-}