@statistikzh/leu 0.2.0 → 0.4.0

package/scripts/generate-component/templates/[Name].js

@@ -1,5 +1,4 @@
 import { html, LitElement } from "lit"
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./[name].css"
 
 /**
@@ -27,7 +26,3 @@ export class Leu[Name] extends LitElement {
     `
   }
 }
-
-export function define[Name]Elements() {
-  defineElement("[name]", [Namespace][Name])
-}

package/scripts/generate-component/templates/[name].css

@@ -7,5 +7,5 @@
   --[name]-font-regular: var(--leu-font-regular);
   --[name]-font-black: var(--leu-font-black);
 
-  font-family: var(--chip-font-regular);
+  font-family: var(--[name]-font-regular);
 }

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

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

package/src/components/accordion/Accordion.js

@@ -1,7 +1,6 @@
 import { LitElement, nothing } from "lit"
 import { html, unsafeStatic } from "lit/static-html.js"
 
-import { defineElement } from "../../lib/defineElement.js"
 import styles from "./accordion.css"
 
 /**
@@ -24,10 +23,10 @@ export class LeuAccordion extends LitElement {
   }
 
   static properties = {
-    headingLevel: { type: Number, attribute: "heading-level" },
+    headingLevel: { type: Number, attribute: "heading-level", reflect: true },
     open: { type: Boolean, reflect: true },
-    label: { type: String },
-    labelPrefix: { type: String, attribute: "label-prefix" },
+    label: { type: String, reflect: true },
+    labelPrefix: { type: String, attribute: "label-prefix", reflect: true },
   }
 
   constructor() {
@@ -35,7 +34,6 @@ export class LeuAccordion extends LitElement {
     this.headingLevel = 2
     this.open = false
     this.label = ""
-    this.labelPrefix = ""
   }
 
   /**
@@ -96,7 +94,3 @@ export class LeuAccordion extends LitElement {
   }
   /* eslint-enable lit/binding-positions, lit/no-invalid-html */
 }
-
-export function defineAccordionElements() {
-  defineElement("accordion", LeuAccordion)
-}

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

@@ -1,3 +1,6 @@
-import { defineAccordionElements } from "./Accordion.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuAccordion } from "./Accordion.js"
 
-defineAccordionElements()
+export { LeuAccordion }
+
+defineElement("accordion", LeuAccordion)

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

