@statistikzh/leu 0.14.0 → 0.14.2

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

@@ -4,7 +4,7 @@ import { action } from "@storybook/addon-actions"
 import "../leu-chip-removable.js"
 
 export default {
-  title: "Chip/Removable",
+  title: "Components/Chip/Removable",
   component: "leu-chip-removable",
   args: {
     label: "Daten",

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

@@ -6,7 +6,7 @@ import "../leu-chip-selectable.js"
 import { SIZES, VARIANTS } from "../ChipSelectable.js"
 
 export default {
-  title: "Chip/Selectable",
+  title: "Components/Chip/Selectable",
   component: "leu-chip-selectable",
   argTypes: {
     variant: { control: "select", options: Object.values(VARIANTS) },

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

@@ -4,7 +4,7 @@ import "../../input/leu-input.js"
 import "../../button/leu-button.js"
 
 export default {
-  title: "Dialog",
+  title: "Components/Dialog",
   component: "leu-dialog",
   parameters: {
     design: {

package/src/components/dropdown/stories/dropdown.stories.js

@@ -8,7 +8,7 @@ import { paths as iconPaths } from "../../icon/paths.js"
  * @type {import("@storybook/web-components").Meta}
  */
 export default {
-  title: "Dropdown",
+  title: "Components/Dropdown",
   component: "leu-dropdown",
   parameters: {
     design: {

package/src/components/icon/stories/icon.stories.js

@@ -4,7 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { paths } from "../paths.js"
 
 export default {
-  title: "Icon",
+  title: "Components/Icon",
   component: "leu-icon",
   argTypes: {
     name: {

package/src/components/input/Input.js

@@ -171,7 +171,7 @@ export class LeuInput extends LeuElement {
    * Method for handling the blur event of the input element.
    * Checks validity of the input element and sets the validity state.
    * @private
-   * @param {FocusEvent} event
+   * @param {FocusEvent & {target: HTMLInputElement}} event
    * @returns {void}
    */
   handleBlur(event) {

package/src/components/input/input.css

@@ -95,8 +95,8 @@
 
 .prefix,
 .suffix {
-  padding-block: 2rem 1rem;
-
+  padding-block: calc(2rem - var(--input-border-width))
+    calc(1rem - var(--input-border-width));
   font-size: 1rem;
   line-height: 1.5;
   color: var(--input-affix-color);

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

@@ -7,9 +7,8 @@ import { SIZES } from "../Input.js"
 import { paths as iconPaths } from "../../icon/paths.js"
 
 export default {
-  title: "Input",
+  title: "Components/Input",
   component: "leu-input",
-  tags: ["autodocs"],
   argTypes: {
     size: {
       control: {

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

@@ -10,7 +10,7 @@ function isIcon(name) {
 }
 
 export default {
-  title: "Menu/Item",
+  title: "Components/Menu/Item",
   component: "leu-menu-item",
   args: {
     label: "Menu Item",

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

@@ -5,7 +5,7 @@ import "../../icon/leu-icon.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 export default {
-  title: "Menu",
+  title: "Components/Menu",
   component: "leu-menu",
   parameters: {
     design: {

package/src/components/pagination/stories/pagination.stories.js

@@ -58,7 +58,7 @@ const items = [
 ]
 
 export default {
-  title: "Pagination",
+  title: "Components/Pagination",
   component: "leu-pagination",
   args: {
     onPageChange: action("leu:pagechange"),

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/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/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

@@ -356,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
@@ -467,11 +455,7 @@ 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

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: {
@@ -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/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/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/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/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>
+```