@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/pagination/test/pagination.test.js

@@ -1,22 +1,208 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { sendKeys } from "@web/test-runner-commands"
+import { spy } from "sinon"
 
 import "../leu-pagination.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-pagination></leu-button>`)
+async function defaultFixture(args = {}) {
+  return fixture(html`<leu-pagination
+    numOfItems=${ifDefined(args.numOfItems)}
+    itemsPerPage=${ifDefined(args.itemsPerPage)}
+    defaultPage=${ifDefined(args.defaultPage)}
+  >
+  </leu-pagination>`)
 }
 
 describe("LeuPagination", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-pagination")
+    const el = customElements.get("leu-pagination")
 
     await expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 1,
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("disables the previous button on the first page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 1,
+    })
+
+    const previous = el.shadowRoot.querySelectorAll("leu-button")[0]
+
+    expect(previous).to.have.attribute("disabled")
+  })
+
+  it("disables the next button on the last page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 14,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    expect(next).to.have.attribute("disabled")
+  })
+
+  it("renders the correct number of available pages", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 1,
+    })
+
+    const label = el.shadowRoot.querySelectorAll(".label")
+
+    expect(label).to.have.trimmed.text("von 14")
+  })
+
+  it("displays the current page", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 2,
+    })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(input.value).to.equal("2")
+  })
+
+  it("increments the page with a click on the next button", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 1,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    next.click()
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(2)
+  })
+
+  it("decrements the page with a click on the prev button", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 10,
+    })
+
+    const next = el.shadowRoot.querySelectorAll("leu-button")[0]
+
+    next.click()
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(9)
+  })
+
+  it("increments the page with pressing the arrow up key", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 1,
+    })
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowUp",
+    })
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(2)
+  })
+
+  it("decrements the page with pressing the arrow down key", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      defaultPage: 13,
+    })
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowDown",
+    })
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(12)
+  })
+
+  it("bounds the page to the max and min values", async () => {
+    const el = await defaultFixture({
+      numOfItems: 50,
+      itemsPerPage: 10,
+      defaultPage: 6,
+    })
+
+    const input = el.shadowRoot.querySelector("input")
+
+    expect(el.page).to.equal(5)
+    expect(input.value).to.equal("5")
+
+    el.page = 0
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(1)
+    expect(input.value).to.equal("1")
+
+    el.focus()
+
+    await sendKeys({
+      press: "ArrowDown",
+    })
+    await elementUpdated(el)
+
+    expect(el.page).to.equal(1)
+    expect(input.value).to.equal("1")
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowUp" })
+
+    expect(el.page).to.equal(5)
+    expect(input.value).to.equal("5")
+  })
+
+  it("fires a leu:pagechange event", async () => {
+    const el = await defaultFixture({
+      numOfItems: 98,
+      itemsPerPage: 7,
+      page: 14,
+    })
+
+    const eventSpy = spy()
+    el.addEventListener("leu:pagechange", eventSpy)
+
+    const prevButton = el.shadowRoot.querySelectorAll("leu-button")[0]
+    const nextButton = el.shadowRoot.querySelectorAll("leu-button")[1]
+
+    nextButton.click()
+    prevButton.click()
+
+    el.focus()
+
+    await sendKeys({ press: "ArrowUp" })
+    await sendKeys({ press: "ArrowDown" })
+
+    expect(eventSpy).to.have.been.called.callCount(4)
+  })
 })

package/src/components/popup/Popup.js

