@statistikzh/leu 0.27.0 → 0.28.1

package/src/components/tab/TabGroup.ts

@@ -0,0 +1,267 @@
+import { html, PropertyValues } from "lit"
+import { property, state } from "lit/decorators.js"
+import { classMap } from "lit/directives/class-map.js"
+import { createRef, ref } from "lit/directives/ref.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+import { LeuTab } from "./Tab.js"
+import { LeuTabPanel } from "./TabPanel.js"
+
+import styles from "./tab-group.css?inline"
+
+type ScrollableState = {
+  left: boolean
+  right: boolean
+}
+
+/**
+ * Tab Group
+ *
+ * @slot tabs - Slot for the leu-tab elements
+ * @slot panels - Slot for the leu-tab-panel elements
+ * @todo: add disabled state to tabs and panels
+ * @todo: add backdrop / shadow
+ * @todo: add styling option for full-bleed layout (tabslist is full-bleed, panels use the full width of the container)
+ *
+ * @tagname leu-tab-group
+ */
+export class LeuTabGroup extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  /**
+   * Label for the tab list, used for accessibility.
+   * Content will not be visible on the page, but should be provided for screen readers.
+   */
+  @property({ type: String })
+  label = ""
+
+  /**
+   * Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel.
+   */
+  @property({ type: String, reflect: true })
+  active = ""
+
+  @state()
+  protected isScrollable: ScrollableState = { left: false, right: false }
+
+  @state()
+  protected tabs: LeuTab[] = []
+
+  @state()
+  protected panels: LeuTabPanel[] = []
+
+  protected initialShowEventDispatched = false
+
+  protected tabMenuRef = createRef<HTMLDivElement>()
+
+  protected resizeObserver = new ResizeObserver(() => {
+    this.checkScrollable()
+  })
+
+  // Observe changes to the id attribute of tabs and panels
+  // to update the aria attributes accordingly
+  protected mutationObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      if (!(record.target instanceof HTMLElement)) {
+        continue
+      }
+
+      if (
+        record.type === "attributes" &&
+        record.attributeName === "id" &&
+        record.target.matches("leu-tab, leu-tab-panel")
+      ) {
+        this.linkTabsAndPanels()
+        continue
+      }
+    }
+  })
+
+  connectedCallback() {
+    super.connectedCallback()
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    this.resizeObserver.disconnect()
+    this.mutationObserver.disconnect()
+  }
+
+  firstUpdated() {
+    if (this.tabMenuRef.value) {
+      this.resizeObserver.observe(this.tabMenuRef.value)
+    }
+
+    this.mutationObserver.observe(this, {
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["id"],
+    })
+  }
+
+  updated(changedProperties: PropertyValues) {
+    if (
+      changedProperties.has("active") ||
+      changedProperties.has("tabs") ||
+      changedProperties.has("panels")
+    ) {
+      this.updatePanels()
+      this.updateTabs()
+    }
+  }
+
+  protected async handleTabsSlotChange() {
+    const slot =
+      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="tabs"]')
+
+    this.tabs =
+      slot
+        ?.assignedElements({ flatten: true })
+        .filter((el) => el instanceof LeuTab) ?? []
+
+    // if the active tab is not in the new set of tabs, activate the first tab
+    if (
+      this.tabs.length > 0 &&
+      !this.tabs.some((tab) => tab.name === this.active)
+    ) {
+      this.active = this.tabs[0].name
+    }
+    this.linkTabsAndPanels()
+
+    await this.updateComplete
+    this.checkScrollable()
+  }
+
+  protected handlePanelsSlotChange() {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(
+      'slot[name="panels"]',
+    )
+
+    this.panels =
+      slot
+        ?.assignedElements({ flatten: true })
+        .filter((el) => el instanceof LeuTabPanel) ?? []
+
+    this.linkTabsAndPanels()
+  }
+
+  /**
+   * Link tabs and panels by setting the appropriate aria attributes.
+   * Generates global ids for tabs and panels if they don't have one.
+   */
+  protected linkTabsAndPanels() {
+    for (const tab of this.tabs) {
+      const panel = this.panels.find((o) => o.name === tab.name)
+
+      if (!panel) continue
+
+      tab.setAttribute("aria-controls", panel.id)
+      panel.setAttribute("aria-labelledby", tab.id)
+    }
+  }
+
+  protected get activeTab() {
+    return this.tabs.find((o) => o.active)
+  }
+
+  protected get activePanel() {
+    return this.panels.find((o) => o.name === this.activeTab?.name)
+  }
+
+  protected updatePanels() {
+    for (const panel of this.panels) {
+      panel.active = panel.name === this.active
+    }
+  }
+
+  protected updateTabs() {
+    for (const tab of this.tabs) {
+      tab.active = tab.name === this.active
+    }
+  }
+
+  protected async keydownHandler(event: KeyboardEvent) {
+    const activeTab = this.activeTab
+    let nextTab: LeuTab | null = null
+
+    if (
+      !["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key) ||
+      !activeTab
+    ) {
+      return
+    }
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowLeft": {
+        const direction = event.key === "ArrowRight" ? 1 : -1
+        const currentIndex = this.tabs.indexOf(activeTab)
+        const numOfTabs = this.tabs.length
+        // cycle through the tabs
+        const nextIndex = (currentIndex + direction + numOfTabs) % numOfTabs
+        nextTab = this.tabs[nextIndex]
+        break
+      }
+
+      case "Home":
+        nextTab = this.tabs[0]
+        break
+      case "End":
+        nextTab = this.tabs[this.tabs.length - 1]
+        break
+      default:
+        return
+    }
+
+    this.active = nextTab.name
+    await this.updateComplete
+    nextTab.focus()
+    nextTab.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+    })
+  }
+
+  protected checkScrollable() {
+    const tabMenu = this.tabMenuRef.value
+    if (!tabMenu) return
+
+    this.isScrollable = {
+      left: tabMenu.scrollLeft > 0,
+      right: tabMenu.scrollLeft < tabMenu.scrollWidth - tabMenu.clientWidth,
+    }
+  }
+
+  protected handleScrollEvent() {
+    this.checkScrollable()
+  }
+
+  protected handleTabSelect(event: CustomEvent) {
+    this.active = event.detail.name
+  }
+
+  render() {
+    const containerClasses = {
+      container: true,
+      "container--scrollable-left": this.isScrollable.left,
+      "container--scrollable-right": this.isScrollable.right,
+    }
+
+    return html`
+      <div class=${classMap(containerClasses)}>
+        <div
+          class="tab-menu"
+          role="tablist"
+          @keydown=${this.keydownHandler}
+          @leu:tab-select=${this.handleTabSelect}
+          @scroll="${this.handleScrollEvent}"
+          aria-label=${this.label}
+          ${ref(this.tabMenuRef)}
+        >
+          <slot name="tabs" @slotchange=${this.handleTabsSlotChange}></slot>
+        </div>
+      </div>
+      <slot name="panels" @slotchange=${this.handlePanelsSlotChange}></slot>
+    `
+  }
+}

