@statistikzh/leu 0.5.1 → 0.7.0

package/src/components/input/Input.js

@@ -1,17 +1,19 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { live } from "lit/directives/live.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
-import { Icon } from "../icon/icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
 
+// @ts-ignore
 import styles from "./input.css"
 
-export const SIZE_TYPES = {
+export const SIZES = Object.freeze({
   SMALL: "small",
   REGULAR: "regular",
-}
+})
 
 /**
  * TODO:
@@ -63,14 +65,18 @@ const VALIDATION_MESSAGES = {
  *
  * @tagname leu-input
  */
-export class LeuInput extends LitElement {
+export class LeuInput extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -100,7 +106,6 @@ export class LeuInput extends LitElement {
     novalidate: { type: Boolean, reflect: true },
     step: { type: String, reflect: true },
 
-    /** @type {ValidityState} */
     _validity: { state: true },
   }
 
@@ -119,20 +124,18 @@ export class LeuInput extends LitElement {
     this.required = false
     this.clearable = false
 
-    /** @type {keyof typeof SIZE_TYPES} */
-    this.size = SIZE_TYPES.REGULAR
+    /** @type {"small" | "regular"} */
+    this.size = SIZES.REGULAR
 
     this.type = "text"
     this._validity = null
     this.validationMessages = {}
     this.novalidate = false
+    this.value = ""
 
     /** @internal */
     this._identifier = ""
 
-    /** @internal */
-    this._clearIcon = Icon("clear")
-
     /**
      * @internal
      * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
@@ -140,6 +143,13 @@ export class LeuInput extends LitElement {
     this._inputRef = createRef()
   }
 
+  get valueAsNumber() {
+    if (this.value === "") {
+      return NaN
+    }
+    return Number(this.value)
+  }
+
   /**
    * Method for handling the click event of the wrapper element.
    * Redirect every click on the wrapper to the input element.
@@ -306,10 +316,7 @@ export class LeuInput extends LitElement {
 
   /**
    * Creates an error list with an item for the given validity state.
-   * @param {ValidityState} validityState
-   * @param {Object} validationMessages
-   * @param {String} idRef
-   * @returns
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderErrorMessages() {
     if (!this.isInvalid()) {
@@ -341,11 +348,13 @@ export class LeuInput extends LitElement {
    * This can be either an icon, a clear button or an error indicator icon.
    *
    * @private
-   * @returns {TemplateResult}
+   * @returns {import("lit").TemplateResult | nothing}
    */
   renderAfterContent() {
     if (this.isInvalid()) {
-      return html`<div class="error-icon">${Icon("caution")}</div>`
+      return html`<div class="error-icon">
+        <leu-icon name="caution"></leu-icon>
+      </div>`
     }
 
     if (this.clearable && this.value) {
@@ -355,12 +364,14 @@ export class LeuInput extends LitElement {
         aria-label="Eingabefeld zurücksetzen"
         ?disabled=${this.disabled}
       >
-        ${this._clearIcon}
+        <leu-icon name="clear"></leu-icon>
       </button>`
     }
 
     if (this.icon) {
-      return html`<div class="icon">${Icon(this.icon)}</div>`
+      return html`<div class="icon">
+        <leu-icon name=${this.icon}></leu-icon>
+      </div>`
     }
 
     return nothing

package/src/components/input/input.css

@@ -154,7 +154,9 @@
 }
 
 /* is size small AND has no focus AND is empty */
-:host(:not(:focus-within)[size="small"]) .input-wrapper--empty .label {
+:host(:not(:focus-within)[size="small"])
+  .input-wrapper--empty:not(.input-wrapper--invalid)
+  .label {
   top: calc(0.75rem - var(--input-border-width));
   opacity: 1;
   visibility: visible;
@@ -229,6 +231,6 @@
   color: var(--input-color-invalid);
 }
 
-:is(.icon, .error-icon) svg {
+:is(.icon, .error-icon) leu-icon {
   display: block;
 }

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuInput } from "./Input.js"
 
 export { LeuInput }
 
-defineElement("input", LeuInput)
+LeuInput.define("leu-input")

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

@@ -3,8 +3,8 @@ 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"
+import { SIZES } from "../Input.js"
+import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
   title: "Input",
@@ -15,9 +15,9 @@ export default {
       control: {
         type: "select",
       },
-      options: Object.values(SIZE_TYPES),
+      options: Object.values(SIZES),
     },
-    icon: { control: "select", options: ICON_NAMES },
+    icon: { control: "select", options: Object.keys(iconPaths) },
   },
   parameters: {
     design: {
@@ -165,7 +165,7 @@ export const Search = Template.bind({})
 Search.args = {
   label: "Suchen",
   clearable: true,
-  size: SIZE_TYPES.SMALL,
+  size: SIZES.SMALL,
   icon: "search",
   novalidate: true,
 }

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

@@ -29,6 +29,8 @@ async function defaultFixture(args = {}) {
       ?novalidate=${args.novalidate}
     >
     </leu-input>
+    <!-- Firefox needs an other focusable element. Otherwise, sendKeys({press: "Tab"}) will have no effect -->
+    <div tabindex="0"></div>
   `)
 }
 
@@ -447,4 +449,24 @@ describe("LeuInput", () => {
     expect(getClearButton()).to.be.null
     expect(getIcon()).to.be.null
   })
+
+  it("returns the value as a number when it is possible", async () => {
+    const el = await defaultFixture({ label: "Länge", type: "number" })
+
+    expect(el.valueAsNumber).to.be.NaN
+
+    el.focus()
+
+    await sendKeys({ type: "123" })
+
+    expect(el.valueAsNumber).to.equal(123)
+
+    el.type = "text"
+    await elementUpdated(el)
+
+    el.focus()
+    await sendKeys({ type: "abc" })
+
+    expect(el.valueAsNumber).to.be.NaN
+  })
 })

package/src/components/menu/Menu.js

@@ -1,12 +1,153 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import { LeuMenuItem } from "./MenuItem.js"
+
+// @ts-ignore
 import styles from "./menu.css"
 
+/**
+ * @typedef {'single' | 'multiple' | 'none'} SelectsType
+ */
+
 /**
  * @tagname leu-menu
+ * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
  */
-export class LeuMenu extends LitElement {
+export class LeuMenu extends LeuElement {
   static styles = styles
 
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    selects: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+
+    /** @type {SelectsType} */
+    this.selects = "none"
+
+    this.value = undefined
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+
+    if (!this.getAttribute("role")) {
+      this.setAttribute("role", "menu")
+    }
+
+    this.addEventListener("keydown", this._handleKeyDown)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("keydown", this._handleKeyDown)
+  }
+
+  _handleSlotChange() {
+    this.setCurrentItem(0)
+    this._setMenuItemRoles()
+  }
+
+  _setMenuItemRoles() {
+    const menuRole = this.getAttribute("role")
+    let menuItemRole
+
+    if (menuRole === "menu") {
+      if (this.selects === "multiple") {
+        menuItemRole = "menuitemcheckbox"
+      } else if (this.selects === "single") {
+        menuItemRole = "menuitemradio"
+      } else {
+        menuItemRole = "menuitem"
+      }
+    } else if (menuRole === "listbox") {
+      menuItemRole = "option"
+    }
+
+    if (menuItemRole) {
+      this.getMenuItems().forEach((menuItem) => {
+        menuItem.componentRole = menuItemRole // eslint-disable-line no-param-reassign
+      })
+    }
+  }
+
+  /**
+   *
+   * @returns {import("./MenuItem").LeuMenuItem[]}
+   */
+  getMenuItems() {
+    const slot = this.shadowRoot.querySelector("slot")
+    return slot
+      .assignedElements({ flatten: true })
+      .filter((el) => el instanceof LeuMenuItem)
+  }
+
+  getVisibleMenuItems() {
+    return this.getMenuItems().filter((menuItem) => !menuItem.hidden)
+  }
+
+  _handleKeyDown(event) {
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault()
+
+      const menuItems = this.getVisibleMenuItems()
+      let index = menuItems.findIndex((menuItem) => menuItem.tabbable)
+
+      if (event.key === "ArrowDown") {
+        index += 1
+      } else if (event.key === "ArrowUp") {
+        index -= 1
+      } else if (event.key === "Home") {
+        index = 0
+      } else if (event.key === "End") {
+        index = menuItems.length - 1
+      }
+
+      this.focusItem(index)
+    }
+  }
+
+  setCurrentItem(index) {
+    const menuItems = this.getVisibleMenuItems()
+    let currentItem = null
+
+    const currentItemIndex = (index + menuItems.length) % menuItems.length
+
+    menuItems.forEach((menuItem, i) => {
+      if (i === currentItemIndex) {
+        currentItem = menuItem
+        menuItem.tabbable = true // eslint-disable-line no-param-reassign
+      } else {
+        menuItem.tabbable = false // eslint-disable-line no-param-reassign
+      }
+    })
+
+    return currentItem
+  }
+
+  focusItem(index) {
+    const currentItem = this.setCurrentItem(index)
+    currentItem.focus()
+  }
+
+  firstUpdated() {
+    this.setCurrentItem(0)
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("selects")) {
+      this._setMenuItemRoles()
+    }
+  }
+
   render() {
     return html`<slot></slot>`
   }

