@statistikzh/leu 0.5.1 → 0.6.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -39,7 +39,7 @@
     "format:prettier": "prettier \"**/*.{js,mjs,md,html,json}\" --write --ignore-path .gitignore",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
-    "prepare": "husky install",
+    "prepare": "husky",
     "storybook": "npm run storybook:start",
     "storybook:start": "npm run analyze && npm run watch:css & storybook dev -p 8080 --no-open",
     "storybook:build": "npm run analyze && npm run build:css && storybook build --output-dir docs"
@@ -64,11 +64,11 @@
     "@storybook/addon-links": "^7.6.17",
     "@storybook/blocks": "^7.6.17",
     "@storybook/web-components": "^7.6.17",
-    "@web/dev-server": "^0.1.34",
-    "@web/dev-server-rollup": "^0.5.2",
-    "@web/storybook-builder": "^0.1.6",
-    "@web/storybook-framework-web-components": "^0.1.1",
-    "@web/test-runner": "^0.18.0",
+    "@web/dev-server": "^0.4.6",
+    "@web/dev-server-rollup": "^0.6.4",
+    "@web/storybook-builder": "^0.1.16",
+    "@web/storybook-framework-web-components": "^0.1.2",
+    "@web/test-runner": "^0.18.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.0",
     "@whitespace/storybook-addon-html": "^5.1.6",
@@ -76,14 +76,12 @@
     "custom-element-jet-brains-integration": "^1.4.4",
     "custom-element-vs-code-integration": "^1.2.3",
     "custom-element-vuejs-integration": "^1.1.0",
-    "es-dev-server": "^2.1.0",
-    "esbuild": "^0.20.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-storybook": "^0.6.14",
     "glob": "^10.3.10",
-    "husky": "^8.0.0",
-    "lint-staged": "^10.5.4",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
     "nodemon": "^3.0.2",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
@@ -96,7 +94,6 @@
     "react-syntax-highlighter": "^15.5.0",
     "rimraf": "^5.0.5",
     "rollup": "^3.29.4",
-    "rollup-plugin-esbuild": "^6.0.2",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
     "sinon": "^17.0.1",

package/scripts/generate-component/templates/[Name].js

@@ -1,14 +1,17 @@
-import { html, LitElement } from "lit"
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
 import styles from "./[name].css"
 
 /**
  * @tagname [namespace]-[name]
  */
