@orangesk/orange-design-system 2.0.0-beta.0 → 2.0.0-beta.10

package/src/components/Accordion/AccordionItem.tsx

@@ -5,11 +5,12 @@ import cx from "classnames";
 
 import { useHydrationSafeId } from "../../utils/hooks";
 
-import AccordionHeader from "./AccordionHeader";
+import AccordionHeader, { type AccordionHeaderProps } from "./AccordionHeader";
 
 const CLASS_ROOT = "accordion__item";
 
-export interface AccordionItemProps {
+export interface AccordionItemProps
+  extends Pick<AccordionHeaderProps, "renderTitle"> {
   /** Accordion item id (automatically generated by default)  */
   id?: string;
   /** Open state indication */
@@ -30,6 +31,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
   id,
   isActive,
   title,
+  renderTitle,
   renderHeader,
   children,
   className,
@@ -47,6 +49,7 @@ const AccordionItem: React.FC<AccordionItemProps> = ({
           id={currentId}
           isActive={isActive}
           title={title}
+          renderTitle={renderTitle}
           {...other}
         />
       )}

package/src/components/Accordion/styles/config.scss

@@ -1,8 +1,8 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tools/convert";
 
 $spacing: (
-  default: space.get('small') 0,
-  large: space.get('medium') 0,
+  default: convert.to-rem(15px) 0,
+  large: convert.to-rem(20px) 0,
 );
 
-$enclosed-spacing: space.get('medium');
+$enclosed-spacing: convert.to-rem(20px);

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

@@ -20,10 +20,10 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  border-top: 1px solid var(--color-border-strong);
+  border-bottom: 1px solid var(--color-border-strong);
 
   &:last-child {
-    border-bottom: 1px solid var(--color-border-strong);
+    border-bottom: 0px;
   }
 
   ul {
@@ -31,6 +31,12 @@
   }
 }
 
+@mixin item-last-child-no-bottom-border {
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
 @mixin enclosed-item($spacing: config.$enclosed-spacing) {
   padding-left: $spacing;
   padding-right: $spacing;
@@ -56,7 +62,7 @@
 
   &:hover,
   &:focus-visible {
-    color: color.$orange;
+    color: var(--color-text-accent);
     cursor: pointer;
   }
 

package/src/components/Accordion/styles/style.scss

@@ -13,6 +13,10 @@
       #{$this}--enclosed & {
         @include mixins.enclosed-item();
       }
+
+      #{$this}--last-item-no-bottom-border & {
+        @include mixins.item-last-child-no-bottom-border();
+      }
     }
 
     &__header {

package/src/components/Accordion/tests/Accordion.unit.test.js

@@ -114,6 +114,15 @@ describe("Accordion Component Tests", () => {
         expect(getByTestId("test-id")).toHaveClass("accordion--enclosed");
       });
 
+      it("applies last item no bottom border class", () => {
+        const { getByTestId } = render(
+          <Accordion lastItemNoBottomBorder data-testid="test-id" />,
+        );
+        expect(getByTestId("test-id")).toHaveClass(
+          "accordion--last-item-no-bottom-border",
+        );
+      });
+
       it("applies custom className", () => {
         const { getByTestId } = render(
           <Accordion className="custom-class" data-testid="test-id" />,
@@ -590,6 +599,7 @@ describe("Accordion Component Tests", () => {
             headingLevel={2}
             size="large"
             isEnclosed
+            lastItemNoBottomBorder
             className="custom-accordion"
             data-testid="complex-accordion"
           >
@@ -616,6 +626,7 @@ describe("Accordion Component Tests", () => {
         expect(accordion).toHaveClass("accordion--large");
         expect(accordion).toHaveClass("accordion--enclosed");
         expect(accordion).toHaveClass("custom-accordion");
+        expect(accordion).toHaveClass("accordion--last-item-no-bottom-border");
 
         // Check heading level
         const headers = container.querySelectorAll("h2");

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,8 +2,8 @@
 
 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";
 import AnchorNavigationStatic from "./AnchorNavigation.static";
 
@@ -27,6 +27,7 @@ const AnchorNavigation = ({
   className,
   colorScheme,
   children,
+  ...other
 }: AnchorNavigationProps) => {
   const classes = cx(
     CLASS_ROOT,
@@ -40,35 +41,38 @@ const AnchorNavigation = ({
   const [anchorNavRef] = useStatic(AnchorNavigationStatic);
 
   return (
-    <div className={classes} ref={anchorNavRef}>
-      <div className={`${CLASS_ROOT}__content`}>
-        <Grid
-          className={`list-unstyled list-inline horizontal-scroll mb-none ${CLASS_ROOT}__content-left`}
+    <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`,
+          )}
         >
           {items.map((item) => (
-            <GridCol
-              id={item.href.replace("#", "")}
-              size={"auto"}
-              key={item.href}
-              className="pr-none pl-none"
-            >
+            <li key={item.href}>
               <Link
                 href={item.href}
-                colorScheme={colorScheme}
                 className={cx(`${CLASS_ROOT}__item`, {
                   "is-active": item.isActive,
                 })}
               >
                 {item.label}
               </Link>
-            </GridCol>
+            </li>
           ))}
-        </Grid>
+        </ul>
         {children && (
           <div className={`${CLASS_ROOT}__content-right`}>{children}</div>
         )}
-      </div>
-    </div>
+      </Container>
+    </nav>
   );
 };
 

package/src/components/AnchorNavigation/index.tsx

@@ -1,3 +1 @@
-import "./styles/style.scss";
-
 export { AnchorNavigation } from "./AnchorNavigation";

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;
-  padding: space.get("large") 0;
+  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: inherit;
+    text-decoration: none !important;
+    outline: none;
   }
 }
 
@@ -67,24 +62,17 @@
   justify-content: space-between;
   align-items: center;
   position: relative;
-  border-bottom: 1px solid var(--color-border-subtle);
-  padding: 0 convert.to-rem(70px);
-
-  @include breakpoint.get("xl", "down") {
-    padding: 0 convert.to-rem(42px);
-  }
 
   @include breakpoint.get("xs", "down") {
-    padding: 0 convert.to-rem(10px);
-    border-bottom: none;
     overflow: hidden;
     flex-direction: column;
   }
 }
 
 @mixin anchor-navigation-content-left() {
+  display: flex;
+
   @include breakpoint.get("xs", "down") {
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
   }
 }
@@ -119,7 +107,6 @@
       display: none;
     }
     padding: space.get("small") 0;
-    border-bottom: 1px solid var(--color-border-subtle);
     width: 100%;
     justify-content: space-between;
   }