@statistikzh/leu 0.8.0 → 0.9.0

package/dist/vue/index.d.ts

@@ -21,6 +21,7 @@ import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
+import type { LeuSpinner } from "../Spinner.js";
 import type { LeuTable } from "../Table.js";
 import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
 
@@ -255,6 +256,8 @@ type LeuMenuProps = {
 type LeuMenuItemProps = {
   /** Defines if the item is selected or checked */
   active?: LeuMenuItem["active"];
+  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+  multipleSelection?: LeuMenuItem["multipleSelection"];
   /** Disables the underlying button or link */
   disabled?: LeuMenuItem["disabled"];
   /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
@@ -383,6 +386,8 @@ type LeuSelectProps = {
   _menuRef?: LeuSelect["_menuRef"];
 };
 
+type LeuSpinnerProps = {};
+
 type LeuTableProps = {
   /**  */
   columns?: LeuTable["columns"];
@@ -674,6 +679,16 @@ export type CustomElements = {
    */
   "leu-select": DefineComponent<LeuSelectProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_
+   */
+  "leu-spinner": DefineComponent<LeuSpinnerProps>;
+
   /**
    *
    * ---

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.8.0",
+  "version": "0.9.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -803,6 +803,11 @@
               "description": "Defines if the item is selected or checked",
               "value": { "type": "boolean", "default": "false" }
             },
+            {
+              "name": "multipleSelection",
+              "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+              "value": { "type": "boolean", "default": "false" }
+            },
             {
               "name": "disabled",
               "description": "Disables the underlying button or link",
@@ -840,6 +845,11 @@
                 "description": "Defines if the item is selected or checked",
                 "value": { "type": "boolean" }
               },
+              {
+                "name": "multipleSelection",
+                "description": "If the item is part of a multiple selection. Renders a checkmark before the label when active",
+                "value": { "type": "boolean" }
+              },
               {
                 "name": "disabled",
                 "description": "Disables the underlying button or link",
@@ -1147,6 +1157,14 @@
             "events": []
           }
         },
+        {
+          "name": "leu-spinner",
+          "description": "\n---\n\n\n### **CSS Properties:**\n - **--leu-spinner-size** - The size of the spinner. _(default: undefined)_",
+          "doc-url": "",
+          "attributes": [],
+          "events": [],
+          "js": { "properties": [], "events": [] }
+        },
         {
           "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.8.0",
+  "version": "0.9.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scripts/generate-component/templates/[namespace]-[name].js

@@ -1,6 +1,5 @@
-import { defineElement } from "../../lib/defineElement.js"
 import { [Namespace][Name] } from "./[Name].js"
 
 export { [Namespace][Name] }
 
-defineElement("[name]", [Namespace][Name])
+[Namespace][Name].define("[namespace]-[name]")

package/src/components/button/button.css

@@ -8,7 +8,7 @@ button {
   appearance: none;
   transition: background 0.1s ease;
   cursor: pointer;
-  border: 1px solid transparent;
+  border: none;
   border-radius: 2px;
 
   max-width: 100%;
@@ -33,12 +33,11 @@ button:disabled {
 }
 
 button:focus-visible {
-  border: 1px solid var(--leu-color-black-0);
   outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
 }
 
 button.inverted:focus-visible {
-  border: 1px solid var(--leu-color-black-100);
   outline: 2px solid var(--leu-color-black-0);
 }
 

package/src/components/checkbox/Checkbox.js

@@ -59,7 +59,7 @@ export class LeuCheckbox extends LeuElement {
         @input=${this.handleInput}
         .checked=${this.checked}
         ?disabled=${this.disabled}
-        .value=${this.value}
+        .value=${this.value ?? ""}
       />
       <label for=${`checkbox-${this.name}`} class="label"><slot></slot></label>
       <leu-icon class="icon" name="check"></leu-icon>

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

@@ -17,9 +17,14 @@ export default {
   },
 }
 
-function Template({ label = "Label", value, checked, disabled }) {
+function Template({ label = "Label", value, checked, disabled, name = "" }) {
   return html`
-    <leu-checkbox .value=${value} ?checked=${checked} ?disabled=${disabled}>
+    <leu-checkbox
+      .value=${value}
+      ?checked=${checked}
+      ?disabled=${disabled}
+      name=${name}
+    >
       ${label}
     </leu-checkbox>
   `

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

package/src/styles/custom-properties.css

@@ -1,6 +1,7 @@
 @import url("./custom-media.css");
 
-:root {
+:root,
+:host {
   --leu-color-black-100: #000;
   --leu-color-black-80: #333;
   --leu-color-black-60: #666;
@@ -44,8 +45,12 @@
   --leu-color-func-red: #d93c1a;
   --leu-color-func-green: #1a7f1f;
 
-  --leu-font-family-regular: HelveticaNowRegular, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
-  --leu-font-family-black: HelveticaNowBlack, Arial Black, Helvetica, sans-serif; /* stylelint-disable-line value-keyword-case */
+  /* stylelint-disable value-keyword-case */
+  --leu-font-family-regular: InterRegular, HelveticaNowRegular, Helvetica,
+    sans-serif;
+  --leu-font-family-black: InterBlack, HelveticaNowBlack, Arial Black, Helvetica,
+    sans-serif;
+  /* stylelint-enable value-keyword-case */
 
   --leu-box-shadow-short: 0px 0px 2px var(--leu-color-black-transp-40);
   --leu-box-shadow-regular: 0px 0px 16px var(--leu-color-black-transp-20);

package/dist/LeuElement-a20c5fd6.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-a20c5fd6.d.ts","sourceRoot":"","sources":["LeuElement-a20c5fd6.js"],"names":[],"mappings":"AA+BA;IACE,8EAcC;CACF;AA7CD,sEAaC;2BAf0B,KAAK"}