@orangesk/orange-design-system 2.0.0-beta.7 → 2.0.0-beta.8

package/src/components/AnchorNavigation/AnchorNavigation.static.ts

@@ -1,29 +1,29 @@
-interface AnchorNavigationConfig {
-  itemSelector: string;
-}
-
-export const defaultConfig: AnchorNavigationConfig = {
-  itemSelector: '.anchor-navigation__item',
-};
-
-export const configDocs = {
-  itemSelector: "Anchor navigation item element selector",
-};
-
 export default class AnchorNavigation {
   private element: HTMLElement;
-  private config: AnchorNavigationConfig;
-  private items: HTMLElement[];
-  private activeItemIndex: number | null;
+  private megamenuElement: HTMLElement | null;
+  private resizeObserver: ResizeObserver | null;
+  private scrollHandler: () => void;
+  private scrollSpyHandler: () => void;
+  private scrollEndHandler: () => void;
+  private resizeHandler: () => void;
+  private isAutoScrolling: boolean = false;
+  private navLinks: NodeListOf<HTMLAnchorElement> | null = null;
+  private sections: HTMLElement[] = [];
+  private currentPath: string;
+  private lastActiveIndex: number = 0;
 
-  constructor(element: HTMLElement, config?: Partial<AnchorNavigationConfig>) {
+  constructor(element: HTMLElement) {
     this.element = element;
-    this.config = { ...defaultConfig, ...config };
 
-    this.items = [];
-    this.activeItemIndex = null;
+    this.megamenuElement = null;
+    this.resizeObserver = null;
+    this.isAutoScrolling = false;
+    this.currentPath = window.location.pathname;
 
-    this.handleClick = this.handleClick.bind(this);
+    this.scrollHandler = this.updateStickyPosition.bind(this);
+    this.scrollSpyHandler = this.handleScrollSpy.bind(this);
+    this.scrollEndHandler = this.handleScrollEnd.bind(this);
+    this.resizeHandler = this.initScrollSpy.bind(this);
 
     (this.element as any).ODS_AnchorNavigation = this;
 
@@ -33,83 +33,263 @@ export default class AnchorNavigation {
   }
 
   static getInstance(el: HTMLElement): AnchorNavigation | null {
-    return el && (el as any).ODS_AnchorNavigation ? (el as any).ODS_AnchorNavigation : null;
+    return el && (el as any).ODS_AnchorNavigation
+      ? (el as any).ODS_AnchorNavigation
+      : null;
   }
 
-  private init(): void {
-    this.items = Array.from(
-      this.element.querySelectorAll<HTMLElement>(this.config.itemSelector),
-    );
+  private findMegamenuElement(): HTMLElement | null {
+    return document.querySelector("[data-megamenu]") as HTMLElement | null;
+  }
 
-    this.items.forEach((item, index) => {
-      item.addEventListener("click", this.handleClick);
+  private updateStickyPosition(): void {
+    if (!this.megamenuElement) return;
+    this.element.style.top = `${this.megamenuElement.offsetHeight}px`;
+  }
 
-      if (this.isActive(item)) {
-        this.activeItemIndex = index;
-      }
-    });
+  private setupMegamenuObserver(): void {
+    this.megamenuElement = this.findMegamenuElement();
 
-    // Ak nie je žiadna položka aktívna, aktivuj prvú
-    if (this.activeItemIndex === null && this.items.length > 0) {
-      this.activateNthItem(0);
+    if (!this.megamenuElement) {
+      this.element.style.top = "0px";
+      return;
     }
+
+    this.updateStickyPosition();
+    window.addEventListener("scroll", this.scrollHandler, { passive: true });
+
+    this.resizeObserver = new ResizeObserver(
+      this.updateStickyPosition.bind(this),
+    );
+    this.resizeObserver.observe(this.megamenuElement);
   }
 
-  destroy(): void {
-    this.items.forEach((item) => {
-      item.removeEventListener("click", this.handleClick);
+  private setupScrollSpy(): void {
+    // Set dynamic scroll margin for CSS
+    document.documentElement.style.setProperty(
+      "--extra-scroll-margin",
+      this.element.offsetHeight + "px",
+    );
+
+    // Get all anchor navigation links
+    this.navLinks = this.element.querySelectorAll(".anchor-navigation__item");
+
+    // Get all sections that correspond to the navigation links
+    this.sections = Array.from(this.navLinks || [])
+      .map((link) => link.getAttribute("href"))
+      .filter((href) => href?.includes("#"))
+      .map((href) => document.getElementById(href!.split("#")[1]))
+      .filter(Boolean) as HTMLElement[];
+
+    // Add click listeners to anchor navigation items
+    this.navLinks.forEach((anchor) => {
+      anchor.addEventListener("click", (event) => {
+        event.preventDefault();
+        const href = anchor.getAttribute("href");
+        if (href && href.includes("#")) {
+          const targetId = href.split("#")[1];
+          const targetElement = document.getElementById(targetId);
+
+          if (targetElement) {
+            this.isAutoScrolling = true;
+
+            // Calculate scroll position
+            const scrollOffset = this.megamenuElement
+              ? this.megamenuElement.offsetHeight
+              : 0;
+            const additionalOffset = this.element.offsetHeight;
+            const targetTop =
+              targetElement.offsetTop - scrollOffset - additionalOffset;
+
+            // Smooth scroll to target
+            window.scrollTo({
+              top: Math.max(0, targetTop),
+              behavior: "smooth",
+            });
+
+            // Update active state
+            this.initScrollSpy(targetId);
+          }
+        }
+      });
     });
 
-    this.items = [];
-    (this.element as any).ODS_AnchorNavigation = null;
-  }
+    // Add scroll listeners
+    window.addEventListener("scroll", this.scrollSpyHandler, { passive: true });
 
-  update(): void {
-    this.destroy();
-    this.init();
+    // Add scrollend listener with fallback
+    try {
+      window.addEventListener("scrollend", this.scrollEndHandler);
+    } catch {
+      // Fallback for browsers that don't support scrollend
+      let scrollTimeout: ReturnType<typeof setTimeout>;
+      const scrollEndFallback = () => {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(() => {
+          this.handleScrollEnd();
+        }, 150);
+      };
+      window.addEventListener("scroll", scrollEndFallback, { passive: true });
+    }
+
+    window.addEventListener("resize", this.resizeHandler);
+
+    this.initScrollSpy();
   }
 
-  private isActive = (el: HTMLElement): boolean => {
-    return el.classList.contains('is-active');
-  };
+  private initScrollSpy(forcedSectionId: string | null = null): void {
+    if (!this.navLinks || !this.sections.length) return;
+
+    let targetSection: HTMLElement | undefined;
+    let targetIndex: number = -1;
+
+    // Remove active class from all links
+    this.navLinks.forEach((link) => link.classList.remove("is-active"));
+
+    if (forcedSectionId) {
+      targetSection = document.getElementById(forcedSectionId) || undefined;
+      if (targetSection) {
+        // Find the index of the forced section
+        targetIndex = this.sections.findIndex(
+          (section) => section.id === forcedSectionId,
+        );
+      }
+    } else {
+      // Calculate scroll offset from megamenu height and anchor nav height
+      const scrollOffset = this.megamenuElement
+        ? this.megamenuElement.offsetHeight
+        : 0;
+      const anchorNavOffset = this.element.offsetHeight;
+      const totalOffset = scrollOffset + anchorNavOffset;
+      const effectiveCenter = window.scrollY + totalOffset + 50; // Add some buffer
+
+      // Find the section that's currently in view
+      for (let i = 0; i < this.sections.length; i++) {
+        const section = this.sections[i];
+        const { top: sectionTopRaw, height: sectionHeight } =
+          section.getBoundingClientRect();
+        const sectionTop = sectionTopRaw + window.scrollY;
+        const sectionBottom = sectionTop + sectionHeight;
 
-  private handleClick(e: MouseEvent): void {
-    const clickedItem = e.currentTarget as HTMLElement;
+        if (effectiveCenter >= sectionTop && effectiveCenter < sectionBottom) {
+          targetSection = section;
+          targetIndex = i;
+          break;
+        }
+      }
+    }
 
-    // Najdi index kliknutej položky
-    const clickedIndex = this.items.findIndex(item => item === clickedItem);
-    
-    if (clickedIndex !== -1) {
-      this.activateNthItem(clickedIndex);
+    // Fallback logic: if no section is found, use fallback rules
+    if (!targetSection) {
+      // If we're at the very top, activate first item
+      if (window.scrollY <= 100) {
+        targetIndex = 0;
+        targetSection = this.sections[0];
+      } else {
+        // Keep the last active item
+        targetIndex = this.lastActiveIndex;
+        targetSection = this.sections[targetIndex];
+      }
     }
-  }
 
-  private toggleItem(el: HTMLElement, state: "on" | "off"): void {
-    const isActive = this.isActive(el);
+    // Update last active index if we found a valid target
+    if (targetIndex >= 0) {
+      this.lastActiveIndex = targetIndex;
+    }
+
+    if (targetSection) {
+      const id = targetSection.getAttribute("id");
 
-    if (state === "on" && !isActive) {
-      el.classList.add('is-active');
+      // Find the matching navigation link - try different href patterns
+      let activeLink = this.element.querySelector(
+        `.anchor-navigation__item[href="#${id}"]`,
+      ) as HTMLElement;
+
+      if (!activeLink) {
+        activeLink = this.element.querySelector(
+          `.anchor-navigation__item[href="${this.currentPath}#${id}"]`,
+        ) as HTMLElement;
+      }
+
+      if (!activeLink) {
+        // Try without current path for relative links
+        activeLink = Array.from(this.navLinks).find((link) => {
+          const href = link.getAttribute("href");
+          return href && href.endsWith(`#${id}`);
+        }) as HTMLElement;
+      }
+
+      if (activeLink) {
+        activeLink.classList.add("is-active");
+
+        // Smooth scroll the navigation to center the active link
+        const contentLeft = this.element.querySelector(
+          ".anchor-navigation__content-left",
+        ) as HTMLElement;
+        if (contentLeft) {
+          contentLeft.scrollTo({
+            left:
+              activeLink.offsetLeft -
+              this.element.clientWidth / 2 +
+              activeLink.clientWidth / 2,
+            behavior: "smooth",
+          });
+        }
+      }
     }
+  }
 
-    if (state === "off" && isActive) {
-      el.classList.remove('is-active');
+  private handleScrollSpy(): void {
+    if (!this.isAutoScrolling) {
+      this.initScrollSpy();
     }
   }
 
-  activateNthItem(index: number): void {
-    if (index < 0 || index >= this.items.length) return;
+  private handleScrollEnd(): void {
+    this.isAutoScrolling = false;
+    this.initScrollSpy();
+  }
 
-    this.items.forEach((item, i) => {
-      if (i === index) {
-        this.activeItemIndex = i;
-        this.toggleItem(item, "on");
-      } else {
-        this.toggleItem(item, "off");
-      }
-    });
+  private init(): void {
+    this.setupMegamenuObserver();
+    this.setupScrollSpy();
   }
 
-  getActiveItemIndex(): number | null {
-    return this.activeItemIndex;
+  destroy(): void {
+    window.removeEventListener("scroll", this.scrollHandler);
+    window.removeEventListener("scroll", this.scrollSpyHandler);
+    window.removeEventListener("scrollend", this.scrollEndHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    this.element.style.top = "";
+    this.megamenuElement = null;
+    this.navLinks = null;
+    this.sections = [];
+    this.lastActiveIndex = 0;
+    (this.element as any).ODS_AnchorNavigation = null;
   }
-} 
+
+  update(): void {
+    window.removeEventListener("scroll", this.scrollHandler);
+    window.removeEventListener("scroll", this.scrollSpyHandler);
+    window.removeEventListener("scrollend", this.scrollEndHandler);
+    window.removeEventListener("resize", this.resizeHandler);
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+
+    this.megamenuElement = null;
+    this.navLinks = null;
+    this.sections = [];
+    this.lastActiveIndex = 0;
+
+    this.init();
+  }
+}

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import cx from "classnames";
-import { Grid, GridCol } from "../Grid";
 import { Link } from "../Link";
 import { Container } from "../Container";
 import { useStatic } from "../../utils/hooks";
@@ -28,6 +27,7 @@ const AnchorNavigation = ({
   className,
   colorScheme,
   children,
+  ...other
 }: AnchorNavigationProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -41,31 +41,38 @@ const AnchorNavigation = ({
   const [anchorNavRef] = useStatic(AnchorNavigationStatic);
 
   return (
-    <div className={classes} ref={anchorNavRef}>
-      <Container>
-        <div className={`${CLASS_ROOT}__content`}>
-          <Grid
-            className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
-          >
-            {items.map((item) => (
-              <GridCol size={"auto"} key={item.href}>
-                <Link
-                  href={item.href}
-                  className={cx(`${CLASS_ROOT}__item`, {
-                    "is-active": item.isActive,
-                  })}
-                >
-                  {item.label}
-                </Link>
-              </GridCol>
-            ))}
-          </Grid>
-          {children && (
-            <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
+    <nav
+      className={classes}
+      ref={anchorNavRef}
+      data-anchor-navigation
+      aria-label="Sekcie stránky"
+      {...other}
+    >
+      <Container className={`${CLASS_ROOT}__content`}>
+        <ul
+          className={cx(
+            "list-inline horizontal-scroll mb-none",
+            `${CLASS_ROOT}__content-left`,
           )}
-        </div>
+        >
+          {items.map((item) => (
+            <li key={item.href}>
+              <Link
+                href={item.href}
+                className={cx(`${CLASS_ROOT}__item`, {
+                  "is-active": item.isActive,
+                })}
+              >
+                {item.label}
+              </Link>
+            </li>
+          ))}
+        </ul>
+        {children && (
+          <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
+        )}
       </Container>
-    </div>
+    </nav>
   );
 };
 

package/src/components/AnchorNavigation/styles/mixins.scss

@@ -4,16 +4,16 @@
 @use "./../../../styles/tools/generate";
 @use "./../../../styles/tools/convert";
 @use "./../../../styles/typography/config" as typography;
+@use "../../Megamenu/styles/config" as megamenuConfig;
 @use "sass:map" as sass-map;
 
 @mixin anchor-navigation() {
   position: sticky;
   top: 0;
-  z-index: 100;
+  z-index: 10;
   background-color: var(--color-background-primary) !important;
-  border-bottom: 1px solid var(--color-border-subtle);
+  border-bottom: 1px solid var(--color-border-strong);
 
-  // Štýly pre Grid s horizontal-scroll
   .horizontal-scroll {
     &::-webkit-scrollbar {
       display: none !important;
@@ -22,7 +22,6 @@
       background: transparent !important;
     }
 
-    // Pre Firefox
     scrollbar-width: none !important;
     -ms-overflow-style: none !important;
   }
@@ -30,22 +29,13 @@
 
 @mixin anchor-navigation-item() {
   margin-right: space.get("large") !important;
+  margin-bottom: 0 !important;
   padding: convert.to-rem(25px) 0 !important;
   white-space: nowrap;
-  border-bottom: 4px solid transparent;
   text-decoration: none !important;
   display: inline-block;
   cursor: pointer;
-
-  &:focus {
-    background-color: var(--color-background-primary) !important;
-    color: var(--color-text-default) !important;
-    outline: none !important;
-  }
-
-  &:hover {
-    text-decoration: none !important;
-  }
+  font-weight: 700 !important;
 
   &:last-child {
     margin-right: 0;
@@ -56,9 +46,14 @@
     padding: space.get("small") 0 !important;
   }
 
+  &:hover,
+  &:focus-visible,
+  &:active,
   &.is-active {
-    border-bottom-color: var(--color-border-accent);
-    font-weight: 600;
+    box-shadow: megamenuConfig.$active-line;
+    color: initial;
+    text-decoration: none !important;
+    outline: none;
   }
 }
 
@@ -75,6 +70,8 @@
 }
 
 @mixin anchor-navigation-content-left() {
+  display: flex;
+
   @include breakpoint.get("xs", "down") {
     width: 100%;
   }

package/src/components/AnchorNavigation/tests/AnchorNavigation.conformance.test.js

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { AnchorNavigation } from "../";
+
+const basicItems = [
+  { label: "Key Features", href: "#features", isActive: true },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Getting Started", href: "#getting-started" },
+  { label: "Contact", href: "#contact" },
+];
+
+const example = (
+  <div id="root">
+    {/* Basic usage */}
+    <AnchorNavigation items={basicItems} aria-label="Basic navigation" />
+
+    {/* With color scheme */}
+    <AnchorNavigation
+      items={basicItems}
+      colorScheme="light"
+      aria-label="Light navigation"
+    />
+
+    {/* With additional content */}
+    <AnchorNavigation
+      items={basicItems}
+      colorScheme="dark"
+      aria-label="Dark navigation with content"
+    >
+      <div className="bold">
+        <div className="align-sm-right">2 €</div>
+        <div className="reset-font-weight">No commitment</div>
+      </div>
+      <button type="button">Get Started</button>
+    </AnchorNavigation>
+
+    {/* Multiple items */}
+    <AnchorNavigation
+      items={[
+        { label: "Overview", href: "#overview", isActive: true },
+        { label: "Features", href: "#features" },
+        { label: "Documentation", href: "#docs" },
+        { label: "API Reference", href: "#api" },
+        { label: "Examples", href: "#examples" },
+        { label: "Support", href: "#support" },
+      ]}
+      colorScheme="light"
+      aria-label="Extended navigation"
+    />
+  </div>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+    },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});