@statistikzh/leu 0.13.1 → 0.14.1

package/src/components/pagination/test/pagination.test.js

@@ -7,12 +7,14 @@ import { spy } from "sinon"
 import "../leu-pagination.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`<leu-pagination
-    numOfItems=${ifDefined(args.numOfItems)}
-    itemsPerPage=${ifDefined(args.itemsPerPage)}
-    defaultPage=${ifDefined(args.defaultPage)}
-  >
-  </leu-pagination>`)
+  return fixture(
+    html`<leu-pagination
+      numOfItems=${ifDefined(args.numOfItems)}
+      itemsPerPage=${ifDefined(args.itemsPerPage)}
+      defaultPage=${ifDefined(args.defaultPage)}
+    >
+    </leu-pagination>`,
+  )
 }
 
 describe("LeuPagination", () => {

package/src/components/popup/Popup.js

@@ -130,7 +130,7 @@ export class LeuPopup extends LeuElement {
               ? `${rects.reference.height}px`
               : ""
           },
-        })
+        }),
       )
     } else {
       // Cleanup styles if we're not matching width/height
@@ -159,7 +159,7 @@ export class LeuPopup extends LeuElement {
             if (setMaxHeight) {
               this.style.setProperty(
                 "--auto-size-available-height",
-                `${availableHeight}px`
+                `${availableHeight}px`,
               )
             } else {
               this.style.removeProperty("--auto-size-available-height")
@@ -168,13 +168,13 @@ export class LeuPopup extends LeuElement {
             if (setMaxWidth) {
               this.style.setProperty(
                 "--auto-size-available-width",
-                `${availableWidth}px`
+                `${availableWidth}px`,
               )
             } else {
               this.style.removeProperty("--auto-size-available-width")
             }
           },
-        })
+        }),
       )
     } else {
       // Cleanup styles if we're not auto-sizing

package/src/components/popup/stories/popup.stories.js

@@ -5,7 +5,7 @@ import "../leu-popup.js"
 import "../../button/leu-button.js"
 
 export default {
-  title: "Popup",
+  title: "Components/Popup",
   component: "leu-popup",
   argTypes: {
     placement: {

package/src/components/popup/test/popup.test.js

@@ -4,14 +4,12 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-popup.js"
 
 async function defaultFixture() {
-  return fixture(
-    html`
-      <leu-popup
-        ><div slot="anchor"></div>
-        <p>Popup content</p></leu-popup
-      >
-    `
-  )
+  return fixture(html`
+    <leu-popup
+      ><div slot="anchor"></div>
+      <p>Popup content</p></leu-popup
+    >
+  `)
 }
 
 describe("LeuPopup", () => {

package/src/components/radio/RadioGroup.js

@@ -143,10 +143,10 @@ export class LeuRadioGroup extends LeuElement {
 
   initializeIndex() {
     const index = this.items.findIndex(
-      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled")
+      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
     )
     const nextEnabledIndex = this.items.findIndex(
-      (item) => !item.hasAttribute("disabled")
+      (item) => !item.hasAttribute("disabled"),
     )
 
     this._currentIndex = index >= 0 ? index : nextEnabledIndex

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

@@ -4,7 +4,7 @@ import "../leu-radio-group.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
-  title: "Radio/Group",
+  title: "Components/Radio/Group",
   component: "leu-radio-group",
   argTypes: {
     label: { control: "text" },

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

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-radio.js"
 
 export default {
-  title: "Radio",
+  title: "Components/Radio",
   component: "leu-radio",
   argTypes: {
     label: {

package/src/components/range/Range.js

@@ -96,7 +96,7 @@ export class LeuRange extends LeuElement {
 
   get valueAsArray() {
     return Array.from(this.shadowRoot.querySelectorAll("input")).map(
-      (input) => input.valueAsNumber
+      (input) => input.valueAsNumber,
     )
   }
 
@@ -205,30 +205,29 @@ export class LeuRange extends LeuElement {
                 class="output"
                 for="input-${type}"
                 value=${defaultValue[index]}
-              ></output>`
+              ></output>`,
           )}
         </div>
         <div class="inputs">
           ${inputs.map(
-            (type, index) =>
-              html`
-                <input
-                  @input=${(e) => this._handleInput(index, e)}
-                  @pointerdown=${multiple && !disabled && index === 0
-                    ? this._handlePointerDown
-                    : undefined}
-                  type="range"
-                  class="range range--${type}"
-                  id="input-${type}"
-                  name=${this.name}
-                  min=${this.min}
-                  max=${this.max}
-                  step=${this.step}
-                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
-                  ?disabled=${disabled}
-                  .value=${defaultValue[index].toString()}
-                />
-              `
+            (type, index) => html`
+              <input
+                @input=${(e) => this._handleInput(index, e)}
+                @pointerdown=${multiple && !disabled && index === 0
+                  ? this._handlePointerDown
+                  : undefined}
+                type="range"
+                class="range range--${type}"
+                id="input-${type}"
+                name=${this.name}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                ?disabled=${disabled}
+                .value=${defaultValue[index].toString()}
+              />
+            `,
           )}
         </div>
       </div>

package/src/components/range/stories/range-slider.stories.js

@@ -8,7 +8,7 @@ import "../../input/leu-input.js"
  * @type {import("@storybook/web-components").Meta}
  */
 export default {
-  title: "Range",
+  title: "Components/Range",
   component: "leu-range",
   parameters: {
     design: {

package/src/components/scroll-top/stories/scroll-top.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-scroll-top.js"
 
 export default {
-  title: "ScrollTop",
+  title: "Components/ScrollTop",
   component: "leu-scroll-top",
 }
 

package/src/components/select/Select.js

@@ -171,6 +171,10 @@ export class LeuSelect extends LeuElement {
     const menuItems = menu.getMenuItems()
     let hasFilterResults = false
 
+    if (changed.value && this.value.length === 0) {
+      this._displayValue = ""
+    }
+
     /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
       if (changed.multiple) {
@@ -352,18 +356,6 @@ export class LeuSelect extends LeuElement {
     }
   }
 
-  /**
-   * Close the dropdown if the focus moves outside the component.
-   */
-  _handlePopupFocusOut(event) {
-    if (
-      !this.contains(event.relatedTarget) &&
-      !this.shadowRoot.contains(event.relatedTarget)
-    ) {
-      this._closeDropdown()
-    }
-  }
-
   _renderFilterInput() {
     if (this.filterable) {
       return html` <leu-input
