@statistikzh/leu 0.0.2

package/src/components/pagination/pagination.css

@@ -0,0 +1,49 @@
+:host {
+  margin-top: 16px;
+  display: flex;
+  justify-content: end;
+  font-family: var(--leu-font-regular);
+}
+
+.input {
+  width: 50px;
+  padding: 0;
+  border: 2px solid var(--leu-color-black-40);
+  border-radius: 2px;
+  color: var(--leu-color-black-transp-60);
+  text-align: center;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  outline-offset: 2px;
+}
+
+/* no arrows: Chrome, Safari, Edge, Opera */
+.input::-webkit-outer-spin-button,
+.input::-webkit-inner-spin-button {
+  appearance: none;
+  margin: 0;
+}
+
+/* no arrows: Firefox */
+.input[type="number"] {
+  appearance: textfield;
+}
+
+.input:focus,
+.input:hover {
+  border-color: var(--leu-color-func-cyan);
+  outline: none;
+}
+
+.input:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+}
+
+.label {
+  margin: 0 16px;
+  line-height: 50px;
+  color: var(--leu-color-black-transp-60);
+  white-space: nowrap;
+}

package/src/components/pagination/stories/pagination.stories.js

@@ -0,0 +1,82 @@
+import { html } from "lit"
+import "../leu-pagination.js"
+
+// https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
+import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+function updateStorybookArgss(id, args) {
+  const channel = window.__STORYBOOK_ADDONS_CHANNEL__
+  channel.emit(UPDATE_STORY_ARGS, {
+    storyId: id,
+    updatedArgs: args,
+  })
+}
+
+const items = [
+  { id: 1, label: "Ananas", value: 7 },
+  { id: 2, label: "Apfel", value: 12 },
+  { id: 3, label: "Aprikose", value: 3 },
+  { id: 4, label: "Banare", value: 11 },
+  { id: 5, label: "Birne", value: 10 },
+  { id: 6, label: "Brombeere", value: 5 },
+  { id: 7, label: "Cranberries", value: 3 },
+  { id: 8, label: "Datteln", value: 2 },
+  { id: 9, label: "Erdbeere", value: 0 },
+  { id: 10, label: "Feige", value: 11 },
+  { id: 11, label: "Granatapfel", value: 14 },
+  { id: 12, label: "Grapefruit", value: 7 },
+  { id: 13, label: "Heidelbeere", value: 12 },
+  { id: 14, label: "Himbeere", value: 3 },
+  { id: 15, label: "Johannisbeere", value: 11 },
+  { id: 16, label: "Kirsche", value: 10 },
+  { id: 17, label: "Kiwi", value: 5 },
+  { id: 18, label: "Limette", value: 3 },
+  { id: 19, label: "Litschi", value: 2 },
+  { id: 20, label: "Mandarine", value: 0 },
+  { id: 21, label: "Mango", value: 11 },
+  { id: 22, label: "Melone", value: 14 },
+  { id: 23, label: "Mirabelle", value: 14 },
+  { id: 24, label: "Nashi", value: 12 },
+  { id: 25, label: "Orange", value: 3 },
+  { id: 26, label: "Papaya", value: 6 },
+  { id: 27, label: "Pfirsich", value: 5 },
+  { id: 28, label: "Pflaume", value: 17 },
+  { id: 29, label: "Physalis", value: 1 },
+  { id: 30, label: "Preiselbeere", value: 19 },
+  { id: 31, label: "Pomelo", value: 12 },
+  { id: 32, label: "Quitte", value: 0 },
+  { id: 33, label: "Rhabarber", value: 1 },
+  { id: 34, label: "Sanddorn", value: 2 },
+  { id: 35, label: "Stachelbeere", value: 19 },
+  { id: 36, label: "Ugli", value: 9 },
+  { id: 37, label: "Weintraube", value: 11 },
+  { id: 38, label: "Zitrone", value: 4 },
+  { id: 39, label: "Zwetschge", value: 20 },
+]
+
+export default {
+  title: "Pagination",
+  component: "leu-pagination",
+}
+
+function Template({ min, max }, { id }) {
+  return html`
+    ${items.slice(min, max).map((item) => html`<div>${item.label}</div>`)}
+    <leu-pagination
+      dataLength=${items.length}
+      itemsOnAPage="5"
+      @range-updated=${(e) => {
+        updateStorybookArgss(id, {
+          min: e.detail.min,
+          max: e.detail.max,
+        })
+      }}
+    >
+    </leu-pagination>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  min: 0,
+  max: 5,
+}

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

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-pagination.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-pagination></leu-button>`)
+}
+
+describe("LeuPagination", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-pagination")
+
+    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

@@ -0,0 +1,62 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./radio.css"
+
+/**
+ * @tagname leu-radio
+ */
+export class LeuRadio extends LitElement {
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    checked: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    identifier: { type: String },
+    value: { type: String },
+    name: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.checked = false
+    this.disabled = false
+    this.tabIndex = 0
+  }
+
+  handleChange(event) {
+    this.checked = event.target.checked
+
+    const customEvent = new CustomEvent(event.type, event)
+    this.dispatchEvent(customEvent)
+  }
+
+  handleInput(event) {
+    this.checked = event.target.checked
+  }
+
+  render() {
+    return html`
+      <input
+        id=${this.identifier}
+        class="radio"
+        type="radio"
+        name="${this.name}"
+        @change=${this.handleChange}
+        @input=${this.handleInput}
+        .checked=${this.checked}
+        ?disabled=${this.disabled}
+        .value=${this.value}
+      />
+      <label for=${this.identifier} class="label"><slot></slot></label>
+    `
+  }
+}
+
+export function defineRadioElements() {
+  defineElement("radio", LeuRadio)
+}

