@statistikzh/leu 0.7.0 → 0.9.0

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

@@ -43,6 +43,7 @@ export class LeuChipSelectable extends LeuChipBase {
      */
     this.variant = VARIANTS.toggle
     this.checked = false
+    this.value = ""
 
     if (this.variant === VARIANTS.radio && this.size === SIZES.small) {
       console.warn("Small size has no effect on radio variant")
@@ -62,7 +63,10 @@ export class LeuChipSelectable extends LeuChipBase {
       this.checked = nextcheckedState
       this.dispatchEvent(
         new CustomEvent("input", {
-          detail: { checked: this.checked },
+          detail: {
+            checked: this.checked,
+            value: this.getValue(),
+          },
           bubbles: true,
           composed: true,
         })
@@ -70,6 +74,14 @@ 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=${() => this.handleClick()}

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/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,7 +9,7 @@ async function defaultFixture(args = {}) {
   return fixture(
     html`
       <leu-chip-selectable
-        value="Publikationen"
+        value=${ifDefined(args.value)}
         variant=${ifDefined(args.variant)}
         ?checked=${args.checked}
         >Publikationen</leu-chip-selectable
@@ -90,4 +90,14 @@ describe("LeuChipSelectable", () => {
 
     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/dropdown/Dropdown.js

@@ -65,7 +65,7 @@ export class LeuDropdown extends LeuElement {
   }
 
   _documentClickHandler = (event) => {
-    if (!this.contains(event.target)) {
+    if (!event.composedPath().includes(this)) {
       this.expanded = false
     }
   }

package/src/components/dropdown/test/dropdown.test.js

@@ -1,10 +1,13 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
 
 import "../leu-dropdown.js"
 
-async function defaultFixture() {
-  return fixture(html` <leu-dropdown label="Download">
+async function defaultFixture(args = { expanded: false }) {
+  return fixture(html` <leu-dropdown
+    label="Download"
+    ?expanded=${args.expanded}
+  >
     <leu-menu>
       <leu-menu-item>Als CSV Tabelle</leu-menu-item>
       <leu-menu-item>Als XLS Tabelle</leu-menu-item>
@@ -28,4 +31,18 @@ describe("LeuDropdown", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("closes the popup when the document is clicked outside the component", async () => {
+    const el = await defaultFixture()
+
+    const toggleButton = el.shadowRoot.querySelector("leu-button")
+    toggleButton.click()
+    await elementUpdated(el)
+
+    expect(el.expanded).to.be.true
+
+    document.body.click()
+
+    expect(el.expanded).to.be.false
+  })
 })

package/src/components/menu/MenuItem.js

@@ -1,4 +1,4 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
@@ -15,6 +15,7 @@ import styles from "./menu-item.css"
  * @tagname leu-menu-item
  * @slot - The label of the menu item
  * @property {boolean} active - Defines if the item is selected or checked
+ * @property {boolean} multipleSelection - If the item is part of a multiple selection. Renders a checkmark before the label when active
  * @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
@@ -38,6 +39,11 @@ export class LeuMenuItem extends LeuElement {
 
   static properties = {
     active: { type: Boolean, reflect: true },
+    multipleSelection: {
+      type: Boolean,
+      reflect: true,
+      attr: "multiple-selection",
+    },
     disabled: { type: Boolean, reflect: true },
     tabbable: { type: Boolean, reflect: true },
     href: { type: String, reflect: true },
@@ -50,6 +56,7 @@ export class LeuMenuItem extends LeuElement {
 
     this.active = false
     this.disabled = false
+    this.multipleSelection = false
     this.value = undefined
     this.href = undefined
     this.tabbable = undefined
@@ -80,7 +87,7 @@ export class LeuMenuItem extends LeuElement {
    * @returns {string}
    */
   getValue() {
-    return this.value || this.innerText
+    return this.value || this.textContent.trim()
   }
 
   _getAria() {
@@ -142,9 +149,21 @@ export class LeuMenuItem extends LeuElement {
     </button>`
   }
 
+  _renderBeforeSlotDefault() {
+    if (!this.multipleSelection) {
+      return nothing
+    }
+
+    return this.active
+      ? html`<leu-icon name="check"></leu-icon>`
+      : html`<leu-icon></leu-icon>`
+  }
+
   render() {
     const content = html`
-      <slot class="before" name="before"></slot>
+      <slot class="before" name="before"
+        >${this._renderBeforeSlotDefault()}</slot
+      >
       <span class="label"><slot></slot></span>
       <slot class="after" name="after"></slot>
     `

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

@@ -6,10 +6,10 @@
 :host {
   --background: var(--leu-color-black-0);
   --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-accent-blue);
+  --background-active: var(--leu-color-func-cyan);
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
-  --color-active: var(--leu-color-black-0);
+  --color-active: var(--leu-color-black-100);
   --color-disabled: var(--leu-color-black-transp-20);
   --font-regular: var(--leu-font-family-regular);
   --font-black: var(--leu-font-family-black);

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

@@ -1,4 +1,4 @@
-import { html } from "lit"
+import { html, nothing } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-menu-item.js"
@@ -29,14 +29,19 @@ function Template(args) {
       href=${ifDefined(args.href)}
       ?active=${args.active}
       ?disabled=${args.disabled}
+      ?multipleSelection=${args.multipleSelection}
     >
-      ${isIcon(args.before)
-        ? html`<leu-icon slot="before" name=${args.before}></leu-icon>`
-        : html`<span slot="before">${args.before}</span>`}
+      ${args.before
+        ? isIcon(args.before)
+          ? html`<leu-icon slot="before" name=${args.before}></leu-icon>`
+          : html`<span slot="before">${args.before}</span>`
+        : nothing}
       ${args.label}
-      ${isIcon(args.after)
-        ? html`<leu-icon slot="after" name=${args.after}></leu-icon>`
-        : html`<span slot="after">${args.after}</span>`}
+      ${args.after
+        ? isIcon(args.after)
+          ? html`<leu-icon slot="after" name=${args.after}></leu-icon>`
+          : html`<span slot="after">${args.after}</span>`
+        : null}
     </leu-menu-item>
   `
 }
@@ -50,7 +55,7 @@ Active.args = {
 
 export const IconBefore = Template.bind({})
 IconBefore.args = {
-  before: "check",
+  before: "download",
 }
 
 export const IconAfterLink = Template.bind({})
@@ -69,3 +74,8 @@ export const IconPlaceholder = Template.bind({})
 IconPlaceholder.args = {
   before: "EMPTY",
 }
+
+export const MultipleSelection = Template.bind({})
+MultipleSelection.args = {
+  multipleSelection: true,
+}

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

@@ -15,6 +15,7 @@ async function defaultFixture(args = {}) {
       ?active=${args.active}
       ?disabled=${args.disabled}
       ?tabbable=${args.tabbable}
+      ?multipleSelection=${args.multipleSelection}
     >
       ${args.label}
     </leu-menu-item>
@@ -183,4 +184,26 @@ describe("LeuMenuItem", () => {
 
     expect(el.getValue()).to.equal("download-01")
   })
+
+  it("renders a palceholder icon when the menu item is part of multiple selection but not active", async () => {
+    const el = await defaultFixture({
+      label: "Download",
+      multipleSelection: true,
+    })
+
+    const icon = el.shadowRoot.querySelector("leu-icon")
+    expect(icon).to.exist
+    expect(icon).to.have.attribute("name", "EMPTY")
+  })
+
+  it("renders a check icon when the menu item is part of multiple selection and is active", async () => {
+    const el = await defaultFixture({
+      label: "Download",
+      multipleSelection: true,
+    })
+
+    const icon = el.shadowRoot.querySelector("leu-icon")
+    expect(icon).to.exist
+    expect(icon).to.have.attribute("name", "check")
+  })
 })

package/src/components/radio/Radio.js

@@ -54,7 +54,7 @@ export class LeuRadio extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
     `

package/src/components/radio/RadioGroup.js

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

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

@@ -9,7 +9,7 @@ export default {
   argTypes: {
     label: { control: "text" },
     orientation: {
-      options: ["VERTICAL", "HORIZONTAL"],
+      options: ["vertical", "horizontal"],
       control: { type: "radio" },
     },
   },
@@ -44,11 +44,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/radio/stories/radio.stories.js

@@ -22,9 +22,15 @@ function Template({
   value = "",
   checked = false,
   disabled = false,
+  name = "",
 }) {
   return html`
-    <leu-radio .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-radio
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-radio>
   `

package/src/components/select/Select.js

@@ -146,11 +146,13 @@ export class LeuSelect extends LeuElement {
 
     if (
       changedProperties.has("value") ||
-      changedProperties.has("_optionFilter")
+      changedProperties.has("_optionFilter") ||
+      changedProperties.has("multiple")
     ) {
       this._updateMenuItems({
         value: changedProperties.has("value"),
         optionFilter: changedProperties.has("_optionFilter"),
+        multiple: changedProperties.has("multiple"),
       })
     }
   }
@@ -171,6 +173,10 @@ export class LeuSelect extends LeuElement {
 
     /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
+      if (changed.multiple) {
+        menuItem.multipleSelection = this.multiple
+      }
+
       if (changed.optionFilter) {
         menuItem.hidden =
           this._optionFilter !== "" &&
@@ -203,11 +209,7 @@ export class LeuSelect extends LeuElement {
    * @param {MouseEvent} event
    */
   _handleDocumentClick = (event) => {
-    if (
-      event.target instanceof Node &&
-      !this.contains(event.target) &&
-      this.open
-    ) {
+    if (!event.composedPath().includes(this) && this.open) {
       this._closeDropdown()
     }
   }

package/src/components/select/test/select.test.js

@@ -404,4 +404,34 @@ describe("LeuSelect", () => {
     const popup = el.shadowRoot.querySelector("leu-popup")
     expect(popup.active).to.not.be.true
   })
+
+  it("sets the multipleSelection property on the menu items when multiple selection is allowed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
+    expect(menuItems.every((item) => item.multipleSelection)).to.be.true
+
+    el.multiple = false
+    await elementUpdated(el)
+
+    expect(menuItems.every((item) => !item.multipleSelection)).to.be.true
+
+  it("closes the popup when the document is clicked outside the component", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    document.body.click()
+
+    const popup = el.shadowRoot.querySelector("leu-popup")
+    expect(popup.active).to.not.be.true
+  })
 })

package/src/components/spinner/Spinner.js

@@ -0,0 +1,31 @@
+import { html } from "lit"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./spinner.css"
+
+/**
+ * @tagname leu-spinner
+ * @cssprop --leu-spinner-size - The size of the spinner.
+ */
+export class LeuSpinner extends LeuElement {
+  static styles = styles
+
+  render() {
+    return html`
+      <svg
+        class="spinner"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 56 56"
+        role="presentation"
+      >
+        <path
+          d="M13.8579 13.858c7.8105-7.8105 20.4737-7.8105 28.2842 0 7.8105 7.8104 7.8105 20.4737 0 28.2842-7.8105 7.8105-20.4737 7.8105-28.2842 0-4.3487-4.3486-6.2761-10.2016-5.7824-15.8838"
+          stroke="currentColor"
+          stroke-width="3"
+        />
+      </svg>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuSpinner } from "./Spinner.js"
+
+export { LeuSpinner }
+
+LeuSpinner.define("leu-spinner")

package/src/components/spinner/spinner.css

@@ -0,0 +1,20 @@
+@keyframes leu-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+:host {
+  color: var(--leu-color-func-cyan);
+}
+
+.spinner {
+  display: block;
+  width: var(--leu-spinner-size, 3.5rem);
+  height: var(--leu-spinner-size, 3.5rem);
+  animation: leu-spinner-rotate 1s cubic-bezier(0.49, 0.12, 0.56, 0.91) infinite;
+}

package/src/components/spinner/stories/spinner.stories.js

@@ -0,0 +1,29 @@
+import { html } from "lit"
+import "../leu-spinner.js"
+import { styleMap } from "lit/directives/style-map.js"
+
+export default {
+  title: "Spinner",
+  component: "leu-spinner",
+  argTypes: {
+    color: {
+      control: {
+        type: "color",
+        presetColors: ["#009ee0", "#d93c1a", "#1a7f1f"],
+      },
+    },
+  },
+}
+
+function Template({ size, color }) {
+  const styles = styleMap({
+    color,
+    "--leu-spinner-size": size ? `${size}px` : null,
+  })
+  return html` <leu-spinner style=${styles}></leu-spinner> `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  size: 56,
+}

package/src/components/spinner/test/spinner.test.js

@@ -0,0 +1,30 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-spinner.js"
+
+async function defaultFixture() {
+  return fixture(html`<leu-spinner></leu-spinner>`)
+}
+
+describe("LeuSpinner", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-spinner")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders a svg element with a 56x56 viewbox", async () => {
+    const el = await defaultFixture()
+
+    const svg = el.shadowRoot.querySelector("svg")
+
+    expect(svg).to.have.attribute("viewBox", "0 0 56 56")
+  })
+})