@statistikzh/leu 0.27.0 → 0.28.1

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -65,6 +65,33 @@
             "events": []
           }
         },
+        {
+          "name": "leu-button-group",
+          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
+          "doc-url": "",
+          "attributes": [],
+          "slots": [{ "name": "", "description": "Slot for the buttons" }],
+          "events": [
+            {
+              "name": "input",
+              "description": "When the value of the group changes by clicking a button"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "The value of the currently selected (active) button"
+              }
+            ],
+            "events": [
+              {
+                "name": "input",
+                "description": "When the value of the group changes by clicking a button"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-button",
           "description": "\n---\n\n\n### **Slots:**\n - **before** - The icon to display before the label\n- **after** - The icon to display after the label\n- _default_ - The label of the button or the icon if no label is set",
@@ -93,7 +120,7 @@
             },
             {
               "name": "type",
-              "description": "The `type` of the underlying button element.",
+              "description": "The `type` of the underlying button element. Ignored when `href` is set.",
               "value": {
                 "type": "\"button\" | \"submit\" | \"reset\"",
                 "default": "\"button\""
@@ -101,12 +128,24 @@
             },
             {
               "name": "componentRole",
-              "description": "The `role` of the underlying button element.",
+              "description": "The `role` of the underlying button element. Ignored when `href` is set.",
               "value": { "type": "string | undefined" }
             },
+            {
+              "name": "href",
+              "description": "If set, renders the button as an <a> element instead of a <button> with the provided href.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "target",
+              "description": "Tells the browser where to display the linked URL. Only used when `href` is set.",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              }
+            },
             {
               "name": "disabled",
-              "description": "Whether the button is disabled or not.",
+              "description": "Whether the button is disabled or not. Ignored when `href` is set.",
               "value": { "type": "boolean", "default": "false" }
             },
             {
@@ -129,11 +168,6 @@
               "description": "Whether the button is expanded or not.\nOnly has an effect on the variant `ghost` to show an expanding icon.\nIf the property is not set, the icon will not be shown.\nIf it is set, the icon will either show an expanded or collapsed state.",
               "value": { "type": "\"true\" | \"false\" | undefined" }
             },
-            {
-              "name": "fluid",
-              "description": "Alters the shape of the button to be full width of its parent container",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "loading",
               "description": "Replaces the content with a spinner",
@@ -174,17 +208,27 @@
               },
               {
                 "name": "type",
-                "description": "The `type` of the underlying button element.",
+                "description": "The `type` of the underlying button element. Ignored when `href` is set.",
                 "type": "\"button\" | \"submit\" | \"reset\""
               },
               {
                 "name": "componentRole",
-                "description": "The `role` of the underlying button element.",
+                "description": "The `role` of the underlying button element. Ignored when `href` is set.",
                 "type": "string | undefined"
               },
+              {
+                "name": "href",
+                "description": "If set, renders the button as an <a> element instead of a <button> with the provided href.",
+                "type": "string"
+              },
+              {
+                "name": "target",
+                "description": "Tells the browser where to display the linked URL. Only used when `href` is set.",
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+              },
               {
                 "name": "disabled",
-                "description": "Whether the button is disabled or not.",
+                "description": "Whether the button is disabled or not. Ignored when `href` is set.",
                 "type": "boolean"
               },
               {
@@ -207,11 +251,6 @@
                 "description": "Whether the button is expanded or not.\nOnly has an effect on the variant `ghost` to show an expanding icon.\nIf the property is not set, the icon will not be shown.\nIf it is set, the icon will either show an expanded or collapsed state.",
                 "type": "\"true\" | \"false\" | undefined"
               },
-              {
-                "name": "fluid",
-                "description": "Alters the shape of the button to be full width of its parent container",
-                "type": "boolean"
-              },
               {
                 "name": "loading",
                 "description": "Replaces the content with a spinner",
@@ -221,33 +260,6 @@
             "events": []
           }
         },
-        {
-          "name": "leu-button-group",
-          "description": "A radio input-like button group component.\nIt allows only one button to be active at a time.\n---\n\n\n### **Events:**\n - **input** - When the value of the group changes by clicking a button\n\n### **Slots:**\n - _default_ - Slot for the buttons",
-          "doc-url": "",
-          "attributes": [],
-          "slots": [{ "name": "", "description": "Slot for the buttons" }],
-          "events": [
-            {
-              "name": "input",
-              "description": "When the value of the group changes by clicking a button"
-            }
-          ],
-          "js": {
-            "properties": [
-              {
-                "name": "value",
-                "description": "The value of the currently selected (active) button"
-              }
-            ],
-            "events": [
-              {
-                "name": "input",
-                "description": "When the value of the group changes by clicking a button"
-              }
-            ]
-          }
-        },
         {
           "name": "leu-chart-wrapper",
           "description": "A wrapper element for charts.\n---\n\n\n### **Slots:**\n - **title** - The title of the chart. Use a heading tag (h2-4) depending on your context.\n- **description** - A description of the chart. Content is wrapped in a `<p>` tag by the component.\n- **chart** - The actual chart\n- **caption** - A caption for the chart, e.g. a source or explanation of the data.\n- **download** - A download button or dropdown to export the chart in different formats.",
@@ -1680,6 +1692,119 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "leu-tab",
+          "description": "Tab Button.\n---\n\n\n### **Events:**\n - **leu:tab-select**",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "Name to link Button and Panel together",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active",
+              "description": "Is active",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [{ "name": "leu:tab-select", "type": "CustomEvent" }],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "Name to link Button and Panel together",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "Is active",
+                "type": "boolean"
+              }
+            ],
+            "events": [{ "name": "leu:tab-select", "type": "CustomEvent" }]
+          }
+        },
+        {
+          "name": "leu-tab-group",
+          "description": "Tab Group\n---\n\n\n### **Methods:**\n \n\n### **Slots:**\n - **tabs** - Slot for the leu-tab elements\n- **panels** - Slot for the leu-tab-panel elements",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "description": "Label for the tab list, used for accessibility.\nContent will not be visible on the page, but should be provided for screen readers.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active",
+              "description": "Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel.",
+              "value": { "type": "string", "default": "\"\"" }
+            }
+          ],
+          "slots": [
+            { "name": "tabs", "description": "Slot for the leu-tab elements" },
+            {
+              "name": "panels",
+              "description": "Slot for the leu-tab-panel elements"
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "label",
+                "description": "Label for the tab list, used for accessibility.\nContent will not be visible on the page, but should be provided for screen readers.",
+                "type": "string"
+              },
+              {
+                "name": "active",
+                "description": "Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel.",
+                "type": "string"
+              }
+            ],
+            "events": []
+          }
+        },
+        {
+          "name": "leu-tab-panel",
+          "description": "Tab Panel\n---\n\n\n### **Events:**\n - **leu:show-tab-panel** - Fired when a tab panel is shown",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "name",
+              "description": "Name of the tab. Apply the same name to the corresponding tab button to link them together.\nHas to be unique within the tab component.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [
+            {
+              "name": "leu:show-tab-panel",
+              "type": "CustomEvent",
+              "description": "Fired when a tab panel is shown"
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "name",
+                "description": "Name of the tab. Apply the same name to the corresponding tab button to link them together.\nHas to be unique within the tab component.",
+                "type": "string"
+              },
+              { "name": "active", "type": "boolean" }
+            ],
+            "events": [
+              {
+                "name": "leu:show-tab-panel",
+                "type": "CustomEvent",
+                "description": "Fired when a tab panel is shown"
+              }
+            ]
+          }
+        },
         {
           "name": "leu-table",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -19,9 +19,9 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/statistikzh/leu.git"
+    "url": "git+https://github.com/statistikZH/leu.git"
   },