@@ -8,10 +8,7 @@ export default {
   component: "leu-accordion",
   argTypes: {
     headingLevel: {
-      control: {
-        type: "select",
-        options: [0, 1, 2, 3, 4, 5, 6],
-      },
+      options: [0, 1, 2, 3, 4, 5, 6],
     },
     content: {
       control: {
@@ -19,6 +16,12 @@ export default {
       },
     },
   },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82464&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 function Template(args) {

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

@@ -4,12 +4,14 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-accordion.js"
 
 async function defaultFixture() {
-  return fixture(html` <leu-accordion /> `)
+  return fixture(
+    html` <leu-accordion label="Titel des Akkordeons"></leu-accordion> `
+  )
 }
 
 describe("LeuAccordion", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-accordion")
+    const el = customElements.get("leu-accordion")
 
     await expect(el).not.to.be.undefined
   })
@@ -19,4 +21,92 @@ describe("LeuAccordion", () => {
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("renders the correct heading tag", async () => {
+    const el = await defaultFixture()
+
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 1
+    await expect(el._getHeadingTag()).to.equal("h1")
+
+    el.headingLevel = 2
+    await expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 3
+    await expect(el._getHeadingTag()).to.equal("h3")
+
+    el.headingLevel = 4
+    await expect(el._getHeadingTag()).to.equal("h4")
+
+    el.headingLevel = 5
+    await expect(el._getHeadingTag()).to.equal("h5")
+
+    el.headingLevel = 6
+    await expect(el._getHeadingTag()).to.equal("h6")
+  })
+
+  it("doesn't render an invalid heading tag", async () => {
+    const el = await defaultFixture()
+
+    el.headingLevel = 10
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = -1
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = 0
+    expect(el._getHeadingTag()).to.equal("h2")
+
+    el.headingLevel = "h3"
+    expect(el._getHeadingTag()).to.equal("h2")
+  })
+
+  it("toggles the open state", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(el.open).to.be.false
+
+    button.click()
+    expect(el.open).to.be.true
+
+    button.click()
+    expect(el.open).to.be.false
+  })
+
+  it("doesn't show the content when it is closed", async () => {
+    const el = await fixture(
+      html`<leu-accordion label="Titel des Akkordeons"
+        ><div slot="content">Das ist der Inhalt</div></leu-accordion
+      >`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+    const content = el.shadowRoot.querySelector(".content")
+
+    expect(content).not.to.be.visible
+
+    button.click()
+    expect(content).to.be.visible
+  })
+
+  it("shows the label prefix before the label", async () => {
+    const el = await fixture(
+      html`<leu-accordion
+        label-prefix="01"
+        label="Titel des Akkordeons"
+      ></leu-accordion>`
+    )
+
+    const button = el.shadowRoot.querySelector("button")
+
+    expect(button).to.contain.text("01")
+    expect(button).to.contain.text("Titel des Akkordeons")
+  })
 })

package/src/components/breadcrumb/Breadcrumb.js

@@ -0,0 +1,310 @@
+import { html, LitElement, nothing } from "lit"
+import { createRef, ref } from "lit/directives/ref.js"
+import { classMap } from "lit/directives/class-map.js"
+
+import styles from "./breadcrumb.css"
+import { Icon } from "../icon/icon.js"
+import "../menu/leu-menu.js"
+import "../menu/leu-menu-item.js"
+import "../popup/leu-popup.js"
+import { debounce } from "../../lib/utils.js"
+
+/**
+ * A Breadcrumb Navigation.
+ *
+ * The breadcrumbs can be displayed in two different layouts.
+ * Only the back link (the last item / parent of the current page)
+ * is displayed when…
+ * -  … the width of the container is smaller
+ *      than the BACK_ONLY_BREAKPOINT.
+ * -  … less then two breadcrumb items could be displayed
+ *      without overflowing the container.
+ *
+ * Otherwise as many items as possible are displayed in an inline list
+ * without overflowing the container. The remaining items are displayed
+ * in a dropdown menu.
+ *
+ * In order to determine the exact numbers of items that have to be
+ * hidden inside the dropdown, all of them have to be rendered first.
+ * 1. Render all items
+ * 2. Calculate (measure) the number of items that can be displayed
+ *    without overflowing the container.
+ * 3. Updating the state (_hiddeItems) which will trigger a rerender
+ * 4. Render the items again with the new state.
+ *
+ * This results in multiple updates scheduled one after another. Lit
+ * will also print a waring in the console beacause of that.
+ * It's no a nice behaviour but the only one that works without
+ * having duplicate and hidden markup to derive the sizes from that.
+ *
+ *
+ * @prop {Array} items - Object array with { label, href }
+ * @prop {Boolean} inverted - invert color on dark background
+ *
+ * @tagname leu-breadcrumb
+ */
+export class LeuBreadcrumb extends LitElement {
+  static styles = styles
+
+  static properties = {
+    items: { type: Array },
+    inverted: { type: Boolean, reflect: true },
+
+    _hiddenItems: { state: true },
+    _showBackOnly: { state: true },
+    _isRecalculating: { state: true },
+    _isDropdownOpen: { state: true },
+  }
+
+  static BACK_ONLY_BREAKPOINT = 320
+
+  constructor() {
+    super()
+    /** @type {Array} */
+    this.items = []
+    /** @type {Boolean} - will be used on dark Background */
+    this.inverted = false
+
+    /** @internal */
+    this._containerRef = createRef()
+    /** @internal */
+    this._hiddenItems = 0
+    /** @internal */
+    this._showBackOnly = null
+    /** @internal */
+    this._lastContainerWidth = null
+    /**
+     * @internal
+     * Forces the toggle button to be rendered
+     * so that all possible inline items will be measured.
+     * */
+    this._isRecalculating = true
+    /** @internal */
+    this._isDropdownOpen = false
+
+    this.resizeObserver = new ResizeObserver(
+      debounce(() => {
+        this._handleResize()
+      }, 500)
+    )
+  }
+
+  firstUpdated() {
+    this.resizeObserver.observe(this._containerRef.value)
+  }
+
+  async updated(changedProperties) {
+    if (changedProperties.has("items")) {
+      this._hiddenItems = 0
+      this._isRecalculating = true
+      await this.updateComplete
+      this._checkWidth()
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+
+    window.removeEventListener("click", this._closeDropdown)
+    this.resizeObserver.disconnect()
+  }
+
+  /** @internal */
+  get _listItems() {
+    return this.items.toSpliced(1, this._hiddenItems)
+  }
+
+  /** @internal */
+  get _dropdownItems() {
+    return this.items.slice(1, 1 + this._hiddenItems)
+  }
+
+  _handleResize = async () => {
+    const containerOffsetWidth = this._containerRef.value.offsetWidth
+    const sizeIsGrowing = containerOffsetWidth > this._lastContainerWidth
+    this._lastContainerWidth = containerOffsetWidth
+
+    /**
+     * Show only the back link (parent of the current page)
+     * when the width of the container is smaller than the BACK_ONLY_BREAKPOINT
+     */
+    if (containerOffsetWidth <= LeuBreadcrumb.BACK_ONLY_BREAKPOINT) {
+      this._showBackOnly = true
+      this._isRecalculating = false
+      return
+    }
+
+    this._showBackOnly = false
+
+    /**
+     *  In order to calculate how many items can be displayed
+     *  when the container is growing, all items have to
+     *  be marked as displayed (_hiddenItems = 0) and
+     *  rendered.
+     */
+    if (sizeIsGrowing && this._hiddenItems > 0) {
+      this._hiddenItems = 0
+      this._isRecalculating = true
+      await this.updateComplete
+    }
+
+    this._checkWidth()
+  }
+
+  /**
+   * Calculate the number of items that can be displayed
+   * without overflowing the container.
+   * @internal
+   * @returns {void}
+   */
+  _checkWidth() {
+    const containerOffsetWidth = this._containerRef.value.offsetWidth
+    const containerScrollWidth = this._containerRef.value.scrollWidth
+    this._lastContainerWidth = containerOffsetWidth
+
+    /** When the container is not overflowing, nothing has to be done */
+    if (containerOffsetWidth === containerScrollWidth) {
+      this._isRecalculating = false
+      return
+    }
+
+    const listItems = this._containerRef.value.querySelectorAll(
+      "li:not([data-dropdown-toggle])"
+    )
+    const listItemWidths = [...listItems].map((o) => o.offsetWidth)
+
+    let hiddenItems = 0
+    let hiddenItemsWidth = 0
+
+    /**
+     * Remove item by item until the sum of the remaining items
+     * is smaller than the width of the container.
+     * The first item will not be removed.
+     */
+    while (
+      hiddenItems < listItemWidths.length &&
+      containerOffsetWidth < containerScrollWidth - hiddenItemsWidth
+    ) {
+      hiddenItems += 1
+
+      hiddenItemsWidth = listItemWidths
+        .slice(1, 1 + hiddenItems)
+        .reduce((sum, itemWidth) => sum + itemWidth, 0)
+    }
+
+    this._hiddenItems += hiddenItems
+    this._isRecalculating = false
+  }
+
+  /** @internal */
+  _handleDropdownToggle = (e) => {
+    e.stopPropagation()
+
+    this._isDropdownOpen = !this._isDropdownOpen
+
+    if (this._isDropdownOpen) {
+      window.addEventListener("click", this._closeDropdown)
+    } else {
+      window.removeEventListener("click", this._closeDropdown)
+    }
+  }
+
+  _closeDropdown = () => {
+    this._isDropdownOpen = false
+    window.removeEventListener("click", this._closeDropdown)
+  }
+
+  /**
+   * Render the dropdown menu
+   * @returns
+   */
+  renderDropdown() {
+    if (this._dropdownItems.length === 0 && !this._isRecalculating)
+      return nothing
+
+    return html`
+      <li class="breadcrumbs__item" data-dropdown-toggle>
+        <span class="breadcrumbs__icon">${Icon("angleRight")}</span>
+        <leu-popup
+          ?active=${this._isDropdownOpen}
+          placement="bottom-start"
+          shift
+          shiftPadding="8"
+          autoSize="width"
+          autoSizePadding="8"
+        >
+          <button
+            slot="anchor"
+            class="menu"
+            @click=${this._handleDropdownToggle}
+            tabindex="0"
+          >
+            &hellip;
+          </button>
+          <div class="dropdown">
+            ${html`
+              <leu-menu>
+                ${this._dropdownItems.map(
+                  (item) =>
+                    html`
+                      <leu-menu-item
+                        label=${item.label}
+                        href=${item.href}
+                      ></leu-menu-item>
+                    `
+                )}
+              </leu-menu>
+            `}
+          </div>
+        </leu-popup>
+      </li>
+    `
+  }
+
+  render() {
+    if (this.items.length < 2) return nothing
+
+    const parentItem = this.items[this.items.length - 2]
+
+    const showBackOnly =
+      this._showBackOnly || this.items.length - this._hiddenItems < 2
+
+    const wrapperClasses = {
+      breadcrumbs: true,
+      "breadcrumbs--back-only": showBackOnly,
+    }
+
+    return html`
+      <nav class=${classMap(wrapperClasses)}>
+        <h2 class="visuallyhidden">Sie sind hier:</h2>
+        <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
+          ${showBackOnly
+            ? html` <li class="breadcrumbs__item breadcrumbs__item--back">
+                <span class="breadcrumbs__icon">${Icon("arrowLeft")}</span>
+                <a class="breadcrumbs__link" href=${parentItem.href}
+                  >${parentItem.label}</a
+                >
+              </li>`
+            : this._listItems.map(
+                (item, index, list) =>
+                  html`
+                    <li class="breadcrumbs__item">
+                      ${index > 0
+                        ? html`<span class="breadcrumbs__icon"
+                            >${Icon("angleRight")}</span
+                          >` // First list item doesn't have an arrow
+                        : nothing}
+                      ${index === list.length - 1
+                        ? item.label // Last list item doesn't contain a link
+                        : html`<a class="breadcrumbs__link" href=${item.href}
+                            >${item.label}</a
+                          >`}
+                    </li>
+                    ${index === 0 ? this.renderDropdown() : nothing}
+                  `
+              )}
+        </ol>
+      </nav>
+    `
+  }
+}

package/src/components/breadcrumb/breadcrumb.css

@@ -0,0 +1,114 @@
+:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --breadcrumb-font-regular: var(--leu-font-regular);
+  --breadcrumb-font-black: var(--leu-font-black);
+
+  font-family: var(--breadcrumb-font-regular);
+  line-height: 1.5;
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) {
+  color: var(--leu-color-black-0);
+}
+
+.breadcrumbs__list {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumbs--back-only .breadcrumbs__list {
+  overflow: hidden;
+}
+
+.breadcrumbs__item,
+.breadcrumbs__icon {
+  align-items: center;
+  display: flex;
+  min-height: 1.875rem;
+  white-space: nowrap;
+}
+
+.breadcrumbs__item:first-child:not(.breadcrumbs__item--back) {
+  font-family: var(--breadcrumb-font-black);
+}
+
+.breadcrumbs__item--back {
+  max-width: 100%;
+}
+
+.breadcrumbs__link {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.1s ease;
+  white-space: nowrap;
+}
+
+.breadcrumbs__item--back .breadcrumbs__link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0.25rem;
+}
+
+.menu {
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+
+.menu:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.dropdown {
+  background-color: var(--leu-color-black-0);
+  box-shadow: var(--leu-box-shadow-short);
+}
+
+.visuallyhidden {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}
+
+.breadcrumbs {
+  font-size: 1rem;
+}
+
+@media (width >= 320px) {
+  .breadcrumbs {
+    font-size: calc(2.5vw + 8px);
+  }
+}
+
+@media (width >= 400px) {
+  .breadcrumbs {
+    font-size: 18px;
+  }
+}
+
+@media (width >= 1024px) {
+  .breadcrumbs {
+    font-size: calc(0.7813vw + 10px);
+  }
+}
+
+@media (width >= 1280px) {
+  .breadcrumbs {
+    font-size: 20px;
+  }
+}

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

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuBreadcrumb } from "./Breadcrumb.js"
+
+export { LeuBreadcrumb }
+
+defineElement("breadcrumb", LeuBreadcrumb)