package/src/components/menu/MenuItem.js

@@ -1,44 +1,48 @@
-import { LitElement, nothing } from "lit"
-import { html, unsafeStatic } from "lit/static-html.js"
+import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuIcon } from "../icon/Icon.js"
+
+// @ts-ignore
 import styles from "./menu-item.css"
 
-import { Icon, ICON_NAMES } from "../icon/icon.js"
+/**
+ * @typedef {'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'none'} MenuItemRole
+ */
 
 /**
  * @tagname leu-menu-item
  * @slot - The label of the menu item
+ * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} disabled - Disables the underlying button or link
+ * @property {string} value - The value of the item. It must not contain commas. See `getValue()`
+ * @property {string} href - The href of the underlying link
+ * @property {boolean} tabbable - If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link
+ * @property {MenuItemRole} componentRole - The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.`
  */
-export class LeuMenuItem extends LitElement {
+export class LeuMenuItem extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.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, reflect: true },
-    /**
-     * 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, reflect: true },
     active: { type: Boolean, reflect: true },
-    highlighted: { type: Boolean, reflect: true },
     disabled: { type: Boolean, reflect: true },
-    label: { type: String, reflect: true },
+    tabbable: { type: Boolean, reflect: true },
     href: { type: String, reflect: true },
+    value: { type: String, reflect: true },
+    componentRole: { type: String, reflect: true },
   }
 
   constructor() {
@@ -46,57 +50,105 @@ export class LeuMenuItem extends LitElement {
 
     this.active = false
     this.disabled = false
+    this.value = undefined
+    this.href = undefined
+    this.tabbable = undefined
 
-    /**
-     * 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
+    /** @type {MenuItemRole} */
+    this.componentRole = "menuitem"
   }
 
