@statistikzh/leu 0.6.0 → 0.8.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -46,7 +46,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
-    "lit": "^3.0.2"
+    "lit": "^3.1.4"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.3",
@@ -58,6 +58,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-replace": "^5.0.7",
     "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-designs": "^7.0.9",
     "@storybook/addon-essentials": "^7.6.17",
@@ -66,7 +67,7 @@
     "@storybook/web-components": "^7.6.17",
     "@web/dev-server": "^0.4.6",
     "@web/dev-server-rollup": "^0.6.4",
-    "@web/storybook-builder": "^0.1.16",
+    "@web/storybook-builder": "^0.1.6",
     "@web/storybook-framework-web-components": "^0.1.2",
     "@web/test-runner": "^0.18.2",
     "@web/test-runner-commands": "^0.9.0",

package/rollup.config.js

@@ -4,8 +4,17 @@ import { fileURLToPath } from "url"
 import postcss from "rollup-plugin-postcss"
 import postcssLit from "rollup-plugin-postcss-lit"
 import { babel } from "@rollup/plugin-babel"
+import replace from "@rollup/plugin-replace"
 
 export const plugins = [
+  {
+    plugin: replace,
+    args: [
+      {
+        __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+      },
+    ],
+  },
   {
     plugin: postcss,
     args: [

package/src/components/checkbox/CheckboxGroup.js

@@ -19,7 +19,8 @@ export class LeuCheckboxGroup extends LeuElement {
 
   constructor() {
     super()
-    this.orientation = "HORIZONTAL"
+    /** @type {"horizontal" | "vertical"} */
+    this.orientation = "horizontal"
     this.items = []
   }
 
@@ -38,7 +39,7 @@ export class LeuCheckboxGroup extends LeuElement {
   render() {
     const fieldsetClasses = {
       fieldset: "true",
-      "fieldset--vertical": this.orientation === "VERTICAL",
+      "fieldset--vertical": this.orientation === "vertical",
     }
 
     return html`

package/src/components/checkbox/stories/checkbox-group.stories.js

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     legend: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "checkbox" },
     },
   },
@@ -49,11 +49,11 @@ HorizontalLabel.args = {
 
 export const Vertical = Template.bind({})
 Vertical.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
 }
 
 export const VerticalLabel = Template.bind({})
 VerticalLabel.args = {
-  orientation: "VERTICAL",
+  orientation: "vertical",
   label: "Anrede",
 }

package/src/components/chip/ChipGroup.js

@@ -45,17 +45,41 @@ export class LeuChipGroup extends LeuElement {
   connectedCallback() {
     super.connectedCallback()
 
-    this.addEventListener("input", this.handleInput)
+    /**
+     * It is technically possible to add an event listener to the host element
+     * before it is connected to the dom. In that case the outside event listener would
+     * be called before the following event listener. But at this point multiple
+     * radio chips could be selected at the same time because `handleInput` hasn't been
+     * called yet. That's why we use the capture phase.
+     */
+    this.addEventListener("input", this.handleInput, { capture: true })
   }
 
   disconnectedCallback() {
     super.disconnectedCallback()
 
-    this.removeEventListener("input", this.handleInput)
+    this.removeEventListener("input", this.handleInput, { capture: true })
   }
 
   get value() {
-    return this.items.filter((i) => i.selected).map((i) => i.value)
+    return this.items.filter((i) => i.checked).map((i) => i.getValue())
+  }
+
+  /**
+   * Checks the items with the given values.
+   * If the selectionMode is single, only the first item with the given value is checked.
+   * @param {string[]} valueList
+   */
+  set value(valueList) {
+    let hasChanged = false
+
+    for (const item of this.items) {
+      item.checked = hasChanged ? false : valueList.includes(item.value)
+
+      if (this.selectionMode === SELECTION_MODES.single && item.checked) {
+        hasChanged = true
+      }
+    }
   }
 
   /**
@@ -78,7 +102,7 @@ export class LeuChipGroup extends LeuElement {
   handleInput = (e) => {
     if (this.selectionMode === SELECTION_MODES.single) {
       this.items.forEach((item) => {
-        item.selected = item === e.target // eslint-disable-line no-param-reassign
+        item.checked = item === e.target // eslint-disable-line no-param-reassign
       })
     }
   }

package/src/components/chip/ChipRemovable.js

@@ -7,6 +7,7 @@ import { LeuIcon } from "../icon/Icon.js"
  * @slot - The content of the chip
  * @tagname leu-chip-removable
  * @fires remove - Dispatched when the user clicks on the chip
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipRemovable extends LeuChipBase {
   static dependencies = {
@@ -15,12 +16,29 @@ export class LeuChipRemovable extends LeuChipBase {
 
   static properties = {
     ...LeuChipBase.properties,
+    value: { type: String, reflect: true },
+  }
+
+  constructor() {
+    super()
+    this.value = ""
+  }
+
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.textContent.trim()
   }
 
   handleClick() {
     const customEvent = new CustomEvent("leu:remove", {
       bubbles: true,
       composed: true,
+      detail: {
+        value: this.getValue(),
+      },
     })
     this.dispatchEvent(customEvent)
   }

package/src/components/chip/ChipSelectable.js

@@ -18,6 +18,8 @@ export const VARIANTS = {
  * @slot - The content of the chip
  * @prop {keyof typeof SIZES} size - The size of the chip. Not supported for radio variant.
  * @prop {keyof typeof VARIANTS} variant - `toggle` or `radio`. Determines if only one or multiple chips can be selected.
+ * @prop {boolean} checked - Whether the chip is selected.
+ * @prop {string} value - The value of the chip.
  */
 export class LeuChipSelectable extends LeuChipBase {
   static properties = {
@@ -25,7 +27,7 @@ export class LeuChipSelectable extends LeuChipBase {
     size: { type: String, reflect: true },
     variant: { type: String, reflect: true },
 
-    selected: { type: Boolean, reflect: true },
+    checked: { type: Boolean, reflect: true },
     value: { type: String, reflect: true },
   }
 
@@ -40,7 +42,8 @@ export class LeuChipSelectable extends LeuChipBase {
      * @default "toggle"
      */
     this.variant = VARIANTS.toggle
-    this.selected = false
+    this.checked = false
+    this.value = ""
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -48,19 +51,22 @@ export class LeuChipSelectable extends LeuChipBase {
   }
 
   handleClick() {
-    let nextSelectedState = this.selected
+    let nextcheckedState = this.checked
 
     if (this.variant === VARIANTS.radio) {
-      nextSelectedState = true
+      nextcheckedState = true
     } else {
-      nextSelectedState = !this.selected
+      nextcheckedState = !this.checked
     }
 
-    if (nextSelectedState !== this.selected) {
-      this.selected = nextSelectedState
+    if (nextcheckedState !== this.checked) {
+      this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { selected: this.selected },
+          detail: {
+            checked: this.checked,
+            value: this.getValue(),
+          },
           bubbles: true,
           composed: true,
         })
@@ -68,11 +74,19 @@ export class LeuChipSelectable extends LeuChipBase {
     }
   }
 
+  /**
+   * Returns the value of the chip. If `value` is not set, it will return the text content
+   * @returns {string}
+   */
+  getValue() {
+    return this.value || this.textContent.trim()
+  }
+
   render() {
     return html`<button
-      @click=${(e) => this.handleClick(e)}
+      @click=${() => this.handleClick()}
       class="button"
-      aria-pressed=${this.selected ? "true" : "false"}
+      aria-pressed=${this.checked ? "true" : "false"}
     >
       <span class="label"><slot></slot></span>
     </button>`

package/src/components/chip/chip.css

@@ -8,17 +8,17 @@
 :host {
   --chip-background-color-default: var(--leu-color-black-transp-10);
   --chip-background-color-hover: var(--leu-color-black-transp-20);
-  --chip-background-color-selected: var(--leu-color-black-100);
-  --chip-background-color-selected-hover: var(--leu-color-black-transp-80);
+  --chip-background-color-checked: var(--leu-color-black-100);
+  --chip-background-color-checked-hover: var(--leu-color-black-transp-80);
 
   --chip-color-default: var(--leu-color-black-transp-60);
   --chip-color-hover: var(--leu-color-black-100);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 
   --chip-radio-border-default: var(--leu-color-black-transp-40);
-  --chip-radio-border-selected: var(--leu-color-black-0);
+  --chip-radio-border-checked: var(--leu-color-black-0);
   --chip-radio-background-default: var(--leu-color-black-0);
-  --chip-radio-background-selected: var(--leu-color-func-cyan);
+  --chip-radio-background-checked: var(--leu-color-func-cyan);
 
   --chip-font-regular: var(--leu-font-family-regular);
   --chip-font-black: var(--leu-font-family-black);
@@ -42,14 +42,14 @@
 
   --chip-color-default: var(--leu-color-black-0);
   --chip-color-hover: var(--leu-color-black-0);
-  --chip-color-selected: var(--leu-color-black-0);
+  --chip-color-checked: var(--leu-color-black-0);
 }
 
-:host([selected]) {
-  --chip-background-color: var(--chip-background-color-selected);
-  --chip-color: var(--chip-color-selected);
-  --chip-radio-border: var(--chip-radio-border-selected);
-  --chip-radio-background: var(--chip-radio-background-selected);
+:host([checked]) {
+  --chip-background-color: var(--chip-background-color-checked);
+  --chip-color: var(--chip-color-checked);
+  --chip-radio-border: var(--chip-radio-border-checked);
+  --chip-radio-background: var(--chip-radio-background-checked);
 }
 
 .button {
@@ -95,10 +95,10 @@
   text-decoration: none;
 }
 
-:host([selected]) .button:hover,
-:host([selected]) .button:focus-visible {
-  --chip-background-color: var(--chip-background-color-selected-hover);
-  --chip-color: var(--chip-color-selected);
+:host([checked]) .button:hover,
+:host([checked]) .button:focus-visible {
+  --chip-background-color: var(--chip-background-color-checked-hover);
+  --chip-color: var(--chip-color-checked);
 }
 
 :host([href][size="large"]) .button {
@@ -126,7 +126,7 @@
   border-radius: 50%;
 }
 
-:host([variant="radio"][selected]) .button::before {
+:host([variant="radio"][checked]) .button::before {
   border-width: 3px;
 }
 

package/src/components/chip/stories/chip-group.stories.js

@@ -95,7 +95,8 @@ function DefaultTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        <leu-chip-removable ?inverted=${args.inverted}>
+          ${chip}
         </leu-chip-removable>
       `
     )}
@@ -112,8 +113,8 @@ function SingleTemplate(args) {
           ?inverted=${args.inverted}
           variant=${SELECTABLE_VARIANTS.radio}
           value="chip-${chip}"
-          label=${chip}
         >
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -126,11 +127,8 @@ function MultipleTemplate(args) {
   const content = html`
     ${chips.map(
       (chip) => html`
-        <leu-chip-selectable
-          ?inverted=${args.inverted}
-          value="chip-${chip}"
-          label=${chip}
-        >
+        <leu-chip-selectable ?inverted=${args.inverted} value="chip-${chip}">
+          ${chip}
         </leu-chip-selectable>
       `
     )}
@@ -143,8 +141,7 @@ function LabeledTemplate(args) {
   const content = html`
     ${links.map(
       (chip) => html`
-        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
-        </leu-chip-link>
+        <leu-chip-link ?inverted=${args.inverted}> ${chip} </leu-chip-link>
       `
     )}
   `

package/src/components/chip/stories/chip-removable.stories.js

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
 
 import "../leu-chip-removable.js"
 
@@ -6,7 +7,8 @@ export default {
   title: "Chip/Removable",
   component: "leu-chip-removable",
   args: {
-    label: "Publikationen",
+    label: "Daten",
+    onRemove: action("leu:remove"),
   },
   parameters: {
     design: {
@@ -27,7 +29,9 @@ function Template(args) {
         : "var(--leu-color-black-5)"}; padding: 1rem;"
       data-root
     >
-      <leu-chip-removable ?inverted=${args.inverted}
+      <leu-chip-removable
+        @leu:remove=${args.onRemove}
+        ?inverted=${args.inverted}
         >${args.label}</leu-chip-removable
       >
     </div>

package/src/components/chip/stories/chip-selectable.stories.js

@@ -38,7 +38,7 @@ function Template(args) {
       <leu-chip-selectable
         size=${ifDefined(args.size)}
         variant=${ifDefined(args.variant)}
-        ?selected=${args.selected}
+        ?checked=${args.checked}
         ?inverted=${args.inverted}
         >${args.label}</leu-chip-selectable
       >

package/src/components/chip/test/chip-group.test.js

@@ -106,4 +106,71 @@ describe("LeuChipGroup", () => {
 
     await expect(event).to.exist
   })
+
+  it("checks only chip when the value of the group is set (selection-mode=single)", async () => {
+    const el = await singleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("checks chips when the value of the group is set (selection-mode=multiple)", async () => {
+    const el = await multipleSelectionFixture()
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["2"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    // Should check the first item with the given value and not first item of the value list
+    el.value = ["2", "1"]
+
+    expect(el.items[0].checked).to.be.true
+    expect(el.items[1].checked).to.be.true
+    expect(el.items[2].checked).to.be.false
+
+    el.value = []
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+
+    el.value = ["asdf"]
+
+    expect(el.items[0].checked).to.be.false
+    expect(el.items[1].checked).to.be.false
+    expect(el.items[2].checked).to.be.false
+    expect(el.value).to.deep.equal([])
+  })
 })

package/src/components/chip/test/chip-removable.test.js

@@ -1,11 +1,18 @@
 import { html } from "lit"
 import { fixture, expect, oneEvent } from "@open-wc/testing"
 import { sendKeys } from "@web/test-runner-commands"
+import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-chip-removable.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-chip-removable>Daten</leu-chip-removable> `)
+async function defaultFixture(args = {}) {
+  return fixture(
+    html`
+      <leu-chip-removable value=${ifDefined(args.value)}
+        >${args.label ?? "Daten"}</leu-chip-removable
+      >
+    `
+  )
 }
 
 describe("LeuChipRemovable", () => {
@@ -70,4 +77,31 @@ describe("LeuChipRemovable", () => {
 
     expect(event).to.exist
   })
+
+  it("sends the value in the remove event", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+    const button = el.shadowRoot.querySelector("button")
+
+    setTimeout(() => button.click())
+    const event = await oneEvent(el, "leu:remove")
+
+    expect(event.detail.value).to.equal("Daten")
+
+    el.value = "test"
+
+    setTimeout(() => button.click())
+    const event2 = await oneEvent(el, "leu:remove")
+
+    expect(event2.detail.value).to.equal("test")
+  })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture({ label: `Daten              ` }) // eslint-disable-line no-irregular-whitespace
+
+    expect(el.getValue()).to.equal("Daten")
+
+    el.value = "daten-01"
+
+    expect(el.getValue()).to.equal("daten-01")
+  })
 })

package/src/components/chip/test/chip-selectable.test.js

@@ -9,9 +9,9 @@ async function defaultFixture(args = {}) {
   return fixture(
     html`
       <leu-chip-selectable
-        value="Publikationen"
+        value=${ifDefined(args.value)}
         variant=${ifDefined(args.variant)}
-        ?selected=${args.selected}
+        ?checked=${args.checked}
         >Publikationen</leu-chip-selectable
       >
     `
@@ -73,21 +73,31 @@ describe("LeuChipSelectable", () => {
     expect(event).to.exist
   })
 
-  it("removes the selected state when the button is clicked", async () => {
-    const el = await defaultFixture({ selected: true })
+  it("removes the checked state when the button is clicked", async () => {
+    const el = await defaultFixture({ checked: true })
     const button = el.shadowRoot.querySelector("button")
 
     button.click()
 
-    expect(el.selected).to.be.false
+    expect(el.checked).to.be.false
   })
 
-  it("doesn't remove the selected state of a selected radio chip", async () => {
-    const el = await defaultFixture({ variant: "radio", selected: true })
+  it("doesn't remove the checked state of a checked radio chip", async () => {
+    const el = await defaultFixture({ variant: "radio", checked: true })
 
     const button = el.shadowRoot.querySelector("button")
     button.click()
 
-    expect(el.selected).to.be.true
+    expect(el.checked).to.be.true
+  })
+
+  it("returns the value or label when getValue is called", async () => {
+    const el = await defaultFixture()
+
+    expect(el.getValue()).to.equal("Publikationen")
+
+    el.value = "publikationen-01"
+
+    expect(el.getValue()).to.equal("publikationen-01")
   })
 })

package/src/components/input/Input.js

@@ -10,6 +10,11 @@ import { LeuIcon } from "../icon/Icon.js"
 // @ts-ignore
 import styles from "./input.css"
 
+export const SIZES = Object.freeze({
+  SMALL: "small",
+  REGULAR: "regular",
+})
+
 /**
  * TODO:
  * - Add section to docs about how to mark up suffix and prefix for screenreaders
@@ -120,12 +125,13 @@ export class LeuInput extends LeuElement {
     this.clearable = false
 
     /** @type {"small" | "regular"} */
-    this.size = "regular"
+    this.size = SIZES.REGULAR
 
     this.type = "text"
     this._validity = null
     this.validationMessages = {}
     this.novalidate = false
+    this.value = ""
 
     /** @internal */
     this._identifier = ""
@@ -137,6 +143,13 @@ export class LeuInput extends LeuElement {
     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.

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

@@ -3,7 +3,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-input.js"
 
-import { SIZE_TYPES } from "../Input.js"
+import { SIZES } from "../Input.js"
 import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
@@ -15,7 +15,7 @@ export default {
       control: {
         type: "select",
       },
-      options: Object.values(SIZE_TYPES),
+      options: Object.values(SIZES),
     },
     icon: { control: "select", options: Object.keys(iconPaths) },
   },
@@ -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

@@ -449,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
+  })
 })