@statistikzh/leu 0.2.0 → 0.4.0

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

@@ -1,40 +1,59 @@
 import { html } from "lit"
 import "../leu-radio.js"
 import "../leu-radio-group.js"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
   title: "Radio/Group",
   component: "leu-radio-group",
   argTypes: {
-    legend: { control: "text" },
+    label: { control: "text" },
     orientation: {
       options: ["VERTICAL", "HORIZONTAL"],
       control: { type: "radio" },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
-function Template({ legend, orientation }) {
+function Template({ label, orientation }) {
   return html`
-    <leu-radio-group orientation=${orientation}>
-      <span slot="legend">${legend}</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
+      orientation=${ifDefined(orientation)}
+      label=${ifDefined(label)}
+    >
+      <leu-radio
+        identifier="1"
+        value="1"
+        name="radio-button"
+        label="Kurz"
+        disabled
+      ></leu-radio>
+      <leu-radio
+        identifier="2"
+        value="2"
+        name="radio-button"
+        label="Etwas Länger"
+      ></leu-radio>
+      <leu-radio
+        identifier="3"
+        value="3"
+        name="radio-button"
+        label="Ein langes Label um sicher ein umbruch zu erzwingen"
+      ></leu-radio>
     </leu-radio-group>
   `
 }
 
 export const Horizontal = Template.bind({})
-export const HorizontalLegend = Template.bind({})
-HorizontalLegend.args = {
-  legend: "Anrede",
+export const HorizontalLabel = Template.bind({})
+HorizontalLabel.args = {
+  label: "Anrede",
 }
 
 export const Vertical = Template.bind({})
@@ -42,8 +61,8 @@ Vertical.args = {
   orientation: "VERTICAL",
 }
 
-export const VerticalLegend = Template.bind({})
-VerticalLegend.args = {
+export const VerticalLabel = Template.bind({})
+VerticalLabel.args = {
   orientation: "VERTICAL",
-  legend: "Anrede",
+  label: "Anrede",
 }

package/src/components/radio/stories/radio.stories.js

@@ -9,6 +9,12 @@ export default {
       control: "text",
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81935&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template({
@@ -23,8 +29,8 @@ function Template({
       ?checked=${checked}
       ?disabled=${disabled}
       identifier=${"radio-1"}
+      label=${label}
     >
-      ${label}
     </leu-radio>
   `
 }

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

@@ -0,0 +1,86 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-radio.js"
+import "../leu-radio-group.js"
+
+async function defaultFixture(args = {}) {
+  return fixture(html`
+    <leu-radio-group>
+      <span slot="legend">Legende</span>
+      <leu-radio
+        identifier="1"
+        value="1"
+        name="radio-button"
+        disabled
+        label="Kurz"
+        ?checked=${args.checkedValue === "1"}
+      ></leu-radio>
+      <leu-radio
+        identifier="2"
+        value="2"
+        name="radio-button"
+        label="Etwas Länger"
+        ?checked=${args.checkedValue === "2"}
+      ></leu-radio>
+      <leu-radio
+        identifier="3"
+        value="3"
+        name="radio-button"
+        label="Ein langes Label um sicher ein umbruch zu erzwingen"
+        ?checked=${args.checkedValue === "3"}
+      ></leu-radio>
+    </leu-radio-group>
+  `)
+}
+
+describe("LeuRadio", () => {
+  it("is a defined element", async () => {
+    const elRadioGroup = customElements.get("leu-radio-group")
+
+    await expect(elRadioGroup).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("has an empty default value", async () => {
+    const el = await defaultFixture()
+
+    expect(el.value).to.equal("")
+  })
+
+  it("updates the value when a radio button is checked", async () => {
+    const el = await defaultFixture()
+    const leuRadio = el.querySelector('leu-radio[value="2"]')
+    const radio = leuRadio.shadowRoot.querySelector("input")
+
+    radio.click()
+
+    expect(el.value).to.equal("2")
+  })
+
+  it("doesn't allow multiple radio buttons to be checked", async () => {
+    const el = await defaultFixture()
+    const leuRadio2 = el.querySelector('leu-radio[value="2"]')
+    const leuRadio3 = el.querySelector('leu-radio[value="3"]')
+    const radio2 = leuRadio2.shadowRoot.querySelector("input")
+    const radio3 = leuRadio3.shadowRoot.querySelector("input")
+
+    radio2.click()
+    radio3.click()
+
+    expect(el.value).to.equal("3")
+    expect(leuRadio2.checked).to.be.false
+    expect(leuRadio3.checked).to.be.true
+  })
+
+  it("has a default value that reflects the checked radio button", async () => {
+    const el = await defaultFixture({ checkedValue: "2" })
+
+    expect(el.value).to.deep.equal("2")
+  })
+})

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"
 
@@ -27,14 +27,14 @@ export class LeuSelect extends LitElement {
     return {
       open: { type: Boolean, attribute: "open" },
 
-      label: { type: String },
+      label: { type: String, reflect: true },
       options: { type: Array },
       value: { type: Array },
       clearable: { type: Boolean, reflect: true },
       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,