@statistikzh/leu 0.0.2

package/src/components/input/stories/input.stories.js

@@ -0,0 +1,185 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-input.js"
+
+import { SIZE_TYPES } from "../Input.js"
+import { ICON_NAMES } from "../../icon/icon.js"
+
+export default {
+  title: "Input",
+  component: "leu-input",
+  tags: ["autodocs"],
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: SIZE_TYPES,
+      },
+    },
+    icon: { control: "select", options: ICON_NAMES },
+  },
+}
+
+function Template(args) {
+  const {
+    label,
+    value,
+    error,
+    pattern,
+    prefix,
+    suffix,
+    size,
+    icon,
+    type,
+    min,
+    max,
+    minlength,
+    maxlength,
+    disabled = false,
+    required = false,
+    clearable = false,
+    novalidate = false,
+  } = args
+
+  return html`
+    <leu-input
+      value=${ifDefined(value)}
+      error=${ifDefined(error)}
+      pattern=${ifDefined(pattern)}
+      prefix=${ifDefined(prefix)}
+      suffix=${ifDefined(suffix)}
+      size=${ifDefined(size)}
+      icon=${ifDefined(icon)}
+      type=${ifDefined(type)}
+      min=${ifDefined(min)}
+      max=${ifDefined(max)}
+      minlength=${ifDefined(minlength)}
+      maxlength=${ifDefined(maxlength)}
+      ?disabled=${disabled}
+      ?required=${required}
+      ?clearable=${clearable}
+      ?novalidate=${novalidate}
+    >
+      ${label}
+    </leu-input>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Vorname",
+}
+Regular.parameters = {
+  docs: {
+    description: {
+      story:
+        "To render a basic input field only the `label` attribute is required. The `label` is necessary for accessibility reasons.",
+    },
+  },
+}
+
+export const Filled = Template.bind({})
+Filled.args = {
+  label: "Name",
+  value: "Andrea Hugentobler",
+}
+Filled.parameters = {
+  docs: {
+    description: {
+      story: "To supply a value to the input field, use the `value` attribute.",
+    },
+  },
+}
+
+export const PrefixedNumber = Template.bind({})
+PrefixedNumber.args = {
+  label: "Preis, in CHF",
+  prefix: "CHF",
+  type: "number",
+}
+PrefixedNumber.parameters = {
+  docs: {
+    description: {
+      story:
+        'With the `prefix` attribute you can add a string that is prepended to the input field. This is useful for defining a unit of the input value. Be aware that the prefix is not included in the value of the input field. It is also hidden from screen readers. You have to add the prefix to the `label` attribute like "Preis, in CHF".',
+    },
+  },
+}
+
+export const SuffixedNumber = Template.bind({})
+SuffixedNumber.args = {
+  label: "Länge, in cm",
+  suffix: "cm",
+  type: "number",
+  min: 90,
+  max: 120,
+}
+SuffixedNumber.parameters = {
+  docs: {
+    description: {
+      story:
+        'With the `suffix` attribute you can add a string that is appended to the input field. This is useful for defining a unit of the input value. Be aware that the prefix is not included in the value of the input field. It is also hidden from screen readers. You have to add the suffix to the `label` attribute like "Länge, in cm".',
+    },
+  },
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: "Name",
+  disabled: true,
+}
+
+export const FilledDisabled = Template.bind({})
+FilledDisabled.args = {
+  disabled: true,
+  label: "Name",
+  value: "Andrea Hugentobler",
+}
+
+export const Clearable = Template.bind({})
+Clearable.args = {
+  label: "Vorname",
+  clearable: true,
+}
+Clearable.parameters = {
+  docs: {
+    description: {
+      story:
+        "The `clearable` attribute adds a button to the input field that clears the value. This is useful for search fields. The button is only visible if the input field has a value. The button will also not visible if the input is invalid.",
+    },
+  },
+}
+
+export const Search = Template.bind({})
+Search.args = {
+  label: "Suchen",
+  clearable: true,
+  size: SIZE_TYPES.SMALL,
+  icon: "search",
+  novalidate: true,
+}
+Search.parameters = {
+  docs: {
+    description: {
+      story:
+        "The input field can also be displayed in a smaller size. Search fields or input fields inside other components (e.g. Select or Pagination) usually use this option. To display the search icon, use the `icon` attribute. With `novalidate` the validation can be disabled.",
+    },
+  },
+}
+
+export const CustomError = Template.bind({})
+CustomError.args = {
+  type: "email",
+  label: "E-Mail",
+  value: "example@domain.com",
+  error: "Diese E-Mail Adresse wird bereits verwendet.",
+}
+Search.parameters = {
+  docs: {
+    description: {
+      story:
+        "The input component uses the browsers native validation. If the data is sent to a server, then there it will be validated again. To display those errors, use the `error` attribute. It won't interfere with the native validation also wont be removed.",
+    },
+  },
+}

package/src/components/input/test/input.test.js

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

@@ -0,0 +1,18 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./menu.css"
+
+/**
+ * @tagname leu-menu
+ */
+export class LeuMenu extends LitElement {
+  static styles = styles
+
+  render() {
+    return html`<slot></slot>`
+  }
+}
+
+export function defineMenuElements() {
+  defineElement("menu", LeuMenu)
+}

package/src/components/menu/MenuItem.js

@@ -0,0 +1,95 @@
+import { html, LitElement, nothing } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./menu-item.css"
+
+import { Icon, ICON_NAMES } from "../icon/icon.js"
+
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+export class LeuMenuItem extends LitElement {
+  static styles = styles
+
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    /**
+     * Can be either an icon name or a text
+     * If no icon with this value is found, it will be displayed as text.
+     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+     */
+    before: { type: String },
+    /**
+     * Can be either an icon name or a text
+     * If no icon with this value is found, it will be displayed as text
+     * If the value is "EMPTY", an empty placeholder with the size of an icon will be displayed.
+     */
+    after: { type: String },
+    active: { type: Boolean, reflect: true },
+    highlighted: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    this.active = false
+    this.disabled = false
+    this.before = ""
+    this.after = ""
+
+    /**
+     * A programmatic way to highlight the menu item like it is hovered.
+     * This is just a visual effect and does not change the active state.
+     */
+    this.highlighted = false
+  }
+
+  static getIconOrText(name) {
+    if (ICON_NAMES.includes(name)) {
+      return Icon(name)
+    }
+
+    if (name === "EMPTY") {
+      return html`<div class="icon-placeholder"></div>`
+    }
+
+    return name
+  }
+
+  renderBefore() {
+    if (this.before !== "") {
+      const content = LeuMenuItem.getIconOrText(this.before)
+      return html`<span class="before">${content}</span>`
+    }
+
+    return nothing
+  }
+
+  renderAfter() {
+    if (this.after !== "") {
+      const content = LeuMenuItem.getIconOrText(this.after)
+      return html`<span class="after">${content}</span>`
+    }
+
+    return nothing
+  }
+
+  render() {
+    return html`<button class="button" ?disabled=${this.disabled}>
+      ${this.renderBefore()}<span class="label"><slot></slot></span
+      >${this.renderAfter()}
+    </button>`
+  }
+}
+
+export function defineMenuItemElements() {
+  defineElement("menu-item", LeuMenuItem)
+}

package/src/components/menu/leu-menu-item.js

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

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

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

package/src/components/menu/menu-item.css

@@ -0,0 +1,72 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --background: var(--leu-color-black-0);
+  --background-hover: var(--leu-color-black-10);
+  --background-active: var(--leu-color-func-cyan);
+  --background-disabled: var(--leu-color-black-0);
+  --color: var(--leu-color-black-transp-60);
+  --font-regular: var(--leu-font-regular);
+  --font-black: var(--leu-font-black);
+
+  font-family: var(--chip-font-regular);
+}
+
+.button {
+  appearance: none;
+  border: none;
+  cursor: pointer;
+
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+
+  padding: 0.75rem;
+
+  font-size: 1rem;
+  line-height: 1.5;
+  text-align: left;
+
+  background: var(--background);
+  color: var(--color);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.button:hover,
+:host([highlighted]) .button {
+  --background: var(--background-hover);
+}
+
+:host([active]) .button {
+  --background: var(--background-active);
+}
+
+:host([disabled]) .button {
+  --background: var(--background-disabled);
+  cursor: default;
+}
+
+:is(.before, .after) svg {
+  display: block;
+}
+
+.label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon-placeholder {
+  display: block;
+  width: 1.5rem;
+  aspect-ratio: 1;
+}

package/src/components/menu/menu.css

@@ -0,0 +1,14 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --menu-divider-color: var(--leu-color-black-transp-20);
+}
+
+:host ::slotted(hr) {
+  border: 0;
+  border-top: 1px solid var(--menu-divider-color);
+  margin: 0.5rem 0;
+}

package/src/components/menu/stories/menu-item.stories.js

@@ -0,0 +1,51 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-menu-item.js"
+
+export default {
+  title: "Menu/Item",
+  component: "leu-menu-item",
+  args: {
+    label: "Menu Item",
+  },
+}
+
+function Template(args) {
+  return html`
+    <leu-menu-item
+      before=${ifDefined(args.before)}
+      after=${ifDefined(args.after)}
+      ?active=${args.active}
+      >${args.label}</leu-menu-item
+    >
+  `
+}
+
+export const Regular = Template.bind({})
+
+export const Active = Template.bind({})
+Active.args = {
+  active: true,
+}
+
+export const IconBefore = Template.bind({})
+IconBefore.args = {
+  before: "check",
+}
+
+export const IconAfter = Template.bind({})
+IconAfter.args = {
+  after: "arrowRight",
+}
+
+export const IconAndTextLabel = Template.bind({})
+IconAndTextLabel.args = {
+  before: "pin",
+  after: "CH",
+}
+
+export const IconPlaceholder = Template.bind({})
+IconPlaceholder.args = {
+  before: "EMPTY",
+}

package/src/components/menu/stories/menu.stories.js

@@ -0,0 +1,21 @@
+import { html } from "lit"
+import "../leu-menu.js"
+import "../leu-menu-item.js"
+
+export default {
+  title: "Menu",
+  component: "leu-menu",
+}
+
+function Template() {
+  return html` <leu-menu>
+    <leu-menu-item before="EMPTY">Menu Item 1</leu-menu-item>
+    <leu-menu-item before="check" active>Menu Item 2</leu-menu-item>
+    <leu-menu-item before="EMPTY">Menu Item 3</leu-menu-item>
+    <hr />
+    <leu-menu-item before="pin" after="CH">Menu Item 3</leu-menu-item>
+    <leu-menu-item>Menu Item 4</leu-menu-item>
+  </leu-menu>`
+}
+
+export const Menu = Template.bind({})

package/src/components/menu/test/menu.test.js

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

@@ -0,0 +1,152 @@
+import { html, LitElement } from "lit"
+import { defineElement } from "../../lib/defineElement.js"
+import { defineButtonElements } from "../button/Button.js"
+
+import styles from "./pagination.css"
+
+const MIN_PAGE = 1
+
+/**
+ * @tagname leu-pagination
+ */
+export class LeuPagination extends LitElement {
+  static styles = styles
+
+  static events = {
+    range: {},
+  }
+
+  static properties = {
+    page: { type: Number, reflect: true },
+    itemsOnAPage: { type: Number },
+    dataLength: { type: Number },
+
+    _minPage: { type: Number, state: true },
+  }
+
+  constructor() {
+    super()
+    /** @type {number} */
+    this.page = 1
+    /** @type {number} */
+    this.dataLength = 0
+    /** @type {number} */
+    this.itemsOnAPage = 30
+  }
+
+  get maxPage() {
+    return Math.ceil(this.dataLength / this.itemsOnAPage)
+  }
+
+  get firstPage() {
+    return this.page === MIN_PAGE
+  }
+
+  get lastPage() {
+    return this.page === this.maxPage
+  }
+
+  holdInRange(value) {
+    return Math.min(Math.max(value, MIN_PAGE), this.maxPage)
+  }
+
+  numberUpdate(number) {
+    this.page = this.holdInRange(number)
+
+    const min = (this.page - 1) * this.itemsOnAPage
+    const max = Math.min(min + this.itemsOnAPage, this.dataLength)
+    this.dispatchEvent(
+      new CustomEvent("range-updated", {
+        detail: {
+          min,
+          max,
+        },
+        bubbles: false,
+      })
+    )
+  }
+
+  change(event) {
+    // target.value = this.page // eslint-disable-line
+    this.numberUpdate(parseInt(event.target.value, 10) || 0)
+  }
+
+  input(event) {
+    if (event.target.value !== "") {
+      event.preventDefault()
+      this.change(event)
+    }
+  }
+
+  keydown(event) {
+    const specialKeys = [
+      "ArrowUp",
+      "ArrowDown",
+      "ArrowLeft",
+      "ArrowRight",
+      "Backspace",
+      "Enter",
+      "Tab",
+    ]
+    const numberKeys = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
+    if (!numberKeys.includes(event.key) && !specialKeys.includes(event.key)) {
+      event.preventDefault()
+    } else {
+      if (event.key === "ArrowUp") {
+        event.preventDefault()
+        this.numberUpdate(this.page + 1)
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        this.numberUpdate(this.page - 1)
+      }
+    }
+  }
+
+  firstUpdated() {
+    this.numberUpdate(this.page)
+  }
+
+  requestUpdate(name, oldValue, newValue) {
+    if (name === "itemsOnAPage") {
+      this.numberUpdate(this.page)
+    }
+    return super.requestUpdate(name, oldValue, newValue)
+  }
+
+  render() {
+    return html`
+      <input
+        class="input"
+        .value=${this.page}
+        @input=${this.input}
+        @change=${this.change}
+        @keydown=${this.keydown}
+        type="number"
+      />
+      <div class="label">von ${this.maxPage}</div>
+      <leu-button
+        icon="angleLeft"
+        variant="secondary"
+        @click=${(_) => {
+          this.numberUpdate(this.page - 1)
+        }}
+        ?disabled=${this.firstPage}
+      ></leu-button>
+      <leu-button
+        icon="angleRight"
+        variant="secondary"
+        @click=${(_) => {
+          this.numberUpdate(this.page + 1)
+        }}
+        ?disabled=${this.lastPage}
+        style="margin-left:4px;"
+      ></leu-button>
+    `
+  }
+}
+
+export function definePaginationElements() {
+  defineButtonElements()
+  defineElement("pagination", LeuPagination)
+}

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

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