@statistikzh/leu 0.13.0 → 0.14.0

package/src/components/breadcrumb/Breadcrumb.js

@@ -1,324 +0,0 @@
-import { html, nothing } from "lit"
-import { createRef, ref } from "lit/directives/ref.js"
-import { classMap } from "lit/directives/class-map.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { debounce } from "../../lib/utils.js"
-import { LeuIcon } from "../icon/Icon.js"
-import { LeuMenu } from "../menu/Menu.js"
-import { LeuMenuItem } from "../menu/MenuItem.js"
-import { LeuPopup } from "../popup/Popup.js"
-import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
-
-import styles from "./breadcrumb.css"
-
-/**
- * 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 LeuElement {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-    "leu-menu": LeuMenu,
-    "leu-menu-item": LeuMenuItem,
-    "leu-popup": LeuPopup,
-    "leu-visually-hidden": LeuVisuallyHidden,
-  }
-
-  static styles = [LeuElement.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"
-          ><leu-icon name="angleRight"></leu-icon
-        ></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 href=${item.href}
-                        >${item.label}</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)}>
-        <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
-        <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
-          ${showBackOnly
-            ? html` <li class="breadcrumbs__item breadcrumbs__item--back">
-                <span class="breadcrumbs__icon"
-                  ><leu-icon name="arrowLeft"></leu-icon
-                ></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"
-                            ><leu-icon name="angleRight"></leu-icon
-                          ></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

@@ -1,98 +0,0 @@
-:host {
-  --breadcrumb-font-regular: var(--leu-font-family-regular);
-  --breadcrumb-font-black: var(--leu-font-family-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);
-}
-
-.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

@@ -1,5 +0,0 @@
-import { LeuBreadcrumb } from "./Breadcrumb.js"
-
-export { LeuBreadcrumb }
-
-LeuBreadcrumb.define("leu-breadcrumb")

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

@@ -1,73 +0,0 @@
-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

@@ -1,141 +0,0 @@
-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)
-  })
-})