-  "homepage": "https://github.com/statistikzh/leu/",
+  "homepage": "https://github.com/statistikZH/leu/",
   "scripts": {
     "analyze": "cem analyze --config custom-elements-manifest.config.js",
     "build": "npm run build:js && npm run build:css && npm run analyze",
@@ -36,6 +36,7 @@
     "format": "npm run format:eslint && npm run format:prettier",
     "format:eslint": "eslint . --fix",
     "format:prettier": "prettier \"**/*.{ts,js,mjs,md,mdx,html,json}\" --write",
+    "generate-component": "./scripts/generate-component/generate.js",
     "test": "web-test-runner --coverage",
     "test:watch": "web-test-runner --watch",
     "prepare": "husky",
@@ -66,7 +67,6 @@
     "@web/test-runner": "^0.20.2",
     "@web/test-runner-commands": "^0.9.0",
     "@web/test-runner-playwright": "^0.11.1",
-    "@whitespace/storybook-addon-html": "^9.0.0",
     "arg": "^5.0.2",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
@@ -113,6 +113,7 @@
     "bundle": false
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   }
 }

package/src/components/button/Button.ts

@@ -1,4 +1,5 @@
-import { html, nothing } from "lit"
+import { nothing } from "lit"
+import { html, literal } from "lit/static-html.js"
 import { classMap } from "lit/directives/class-map.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 import { property, query } from "lit/decorators.js"
