@statistikzh/leu 0.26.0 → 0.28.0

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.26.0",
+  "version": "0.28.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -93,7 +93,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 +101,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 +141,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 +181,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 +224,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",
@@ -613,7 +625,7 @@
         },
         {
           "name": "leu-file-input",
-          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**",
+          "description": "\n---\n\n\n### **Events:**\n - **input**\n- **change**\n\n### **Methods:**\n ",
           "doc-url": "",
           "attributes": [
             {
@@ -733,11 +745,6 @@
               "description": "Adds a button to clear the input element",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "value",
-              "description": "The value of the input element.",
-              "value": { "type": "string", "default": "\"\"" }
-            },
             {
               "name": "error",
               "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -815,6 +822,11 @@
               "name": "novalidate",
               "description": "Disables the browser's validation.",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "value",
+              "description": "The default value of the input element.",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "events": [
@@ -846,11 +858,6 @@
                 "description": "Adds a button to clear the input element",
                 "type": "boolean"
               },
-              {
-                "name": "value",
-                "description": "The value of the input element.",
-                "type": "string"
-              },
               {
                 "name": "error",
                 "description": "A custom error that is completely independent of the validity state. Useful for displaying server side errors.",
@@ -926,6 +933,16 @@
                 "description": "Disables the browser's validation.",
                 "type": "boolean"
               },
+              {
+                "name": "defaultValue",
+                "description": "The default value of the input element.",
+                "type": "string"
+              },
+              {
+                "name": "value",
+                "description": "The value of the input element.",
+                "type": "string"
+              },
               { "name": "_validity", "type": "ValidityState | null" },
               { "name": "valueAsNumber" }
             ],
@@ -1581,23 +1598,13 @@
         },
         {
           "name": "leu-select",
-          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
+          "description": "\n---\n\n\n### **Methods:**\n - **_updateMenuItems(changed)** - Apply the current state to the menu items.\n- Set the active property when the value property has changed.\n- Hide menu items that do not match the filter.\n- **_getDisplayValue()** - Determines the value or label that should be displayed inside the toggle button.\n- **_isSelected(menuItemValue: _string_)** - Checks if the given value is selected.\n\n### **Slots:**\n - **before** - Optional content the appears before the option list\n- **after** - Optional content the appears after the option list",
           "doc-url": "",
           "attributes": [
             {
               "name": "value",
-              "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-              "value": { "type": "array", "default": "[]" }
-            },
-            {
-              "name": "name",
-              "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-              "value": { "type": "string", "default": "\"\"" }
-            },
-            {
-              "name": "open",
-              "description": "The expanded state of the popup",
-              "value": { "type": "boolean", "default": "false" }
+              "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+              "value": { "type": "Array<string>", "default": "[]" }
             },
             {
               "name": "label",
@@ -1609,11 +1616,6 @@
               "description": "Show a clearable button to reset the value",
               "value": { "type": "boolean", "default": "false" }
             },
-            {
-              "name": "disabled",
-              "description": "If the select should be disabled",
-              "value": { "type": "boolean", "default": "false" }
-            },
             {
               "name": "filterable",
               "description": "Show an input field to filter the options inside the popup",
@@ -1624,9 +1626,11 @@
               "description": "Allow multiple selections",
               "value": { "type": "boolean", "default": "false" }
             },
-            { "name": "_optionFilter", "value": { "type": "string" } },
-            { "name": "_hasFilterResults", "value": { "type": "string" } },
-            { "name": "_displayValue", "value": { "type": "string" } }
+            {
+              "name": "required",
+              "description": "Marks the input element as required",
+              "value": { "type": "boolean", "default": "false" }
+            }
           ],
           "slots": [
             {
@@ -1642,19 +1646,19 @@
           "js": {
             "properties": [
               {
-                "name": "open",
-                "description": "The expanded state of the popup",
-                "type": "boolean"
+                "name": "label",
+                "description": "The label of the select",
+                "type": "string"
               },
               {
-                "name": "disabled",
-                "description": "If the select should be disabled",
-                "type": "boolean"
+                "name": "defaultValue",
+                "description": "The default value of the select. Corresponds to the `value` HTML attribute.",
+                "type": "Array<string>"
               },
               {
-                "name": "multiple",
-                "description": "Allow multiple selections",
-                "type": "boolean"
+                "name": "value",
+                "description": "List of selected values. If they're set from outside the component, the select element\nfinds all the options that match the given values and selects them.",
+                "type": "Array<string>"
               },
               {
                 "name": "clearable",
@@ -1667,26 +1671,15 @@
                 "type": "boolean"
               },
               {
-                "name": "value",
-                "description": "List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them.",
-                "type": "array"
-              },
-              {
-                "name": "label",
-                "description": "The label of the select",
-                "type": "string"
+                "name": "multiple",
+                "description": "Allow multiple selections",
+                "type": "boolean"
               },
               {
-                "name": "name",
-                "description": "Reflects to the name attribute of the hidden input field that would be used in a form",
-                "type": "string"
-              },
-              { "name": "_optionFilterRef", "type": "Ref<LeuInput>" },
-              { "name": "_toggleButtonRef", "type": "Ref<HTMLButtonElement>" },
-              { "name": "_menuRef", "type": "Ref<LeuMenu>" },
-              { "name": "_optionFilter", "type": "string" },
-              { "name": "_hasFilterResults", "type": "boolean" },
-              { "name": "_displayValue", "type": "string" }
+                "name": "required",
+                "description": "Marks the input element as required",
+                "type": "boolean"
+              }
             ],
             "events": []
           }
@@ -1699,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.26.0",
+  "version": "0.28.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -66,7 +66,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",

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 */
   }
 }