@@ -0,0 +1,200 @@
+import { html, LitElement } from "lit"
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  shift,
+  size,
+} from "@floating-ui/dom"
+import styles from "./popup.css"
+
+/**
+ * @tagname leu-popup
+ */
+export class LeuPopup extends LitElement {
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    anchor: {},
+    active: { type: Boolean },
+    /**
+     * @type {"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"left"|"left-start"|"left-end"|"right"|"right-start"|"right-end"}
+     */
+    placement: { type: String },
+    flip: { type: Boolean },
+    shift: { type: Boolean },
+    shiftPadding: { type: Number },
+    /** @type {"width" | "height" | "both"} */
+    matchSize: { type: String },
+    /** @type {"width" | "height" | "both"} */
+    autoSize: { type: String },
+    autoSizePadding: { type: Number },
+  }
+
+  constructor() {
+    super()
+
+    this.anchorEl = null
+    this.cleanup = undefined
+    this.flip = false
+    this.shift = false
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.stop()
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("active")) {
+      if (this.active) {
+        this.start()
+      } else {
+        this.stop()
+      }
+    }
+
+    if (changedProperties.has("anchor")) {
+      this.handleAnchorChange()
+    }
+
+    if (this.active) {
+      this.reposition()
+    }
+  }
+
+  get popupEl() {
+    return this.renderRoot?.querySelector(".popup") ?? null
+  }
+
+  start() {
+    if (!this.anchorEl || !this.active) return
+
+    this.cleanup = autoUpdate(this.anchorEl, this.popupEl, () => {
+      this.reposition()
+    })
+  }
+
+  stop() {
+    this.cleanup?.()
+
+    this.style.removeProperty("--auto-size-available-width")
+    this.style.removeProperty("--auto-size-available-height")
+  }
+
+  reposition() {
+    if (!this.anchorEl || !this.popupEl || !this.active) return
+
+    const middleware = []
+
+    if (this.matchSize) {
+      middleware.push(
+        size({
+          apply: ({ rects }) => {
+            const matchWidth =
+              this.matchSize === "width" || this.matchSize === "both"
+            const matchHeight =
+              this.matchSize === "height" || this.matchSize === "both"
+            this.popupEl.style.width = matchWidth
+              ? `${rects.reference.width}px`
+              : ""
+            this.popupEl.style.height = matchHeight
+              ? `${rects.reference.height}px`
+              : ""
+          },
+        })
+      )
+    } else {
+      // Cleanup styles if we're not matching width/height
+      this.popupEl.style.width = ""
+      this.popupEl.style.height = ""
+    }
+
+    if (this.flip) {
+      middleware.push(flip())
+    }
+
+    if (this.shift) {
+      middleware.push(shift({ padding: this.shiftPadding }))
+    }
+
+    if (this.autoSize) {
+      middleware.push(
+        size({
+          padding: this.autoSizePadding,
+          apply: ({ availableWidth, availableHeight }) => {
+            const setMaxWidth =
+              this.autoSize === "width" || this.autoSize === "both"
+            const setMaxHeight =
+              this.autoSize === "height" || this.autoSize === "both"
+
+            if (setMaxHeight) {
+              this.style.setProperty(
+                "--auto-size-available-height",
+                `${availableHeight}px`
+              )
+            } else {
+              this.style.removeProperty("--auto-size-available-height")
+            }
+
+            if (setMaxWidth) {
+              this.style.setProperty(
+                "--auto-size-available-width",
+                `${availableWidth}px`
+              )
+            } else {
+              this.style.removeProperty("--auto-size-available-width")
+            }
+          },
+        })
+      )
+    } else {
+      // Cleanup styles if we're not auto-sizing
+      this.style.removeProperty("--auto-size-available-width")
+      this.style.removeProperty("--auto-size-available-height")
+    }
+
+    computePosition(this.anchorEl, this.popupEl, {
+      placement: this.placement,
+      middleware,
+    }).then(({ x, y }) => {
+      Object.assign(this.popupEl.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+    })
+  }
+
+  handleAnchorChange() {
+    if (this.anchor && typeof this.anchor === "string") {
+      const root = this.getRootNode()
+      this.anchorEl = root.getElementById(this.anchor)
+    } else if (this.anchor instanceof HTMLElement) {
+      this.anchorEl = this.anchor
+    } else {
+      this.anchorEl = this.querySelector("[slot=anchor]")
+    }
+
+    if (this.anchorEl instanceof HTMLSlotElement) {
+      ;[this.anchorEl] = this.anchorEl.assignedElements({ flatten: true })
+    }
+
+    if (this.anchorEl) {
+      this.start()
+    }
+  }
+
+  render() {
+    return html`
+      <slot name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <div class="popup">
+        <slot> </slot>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuPopup } from "./Popup.js"
+
+export { LeuPopup }
+
+defineElement("popup", LeuPopup)

package/src/components/popup/popup.css

@@ -0,0 +1,27 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --popup-font-regular: var(--leu-font-family-regular);
+  --popup-font-black: var(--leu-font-family-black);
+
+  font-family: var(--popup-font-regular);
+}
+
+.popup {
+  display: none;
+
+  max-width: var(--auto-size-available-width, none);
+  max-height: var(--auto-size-available-height, none);
+
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+/* TODO: Should visibility be a matter of the popup component? */
+:host([active]) .popup {
+  display: block;
+}

package/src/components/popup/stories/popup.stories.js

@@ -0,0 +1,58 @@
+import { html } from "lit"
+import { styleMap } from "lit/directives/style-map.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+import "../leu-popup.js"
+import "../../button/leu-button.js"
+
+export default {
+  title: "Popup",
+  component: "leu-popup",
+  argTypes: {
+    placement: {
+      control: {
+        type: "select",
+      },
+      options: [
+        "top",
+        "top-start",
+        "top-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+        "right",
+        "right-start",
+        "right-end",
+      ],
+    },
+  },
+}
+
+const popupStyles = {
+  background: "white",
+  border: "1px solid var(--leu-color-black-40)",
+  padding: "0.5rem",
+  boxShadow: "var(--leu-box-shadow-regular)",
+}
+
+function Template(args = {}) {
+  return html`<leu-popup
+    ?active=${args.active}
+    ?flip=${args.flip}
+    ?shift=${args.shift}
+    placement=${ifDefined(args.placement)}
+  >
+    <leu-button slot="anchor">Open popup</leu-button>
+    <div style=${styleMap(popupStyles)}>Popup content</div>
+  </leu-popup>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  active: true,
+  placement: "bottom-start",
+  flip: true,
+  shift: true,
+}

package/src/components/popup/test/popup.test.js

@@ -0,0 +1,29 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-popup.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`
+      <leu-popup
+        ><div slot="anchor"></div>
+        <p>Popup content</p></leu-popup
+      >
+    `
+  )
+}
+
+describe("LeuPopup", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-popup")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/radio/Radio.js

@@ -1,5 +1,4 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./radio.css"
 
 /**
@@ -19,6 +18,7 @@ export class LeuRadio extends LitElement {
     identifier: { type: String, reflect: true },
     value: { type: String, reflect: true },
     name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
   }
 
   constructor() {
@@ -51,11 +51,7 @@ export class LeuRadio 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>
     `
   }
 }
-
-export function defineRadioElements() {
-  defineElement("radio", LeuRadio)
-}

package/src/components/radio/RadioGroup.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 "./radio-group.css"
 
 /**
  * @tagname leu-radio-group
  */
 export class LeuRadioGroup 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() {
@@ -181,13 +153,9 @@ export class LeuRadioGroup extends LitElement {
 
     return html`
       <fieldset class=${classMap(fieldsetClasses)}>
-        <legend class="legend"><slot name="legend"></slot></legend>
+        <legend class="legend">${this.label}</legend>
         <slot @slotchange=${this.handleSlotChange}></slot>
       </fieldset>
     `
   }
 }
-
-export function defineRadioGroupElements() {
-  defineElement("radio-group", LeuRadioGroup)
-}

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

@@ -1,3 +1,6 @@
-import { defineRadioGroupElements } from "./RadioGroup.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuRadioGroup } from "./RadioGroup.js"
 
-defineRadioGroupElements()
+export { LeuRadioGroup }
+
+defineElement("radio-group", LeuRadioGroup)

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

@@ -1,3 +1,6 @@
-import { defineRadioElements } from "./Radio.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuRadio } from "./Radio.js"
 
-defineRadioElements()
+export { LeuRadio }
+
+defineElement("radio", LeuRadio)

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

@@ -0,0 +1,29 @@
+:host {
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-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;
+}

package/src/components/radio/radio.css

@@ -6,7 +6,7 @@
   --radio-label-color: var(--leu-color-black-100);
   --radio-label-color-disabled: var(--radio-color-disabled);
 
-  --radio-font-regular: var(--leu-font-regular);
+  --radio-font-regular: var(--leu-font-family-regular);
 
   display: inline-flex;
   align-items: flex-start;