@statistikzh/leu 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## [0.2.0](https://github.com/statistikZH/leu/compare/v0.1.0...v0.2.0) (2023-11-28)
+
+
+### Features
+
+* **accordion:** implement accordion component ([b962d2c](https://github.com/statistikZH/leu/commit/b962d2c51aa17dbb909e8cbcb9ed0436d1b4b84d))
+* **input:** move focus into the input field after clearing the value ([#55](https://github.com/statistikZH/leu/issues/55)) ([ec92026](https://github.com/statistikZH/leu/commit/ec9202689ba2997570531c272162be1da54dc156))
+* **select:** add a more specific label if no options are available ([#57](https://github.com/statistikZH/leu/issues/57)) ([9ed62bf](https://github.com/statistikZH/leu/commit/9ed62bf5eb847c0814a92ff6066313eedf32b44a))
+* **select:** close the select element if a click happens outside of the element ([#58](https://github.com/statistikZH/leu/issues/58)) ([b2df185](https://github.com/statistikZH/leu/commit/b2df18537acc294552984eb539706400305564bb))
+
+
+### Bug Fixes
+
+* **input:** delegate focus to the actual input field ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **menu:** enforce styles of the hr element with important as they are part of the light dom ([d6d7a3f](https://github.com/statistikZH/leu/commit/d6d7a3f1a2182854747908cf142678f352e1e014))
+* **select:** actually set the filter input ref and use the correct attribute ([ee9b21d](https://github.com/statistikZH/leu/commit/ee9b21de69322b1ebc822ab3a2f3bfb1a0ba6572))
+* **theme:** fix a typo inside the hex notation ([82a6961](https://github.com/statistikZH/leu/commit/82a6961ae44c93826f6d97924a845f4d418b8f3b))
+
 ## [0.1.0](https://github.com/statistikZH/leu/compare/v0.0.2...v0.1.0) (2023-11-15)
 
 

package/README.md

@@ -20,12 +20,37 @@ npm i @statistikzh/leu
 
 ## Usage
 
+In order for the components to work, you need to load the theme styles and the font definitions globally.
+The theme file is part of the package (`dist/theme.css`).
+The fonts on the other hand have to be licensed and are therefore not included in the package.
+
+If you have an environment that resolves bare module imports, you can use the library like this:
+
+```html
+<link rel="stylesheet" href="@statistikzh/leu/theme.css" />
+<script type="module">
+  import "@statistikzh/leu/leu-input.js"
+</script>
+
+<leu-input></leu-input>
+```
+
+### CDN
+
+Browsers can't resolve bare module imports without import maps. But we can use a CDN to resolve the imports for us.
+This is useful if you're just using plain HTML and JavaScript without any build or transformation steps.
+Also this is applicable in an environment like [Observable](https://observablehq.com).
+
 ```html
+<link
+  rel="stylesheet"
+  href="https://esm.run/@statistikzh/leu@0.1/dist/theme.css"
+/>
 <script type="module">
-  import "@statistikzh/leu/leu-radio.js"
+  import "https://esm.run/@statistikzh/leu@0.1/dist/leu-input.js"
 </script>
 
-<leu-radio></leu-radio>
+<leu-input></leu-input>
 ```
 
 ## Linting and formatting

package/dist/Input.js

@@ -443,6 +443,7 @@ class LeuInput extends LitElement {
    */
   clear() {
     this.value = "";
+    this._inputRef.value.focus();
     this.dispatchEvent(new CustomEvent("input", {
       bubbles: true,
       composed: true
@@ -602,6 +603,13 @@ class LeuInput extends LitElement {
   }
 }
 _defineProperty(LeuInput, "styles", css_248z);
+/**
+ * @internal
+ */
+_defineProperty(LeuInput, "shadowRootOptions", {
+  ...LitElement.shadowRootOptions,
+  delegatesFocus: true
+});
 _defineProperty(LeuInput, "properties", {
   disabled: {
     type: Boolean,

package/dist/Menu.js

@@ -10,10 +10,17 @@ var css_248z = css`:host,
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
 
+/*
+ * Set styles with important as the hr element is part of the
+ * light dom and therefore is affected by the global styles.
+ */
+
 :host ::slotted(hr) {
-  border: 0;
-  border-top: 1px solid var(--menu-divider-color);
-  margin: 0.5rem 0;
+  border: 0 !important;
+  border-top: 1px solid var(--menu-divider-color) !important;
+  margin: 0.5rem 0 !important;
+  padding: 0 !important;
+  background: none !important;
 }
 `;
 

package/dist/Select.js

@@ -369,6 +369,16 @@ class LeuSelect extends LitElement {
   constructor() {
     super();
     _defineProperty(this, "hasSlotController", new HasSlotController(this, ["before", "after"]));
+    /**
+     * Handles clicks outside of the component to close the dropdown.
+     * @internal
+     * @param {MouseEvent} event
+     */
+    _defineProperty(this, "handleDocumentClick", event => {
+      if (!this.contains(event.target) && this.open) {
+        this.closeDropdown();
+      }
+    });
     /**
      * @internal
      * @param {KeyboardEvent} e
@@ -398,9 +408,17 @@ class LeuSelect extends LitElement {
     this.optionFilterRef = createRef();
     this.toggleButtonRef = createRef();
   }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
-      if (this.multiple) {
+      if (this.filterable) {
         this.optionFilterRef.value.focus();
       } else {
         this.menuRef.value.focus();
@@ -446,11 +464,6 @@ class LeuSelect extends LitElement {
     }
     this.emitUpdateEvents();
   }
-  clearOptionFilter() {
-    // refocus before removing the button, otherwise closeDropdown is triggered
-    this.optionFilterRef.value.focus();
-    this.optionFilter = "";
-  }
   toggleDropdown() {
     if (!this.disabled) {
       this.open = !this.open;
@@ -525,7 +538,9 @@ class LeuSelect extends LitElement {
               >
                 ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`;
-    }) : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+    }) : html`<leu-menu-item disabled
+              >${this.optionFilter === "" ? "Keine Optionen" : "Keine Resultate"}</leu-menu-item
+            >`}
       </leu-menu>
     `;
   }
@@ -536,6 +551,7 @@ class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
       >`;
     }

package/dist/theme.css

@@ -29,13 +29,13 @@
   --leu-color-accent-violet: #7f3da7;
   --leu-color-accent-gray: var(--leu-color-black-60);
 
-  --leu-color-accent-blue-soft: ##edf5fa;
-  --leu-color-accent-darkblue-soft: ##e0e8ee;
-  --leu-color-accent-turquoise-soft: ##e8f3f2;
-  --leu-color-accent-green-soft: ##ebf6eb;
-  --leu-color-accent-bordeaux-soft: ##f6e3ea;
-  --leu-color-accent-magenta-soft: ##fcedf3;
-  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
   --leu-color-accent-gray-soft: var(--leu-color-black-10);
 
   --leu-color-func-cyan: #009ee0;

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/accordion/Accordion.js

@@ -0,0 +1,102 @@
+import { LitElement, nothing } from "lit"
+import { html, unsafeStatic } from "lit/static-html.js"
+
+import { defineElement } from "../../lib/defineElement.js"
+import styles from "./accordion.css"
+
+/**
+ * @tagname leu-accordion
+ * @slot content - The content of the accordion. No styles will be applied to the content.
+ * @prop {Number} headingLevel - The heading level of the accordion title. Must be between 1 and 6.
+ * @prop {Boolean} open - The expanded state of the accordion.
+ * @prop {String} label - The label (title) of the accordion.
+ * @prop {String} labelPrefix - The prefix of the accordion label. e.g. "01"
+ * @attr {Number} heading-level - The heading level of the accordion title. Must be between 1 and 6.
+ * @attr {String} label-prefix - The prefix of the accordion label. e.g. "01"
+ */
+export class LeuAccordion extends LitElement {
+  static styles = styles
+
+  /** @internal */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    headingLevel: { type: Number, attribute: "heading-level" },
+    open: { type: Boolean, reflect: true },
+    label: { type: String },
+    labelPrefix: { type: String, attribute: "label-prefix" },
+  }
+
+  constructor() {
+    super()
+    this.headingLevel = 2
+    this.open = false
+    this.label = ""
+    this.labelPrefix = ""
+  }
+
+  /**
+   * Determines the heading tag of the accordion toggle.
+   * The headingLevel shouldn't be used directly to render the heading tag
+   * in order to avoid XSS issues.
+   * @returns {String} The heading tag of the accordion toggle.
+   * @internal
+   */
+  _getHeadingTag() {
+    let level = 2
+    if (this.headingLevel > 0 && this.headingLevel < 7) {
+      level = this.headingLevel
+    }
+
+    return `h${level}`
+  }
+
+  /**
+   * Toggles the accordion open state.
+   * @internal
+   */
+  _handleToggleClick() {
+    this.open = !this.open
+  }
+
+  render() {
+    const hTag = this._getHeadingTag()
+
+    /* The eslint rules don't recognize html import from lit/static-html.js */
+    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
+    return html`<${unsafeStatic(hTag)} class="heading"><button
+        id="toggle"
+        type="button"
+        class="button"
+        aria-controls="content"
+        aria-expanded="${this.open}"
+        @click=${this._handleToggleClick}
+      >
+        ${
+          this.labelPrefix
+            ? html`<span class="label-prefix">${this.labelPrefix}</span>`
+            : nothing
+        }
+        <span class="label">${this.label}</span>
+        <div class="plus"></div>
+      </button></${unsafeStatic(hTag)}>
+      <div
+        id="content"
+        class="content"
+        aria-labelledby="toggle"
+        role="region"
+        ?hidden=${!this.open}
+      >
+        <slot name="content"></slot>
+      </div>
+      <hr class="divider" />`
+  }
+  /* eslint-enable lit/binding-positions, lit/no-invalid-html */
+}
+
+export function defineAccordionElements() {
+  defineElement("accordion", LeuAccordion)
+}

package/src/components/accordion/accordion.css

@@ -0,0 +1,160 @@
+@import url("../../styles/custom-media.css");
+
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --accordion-font-regular: var(--leu-font-regular);
+  --accordion-font-black: var(--leu-font-black);
+
+  --accordion-toggle-font: var(--accordion-font-black);
+
+  --label-color: var(--leu-color-black-60);
+  --label-color-active: var(--leu-color-black-100);
+
+  --divider-color: var(--leu-color-black-20);
+  --divider-color-active: var(--leu-color-black-100);
+
+  --transition: 0.1s ease;
+
+  font-family: var(--chip-font-regular);
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto 0fr;
+
+  transition: grid-template-rows var(--transition);
+}
+
+:host([open]) {
+  grid-template-rows: auto 1fr;
+}
+
+.heading {
+  margin: 0;
+}
+
+.button {
+  width: 100%;
+  background: none;
+  padding: 1rem 0;
+  margin: none;
+  cursor: pointer;
+
+  border: none;
+
+  color: var(--label-color);
+  font-family: var(--accordion-toggle-font);
+  font-size: 1rem;
+  line-height: 1.5rem;
+  text-align: left;
+
+  display: flex;
+  gap: 0.25rem;
+
+  transition: color var(--transition);
+
+  @media (--viewport-regular) {
+    font-size: 1.125rem;
+    gap: 0.8rem;
+  }
+
+  @media (--viewport-xlarge) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 4px;
+}
+
+.button:hover,
+.button:focus-visible,
+:host([open]) .button {
+  color: var(--label-color-active);
+}
+
+.plus {
+  position: relative;
+  flex: 0 0 1rem;
+  aspect-ratio: 1;
+  align-self: center;
+  margin-inline: 0.5rem;
+}
+
+.plus::before,
+.plus::after {
+  content: "";
+
+  position: absolute;
+  top: calc(50% - 0.0625rem);
+  left: 0;
+
+  display: block;
+  width: 1rem;
+  height: 0.125rem;
+  aspect-ratio: 1 / 0.125;
+  background-color: currentcolor;
+  transition: transform var(--transition);
+}
+
+.plus::before {
+  transform: rotate(90deg);
+}
+
+:host([open]) .plus::before {
+  transform: rotate(180deg);
+}
+
+.label {
+  display: block;
+  flex-grow: 1;
+}
+
+.content {
+  overflow: hidden;
+  transition: visibility var(--transition), opacity var(--transition);
+}
+
+.content[hidden] {
+  display: block;
+  visibility: hidden;
+  opacity: 0;
+}
+
+slot[name="content"] {
+  display: block;
+  padding: 0.5rem 0 1.5rem;
+
+  @media (--viewport-medium) {
+    padding: 0.75rem 0 1.5rem;
+  }
+
+  @media (--viewport-xlarge) {
+    padding: 1rem 0 2.5rem;
+  }
+}
+
+.divider {
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  width: 100%;
+  height: 1px;
+  margin: 0;
+
+  border: none;
+  background-color: var(--divider-color);
+
+  transition: transform var(--transition), background-color var(--transition);
+}
+
+:host(:not([open])) .heading:is(:hover, :focus-visible) ~ .divider {
+  background-color: var(--divider-color-active);
+  transform: scaleY(3);
+}

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

@@ -0,0 +1,3 @@
+import { defineAccordionElements } from "./Accordion.js"
+
+defineAccordionElements()

package/src/components/accordion/stories/accordion.stories.js

@@ -0,0 +1,55 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-accordion.js"
+
+export default {
+  title: "Accordion",
+  component: "leu-accordion",
+  argTypes: {
+    headingLevel: {
+      control: {
+        type: "select",
+        options: [0, 1, 2, 3, 4, 5, 6],
+      },
+    },
+    content: {
+      control: {
+        type: "text",
+      },
+    },
+  },
+}
+
+function Template(args) {
+  return html` <leu-accordion
+    heading-level=${ifDefined(args.headingLevel)}
+    label=${ifDefined(args.label)}
+    label-prefix=${ifDefined(args.labelPrefix)}
+  >
+    <div slot="content">${args.content}</div>
+  </leu-accordion>`
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  headingLevel: 2,
+  label:
+    "Akkordeontitel der lang und noch länger werden kann und dann umbricht",
+  content: `Regular Interessierte können ab sofort die Genauigkeit ihrer Smartphones
+  und Navigationsgeräte überprüfen. Die Baudirektion hat beim Landesmuseum
+  in Zürich einen Kontrollpunkt beim Landesmuseum in Zürich einen
+  Kontrollpunktfür mobile Geräte eingerichtet – den ersten in der
+  Schweiz.P, Helvetic Roman Interessierte können ab sofort die Genauigkeit
+  ihrer Smartphones und Navigationsgeräte überprüfen.
+
+  Die Zürich einen Kontrollpunktfür mobile einen Kontrollpunkt beim
+  Landesmuseum in Zürich einen Kontrollpunktfür mobile Geräte eingerichtet
+  – den ersten in der Schweiz.`,
+}
+
+export const Prefix = Template.bind({})
+Prefix.args = {
+  ...Regular.args,
+  labelPrefix: "01",
+}

package/src/components/accordion/test/accordion.test.js

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-accordion.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-accordion /> `)
+}
+
+describe("LeuAccordion", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-accordion")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/input/Input.js

@@ -65,6 +65,14 @@ const VALIDATION_MESSAGES = {
 export class LeuInput extends LitElement {
   static styles = styles
 
+  /**
+   * @internal
+   */
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
   static properties = {
     disabled: { type: Boolean, reflect: true },
     required: { type: Boolean, reflect: true },
@@ -223,6 +231,8 @@ export class LeuInput extends LitElement {
   clear() {
     this.value = ""
 
+    this._inputRef.value.focus()
+
     this.dispatchEvent(
       new CustomEvent("input", { bubbles: true, composed: true })
     )

package/src/components/menu/menu.css

@@ -7,8 +7,14 @@
   --menu-divider-color: var(--leu-color-black-transp-20);
 }
 
+/*
+ * Set styles with important as the hr element is part of the
+ * light dom and therefore is affected by the global styles.
+ */
 :host ::slotted(hr) {
-  border: 0;
-  border-top: 1px solid var(--menu-divider-color);
-  margin: 0.5rem 0;
+  border: 0 !important;
+  border-top: 1px solid var(--menu-divider-color) !important;
+  margin: 0.5rem 0 !important;
+  padding: 0 !important;
+  background: none !important;
 }

package/src/components/select/Select.js

@@ -74,9 +74,19 @@ export class LeuSelect extends LitElement {
     this.toggleButtonRef = createRef()
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    document.addEventListener("click", this.handleDocumentClick)
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    document.removeEventListener("click", this.handleDocumentClick)
+  }
+
   updated(changedProperties) {
     if (changedProperties.has("open") && this.open) {
-      if (this.multiple) {
+      if (this.filterable) {
         this.optionFilterRef.value.focus()
       } else {
         this.menuRef.value.focus()
@@ -86,6 +96,17 @@ export class LeuSelect extends LitElement {
     }
   }
 
+  /**
+   * Handles clicks outside of the component to close the dropdown.
+   * @internal
+   * @param {MouseEvent} event
+   */
+  handleDocumentClick = (event) => {
+    if (!this.contains(event.target) && this.open) {
+      this.closeDropdown()
+    }
+  }
+
   /**
    * @internal
    * @param {KeyboardEvent} e
@@ -143,12 +164,6 @@ export class LeuSelect extends LitElement {
     this.emitUpdateEvents()
   }
 
-  clearOptionFilter() {
-    // refocus before removing the button, otherwise closeDropdown is triggered
-    this.optionFilterRef.value.focus()
-    this.optionFilter = ""
-  }
-
   toggleDropdown() {
     if (!this.disabled) {
       this.open = !this.open
@@ -242,7 +257,11 @@ export class LeuSelect extends LitElement {
                 ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`
             })
-          : html`<leu-menu-item disabled>Keine Resultate</leu-menu-item>`}
+          : html`<leu-menu-item disabled
+              >${this.optionFilter === ""
+                ? "Keine Optionen"
+                : "Keine Resultate"}</leu-menu-item
+            >`}
       </leu-menu>
     `
   }
@@ -254,6 +273,7 @@ export class LeuSelect extends LitElement {
         size="small"
         @input=${this.handleFilterInput}
         clearable
+        ref=${ref(this.optionFilterRef)}
         >Nach Stichwort filtern</leu-input
       >`
     }

package/src/styles/custom-properties.css

@@ -29,13 +29,13 @@
   --leu-color-accent-violet: #7f3da7;
   --leu-color-accent-gray: var(--leu-color-black-60);
 
-  --leu-color-accent-blue-soft: ##edf5fa;
-  --leu-color-accent-darkblue-soft: ##e0e8ee;
-  --leu-color-accent-turquoise-soft: ##e8f3f2;
-  --leu-color-accent-green-soft: ##ebf6eb;
-  --leu-color-accent-bordeaux-soft: ##f6e3ea;
-  --leu-color-accent-magenta-soft: ##fcedf3;
-  --leu-color-accent-violet-soft: ##ece2f1;
+  --leu-color-accent-blue-soft: #edf5fa;
+  --leu-color-accent-darkblue-soft: #e0e8ee;
+  --leu-color-accent-turquoise-soft: #e8f3f2;
+  --leu-color-accent-green-soft: #ebf6eb;
+  --leu-color-accent-bordeaux-soft: #f6e3ea;
+  --leu-color-accent-magenta-soft: #fcedf3;
+  --leu-color-accent-violet-soft: #ece2f1;
   --leu-color-accent-gray-soft: var(--leu-color-black-10);
 
   --leu-color-func-cyan: #009ee0;