@statistikzh/leu 0.3.0 → 0.4.0

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-regular);
+  --popup-font-black: var(--leu-font-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" label="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-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;
+}

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")
+  })
+})