-  static getIconOrText(name) {
-    if (ICON_NAMES.includes(name)) {
-      return Icon(name)
-    }
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("click", this._handleClick, true)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.removeEventListener("click", this._handleClick, true)
+  }
 
-    if (name === "EMPTY") {
-      return html`<div class="icon-placeholder"></div>`
+  _handleClick(event) {
+    if (this.disabled) {
+      event.stopPropagation()
+      event.preventDefault()
     }
+  }
 
-    return name
+  /**
+   * Returns the value of the item. If `value` is not set, it will return the inner text
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.innerText
   }
 
-  renderBefore() {
-    if (this.before) {
-      const content = LeuMenuItem.getIconOrText(this.before)
-      return html`<span class="before">${content}</span>`
+  _getAria() {
+    const commonAttributes = {
+      disabled: this.disabled,
+    }
+
+    if (this.href) {
+      return commonAttributes
     }
 
-    return nothing
+    return {
+      ...commonAttributes,
+      checked:
+        this.componentRole === "menuitemcheckbox" ||
+        this.componentRole === "menuitemradio"
+          ? this.active
+          : undefined,
+      selected: this.componentRole === "option" ? this.active : undefined,
+      role: this.componentRole === "none" ? undefined : this.componentRole,
+    }
   }
 
-  renderAfter() {
-    if (this.after) {
-      const content = LeuMenuItem.getIconOrText(this.after)
-      return html`<span class="after">${content}</span>`
+  _getTabIndex() {
+    if (typeof this.tabbable === "boolean") {
+      return this.tabbable ? 0 : -1
     }
 
-    return nothing
+    return undefined
+  }
+
+  _renderLink(content) {
+    const aria = this._getAria()
+
+    return html`<a
+      class="button"
+      href=${this.href}
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+      >${content}</a
+    >`
   }
 
-  getTagName() {
-    return this.href ? "a" : "button"
+  _renderButton(content) {
+    const aria = this._getAria()
+
+    return html`<button
+      class="button"
+      aria-disabled=${ifDefined(aria.disabled)}
+      aria-checked=${ifDefined(aria.checked)}
+      aria-selected=${ifDefined(aria.selected)}
+      role=${ifDefined(aria.role)}
+      tabindex=${ifDefined(this._getTabIndex())}
+    >
+      ${content}
+    </button>`
   }
 
   render() {
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`<${unsafeStatic(
-      this.getTagName()
-    )} class="button" href=${ifDefined(this.href)} ?disabled=${this.disabled}>
-      ${this.renderBefore()}<span class="label">${this.label}</span
-      >${this.renderAfter()}
-    </${unsafeStatic(this.getTagName())}>`
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+    const content = html`
+      <slot class="before" name="before"></slot>
+      <span class="label"><slot></slot></span>
+      <slot class="after" name="after"></slot>
+    `
+
+    return this.href ? this._renderLink(content) : this._renderButton(content)
   }
 }

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenuItem } from "./MenuItem.js"
 
 export { LeuMenuItem }
 
-defineElement("menu-item", LeuMenuItem)
+LeuMenuItem.define("leu-menu-item")

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuMenu } from "./Menu.js"
 
 export { LeuMenu }
 
-defineElement("menu", LeuMenu)
+LeuMenu.define("leu-menu")

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

@@ -6,9 +6,10 @@
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-func-cyan);
+  --background-active: var(--leu-color-accent-blue);
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
+  --color-active: var(--leu-color-black-0);
   --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-family-regular);
   --font-black: var(--leu-font-family-black);
@@ -29,6 +30,7 @@
 
   padding: 0.75rem;
 
+  font-family: inherit;
   font-size: 1rem;
   line-height: 1.5;
   text-align: left;
@@ -43,21 +45,26 @@
 }
 
 .button:hover,
-:host([highlighted]) .button {
+.button:focus-visible {
   --background: var(--background-hover);
 }
 
+/*
+ * These colors do not match with the design system (yet).
+ * But at least they are compliant with the WCAG AA contrast ratio.
+ */
 :host([active]) .button {
   --background: var(--background-active);
+  --color: var(--color-active);
 }
 
 :host([disabled]) .button {
   --background: var(--background-disabled);
   --color: var(--color-disabled);
-  cursor: default;
+  cursor: not-allowed;
 }
 
-:is(.before, .after) svg {
+:is(.before, .after) leu-icon {
   display: block;
 }
 

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

@@ -2,6 +2,12 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-menu-item.js"
+import "../../icon/leu-icon.js"
+import { paths as iconPaths } from "../../icon/paths.js"
+
+function isIcon(name) {
+  return name === "EMPTY" || Object.keys(iconPaths).includes(name)
+}
 
 export default {
   title: "Menu/Item",
@@ -20,13 +26,18 @@ export default {
 function Template(args) {
   return html`
     <leu-menu-item
-      label=${args.label}
-      before=${ifDefined(args.before)}
-      after=${ifDefined(args.after)}
       href=${ifDefined(args.href)}
       ?active=${args.active}
       ?disabled=${args.disabled}
-    ></leu-menu-item>
+    >
+      ${isIcon(args.before)
+        ? html`<leu-icon slot="before" name=${args.before}></leu-icon>`
+        : html`<span slot="before">${args.before}</span>`}
+      ${args.label}
+      ${isIcon(args.after)
+        ? html`<leu-icon slot="after" name=${args.after}></leu-icon>`
+        : html`<span slot="after">${args.after}</span>`}
+    </leu-menu-item>
   `
 }