@statistikzh/leu 0.8.0 → 0.10.0

package/src/components/dialog/stories/dialog.stories.js

@@ -0,0 +1,144 @@
+import { html } from "lit"
+import "../leu-dialog.js"
+import "../../input/leu-input.js"
+import "../../button/leu-button.js"
+
+export default {
+  title: "Dialog",
+  component: "leu-dialog",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=16052-88818&node-type=canvas&t=swv3JY6UIoCBUpXa-11",
+    },
+  },
+}
+
+function openDialog() {
+  document.querySelector("leu-dialog").show()
+}
+
+function closeDialog() {
+  document.querySelector("leu-dialog").close()
+}
+
+function OpenDialogButton() {
+  return html` <leu-button @click=${() => openDialog()}>
+    Open dialog
+  </leu-button>`
+}
+
+function Template({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <leu-input label="Eingabe"></leu-input>
+      <br />
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </leu-dialog>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Property: label",
+  rubric: "Property: sublabel",
+}
+
+function ActionButtonsTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+      <slot slot="actionbar">
+        <leu-button
+          variant="secondary"
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird geschlossen")
+            closeDialog()
+          }}
+        >
+          Abbrechen
+        </leu-button>
+        <leu-button
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird offen gelassen")
+          }}
+        >
+          Anwenden
+        </leu-button>
+      </slot>
+    </leu-dialog>
+  `
+}
+
+export const ActionButtons = ActionButtonsTemplate.bind({})
+ActionButtons.args = {
+  label: "Property: label",
+  sublabel: "Property: sublabel",
+}
+
+function SmallContentTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <p>Ein kurzer Text</p>
+    </leu-dialog>
+  `
+}
+
+export const SmallContent = SmallContentTemplate.bind({})
+SmallContent.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}
+
+function ScrollablePageTemplate({ label, sublabel }) {
+  return html`
+    <div style="height: 200vh">
+      ${OpenDialogButton()}
+
+      <leu-dialog label="${label}" sublabel="${sublabel}">
+        <leu-input label="Eingabe"></leu-input>
+        <br />
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet.
+      </leu-dialog>
+    </div>
+    <div style="height: 200vh">${OpenDialogButton()}</div>
+  `
+}
+
+export const ScrollablePage = ScrollablePageTemplate.bind({})
+ScrollablePage.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}

package/src/components/dialog/test/dialog.test.js

@@ -0,0 +1,85 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-dialog.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`<leu-dialog label="Title" sublabel="Category">
+      This is the content of the dialog.
+    </leu-dialog>`
+  )
+}
+
+describe("LeuDialog", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-dialog")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit when the modal is open", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("opens the dialog when calling show()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.true
+  })
+
+  it("closes the dialog when calling close()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+    el.close()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.false
+  })
+
+  it("renders a label and a sublabel", async () => {
+    const el = await defaultFixture()
+
+    const label = el.shadowRoot.querySelector("h1")
+    const sublabel = el.shadowRoot.querySelector(".subtitle")
+
+    expect(label).to.have.text("Title")
+    expect(sublabel).to.have.text("Category")
+  })
+
+  it("renders a close button", async () => {
+    const el = await defaultFixture()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+
+    expect(closeButton).to.exist
+  })
+
+  it("closes the dialog when clicking the close button", async () => {
+    const el = await defaultFixture()
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    el.show()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+    expect(dialog.open).to.be.true
+    closeButton.click()
+    expect(dialog.open).to.be.false
+  })
+})

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/input/input.css

@@ -54,6 +54,7 @@
 
   border: var(--input-border-width) solid var(--input-border-color);
   border-radius: 2px;
+  background: var(--leu-color-black-0);
 
   line-height: 1;
 }
@@ -79,6 +80,7 @@
   color: var(--input-color);
 
   border: 0;
+  background: var(--leu-color-black-0);
 
   padding-block: 2rem 1rem;
 }

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
@@ -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/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/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")
+  })
+})