@@ -463,21 +455,18 @@ export class LeuSelect extends LeuElement {
           autoSizePadding="8"
         >
           ${this._renderToggleButton()}
-          <div
-            id="select-popup"
-            class="select-menu-container"
-            @focusout=${this._handlePopupFocusOut}
-          >
+          <div id="select-popup" class="select-menu-container">
             <slot name="before" class="before"></slot>
             ${this._renderFilterInput()}
             <leu-menu
               ref=${ref(this._menuRef)}
               role="listbox"
               aria-multiselectable=${ifDefined(
-                this.multiple ? "true" : undefined
+                this.multiple ? "true" : undefined,
               )}
               class="menu"
               @click=${this._handleMenuItemClick}
+              aria-labelledby="select-label"
             >
               <slot></slot>
             </leu-menu>

package/src/components/select/stories/select.stories.js

@@ -8,7 +8,7 @@ import "../../menu/leu-menu-item.js"
 import { MUNICIPALITIES } from "../test/fixtures.js"
 
 export default {
-  title: "Select",
+  title: "Components/Select",
   component: "leu-select",
   parameters: {
     design: {
@@ -59,7 +59,7 @@ function Template({
           >
             ${LeuSelect.getOptionLabel(option)}
           </leu-menu-item>
-        `
+        `,
       )}
     </leu-select>
     <div style="margin-top: 50vh"></div>
@@ -68,7 +68,7 @@ function Template({
 
 function TemplateSlots(args) {
   const before = html`<div>before</div>`
-  const after = html`<div>after <input type="text"></input></div>`
+  const after = html`<div>after <input type="text" /></div>`
 
   return Template({ ...args, before, after })
 }

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

@@ -8,16 +8,18 @@ import "../../menu/leu-menu-item.js"
 import { MUNICIPALITIES } from "./fixtures.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`<leu-select
-    label=${ifDefined(args.label)}
-    .value=${args.value ?? []}
-    ?clearable=${args.clearable}
-    ?disabled=${args.disabled}
-    ?filterable=${args.filterable}
-    ?multiple=${args.multiple}
-  >
-    ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
-  </leu-select> `)
+  return fixture(
+    html`<leu-select
+      label=${ifDefined(args.label)}
+      .value=${args.value ?? []}
+      ?clearable=${args.clearable}
+      ?disabled=${args.disabled}
+      ?filterable=${args.filterable}
+      ?multiple=${args.multiple}
+    >
+      ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
+    </leu-select> `,
+  )
 }
 
 describe("LeuSelect", () => {
@@ -114,7 +116,7 @@ describe("LeuSelect", () => {
     const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
 
     const menuItem = menuItems.find(
-      (item) => item.textContent === "Affoltern am Albis"
+      (item) => item.textContent === "Affoltern am Albis",
     )
 
     expect(menuItem).to.have.attribute("active")
@@ -204,7 +206,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
     expect(visibleMenuItems.length).to.equal(6)
   })
@@ -231,7 +233,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
 
     expect(visibleMenuItems.length).to.equal(MUNICIPALITIES.length)
@@ -296,7 +298,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Maur"
+      (item) => item.textContent === "Maur",
     )
     menuItem.click()
 
@@ -331,7 +333,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()
 
@@ -350,7 +352,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()
 

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

@@ -3,7 +3,7 @@ import "../leu-spinner.js"
 import { styleMap } from "lit/directives/style-map.js"
 
 export default {
-  title: "Spinner",
+  title: "Components/Spinner",
   component: "leu-spinner",
   argTypes: {
     color: {

package/src/components/table/Table.js

@@ -141,7 +141,7 @@ export class LeuTable extends LeuElement {
     return this.itemsPerPage && this.itemsPerPage > 0
       ? this._sortedData.slice(
           (this._page - 1) * this.itemsPerPage,
-          this._page * this.itemsPerPage
+          this._page * this.itemsPerPage,
         )
       : this._sortedData
   }
@@ -214,7 +214,7 @@ export class LeuTable extends LeuElement {
                             : nothing}
                         </button>`
                       : col.name}
-                  </th>`
+                  </th>`,
               )}
             </tr>
           </thead>
@@ -226,9 +226,9 @@ export class LeuTable extends LeuElement {
                     (col) =>
                       html`<td style=${bodyStyle(col, row)}>
                         ${col.value(row)}
-                      </td>`
+                      </td>`,
                   )}
-                </tr>`
+                </tr>`,
             )}
           </tbody>
         </table>

package/src/components/table/stories/table.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-table.js"
 
 export default {
-  title: "Table",
+  title: "Components/Table",
   component: "leu-table",
   parameters: {
     design: {

package/src/components/table/test/table.test.js

@@ -17,8 +17,9 @@ const data = [
 ]
 
 async function defaultFixture() {
-  return fixture(html`<leu-table .columns=${columns} .data=${data}>
-  </leu-table>`)
+  return fixture(
+    html`<leu-table .columns=${columns} .data=${data}> </leu-table>`,
+  )
 }
 
 describe("LeuTable", () => {

package/src/components/visually-hidden/stories/visually-hidden.stories.js

@@ -2,7 +2,7 @@ import { html } from "lit"
 import "../leu-visually-hidden.js"
 
 export default {
-  title: "VisuallyHidden",
+  title: "Components/VisuallyHidden",
   component: "leu-visually-hidden",
   argTypes: {
     content: {

package/src/components/visually-hidden/test/visually-hidden.test.js

@@ -4,13 +4,11 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-visually-hidden.js"
 
 async function defaultFixture() {
-  return fixture(
-    html`
-      <leu-visually-hidden>
-        This is a text that shouldn't be visible but still accessible.
-      </leu-visually-hidden>
-    `
-  )
+  return fixture(html`
+    <leu-visually-hidden>
+      This is a text that shouldn't be visible but still accessible.
+    </leu-visually-hidden>
+  `)
 }
 
 describe("LeuVisuallyHidden", () => {
@@ -30,7 +28,7 @@ describe("LeuVisuallyHidden", () => {
     const el = await defaultFixture()
 
     expect(el).dom.to.equal(
-      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>"
+      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>",
     )
   })
 })

package/src/docs/contributing.mdx

@@ -0,0 +1,154 @@
+import { Meta, Markdown } from "@storybook/blocks"
+
+<Meta title="Introduction/Contributing" />
+
+# Contributing
+
+Contributing to this project is highly appreciated. We are happy to receive feedback, bug reports, feature requests, and pull requests.
+
+## Web compenents
+
+Leu is entirely built with the lit library and custom elements.
+If you haven't worked with either of them before, [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements) has a good introduction to custom elements.
+The [lit documentation](https://lit.dev/docs/) is a good starting point to get to know the library.
+
+## Create a new component
+
+To create a starting point for a new component, run
+
+```bash
+./scripts/generate-component/generate.js
+```
+
+Running it with `--help` will show you all available options.
+
+It creates a basic structure for a new component in the `src/components` directory.
+
+## Linting and formatting
+
+This project uses eslint and prettier to lint and format the code.
+commitlint is also used the enforce conventional commit messages.
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+## Development guidelines
+
+A few rules are necessary when developing a component library. The following conventions and guidelines should be followed when new features are implemented.
+
+At the same time they're not set in stone. If the there is a good reason to change them open a pull request.
+
+### Naming
+
+Every element or custom property that will be globally available has to be prefixed with `leu`.
+
+```js
+/* Custom elements */
+class LeuRadio extends LeuElement {
+  ...
+}
+
+window.customElements.define("leu-input", LeuInput)
+```
+
+```css
+/* CSS custom property of the theme */
+:root {
+  --leu-color-black-0: #000;
+}
+```
+
+### Scoped styles
+
+All CSS declarations have to live inside a custom element. This way we ensure that the styles won't interfere with the environment they're loaded into.
+Styles that are shared between components should be defined as global custom properties inside the `styles/custom-properties.css`.
+When a global custom property is used inside a component it could be a good practice to assign them to a local custom property with a semantic naming.
+This only make a sense when the component has a certain complexity and the global custom property are used multiple times.
+
+```css
+:host {
+  --radio-color-disabled: var(--leu-color-black-20);
+}
+```
+
+### Value property
+
+All custom elements that contain a value of some sort (like an input or select fields) have to implement a `value` property.
+Everytime the value of the `value` property changes a `input` event has to be dispatched.
+This behaviour matches the way [Observable](https://observablehq.com) handles and observes changes of values that are contained in arbitrary elements. We decided to take over this pattern as it is usable in every other environment too.
+
+### Custom events
+
+Name of custom events have to be prefixed with `leu:`.
+
+```js
+this.dispatchEvent(new Event("leu:select", { bubbles: true, composed: true }))
+```
+
+### Dependencies
+
+We try to use as little non-dev dependencies as possible. The following dependencies are used:
+
+- `lit` is used to build all components.
+- `@floating-ui/dom` is used to position tooltips etc.
+
+### Composability
+
+Components should be composable. This means that it should be possible to use them in combination with other components without any problems.
+It can also make sense to split a component into multiple smaller components.
+
+The `leu-dropdown` element is a good example for this.
+
+```html
+<leu-dropdown label="Download">
+  <leu-menu>
+    <leu-menu-item>PDF</leu-menu-item>
+    <leu-menu-item>CSV</leu-menu-item>
+    <leu-menu-item>Excel</leu-menu-item>
+  </leu-menu>
+</leu-dropdown>
+```
+
+It could've been built as a single element by passing data to a property. The component could then render the menu and the menu items itself inside the shadow dom.
+
+```js
+html`<leu-dropdown
+  label="Download"
+  .items=${["PDF", "CSV", "Excel"]}
+></leu-dropdown>`
+```
+
+But this approach would make it impossible to create and populate the element with only HTML. It also is much harderß to apply event listeners or custom attributes like `role` to specific child elements.
+
+The `leu-table` element is (currently) built like that and shouldn't be used as an example for composability.

package/src/docs/installation.mdx

@@ -0,0 +1,35 @@
+import { Meta, Markdown } from "@storybook/blocks"
+
+<Meta title="Introduction/Installation" />
+
+# Installation
+
+You can load the leu library from a CDN or install it via npm.
+
+## npm installation
+
+For most projects, you will want to install the library via npm.
+
+```bash
+npm i @statistikzh/leu
+```
+
+## CDN
+
+If you are in you're just using plain HTML and JavaScript without any build or transformation steps or just want to tinker around with the library, you can use a CDN.
+Browsers can't resolve bare module imports without import maps. But we can use a CDN like esm.sh to resolve the imports for us.
+This is also applicable in an environment like [Observable](https://observablehq.com).
+
+If you're using this approach, **always** define the version you want to use. This way you can ensure that your application doesn't break when a new version is released.
+
+> ⚠️ Be aware that most CDN (including esm.sh) are probably not GDPR compliant. Don't use this approach in a production environment.
+
+```html
+<link
+  rel="stylesheet"
+  href="https://esm.sh/@statistikzh/leu@0.13.1/dist/theme.css"
+/>
+<script type="module">
+  import "https://esm.sh/@statistikzh/leu@0.13.1/dist/leu-input.js"
+</script>
+```