@@ -58,19 +59,28 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   variant: "primary" | "secondary" | "ghost" = "primary"
 
   /**
-   * The `type` of the underlying button element.
+   * The `type` of the underlying button element. Ignored when `href` is set.
    */
   @property({ type: String, reflect: true })
   type: "button" | "submit" | "reset" = "button"
 
   /**
-   * The `role` of the underlying button element.
+   * The `role` of the underlying button element. Ignored when `href` is set.
    */
   @property({ type: String, reflect: true })
   componentRole?: string
 
   /**
-   * Whether the button is disabled or not.
+   * If set, renders the button as an <a> element instead of a <button> with the provided href.
+   */
+  @property({ type: String, reflect: true })
+  href: string
+
+  /** Tells the browser where to display the linked URL. Only used when `href` is set. */
+  @property() target: "_blank" | "_parent" | "_self" | "_top"
+
+  /**
+   * Whether the button is disabled or not. Ignored when `href` is set.
    * @type {boolean}
    */
   @property({ type: Boolean, reflect: true })
@@ -106,12 +116,6 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   @property({ type: String, reflect: true })
   expanded?: "true" | "false"
 
-  /**
-   * Alters the shape of the button to be full width of its parent container
-   */
-  @property({ type: Boolean, reflect: true })
-  fluid: boolean = false
-
   /**
    * Replaces the content with a spinner
    */
@@ -119,7 +123,7 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
   loading: boolean = false
 
   @query(".button")
-  private button!: HTMLButtonElement
+  private button!: HTMLButtonElement | HTMLAnchorElement
 
   private renderExpandingIcon() {
     if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
@@ -227,32 +231,40 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
     const hasIconDefault = Boolean(this.querySelector("leu-icon"))
     const hasIconBefore = this.hasSlotController.test("before")
     const hasIconAfter = this.hasSlotController.test("after")
+    const isLink = Boolean(this.href)
     const aria = this.getAriaAttributes()
 
+    const tag = isLink ? literal`a` : literal`button`
+
     const cssClasses = {
       button: true,
-      "icon-only": hasIconDefault && !hasTextContent,
-      "icon-before": hasIconBefore,
-      "icon-after": hasIconAfter,
-      round: this.round,
-      active: this.active,
-      disabled: this.disabled,
-      inverted: this.inverted,
-      loading: this.loading,
-      [this.variant]: true,
-      [this.size]: true,
+      "button--icon-only": hasIconDefault && !hasTextContent,
+      "button--icon-before": hasIconBefore,
+      "button--icon-after": hasIconAfter,
+      "button--round": this.round,
+      "button--active": this.active,
+      "button--inverted": this.inverted,
+      "button--loading": this.loading,
+      "button--disabled": this.disabled,
+      [`button--${this.variant}`]: true,
+      [`button--${this.size}`]: true,
     }
+
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
     return html`
-      <button
-        @click=${this.handleClick}
+      <${tag}
+        @click=${!isLink ? this.handleClick : undefined}
         aria-label=${ifDefined(aria.label)}
         aria-selected=${ifDefined(aria.selected)}
         aria-checked=${ifDefined(aria.checked)}
         aria-expanded=${ifDefined(this.expanded)}
-        role=${ifDefined(aria.role)}
+        role=${ifDefined(isLink ? undefined : aria.role)}
+        href=${ifDefined(this.href)}
+        target=${ifDefined(isLink ? this.target : undefined)}
         class=${classMap(cssClasses)}
-        ?disabled=${this.disabled || this.loading}
-        type=${this.type}
+        ?disabled=${(this.disabled && !isLink) || this.loading}
+        type=${ifDefined(isLink ? undefined : this.type)}
       >
         <div class="icon-wrapper icon-wrapper--before">
           <slot name="before" class="icon-wrapper__slot"></slot>
@@ -261,11 +273,14 @@ export class LeuButton extends FormAssociatedMixin(LeuElement) {
         <div class="icon-wrapper icon-wrapper--after">
           <slot name="after" class="icon-wrapper__slot"></slot>
         </div>
-        ${this.loading
-          ? html`<leu-spinner class="spinner"></leu-spinner>`
-          : nothing}
+        ${
+          this.loading
+            ? html`<leu-spinner class="spinner"></leu-spinner>`
+            : nothing
+        }
         ${this.renderExpandingIcon()}
-      </button>
+      </${tag}>
     `
+    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
   }
 }