package/src/components/tab/TabPanel.ts

@@ -0,0 +1,59 @@
+import { html, PropertyValues } from "lit"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./tab-panel.css?inline"
+
+let nextId = 1
+
+/**
+ * Tab Panel
+ *
+ * @tagname leu-tab-panel
+ * @fires leu:show-tab-panel - Fired when a tab panel is shown
+ */
+export class LeuTabPanel extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  protected readonly componentId = `leu-tab-panel-${nextId++}`
+
+  /**
+   * Name of the tab. Apply the same name to the corresponding tab button to link them together.
+   * Has to be unique within the tab component.
+   */
+  @property({ type: String, reflect: true })
+  name = ""
+
+  @property({ type: Boolean, reflect: true })
+  active = false
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute("role", "tabpanel")
+    this.tabIndex = 0
+    // Set an id if not already provided. The id is used by the tab-group
+    // to set the aria-controls attribute on the corresponding tab button.
+    this.id = this.id.length > 0 ? this.id : this.componentId
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    if (changedProperties.has("active")) {
+      this.ariaHidden = this.active ? "false" : "true"
+
+      if (this.active) {
+        this.dispatchEvent(
+          new CustomEvent("leu:show-tab-panel", {
+            detail: { name: this.name },
+            bubbles: true,
+            composed: true,
+          }),
+        )
+      }
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`
+  }
+}

package/src/components/tab/leu-tab-group.ts

@@ -0,0 +1,11 @@
+import { LeuTabGroup } from "./TabGroup.js"
+
+export { LeuTabGroup }
+
+LeuTabGroup.define("leu-tab-group")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab-group": LeuTabGroup
+  }
+}

package/src/components/tab/leu-tab-panel.ts

@@ -0,0 +1,11 @@
+import { LeuTabPanel } from "./TabPanel.js"
+
+export { LeuTabPanel }
+
+LeuTabPanel.define("leu-tab-panel")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab-panel": LeuTabPanel
+  }
+}

package/src/components/tab/leu-tab.ts

@@ -0,0 +1,11 @@
+import { LeuTab } from "./Tab.js"
+
+export { LeuTab }
+
+LeuTab.define("leu-tab")
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "leu-tab": LeuTab
+  }
+}

package/src/components/tab/stories/tab.stories.ts

@@ -0,0 +1,97 @@
+import { Meta, StoryObj } from "@storybook/web-components-vite"
+import { action } from "storybook/actions"
+import { html } from "lit"
+
+import { LeuTabGroup } from "../leu-tab-group.js"
+import "../leu-tab-group.js"
+import "../leu-tab.js"
+import "../leu-tab-panel.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+type StoryArgs = LeuTabGroup
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/Tab",
+  component: "leu-tab-group",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-184423",
+    },
+  },
+  args: {
+    onLeuTabPanelShow: action("leu:show-tab-panel"),
+  },
+} satisfies Meta<StoryArgs>
+
+interface Args {
+  active?: string
+  label?: string
+  onLeuTabPanelShow?: (event: CustomEvent) => void
+}
+
+const Template: Story = {
+  render: (args: Args = {}) => {
+    return html`
+      <leu-tab-group
+        active=${ifDefined(args.active)}
+        label=${ifDefined(args.label)}
+        @leu:show-tab-panel=${args.onLeuTabPanelShow}
+      >
+        <leu-tab slot="tabs" name="online">Online</leu-tab>
+        <leu-tab-panel slot="panels" name="online">
+          <p>
+            Online – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
+            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
+            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
+          </p>
+        </leu-tab-panel>
+        <leu-tab slot="tabs" name="vor-ort">Vor Ort</leu-tab>
+
+        <leu-tab-panel slot="panels" name="vor-ort">
+          <p>
+            Vor Ort – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
+            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
+            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
+          </p>
+        </leu-tab-panel>
+
+        <leu-tab slot="tabs" name="per-post">Per Post</leu-tab>
+        <leu-tab-panel slot="panels" name="per-post">
+          <p>
+            Per Post – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
+            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
+            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
+          </p>
+        </leu-tab-panel>
+
+        <leu-tab slot="tabs" name="telefonisch">Telefonisch</leu-tab>
+        <leu-tab-panel slot="panels" name="telefonisch">
+          <p>
+            Telefonisch – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
+            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
+            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
+          </p>
+        </leu-tab-panel>
+
+        <leu-tab slot="tabs" name="service">Service</leu-tab>
+        <leu-tab-panel slot="panels" name="service">
+          <p>
+            Service – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
+            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
+            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
+          </p>
+        </leu-tab-panel>
+      </leu-tab-group>
+    `
+  },
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    active: "online",
+    label: "Reiseinformationen",
+  },
+}

package/src/components/tab/tab-group.css

@@ -0,0 +1,63 @@
+@import url("../../styles/custom-media.css");
+
+:host {
+  --tab-font-regular: var(--leu-font-family-regular);
+  --tab-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tab-font-regular);
+}
+
+.container {
+  position: relative;
+  width: 100%;
+}
+
+.container::before,
+.container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 0.375rem;
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.2s ease;
+  transition-property: visibility, opacity;
+}
+
+.container::before {
+  left: 0;
+  background: linear-gradient(to right, rgb(0 0 0 / 20%), transparent);
+}
+
+.container::after {
+  right: 0;
+  background: linear-gradient(to left, rgb(0 0 0 / 20%), transparent);
+}
+
+.container--scrollable-left::before,
+.container--scrollable-right::after {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tab-menu {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid var(--leu-color-black-transp-10);
+
+  overflow: auto;
+  scrollbar-width: thin;
+
+  @media (--viewport-large) {
+    margin-bottom: 2rem;
+  }
+
+  @media (--viewport-xlarge) {
+    padding: 1rem 0;
+    margin-bottom: 2.5rem;
+  }
+}

package/src/components/tab/tab-panel.css

@@ -0,0 +1,10 @@
+:host {
+  --tab-panel-font-regular: var(--leu-font-family-regular);
+  --tab-panel-font-black: var(--leu-font-family-black);
+
+  font-family: var(--tab-panel-font-regular);
+}
+
+:host([aria-hidden="true"]) {
+  display: none;
+}

package/src/components/tab/tab.css

@@ -0,0 +1,54 @@
+@import url("../../styles/custom-media.css");
+
+:host {
+  --tab-button-font-regular: var(--leu-font-family-regular);
+
+  --tab-button-active-background: var(--leu-color-black-100);
+  --tab-button-active-color: var(--leu-color-black-0);
+
+  --tab-button-inactive-background: var(--leu-color-black-transp-10);
+  --tab-button-inactive-color: var(--leu-color-black-transp-60);
+
+  --tab-button-hover-background: var(--leu-color-black-transp-20);
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--tab-button-font-regular);
+  background: var(--tab-button-inactive-background);
+  color: var(--tab-button-inactive-color);
+  border: 0;
+  border-radius: 0.25rem;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+
+  white-space: nowrap;
+
+  @media (--viewport-large) {
+    padding-inline: 1rem;
+  }
+}
+
+:host(:hover) {
+  background: var(--tab-button-hover-background);
+}
+
+:host(:focus-visible) {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+:host([active]) {
+  background: var(--tab-button-active-background);
+  color: var(--tab-button-active-color);
+}
+
+.label {
+  font-size: 1rem;
+  line-height: 1.5rem;
+
+  @media (--viewport-large) {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}