@statistikzh/leu 0.4.0 → 0.5.1

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);
 }

package/src/components/chip/chip.css

@@ -20,8 +20,8 @@
   --chip-radio-background-default: var(--leu-color-black-0);
   --chip-radio-background-selected: var(--leu-color-func-cyan);
 
-  --chip-font-regular: var(--leu-font-regular);
-  --chip-font-black: var(--leu-font-black);
+  --chip-font-regular: var(--leu-font-family-regular);
+  --chip-font-black: var(--leu-font-family-black);
 
   --chip-background-color: var(--chip-background-color-default);
   --chip-color: var(--chip-color-default);
@@ -29,6 +29,9 @@
   --chip-radio-background: var(--chip-radio-background-default);
 
   font-family: var(--chip-font-regular);
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
 }
 
 :host([inverted]) {
@@ -61,8 +64,11 @@
   cursor: pointer;
 
   display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+  max-width: 100%;
 }
 
 .button:hover,
@@ -109,6 +115,7 @@
 
 :host([variant="radio"]) .button::before {
   content: "";
+  flex: 0 0 1rem;
   width: 1rem;
   height: 1rem;
   background-color: var(--chip-radio-background);
@@ -123,6 +130,10 @@
 .label {
   position: relative;
   top: -0.0625rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon svg {

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

@@ -1,7 +1,10 @@
 import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { styleMap } from "lit/directives/style-map.js"
 
 import "../leu-chip-selectable.js"
 import "../leu-chip-removable.js"
+import "../leu-chip-link.js"
 import "../leu-chip-group.js"
 
 import { SELECTION_MODES } from "../ChipGroup.js"
@@ -15,7 +18,13 @@ export default {
       control: "select",
       options: Object.values(SELECTION_MODES),
     },
-    inverted: { control: "boolean" },
+    headingLevel: {
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
+    },
+    "--leu-chip-group-gap": {
+      control: "text",
+    },
   },
   args: {
     selectionMode: "",
@@ -32,73 +41,115 @@ export default {
   },
 }
 
-const chips = ["Chip 1", "Chip 2", "Chip 3"]
+const chips = [
+  "Chip mit einem sehr langen Text der dann hoffentlich mal abgeschnitten wird",
+  "Chip 2",
+  "Chip 3",
+]
 
-function invertedBackground(args, content) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
-      data-root
+const links = [
+  "Steuererklärung",
+  "Abstimmungen",
+  "Zentrale Aufnahmeprüfung",
+  "Pass & Identitätskarte",
+  "Arbeiten beim Kanton",
+]
+
+function invertedBackground({ args, content }) {
+  return {
+    content: html`
+      <div
+        style="background: ${args.inverted
+          ? "hsla(209, 83%, 59%, 1)"
+          : "var(--leu-color-black-5)"}; padding: 1rem;"
+        data-root
+      >
+        ${content}
+      </div>
+    `,
+    args,
+  }
+}
+
+function chipGroup({ args, content }) {
+  const styles = {
+    "--leu-chip-group-gap": args["--leu-chip-group-gap"],
+  }
+
+  const nextContent = html`
+    <leu-chip-group
+      style=${styleMap(styles)}
+      selection-mode=${ifDefined(args.selectionMode)}
+      heading-level=${ifDefined(args.headingLevel)}
+      label=${ifDefined(args.label)}
+      ?inverted=${args.inverted}
     >
       ${content}
-    </div>
+    </leu-chip-group>
   `
+
+  return { args, content: nextContent }
 }
 
 function DefaultTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
-          </leu-chip-removable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-removable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function SingleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable
-            ?inverted=${args.inverted}
-            variant=${SELECTABLE_VARIANTS.radio}
-            value="chip-${chip}"
-            label=${chip}
-          >
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          variant=${SELECTABLE_VARIANTS.radio}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function MultipleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable
-            ?inverted=${args.inverted}
-            value="chip-${chip}"
-            label=${chip}
-          >
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
+}
+
+function LabeledTemplate(args) {
+  const content = html`
+    ${links.map(
+      (chip) => html`
+        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-link>
+      `
+    )}
+  `
+
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 export const Default = DefaultTemplate.bind({})
@@ -109,3 +160,6 @@ Single.args = { selectionMode: SELECTION_MODES.single }
 
 export const Multiple = MultipleTemplate.bind({})
 Multiple.args = { selectionMode: SELECTION_MODES.multiple }
+
+export const Labeled = LabeledTemplate.bind({})
+Labeled.args = { label: "Top Themen" }

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

@@ -4,7 +4,7 @@ import { sendKeys } from "@web/test-runner-commands"
 
 import { iconPaths } from "../../icon/icon.js"
 
-import "../leu-chip-group.js"
+import "../leu-chip-removable.js"
 
 async function defaultFixture() {
   return fixture(
@@ -62,7 +62,7 @@ describe("LeuChipRemovable", () => {
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())
-    const event = await oneEvent(el, "remove")
+    const event = await oneEvent(el, "leu:remove")
 
     expect(event).to.exist
   })
@@ -72,7 +72,7 @@ describe("LeuChipRemovable", () => {
 
     el.focus()
     setTimeout(() => sendKeys({ press: "Enter" }))
-    const event = await oneEvent(el, "remove")
+    const event = await oneEvent(el, "leu:remove")
 
     expect(event).to.exist
   })

package/src/components/dropdown/Dropdown.js

@@ -25,9 +25,29 @@ export class LeuDropdown extends LitElement {
     this.menuItems = []
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("keyup", this._keyUpHandler)
+    document.addEventListener("click", this._documentClickHandler)
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback()
     this._removeMenuItemListeners()
+    this.removeEventListener("keyup", this._keyUpHandler)
+    document.removeEventListener("click", this._documentClickHandler)
+  }
+
+  _documentClickHandler = (event) => {
+    if (!this.contains(event.target)) {
+      this.expanded = false
+    }
+  }
+
+  _keyUpHandler(event) {
+    if (event.key === "Escape") {
+      this.expanded = false
+    }
   }
 
   _handleSlotChange() {
@@ -64,16 +84,17 @@ export class LeuDropdown extends LitElement {
         autoSizePadding="8"
       >
         <leu-button
+          class="button"
           slot="anchor"
           icon="download"
           variant="ghost"
-          label=${this.label}
-          expanded=${this.expanded ? "open" : "closed"}
+          expanded=${this.expanded ? "true" : "false"}
           aria-expanded=${this.expanded ? "true" : "false"}
           aria-controls="content"
           ?active=${this.expanded}
           @click=${this._handleToggleClick}
-        ></leu-button>
+          >${this.label}</leu-button
+        >
         <div id="content" class="content" ?hidden=${!this.expanded}>
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>

package/src/components/dropdown/dropdown.css

@@ -14,3 +14,7 @@
 
   margin-top: 0.5rem;
 }
+
+.button {
+  max-width: 100%;
+}

package/src/components/input/Input.js

@@ -56,6 +56,7 @@ const VALIDATION_MESSAGES = {
  * @prop {string} maxlength - The maximum length of the input element.
  * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
  * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
  *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
@@ -91,12 +92,13 @@ export class LeuInput extends LitElement {
     /* Validation attributes */
     pattern: { type: String, reflect: true },
     type: { type: String, reflect: true },
-    min: { type: Number, reflect: true },
-    max: { type: Number, reflect: true },
-    maxlength: { type: Number, reflect: true },
-    minlength: { type: Number, reflect: true },
+    min: { type: String, reflect: true },
+    max: { type: String, reflect: true },
+    maxlength: { type: String, reflect: true },
+    minlength: { type: String, reflect: true },
     validationMessages: { type: Object },
     novalidate: { type: Boolean, reflect: true },
+    step: { type: String, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },
@@ -407,6 +409,7 @@ export class LeuInput extends LitElement {
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
+          step=${ifDefined(this.step)}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />

package/src/components/input/input.css

@@ -26,8 +26,8 @@
 
   --input-clear-color: var(--leu-color-black-60);
 
-  --input-font-regular: var(--leu-font-regular);
-  --input-font-black: var(--leu-font-black);
+  --input-font-regular: var(--leu-font-family-regular);
+  --input-font-black: var(--leu-font-family-black);
 
   display: block;
   font-family: var(--input-font-regular);