-export class Leu[Name] extends LitElement {
+export class Leu[Name] extends LeuElement {
   static styles = styles
 
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 

package/scripts/generate-component/templates/test/[name].test.js

@@ -4,7 +4,7 @@ import { fixture, expect } from "@open-wc/testing"
 import "../[namespace]-[name].js"
 
 async function defaultFixture() {
-  return fixture(html` <[namespace]-[name] /> `)
+  return fixture(html`<[namespace]-[name]></[namespace]-[name]>`)
 }
 
 describe("[Namespace][Name]", () => {

package/src/components/accordion/Accordion.js

@@ -1,24 +1,26 @@
-import { LitElement, nothing } from "lit"
+import { nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 
+// @ts-ignore
 import styles from "./accordion.css"
 
 /**
  * @tagname leu-accordion
  * @slot content - The content of the accordion. No styles will be applied to the content.
- * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
- * @prop {Boolean} open - The expanded state of the accordion.
- * @prop {String} label - The label (title) of the accordion.
- * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
- * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
- * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ * @prop {number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {boolean} open - The expanded state of the accordion.
+ * @prop {string} label - The label (title) of the accordion.
+ * @prop {string} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {string} label-prefix - The prefix of the accordion label. e.g. "01"
  */
-export class LeuAccordion extends LitElement {
+export class LeuAccordion extends LeuElement {
   static styles = styles
 
   /** @internal */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
@@ -34,13 +36,14 @@ export class LeuAccordion extends LitElement {
     this.headingLevel = 2
     this.open = false
     this.label = ""
+    this.labelPrefix = ""
   }
 
   /**
    * Determines the heading tag of the accordion toggle.
    * The headingLevel shouldn't be used directly to render the heading tag
    * in order to avoid XSS issues.
-   * @returns {String} The heading tag of the accordion toggle.
+   * @returns {string} The heading tag of the accordion toggle.
    * @internal
    */
   _getHeadingTag() {

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuAccordion } from "./Accordion.js"
 
 export { LeuAccordion }
 
-defineElement("accordion", LeuAccordion)
+LeuAccordion.define("leu-accordion")

package/src/components/breadcrumb/Breadcrumb.js

@@ -1,14 +1,16 @@
-import { html, LitElement, nothing } from "lit"
+import { html, nothing } from "lit"
 import { createRef, ref } from "lit/directives/ref.js"
 import { classMap } from "lit/directives/class-map.js"
 
-import styles from "./breadcrumb.css"
-import { Icon } from "../icon/icon.js"
-import "../menu/leu-menu.js"
-import "../menu/leu-menu-item.js"
-import "../popup/leu-popup.js"
-import "../visually-hidden/leu-visually-hidden.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 import { debounce } from "../../lib/utils.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuMenu } from "../menu/Menu.js"
+import { LeuMenuItem } from "../menu/MenuItem.js"
+import { LeuPopup } from "../popup/Popup.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+
+import styles from "./breadcrumb.css"
 
 /**
  * A Breadcrumb Navigation.
@@ -40,11 +42,19 @@ import { debounce } from "../../lib/utils.js"
  *
  *
  * @prop {Array} items - Object array with { label, href }
- * @prop {Boolean} inverted - invert color on dark background
+ * @prop {boolean} inverted - invert color on dark background
  *
  * @tagname leu-breadcrumb
  */
-export class LeuBreadcrumb extends LitElement {
+export class LeuBreadcrumb extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+    "leu-menu": LeuMenu,
+    "leu-menu-item": LeuMenuItem,
+    "leu-popup": LeuPopup,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
   static styles = styles
 
   static properties = {
@@ -63,7 +73,7 @@ export class LeuBreadcrumb extends LitElement {
     super()
     /** @type {Array} */
     this.items = []
-    /** @type {Boolean} - will be used on dark Background */
+    /** @type {boolean} - will be used on dark Background */
     this.inverted = false
 
     /** @internal */
@@ -225,7 +235,9 @@ export class LeuBreadcrumb extends LitElement {
 
     return html`
       <li class="breadcrumbs__item" data-dropdown-toggle>
-        <span class="breadcrumbs__icon">${Icon("angleRight")}</span>
+        <span class="breadcrumbs__icon"
+          ><leu-icon name="angleRight"></leu-icon
+        ></span>
         <leu-popup
           ?active=${this._isDropdownOpen}
           placement="bottom-start"
@@ -248,10 +260,9 @@ export class LeuBreadcrumb extends LitElement {
                 ${this._dropdownItems.map(
                   (item) =>
                     html`
-                      <leu-menu-item
-                        label=${item.label}
-                        href=${item.href}
-                      ></leu-menu-item>
+                      <leu-menu-item href=${item.href}
+                        >${item.label}</leu-menu-item
+                      >
                     `
                 )}
               </leu-menu>
@@ -281,7 +292,9 @@ export class LeuBreadcrumb extends LitElement {
         <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
           ${showBackOnly
             ? html` <li class="breadcrumbs__item breadcrumbs__item--back">
-                <span class="breadcrumbs__icon">${Icon("arrowLeft")}</span>
+                <span class="breadcrumbs__icon"
+                  ><leu-icon name="arrowLeft"></leu-icon
+                ></span>
                 <a class="breadcrumbs__link" href=${parentItem.href}
                   >${parentItem.label}</a
                 >
@@ -292,8 +305,8 @@ export class LeuBreadcrumb extends LitElement {
                     <li class="breadcrumbs__item">
                       ${index > 0
                         ? html`<span class="breadcrumbs__icon"
-                            >${Icon("angleRight")}</span
-                          >` // First list item doesn't have an arrow
+                            ><leu-icon name="angleRight"></leu-icon
+                          ></span>` // First list item doesn't have an arrow
                         : nothing}
                       ${index === list.length - 1
                         ? item.label // Last list item doesn't contain a link

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuBreadcrumb } from "./Breadcrumb.js"
 
 export { LeuBreadcrumb }
 
-defineElement("breadcrumb", LeuBreadcrumb)
+LeuBreadcrumb.define("leu-breadcrumb")

package/src/components/button/Button.js

@@ -1,10 +1,13 @@
-import { html, nothing, LitElement } from "lit"
+import { html, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
-import { Icon } from "../icon/icon.js"
+import { LeuIcon } from "../icon/Icon.js"
+import { LeuElement } from "../../lib/LeuElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
+import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
 
+// @ts-ignore
 import styles from "./button.css"
 
 /*
@@ -27,56 +30,38 @@ export { BUTTON_TYPES }
 export const BUTTON_EXPANDED_OPTIONS = ["true", "false"]
 Object.freeze(BUTTON_EXPANDED_OPTIONS)
 
-/**
- * All roles that are associated with a aria-checked attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
- */
-const ARIA_ROLES_CHECKED = [
-  "checkbox",
-  "menuitemcheckbox",
-  "menuitemradio",
-  "option",
-  "radio",
-  "switch",
-]
-
-/**
- * All roles that are associated with a aria-selected attribute
- * @link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
- */
-const ARIA_ROLES_SELECTED = [
-  "gridcell",
-  "option",
-  "row",
-  "tab",
-  "columnheader",
-  "rowheader",
-  "treeitem",
-]
-
 /**
  * @tagname leu-button
+ * @slot before - The icon to display before the label
+ * @slot after - The icon to display after the label
+ * @slot - The label of the button or the icon if no label is set
  */
-export class LeuButton extends LitElement {
+export class LeuButton extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+  }
+
   static styles = styles
 
   /**
    * @internal
    */
   static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
+    ...LeuElement.shadowRootOptions,
     delegatesFocus: true,
   }
 
   /**
    * @internal
    */
-  hasSlotController = new HasSlotController(this, ["[default]"])
+  hasSlotController = new HasSlotController(this, [
+    "before",
+    "after",
+    "[default]",
+  ])
 
   static properties = {
     label: { type: String, reflect: true },
-    icon: { type: String, reflect: true },
-    iconPosition: { type: String, reflect: true },
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
     type: { type: String, reflect: true },
@@ -95,16 +80,15 @@ export class LeuButton extends LitElement {
     /** @type {string} */
     this.label = null
     /** @type {string} */
-    this.icon = null
-    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
-    this.iconPosition = "before"
-    /** @type {string} */
     this.size = "regular"
     /** @type {string} */
     this.variant = "primary"
     /** @type {"button" | "submit" | "reset"} */
     this.type = "button"
 
+    /** @type {string} */
+    this.componentRole = undefined
+
     /** @type {boolean} */
     this.disabled = false
     /** @type {boolean} - Only taken into account if no Label and an Icon is set */
@@ -124,34 +108,10 @@ export class LeuButton extends LitElement {
     this.expanded = undefined
   }
 
-  getIconSize() {
-    return this.size === "small" || this.variant === "ghost" ? 16 : 24
-  }
-
-  renderIconBefore() {
-    if (this.icon && this.iconPosition === "before") {
-      return html`<div class="icon-wrapper icon-wrapper--before">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`
-    }
-
-    return nothing
-  }
-
-  renderIconAfter() {
-    if (this.icon && this.iconPosition === "after") {
-      return html`<div class="icon-wrapper icon-wrapper--after">
-        ${Icon(this.icon, this.getIconSize())}
-      </div>`
-    }
-
-    return nothing
-  }
-
   renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
       return html`<div class="icon-wrapper icon-wrapper--expanded">
-        ${Icon("angleDropDown", 24)}
+        <leu-icon name="angleDropDown" size="24"></leu-icon>
       </div>`
     }
 
@@ -165,9 +125,9 @@ export class LeuButton extends LitElement {
     }
 
     if (this.componentRole) {
-      if (ARIA_ROLES_CHECKED.includes(this.componentRole)) {
+      if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
         attributes.checked = this.active ? "true" : "false"
-      } else if (ARIA_ROLES_SELECTED.includes(this.componentRole)) {
+      } else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
         attributes.selected = this.active ? "true" : "false"
       }
     }
@@ -175,13 +135,25 @@ export class LeuButton extends LitElement {
     return attributes
   }
 
+  hasTextContent() {
+    return Array.from(this.childNodes).some(
+      (node) =>
+        node.nodeType === node.TEXT_NODE && node.textContent.trim() !== ""
+    )
+  }
+
   render() {
-    const hasContent = this.hasSlotController.test("[default]")
+    const hasTextContent = this.hasTextContent()
+    const hasIconDefault = Boolean(this.querySelector("leu-icon"))
+    const hasIconBefore = this.hasSlotController.test("before")
+    const hasIconAfter = this.hasSlotController.test("after")
     const aria = this.getAriaAttributes()
 
     const cssClasses = {
-      icon: !hasContent && this.icon,
-      round: !hasContent && this.icon && this.round,
+      "icon-only": hasIconDefault && !hasTextContent,
+      "icon-before": hasIconBefore,
+      "icon-after": hasIconAfter,
+      round: this.round,
       active: this.active,
       inverted: this.inverted,
       [this.variant]: true,
@@ -192,14 +164,16 @@ export class LeuButton extends LitElement {
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}
+        aria-expanded=${ifDefined(this.expanded)}
         role=${ifDefined(aria.role)}
         class=${classMap(cssClasses)}
         ?disabled=${this.disabled}
         type=${this.type}
       >
-        ${this.renderIconBefore()}
-        <span class="label"><slot></slot></span>
-        ${this.renderIconAfter()} ${this.renderExpandingIcon()}
+        <slot name="before" class="icon-wrapper icon-wrapper--before"></slot>
+        <span class="content"><slot></slot></span>
+        <slot name="after" class="icon-wrapper icon-wrapper--after"></slot>
+        ${this.renderExpandingIcon()}
       </button>
     `
   }

package/src/components/button/button.css

@@ -17,17 +17,13 @@ button {
   column-gap: 8px;
 }
 
-.label {
+.content {
   flex: 1 1 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.icon .label {
-  display: none;
-}
-
 button.round {
   border-radius: 50%;
 }
@@ -58,7 +54,7 @@ button.regular {
   line-height: 24px;
 }
 
-button.regular.icon {
+button.regular.icon-only {
   padding: 12px;
 }
 
@@ -67,9 +63,11 @@ button.small {
   padding: 6px 24px;
   font-size: 14px;
   line-height: 20px;
+
+  --leu-icon-size: 1rem;
 }
 
-button.small.icon {
+button.small.icon-only {
   padding: 8px;
 }
 
@@ -125,6 +123,8 @@ button.secondary:disabled {
 
 /* ghost */
 button.ghost {
+  --leu-icon-size: 1rem;
+
   background: transparent;
   padding: 0 0.5rem;
   color: var(--leu-color-black-60);
@@ -203,11 +203,13 @@ button.ghost.inverted:disabled {
 }
 
 /* icon-wrapper */
-.icon-wrapper svg {
+.icon-wrapper leu-icon {
   display: block;
 }
 
-.ghost :is(.icon-wrapper--before, .icon-wrapper--after) {
+.ghost.icon-before .icon-wrapper--before,
+.ghost.icon-after .icon-wrapper--after {
+  display: block;
   padding: 0.5rem;
   border-radius: 50%;
   background: var(--leu-color-black-transp-10);

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

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { LeuButton } from "./Button.js"
 
 export { LeuButton }
 
-defineElement("button", LeuButton)
+LeuButton.define("leu-button")