package/src/components/radio/RadioGroup.js

@@ -0,0 +1,193 @@
+import { html, css, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+import { defineElement } from "../../lib/defineElement.js"
+
+/**
+ * @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 properties = {
+    orientation: { type: String },
+  }
+
+  constructor() {
+    super()
+    this.orientation = "HORIZONTAL"
+    this._currentIndex = 0
+    this.items = []
+  }
+
+  get value() {
+    const checkedValues = this.items
+      .filter((i) => i.checked)
+      .map((i) => i.value)
+    return checkedValues.length > 0 ? checkedValues[0] : ""
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.handleItems()
+    this.addEventListeners()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListeners()
+  }
+
+  addEventListeners() {
+    this.addEventListener("input", this.handleInput)
+    this.addEventListener("focusin", this.handleFocusIn)
+    this.addEventListener("keydown", this.handleKeyDown)
+  }
+
+  removeEventListeners() {
+    this.removeEventListener("input", this.handleInput)
+    this.removeEventListener("focusin", this.handleFocusIn)
+    this.removeEventListener("keydown", this.handleKeyDown)
+  }
+
+  handleSlotChange() {
+    this.handleItems()
+  }
+
+  handleFocusIn = (e) => {
+    this._currentIndex = this.items.indexOf(e.target)
+  }
+
+  handleKeyDown = (e) => {
+    const currentIndex = this.items.indexOf(e.target)
+
+    switch (e.key) {
+      case "ArrowUp":
+      case "ArrowLeft":
+        this.selectNextItem(currentIndex, -1)
+        break
+      case "ArrowDown":
+      case "ArrowRight":
+        this.selectNextItem(currentIndex, 1)
+        break
+      case "Home":
+        this.selectItem(this.items.find((item) => !item.disabled))
+        break
+      case "End":
+        this.selectItem(this.items.findLast((item) => !item.disabled))
+        break
+      default:
+    }
+
+    this.setTabIndex()
+  }
+
+  handleInput = (e) => {
+    if (e.target.checked) {
+      this.items
+        .filter((item) => item !== e.target)
+        .forEach((item) => {
+          item.checked = false // eslint-disable-line no-param-reassign
+        })
+    }
+  }
+
+  selectItem(selectingItem) {
+    this.items.forEach((item) => {
+      item.checked = item === selectingItem // eslint-disable-line no-param-reassign
+    })
+  }
+
+  selectNextItem(startingIndex, direction) {
+    let selected = false
+
+    for (let index = 0; index < this.items.length; index += 1) {
+      const currentIndex =
+        (this.items.length + index * direction + startingIndex + direction) %
+        this.items.length
+      const currentItem = this.items[currentIndex]
+
+      if (!selected && !currentItem.disabled) {
+        currentItem.checked = true
+        currentItem.focus()
+        selected = true
+      } else if (selected) {
+        currentItem.checked = false
+      }
+    }
+  }
+
+  setTabIndex() {
+    this.items.forEach((item, index) => {
+      if (index === this._currentIndex) {
+        item.tabIndex = "0" // eslint-disable-line no-param-reassign
+      } else {
+        item.tabIndex = "-1" // eslint-disable-line no-param-reassign
+      }
+    })
+  }
+
+  handleItems() {
+    this.items = [...this.querySelectorAll(":scope > *:not([slot])")]
+    this.initializeIndex()
+    this.setTabIndex()
+  }
+
+  initializeIndex() {
+    const index = this.items.findIndex(
+      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled")
+    )
+    const nextEnabledIndex = this.items.findIndex(
+      (item) => !item.hasAttribute("disabled")
+    )
+
+    this._currentIndex = index >= 0 ? index : nextEnabledIndex
+  }
+
+  render() {
+    const fieldsetClasses = {
+      fieldset: "true",
+      "fieldset--vertical": this.orientation === "VERTICAL",
+    }
+
+    return html`
+      <fieldset class=${classMap(fieldsetClasses)}>
+        <legend class="legend"><slot name="legend"></slot></legend>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </fieldset>
+    `
+  }
+}
+
+export function defineRadioGroupElements() {
+  defineElement("radio-group", LeuRadioGroup)
+}

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

@@ -0,0 +1,3 @@
+import { defineRadioGroupElements } from "./RadioGroup.js"
+
+defineRadioGroupElements()

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

@@ -0,0 +1,3 @@
+import { defineRadioElements } from "./Radio.js"
+
+defineRadioElements()

package/src/components/radio/radio.css

@@ -0,0 +1,76 @@
+:host {
+  --radio-color: var(--leu-color-black-40);
+  --radio-color-disabled: var(--leu-color-black-20);
+  --radio-color-focus: var(--leu-color-func-cyan);
+
+  --radio-label-color: var(--leu-color-black-100);
+  --radio-label-color-disabled: var(--radio-color-disabled);
+
+  --radio-font-regular: var(--leu-font-regular);
+
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+
+  font-family: var(--radio-font-regular);
+}
+
+.radio {
+  --_length: 1.5rem;
+  appearance: none;
+  cursor: pointer;
+
+  width: var(--_length);
+  height: var(--_length);
+  margin: 0;
+
+  border: 2px solid var(--radio-color);
+  border-radius: 50%;
+
+  flex: 1 0 var(--_length);
+
+  display: grid;
+  place-items: center;
+}
+
+.radio::before {
+  content: "";
+  width: 0.75rem;
+  height: 0.75rem;
+
+  border-radius: 50%;
+  background-color: var(--radio-color);
+
+  transform: scale(0);
+}
+
+.radio:checked::before {
+  transform: scale(1);
+}
+
+.radio:is(:hover, :checked, :focus) {
+  --radio-color: var(--radio-color-focus);
+}
+
+.radio:focus-visible {
+  outline: 2px solid var(--radio-color-focus);
+  outline-offset: 2px;
+}
+
+.radio:disabled {
+  --radio-color: var(--radio-color-disabled);
+  cursor: not-allowed;
+}
+
+.label {
+  cursor: pointer;
+
+  color: var(--radio-label-color);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.radio:disabled + .label {
+  --radio-label-color: var(--radio-label-color-disabled);
+  cursor: not-allowed;
+}

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

@@ -0,0 +1,49 @@
+import { html } from "lit"
+import "../leu-radio.js"
+import "../leu-radio-group.js"
+
+export default {
+  title: "Radio/Group",
+  component: "leu-radio-group",
+  argTypes: {
+    legend: { control: "text" },
+    orientation: {
+      options: ["VERTICAL", "HORIZONTAL"],
+      control: { type: "radio" },
+    },
+  },
+}
+
+function Template({ legend, 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>
+  `
+}
+
+export const Horizontal = Template.bind({})
+export const HorizontalLegend = Template.bind({})
+HorizontalLegend.args = {
+  legend: "Anrede",
+}
+
+export const Vertical = Template.bind({})
+Vertical.args = {
+  orientation: "VERTICAL",
+}
+
+export const VerticalLegend = Template.bind({})
+VerticalLegend.args = {
+  orientation: "VERTICAL",
+  legend: "Anrede",
+}

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

@@ -0,0 +1,48 @@
+import { html } from "lit"
+import "../leu-radio.js"
+
+export default {
+  title: "Radio",
+  component: "leu-radio",
+  argTypes: {
+    label: {
+      control: "text",
+    },
+  },
+}
+
+function Template({
+  label = "Label",
+  value = "",
+  checked = false,
+  disabled = false,
+}) {
+  return html`
+    <leu-radio
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      identifier=${"radio-1"}
+    >
+      ${label}
+    </leu-radio>
+  `
+}
+
+export const Regular = Template.bind({})
+
+export const Checked = Template.bind({})
+Checked.args = {
+  checked: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+}
+
+export const CheckedDisabled = Template.bind({})
+CheckedDisabled.args = {
+  checked: true,
+  disabled: true,
+}

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

@@ -0,0 +1,38 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+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>
+  `)
+}
+
+describe("LeuRadio", () => {
+  it("is a defined element", async () => {
+    const elRadio = await customElements.get("leu-radio")
+    const elRadioGroup = await customElements.get("leu-radio-group")
+
+    await expect(elRadio).not.to.be.undefined
+    await expect(elRadioGroup).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})