@statistikzh/leu 0.3.0 → 0.4.0

package/src/components/radio/test/radio.test.js

@@ -1,33 +1,25 @@
 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-radio.js"
-import "../leu-radio-group.js"
 
 async function defaultFixture() {
   return fixture(html`
-    <leu-radio-group>
-      <span slot="legend">Legende</span>
-      <leu-radio identifier="1" value="1" name="radio-button" disabled
-        >Kurz</leu-radio
-      >
-      <leu-radio identifier="2" value="2" name="radio-button"
-        >Etwas Länger</leu-radio
-      >
-      <leu-radio identifier="3" value="3" name="radio-button"
-        >Ein langes Label um sicher ein umbruch zu erzwingen</leu-radio
-      >
-    </leu-radio-group>
+    <leu-radio
+      identifier="b"
+      value="3"
+      name="radio-button"
+      label="Ein langes Label um sicher ein umbruch zu erzwingen"
+    ></leu-radio>
   `)
 }
 
 describe("LeuRadio", () => {
   it("is a defined element", async () => {
-    const elRadio = await customElements.get("leu-radio")
-    const elRadioGroup = await customElements.get("leu-radio-group")
+    const elRadio = customElements.get("leu-radio")
 
     await expect(elRadio).not.to.be.undefined
-    await expect(elRadioGroup).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
@@ -35,4 +27,103 @@ describe("LeuRadio", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("is not checked by default", async () => {
+    const el = await defaultFixture()
+
+    expect(el.checked).to.be.false
+  })
+
+  it("sets the checked property when the checkbox", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+  })
+
+  it("sets the checked property when the checkbox", async () => {
+    const el = await defaultFixture()
+    const label = el.shadowRoot.querySelector("label")
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.true
+  })
+
+  it("does not set the checked property when disabled", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+    const label = el.shadowRoot.querySelector("label")
+
+    el.disabled = true
+    await elementUpdated(el)
+
+    checkbox.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.false
+
+    label.click()
+    await elementUpdated(el)
+
+    expect(el.checked).to.be.false
+  })
+
+  it("toggles the checked property when the space key is pressed", async () => {
+    const el = await defaultFixture()
+    el.focus()
+
+    await sendKeys({
+      press: "Space",
+    })
+
+    expect(el.checked).to.be.true
+
+    await sendKeys({
+      press: "Space",
+    })
+
+    expect(el.checked).to.be.true
+  })
+
+  it("fires a change event when clicked", async () => {
+    const el = await defaultFixture()
+    const checkbox = el.shadowRoot.querySelector("input")
+
+    setTimeout(() => checkbox.click())
+    const event = await oneEvent(el, "change")
+
+    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/select/Select.js

@@ -6,12 +6,12 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
-import { defineButtonElements } from "../button/Button.js"
-import { defineMenuElements } from "../menu/Menu.js"
-import { defineMenuItemElements } from "../menu/MenuItem.js"
-import { defineInputElements } from "../input/Input.js"
+import "../button/leu-button.js"
+import "../menu/leu-menu.js"
+import "../menu/leu-menu-item.js"
+import "../input/leu-input.js"
+import "../popup/leu-popup.js"
 
 import styles from "./select.css"
 
@@ -34,7 +34,7 @@ export class LeuSelect extends LitElement {
       disabled: { type: Boolean, reflect: true },
       filterable: { type: Boolean, reflect: true },
       multiple: { type: Boolean, reflect: true },
-      optionFilter: { type: String, state: true },
+      optionFilter: { state: true },
     }
   }
 
@@ -251,17 +251,18 @@ export class LeuSelect extends LitElement {
                 before=${ifDefined(beforeIcon)}
                 @click=${() => this.selectOption(option)}
                 role="option"
+                label=${LeuSelect.getOptionLabel(option)}
                 ?active=${isSelected}
                 aria-selected=${isSelected}
               >
-                ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`
             })
-          : html`<leu-menu-item disabled
-              >${this.optionFilter === ""
+          : html`<leu-menu-item
+              label=${this.optionFilter === ""
                 ? "Keine Optionen"
-                : "Keine Resultate"}</leu-menu-item
-            >`}
+                : "Keine Resultate"}
+              disabled
+            ></leu-menu-item>`}
       </leu-menu>
     `
   }
@@ -274,8 +275,8 @@ export class LeuSelect extends LitElement {
         @input=${this.handleFilterInput}
         clearable
         ref=${ref(this.optionFilterRef)}
-        >Nach Stichwort filtern</leu-input
-      >`
+        label="Nach Stichwort filtern"
+      ></leu-input>`
     }
 
     return nothing
@@ -314,6 +315,7 @@ export class LeuSelect extends LitElement {
       aria-expanded="${this.open}"
       role="combobox"
       ref=${ref(this.toggleButtonRef)}
+      slot="anchor"
     >
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
@@ -346,25 +348,26 @@ export class LeuSelect extends LitElement {
       aria-labelledby="select-label"
       @keydown=${this.handleKeyDown}
     >
-      ${this.renderToggleButton()}
-      <dialog
-        id="select-dialog"
-        class="select-menu-container"
-        ?open=${this.open}
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <slot name="before" class="before"></slot>
-        ${this.renderFilterInput()} ${this.renderMenu()}
-        ${this.renderApplyButton()}
-        <slot name="after" class="after"></slot>
-      </dialog>
+        ${this.renderToggleButton()}
+        <dialog
+          id="select-dialog"
+          class="select-menu-container"
+          ?open=${this.open}
+        >
+          <slot name="before" class="before"></slot>
+          ${this.renderFilterInput()} ${this.renderMenu()}
+          ${this.renderApplyButton()}
+          <slot name="after" class="after"></slot>
+        </dialog>
+      </leu-popup>
     </div> `
   }
 }
-
-export function defineSelectElements() {
-  defineButtonElements()
-  defineMenuElements()
-  defineMenuItemElements()
-  defineInputElements()
-  defineElement("select", LeuSelect)
-}

package/src/components/select/leu-select.js

@@ -1,3 +1,6 @@
-import { defineSelectElements } from "./Select.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuSelect } from "./Select.js"
 
-defineSelectElements()
+export { LeuSelect }
+
+defineElement("select", LeuSelect)

package/src/components/select/select.css

@@ -165,18 +165,22 @@
 }
 
 .select-menu-container {
-  border-radius: 1px;
-  position: absolute;
-  left: 0;
+  position: static;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  background-color: white;
-  border: 0 solid black;
+  max-height: var(--auto-size-available-height);
+
   padding: 0;
   margin: 0;
-  top: calc(100% + 2px);
-  z-index: 10;
+
+  border: none;
+  border-radius: 1px;
+  background-color: white;
   box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-  overflow: auto;
 }
 
 .select-menu {
@@ -184,11 +188,7 @@
   padding: 0;
   margin: 0;
   overflow: auto;
-  max-height: 24rem;
-}
-
-.select-menu.multiple {
-  max-height: 21rem;
+  max-height: 100%;
 }
 
 .before,

package/src/components/select/stories/select.stories.js

@@ -2,10 +2,17 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "../test/fixtures.js"
 
 export default {
-  title: "select",
+  title: "Select",
   component: "leu-select",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 const OPTIONS_EXAMPLES = [
@@ -14,168 +21,6 @@ const OPTIONS_EXAMPLES = [
   "Option 3",
   "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird.",
 ]
-const OPTIONS_MUNICIPALITIES = [
-  "Aeugst am Albis",
-  "Affoltern am Albis",
-  "Bonstetten",
-  "Hausen am Albis",
-  "Hedingen",
-  "Kappel am Albis",
-  "Knonau",
-  "Maschwanden",
-  "Mettmenstetten",
-  "Obfelden",
-  "Ottenbach",
-  "Rifferswil",
-  "Stallikon",
-  "Wettswil am Albis",
-  "Benken (ZH)",
-  "Berg am Irchel",
-  "Buch am Irchel",
-  "Dachsen",
-  "Dorf",
-  "Feuerthalen",
-  "Flaach",
-  "Flurlingen",
-  "Henggart",
-  "Kleinandelfingen",
-  "Laufen-Uhwiesen",
-  "Marthalen",
-  "Ossingen",
-  "Rheinau",
-  "Thalheim an der Thur",
-  "Trüllikon",
-  "Truttikon",
-  "Volken",
-  "Bachenbülach",
-  "Bassersdorf",
-  "Bülach",
-  "Dietlikon",
-  "Eglisau",
-  "Embrach",
-  "Freienstein-Teufen",
-  "Glattfelden",
-  "Hochfelden",
-  "Höri",
-  "Hüntwangen",
-  "Kloten",
-  "Lufingen",
-  "Nürensdorf",
-  "Oberembrach",
-  "Opfikon",
-  "Rafz",
-  "Rorbas",
-  "Wallisellen",
-  "Wasterkingen",
-  "Wil (ZH)",
-  "Winkel",
-  "Bachs",
-  "Boppelsen",
-  "Buchs (ZH)",
-  "Dällikon",
-  "Dänikon",
-  "Dielsdorf",
-  "Hüttikon",
-  "Neerach",
-  "Niederglatt",
-  "Niederhasli",
-  "Niederweningen",
-  "Oberglatt",
-  "Oberweningen",
-  "Otelfingen",
-  "Regensberg",
-  "Regensdorf",
-  "Rümlang",
-  "Schleinikon",
-  "Schöfflisdorf",
-  "Stadel",
-  "Steinmaur",
-  "Weiach",
-  "Bäretswil",
-  "Bubikon",
-  "Dürnten",
-  "Fischenthal",
-  "Gossau (ZH)",
-  "Grüningen",
-  "Hinwil",
-  "Rüti (ZH)",
-  "Seegräben",
-  "Wald (ZH)",
-  "Wetzikon (ZH)",
-  "Adliswil",
-  "Kilchberg (ZH)",
-  "Langnau am Albis",
-  "Oberrieden",
-  "Richterswil",
-  "Rüschlikon",
-  "Thalwil",
-  "Erlenbach (ZH)",
-  "Herrliberg",
-  "Hombrechtikon",
-  "Küsnacht (ZH)",
-  "Männedorf",
-  "Meilen",
-  "Oetwil am See",
-  "Stäfa",
-  "Uetikon am See",
-  "Zumikon",
-  "Zollikon",
-  "Fehraltorf",
-  "Hittnau",
-  "Lindau",
-  "Pfäffikon",
-  "Russikon",
-  "Weisslingen",
-  "Wila",
-  "Wildberg",
-  "Dübendorf",
-  "Egg",
-  "Fällanden",
-  "Greifensee",
-  "Maur",
-  "Mönchaltorf",
-  "Schwerzenbach",
-  "Uster",
-  "Volketswil",
-  "Wangen-Brüttisellen",
-  "Altikon",
-  "Brütten",
-  "Dägerlen",
-  "Dättlikon",
-  "Dinhard",
-  "Ellikon an der Thur",
-  "Elsau",
-  "Hagenbuch",
-  "Hettlingen",
-  "Neftenbach",
-  "Pfungen",
-  "Rickenbach (ZH)",
-  "Schlatt (ZH)",
-  "Seuzach",
-  "Turbenthal",
-  "Winterthur",
-  "Zell (ZH)",
-  "Aesch (ZH)",
-  "Birmensdorf (ZH)",
-  "Dietikon",
-  "Geroldswil",
-  "Oberengstringen",
-  "Oetwil an der Limmat",
-  "Schlieren",
-  "Uitikon",
-  "Unterengstringen",
-  "Urdorf",
-  "Weiningen (ZH)",
-  "Zürich",
-  "Andelfingen",
-  "Stammheim",
-  "Wädenswil",
-  "Elgg",
-  "Horgen",
-  "Illnau-Effretikon",
-  "Bauma",
-  "Wiesendangen",
-]
 
 function Template({
   label,
@@ -189,6 +34,7 @@ function Template({
   after,
 }) {
   return html`
+    <div style="margin-top: 50vh"></div>
     <leu-select
       class="dropdown"
       .options=${options}
@@ -202,6 +48,7 @@ function Template({
       ${before ? html`<div slot="before">${before}</div>` : ""}
       ${after ? html`<div slot="after">${after}</div>` : ""}
     </leu-select>
+    <div style="margin-top: 50vh"></div>
   `
 }
 
@@ -263,7 +110,7 @@ DisabledFilled.args = {
 export const Filterable = Template.bind({})
 Filterable.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -273,7 +120,7 @@ Filterable.args = {
 export const BeforeAfterSlot = TemplateSlots.bind({})
 BeforeAfterSlot.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: false,
@@ -283,7 +130,7 @@ BeforeAfterSlot.args = {
 export const Multiple = Template.bind({})
 Multiple.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -293,8 +140,8 @@ Multiple.args = {
 export const MultipleFilled = Template.bind({})
 MultipleFilled.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
-  value: OPTIONS_MUNICIPALITIES.slice(0, 2),
+  options: MUNICIPALITIES,
+  value: MUNICIPALITIES.slice(0, 2),
   clearable: true,
   disabled: false,
   filterable: true,