@statistikzh/leu 0.3.0 → 0.4.0

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)

package/src/components/breadcrumb/stories/breadcrumb.stories.js

@@ -0,0 +1,73 @@
+import { html } from "lit"
+import "../leu-breadcrumb.js"
+
+export default {
+  title: "Breadcrumb",
+  component: "leu-breadcrumb",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=18100-258351&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+    html: {
+      root: "[data-root]",
+    },
+  },
+}
+
+function Template({ items, inverted }) {
+  return html`
+    <div
+      style=${inverted ? "background: var(--leu-color-accent-blue);" : ""}
+      data-root
+    >
+      <leu-breadcrumb .items=${items} ?inverted=${inverted}></leu-breadcrumb>
+    </div>
+    <button
+      @click=${() => {
+        document.getElementsByTagName("leu-breadcrumb")[0].items = [
+          { label: "Kanton Zürich", href: "https://zh.ch" },
+          { label: "Bildung", href: "https://www.zh.ch/de/bildung.html" },
+          {
+            label: "Schulen",
+            href: "https://www.zh.ch/de/bildung/schulen.html",
+          },
+          {
+            label: "Volksschule",
+            href: "https://www.zh.ch/de/bildung/schulen/volksschule.html",
+          },
+        ]
+      }}
+      style="margin-top:50px;"
+    >
+      update items
+    </button>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.argTypes = {
+  _allListElementWidths: { table: { disable: true } },
+  _visible: { table: { disable: true } },
+  _small: { table: { disable: true } },
+  _resizeListenerFunction: { table: { disable: true } },
+}
+Regular.args = {
+  items: [
+    { label: "Kanton Zürich", href: "https://zh.ch" },
+    { label: "Gesundheit", href: "https://zh.ch/de/gesundheit.html" },
+    {
+      label: "Lebensmittel & Gebrauchsgegenstände",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende.html",
+    },
+    {
+      label: "Lebensmittel",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+    },
+    {
+      label: "Trinkwasser",
+      href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+    },
+  ],
+  inverted: true,
+}

package/src/components/breadcrumb/test/breadcrumb.test.js

@@ -0,0 +1,141 @@
+import { html } from "lit"
+import { fixture, expect, aTimeout } from "@open-wc/testing"
+import { setViewport } from "@web/test-runner-commands"
+
+import "../leu-breadcrumb.js"
+
+const items = [
+  { label: "Kanton Zürich", href: "https://zh.ch" },
+  { label: "Gesundheit", href: "https://zh.ch/de/gesundheit.html" },
+  {
+    label: "Lebensmittel & Gebrauchsgegenstände",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende.html",
+  },
+  {
+    label: "Lebensmittel",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+  },
+  {
+    label: "Trinkwasser",
+    href: "https://zh.ch/de/gesundheit/lebensmittel-gebrauchsgegenstaende/lebensmittel.html",
+  },
+]
+
+async function defaultFixture(args = {}) {
+  return fixture(
+    html` <leu-breadcrumb .items="${args.items ?? items}"></leu-breadcrumb> `
+  )
+}
+
+describe("LeuBreadcrumb", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-breadcrumb")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+    await expect(el).to.be.accessible()
+  })
+
+  it("renders a list of items", async () => {
+    await setViewport({ width: 1024, height: 1024 })
+    const el = await defaultFixture()
+
+    const itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls[0]).to.have.trimmed.text(items[0].label)
+    expect(itemEls[0].querySelector("a")).to.have.attribute(
+      "href",
+      items[0].href
+    )
+    expect(itemEls[1]).to.have.trimmed.text(items[1].label)
+    expect(itemEls[1].querySelector("a")).to.have.attribute(
+      "href",
+      items[1].href
+    )
+    expect(itemEls[2]).to.have.trimmed.text(items[2].label)
+    expect(itemEls[2].querySelector("a")).to.have.attribute(
+      "href",
+      items[2].href
+    )
+    expect(itemEls[3]).to.have.trimmed.text(items[3].label)
+    expect(itemEls[3].querySelector("a")).to.have.attribute(
+      "href",
+      items[3].href
+    )
+
+    expect(itemEls[4]).to.have.trimmed.text(items[4].label)
+    expect(itemEls[4].querySelector("a")).to.not.exist
+  })
+
+  it("hides the overflowing items when shrinking the viewport", async () => {
+    await setViewport({ width: 1024, height: 1024 })
+    const el = await defaultFixture()
+
+    let itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(5)
+
+    await setViewport({ width: 768, height: 1024 })
+    await aTimeout(600)
+    await el.updateComplete
+    itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls.length).to.equal(4)
+  })
+
+  it("shows all the items when viewport is enlarged", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    let itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(4)
+
+    await setViewport({ width: 1024, height: 1024 })
+    await aTimeout(600)
+    await el.updateComplete
+    itemEls = el.shadowRoot.querySelectorAll("li")
+
+    expect(itemEls.length).to.equal(5)
+  })
+
+  it("only shows the first item when the viewport is too small", async () => {
+    await setViewport({ width: 240, height: 1024 })
+    const el = await defaultFixture()
+
+    const itemEls = el.shadowRoot.querySelectorAll("li")
+    expect(itemEls.length).to.equal(1)
+
+    expect(itemEls[0]).to.have.trimmed.text(items[3].label)
+    expect(itemEls[0].querySelector("a")).to.have.attribute(
+      "href",
+      items[3].href
+    )
+  })
+
+  it("shows a dropdown toggle when items are hidden", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    const dropdownToggle = el.shadowRoot.querySelector("li:nth-child(2) button")
+    expect(dropdownToggle).to.exist
+    expect(dropdownToggle).to.have.trimmed.text("…")
+  })
+
+  it("shows a dropdown when the toggle is clicked", async () => {
+    await setViewport({ width: 768, height: 1024 })
+    const el = await defaultFixture()
+
+    const dropdownToggle = el.shadowRoot.querySelector("li:nth-child(2) button")
+    dropdownToggle.click()
+
+    await el.updateComplete
+
+    const dropdown = el.shadowRoot.querySelectorAll("leu-menu")
+    expect(dropdown).to.exist
+
+    const dropdownItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(dropdownItems.length).to.equal(2)
+  })
+})