@orangesk/orange-design-system 2.0.0-beta.30 → 2.0.0-beta.32

package/src/components/Carousel/Carousel.static.ts

@@ -185,55 +185,46 @@ export default class Carousel {
         `.${CLASS_VIEWPORT_WRAPPER}`,
       ) as HTMLElement;
       const scrollbar = this.instance?.scrollbar;
+      const swiper = this.instance;
 
-      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl) {
+      if (!viewportWrapper || !scrollbar || !scrollbar.dragEl || !swiper) {
         return;
       }
 
-      const slidesCount = this.instance.slides.length;
-      const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+      const minTranslate = swiper.minTranslate();
+      const maxTranslate = swiper.maxTranslate();
+      const translateRange = Math.abs(maxTranslate - minTranslate);
 
-      // Only show scrollbar when there are more slides than visible at once
-      if (slidesCount > slidesPerView) {
+      if (translateRange <= 1 || !swiper.enabled) {
         if (scrollbar.el) {
-          scrollbar.el.style.display = "";
+          scrollbar.el.style.display = "none";
         }
+        return;
+      }
 
-        const scrollbarWidth = scrollbar.el.offsetWidth;
-
-        // Calculate drag handle size based on the ratio of visible slides to total slides
-        // Example: 3 visible out of 5 total = 60% of scrollbar width
-        const visibleRatio = slidesPerView / slidesCount;
-        const dragSize = visibleRatio * scrollbarWidth;
-        // Ensure minimum 30px for usability
-        const finalDragSize = Math.max(dragSize, 30);
+      if (scrollbar.el) {
+        scrollbar.el.style.display = "";
+      }
 
-        scrollbar.dragEl.style.width = `${finalDragSize}px`;
-        scrollbar.dragEl.style.display = "";
+      const scrollbarWidth = scrollbar.el.offsetWidth;
+      const viewportWidth = viewportWrapper.clientWidth;
+      const offsetBefore = Number(swiper.params.slidesOffsetBefore) || 0;
+      const offsetAfter = Number(swiper.params.slidesOffsetAfter) || 0;
+      const contentWidth = this.track.scrollWidth + offsetBefore + offsetAfter;
 
-        // Calculate scrollbar position based on carousel's actual scroll position
-        const maxScrollableSlides = slidesCount - slidesPerView;
-        const currentTranslate = Math.abs(this.instance.translate || 0);
-        const slideSize = this.instance.slidesSizesGrid?.[0] || 0;
+      const visibleRatio =
+        contentWidth > 0 ? Math.min(viewportWidth / contentWidth, 1) : 1;
+      const dragSize = visibleRatio * scrollbarWidth;
+      const finalDragSize = Math.max(dragSize, 30);
 
-        // Determine how far we've scrolled as a ratio (0 = start, 1 = end)
-        const maxTranslateValue = maxScrollableSlides * slideSize;
-        const scrollRatio =
-          maxTranslateValue > 0
-            ? Math.min(currentTranslate / maxTranslateValue, 1)
-            : 0;
+      scrollbar.dragEl.style.width = `${finalDragSize}px`;
+      scrollbar.dragEl.style.display = "";
 
-        // Position scrollbar drag handle proportionally
-        const maxDragTranslate = scrollbarWidth - finalDragSize;
-        const dragTranslateX = scrollRatio * maxDragTranslate;
+      const scrollRatio = Math.min(Math.max(swiper.progress || 0, 0), 1);
+      const maxDragTranslate = Math.max(scrollbarWidth - finalDragSize, 0);
+      const dragTranslateX = scrollRatio * maxDragTranslate;
 
-        scrollbar.dragEl.style.transform = `translate3d(${dragTranslateX}px, 0, 0)`;
-      } else {
-        // Hide scrollbar when all slides are visible (no scrolling needed)
-        if (scrollbar.el) {
-          scrollbar.el.style.display = "none";
-        }
-      }
+      scrollbar.dragEl.style.transform = `translate3d(${dragTranslateX}px, 0, 0)`;
     };
 
     // Initial update (double requestAnimationFrame ensures DOM is fully ready)
@@ -330,52 +321,44 @@ export default class Carousel {
     }
   }
 
-  /**
-   * Calculate how much the carousel should extend beyond the container (bleed effect).
-   * On screens 2560px and wider, the bleed effect is disabled.
-   * Also disabled when all slides fit on screen (slidesCount <= slidesPerView).
-   */
-  private calculateBleedAmount(container: HTMLElement): number {
-    const containerWidth = container.offsetWidth;
-    const halfViewportWidth = window.innerWidth / 2;
-    const halfContainerWidth = containerWidth / 2;
-    let bleedAmount = halfViewportWidth - halfContainerWidth;
-
-    if (window.innerWidth >= 2560) {
-      bleedAmount = 0;
+  private applyBleedInsets(viewportWrapper: HTMLElement): void {
+    if (!this.instance || !this.instance.params) {
+      return;
     }
 
-    // Disable bleed when all slides fit on screen (no scrolling needed)
-    const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
-    const slidesCount = this.instance?.slides.length || 0;
-    if (slidesCount <= slidesPerView) {
-      bleedAmount = 0;
-    }
+    const viewportWidth =
+      document.documentElement.clientWidth ||
+      window.visualViewport?.width ||
+      window.innerWidth;
 
-    return Math.max(bleedAmount, 0);
-  }
+    const rect = viewportWrapper.getBoundingClientRect();
+    const insetLeft = Math.max(Math.round(rect.left), 0);
+    const trailingSlidePadding = 20;
+    const insetAfter = Math.max(insetLeft - trailingSlidePadding, 0);
 
-  /**
-   * Apply the bleed offset to extend the carousel beyond the container edge.
-   * Only applies when content exceeds the visible area.
-   */
-  private applyBleedOffset(
-    viewportWrapper: HTMLElement,
-    bleedAmount: number,
-  ): void {
-    // Safety check: ensure instance and params are initialized
-    if (!this.instance || !this.instance.params) {
-      return;
-    }
+    const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
+    const slidesCount = this.instance.slides.length;
+    const shouldDisableBleed =
+      viewportWidth >= 2560 || slidesCount <= slidesPerView;
 
-    const visibleWidth = viewportWrapper.clientWidth;
-    const totalWidth = this.track.scrollWidth;
-    const contentFitsWithoutScroll = totalWidth <= visibleWidth + 5;
+    this.element.classList.toggle(CLASS_BLEED_RIGHT, !shouldDisableBleed);
 
-    if (bleedAmount > 0 && !contentFitsWithoutScroll) {
-      this.instance.params.slidesOffsetAfter = bleedAmount;
-    } else {
+    if (shouldDisableBleed) {
+      this.instance.params.slidesOffsetBefore = 0;
       this.instance.params.slidesOffsetAfter = 0;
+      this.element.style.setProperty("--carousel-bleed-viewport-width", "100%");
+      this.element.style.setProperty("--carousel-bleed-margin-left", "0px");
+    } else {
+      this.instance.params.slidesOffsetBefore = insetLeft;
+      this.instance.params.slidesOffsetAfter = insetAfter;
+      this.element.style.setProperty(
+        "--carousel-bleed-viewport-width",
+        "100dvw",
+      );
+      this.element.style.setProperty(
+        "--carousel-bleed-margin-left",
+        "calc(50% - 50dvw)",
+      );
     }
 
     this.instance.update();
@@ -389,8 +372,7 @@ export default class Carousel {
    */
   adjustConfigForBleedRight() {
     requestAnimationFrame(() => {
-      const container = this.element.closest(".container") as HTMLElement;
-      if (!container || !this.instance) return;
+      if (!this.instance) return;
 
       const viewportWrapper = this.element.querySelector(
         `.${CLASS_VIEWPORT_WRAPPER}`,
@@ -398,18 +380,7 @@ export default class Carousel {
       if (!viewportWrapper) return;
 
       const updateBleedState = () => {
-        const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
-        const slidesCount = this.instance?.slides.length || 0;
-        const shouldDisableBleed = slidesCount <= slidesPerView;
-
-        if (shouldDisableBleed) {
-          this.element.classList.remove(CLASS_BLEED_RIGHT);
-        } else {
-          this.element.classList.add(CLASS_BLEED_RIGHT);
-        }
-
-        const bleedAmount = this.calculateBleedAmount(container);
-        this.applyBleedOffset(viewportWrapper, bleedAmount);
+        this.applyBleedInsets(viewportWrapper);
 
         // Update margin compensation on resize
         this.applyTrackMarginCompensation();

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

@@ -210,25 +210,17 @@
 }
 
 @mixin bleed-right-variant {
-  // Allow overflow on the left side at the carousel container level
   overflow: visible;
 
   .carousel__viewport-wrapper {
-    // Allow overflow from viewport
     overflow: visible;
   }
 
   .carousel__viewport {
-    // Extend the viewport to the right edge of the screen
-    width: calc(100% + 50vw - 50%);
+    width: var(--carousel-bleed-viewport-width, 100%);
+    max-width: var(--carousel-bleed-viewport-width, 100%);
     margin-right: 0;
-    margin-left: 0 !important; // Don't add left margin - let content flow naturally
-    overflow: visible !important; // Allow content to overflow on left side
-    overflow-y: hidden; // Still hide vertical overflow
-
-    // On very large screens (above 2K), stop the bleeding effect entirely
-    @media (min-width: 2560px) {
-      width: 100%;
-    }
+    margin-left: var(--carousel-bleed-margin-left, 0) !important;
+    overflow: hidden !important;
   }
 }

package/src/components/Footer/Footer.static.ts

@@ -0,0 +1,130 @@
+import { CLASS_ACCORDION_TOGGLE, CLASS_MENU_SECTION } from "./constants";
+
+const MOBILE_MEDIA_QUERY = "(max-width: 479.98px)";
+
+interface FooterSection {
+  element: HTMLElement;
+  toggle: HTMLButtonElement | null;
+  panel: HTMLElement | null;
+}
+
+export default class Footer {
+  element!: HTMLElement;
+  sections!: FooterSection[];
+  mediaQueryList!: MediaQueryList;
+  onToggleClick!: (event: Event) => void;
+  onMediaQueryChange!: () => void;
+
+  constructor(element: HTMLElement) {
+    if ((element as any).ODS_Footer) {
+      return (element as any).ODS_Footer;
+    }
+
+    this.element = element;
+    this.sections = [];
+    this.mediaQueryList = window.matchMedia(MOBILE_MEDIA_QUERY);
+
+    this.onToggleClick = this.handleToggleClick.bind(this);
+    this.onMediaQueryChange = this.syncViewportState.bind(this);
+
+    (this.element as any).ODS_Footer = this;
+
+    this.init();
+    return this;
+  }
+
+  static getInstance(el: HTMLElement): Footer | null {
+    return el && (el as any).ODS_Footer ? (el as any).ODS_Footer : null;
+  }
+
+  init(): void {
+    this.sections = Array.from(
+      this.element.querySelectorAll(
+        `[data-footer-section].${CLASS_MENU_SECTION}`,
+      ),
+    ).map((section) => {
+      const toggle = section.querySelector(
+        `.${CLASS_ACCORDION_TOGGLE}`,
+      ) as HTMLButtonElement | null;
+      const panelId = toggle?.getAttribute("aria-controls");
+      const panel = panelId
+        ? (this.element.querySelector(`#${panelId}`) as HTMLElement | null)
+        : null;
+
+      if (toggle) {
+        toggle.addEventListener("click", this.onToggleClick);
+      }
+
+      return {
+        element: section as HTMLElement,
+        toggle,
+        panel,
+      };
+    });
+
+    this.mediaQueryList.addEventListener("change", this.onMediaQueryChange);
+
+    this.syncViewportState();
+  }
+
+  private setSectionState(section: FooterSection, isExpanded: boolean): void {
+    if (!section.toggle || !section.panel) return;
+
+    section.toggle.setAttribute("aria-expanded", String(isExpanded));
+    section.panel.hidden = !isExpanded;
+  }
+
+  private syncViewportState(): void {
+    const isMobile = this.mediaQueryList.matches;
+
+    this.sections.forEach((section, index) => {
+      if (!section.toggle || !section.panel) return;
+
+      if (!isMobile) {
+        this.setSectionState(section, true);
+        section.element.removeAttribute("data-footer-mobile-initialized");
+        return;
+      }
+
+      const isInitialized =
+        section.element.getAttribute("data-footer-mobile-initialized") ===
+        "true";
+
+      if (!isInitialized) {
+        this.setSectionState(section, index === 0);
+        section.element.setAttribute("data-footer-mobile-initialized", "true");
+        return;
+      }
+
+      const isExpanded =
+        section.toggle.getAttribute("aria-expanded") === "true";
+      this.setSectionState(section, isExpanded);
+    });
+  }
+
+  private handleToggleClick(event: Event): void {
+    if (!this.mediaQueryList.matches) return;
+
+    const toggle = event.currentTarget as HTMLButtonElement;
+    const section = this.sections.find((item) => item.toggle === toggle);
+
+    if (!section || !section.toggle) return;
+
+    const isExpanded = section.toggle.getAttribute("aria-expanded") === "true";
+    this.setSectionState(section, !isExpanded);
+  }
+
+  destroy(): void {
+    this.sections.forEach((section) => {
+      if (!section.toggle) return;
+      section.toggle.removeEventListener("click", this.onToggleClick);
+    });
+
+    this.mediaQueryList.removeEventListener("change", this.onMediaQueryChange);
+  }
+
+  update(): void {
+    this.destroy();
+    this.init();
+  }
+}

package/src/components/Footer/Footer.tsx

@@ -1,17 +1,27 @@
 import React from "react";
 import cx from "classnames";
 
-import footerData, { socials } from "./data";
+import footerData, { apps, socials } from "./data";
 import {
+  CLASS_ACCORDION_ICON,
+  CLASS_ACCORDION_TOGGLE,
+  CLASS_BAR,
   CLASS_BOTTOM,
   CLASS_BOTTOM_COPYRIGHT,
   CLASS_CONTAINER,
-  CLASS_GRID,
+  CLASS_DIVIDER,
+  CLASS_DIVIDER_HIDE_XS_DOWN,
   CLASS_LIST,
+  CLASS_LIST_BREAK_SM_DOWN,
   CLASS_LIST_INLINE,
+  CLASS_LIST_ITEM_LEAD,
+  CLASS_LIST_STACK_SM_DOWN,
+  CLASS_LIST_SPACE_SMALL,
   CLASS_LOGO,
+  CLASS_MB_LARGE,
+  CLASS_MENU,
+  CLASS_MENU_SECTION,
   CLASS_ROOT,
-  CLASS_SOCIALS,
   CLASS_TITLE,
 } from "./constants";
 import { SocialButton } from "../SocialButton";
@@ -23,56 +33,113 @@ interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
+  const accordionIdPrefix = `footer-${React.useId().replace(/:/g, "")}`;
+
   return (
-    <footer className={cx(CLASS_ROOT, className)}>
+    <footer className={cx(CLASS_ROOT, className)} data-footer>
       <div className={CLASS_CONTAINER}>
-        <a href="/" aria-label="Odkaz na úvodnú stránku" className={CLASS_LOGO}>
-          <svg
-            width="48"
-            height="48"
-            viewBox="0 0 48 48"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
+        <div className={cx(CLASS_BAR, CLASS_MB_LARGE)}>
+          <a
+            href="/"
+            aria-label="Odkaz na úvodnú stránku"
+            className={CLASS_LOGO}
+          >
+            <svg
+              width="48"
+              height="48"
+              viewBox="0 0 48 48"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M48 0H0V48H48V0Z" fill="black" />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M48 48H0V0H48V48Z"
+                fill="#FF7900"
+              />
+              <path
+                d="M5.9078 44.1298C4.1702 44.1298 2.60156 43.0229 2.60156 40.6047C2.60156 38.1855 4.16924 37.0796 5.9078 37.0796C7.6454 37.0796 9.21116 38.1865 9.21116 40.6047C9.21116 43.0229 7.64636 44.1298 5.9078 44.1298ZM5.9078 38.5657C4.59356 38.5657 4.35356 39.7494 4.35356 40.6047C4.35356 41.4591 4.59356 42.6457 5.9078 42.6457C7.22204 42.6457 7.46204 41.4601 7.46204 40.6047C7.46204 39.7503 7.22204 38.5657 5.9078 38.5657Z"
+                fill="white"
+              />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M10.418 37.2559H12.0912V38.0412C12.41 37.6179 13.1952 37.1196 13.9316 37.1196C14.0016 37.1196 14.088 37.1196 14.16 37.1283V38.7795H14.0736C13.3095 38.7795 12.4733 38.8985 12.2026 39.4927V43.9356H10.418V37.2559Z"
+                fill="white"
+              />
+              <path
+                d="M18.831 43.3547C18.1777 43.7913 17.4087 44.0223 16.623 44.0181C15.375 44.0181 14.6367 43.1887 14.6367 42.0751C14.6367 40.5794 16.0114 39.7903 18.8444 39.4706V39.0981C18.8444 38.6133 18.4767 38.3291 17.7961 38.3291C17.1164 38.3291 16.5634 38.5989 16.165 39.0971L14.9794 38.4223C15.6015 37.5506 16.55 37.1147 17.8239 37.1147C19.5673 37.1147 20.5455 37.8703 20.5455 39.0981C20.5455 39.0981 20.5436 43.9269 20.5455 43.9394H18.9865L18.831 43.3547ZM16.3686 41.9474C16.3686 42.3967 16.6498 42.8162 17.1606 42.8162C17.7126 42.8162 18.2511 42.5877 18.7887 42.1125V40.5304C17.1471 40.733 16.3686 41.1573 16.3686 41.9474Z"
+                fill="white"
+              />
+              <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M21.9336 37.4342L23.3899 37.2336L23.5512 38.0256C24.371 37.4246 25.0229 37.1059 25.8437 37.1059C27.2184 37.1059 27.9288 37.8355 27.9288 39.2793V43.9296H26.1691V39.5846C26.1691 38.7667 25.9579 38.399 25.3214 38.399C24.7973 38.399 24.2731 38.6361 23.6741 39.1392V43.9296H21.9336V37.4342Z"
+                fill="white"
+              />
+              <path
+                d="M32.2317 42.5003C33.5642 42.4907 33.6784 41.1323 33.6784 40.2491C33.6784 39.2008 33.1677 38.355 32.2192 38.355C31.5885 38.355 30.8819 38.8158 30.8819 40.3221C30.8819 41.1438 30.9405 42.5118 32.2317 42.5003ZM35.3671 37.2328V43.5582C35.3671 44.6718 35.2787 46.515 32.0983 46.5314C30.785 46.541 29.5658 46.013 29.3239 44.8677L31.0567 44.5874C31.1296 44.9166 31.3322 45.2421 32.3152 45.2421C33.2263 45.2421 33.664 44.8072 33.664 43.7637V42.9851L33.641 42.9611C33.3616 43.4622 32.9373 43.9355 31.9168 43.9355C30.3578 43.9355 29.1328 42.8546 29.1328 40.5966C29.1328 38.3627 30.3981 37.1118 31.817 37.109C33.1514 37.107 33.6429 37.7147 33.76 38.0334L33.736 38.0315L33.8829 37.2328H35.3671ZM39.5709 44.0584C37.6029 44.0584 36.4279 42.7912 36.4279 40.5928C36.4279 38.3704 37.6163 37.1051 39.5431 37.1051C41.4698 37.1051 42.616 38.3339 42.616 40.5045C42.616 40.6216 42.6016 40.7349 42.6016 40.8501H38.1539C38.1664 42.1173 38.6925 42.7557 39.7274 42.7557C40.3907 42.7557 40.8314 42.4869 41.2442 41.9003L42.5306 42.6136C41.9642 43.5611 40.9427 44.0584 39.5709 44.0584ZM40.8899 39.7096C40.8899 38.8178 40.3773 38.2917 39.5431 38.2917C38.7482 38.2917 38.2519 38.8062 38.1827 39.7106L40.8899 39.7096ZM45.6256 34.7214L44.9776 36.3966L44.3191 34.7214H43.7546V36.9294H44.1203V35.0872H44.1299L44.8547 36.9304H45.088L45.808 35.0872H45.8195V36.9304H46.1824V34.7224L45.6256 34.7214ZM41.56 34.7214V35.0152H42.2503V36.9304H42.6151V35.0152H43.3072V34.7214H41.56Z"
+                fill="white"
+              />
+            </svg>
+          </a>
+          <ul
+            className={cx(
+              CLASS_LIST,
+              CLASS_LIST_INLINE,
+              CLASS_LIST_SPACE_SMALL,
+            )}
           >
-            <path d="M48 0H0V48H48V0Z" fill="black" />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M48 48H0V0H48V48Z"
-              fill="#FF7900"
-            />
-            <path
-              d="M5.9078 44.1298C4.1702 44.1298 2.60156 43.0229 2.60156 40.6047C2.60156 38.1855 4.16924 37.0796 5.9078 37.0796C7.6454 37.0796 9.21116 38.1865 9.21116 40.6047C9.21116 43.0229 7.64636 44.1298 5.9078 44.1298ZM5.9078 38.5657C4.59356 38.5657 4.35356 39.7494 4.35356 40.6047C4.35356 41.4591 4.59356 42.6457 5.9078 42.6457C7.22204 42.6457 7.46204 41.4601 7.46204 40.6047C7.46204 39.7503 7.22204 38.5657 5.9078 38.5657Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M10.418 37.2559H12.0912V38.0412C12.41 37.6179 13.1952 37.1196 13.9316 37.1196C14.0016 37.1196 14.088 37.1196 14.16 37.1283V38.7795H14.0736C13.3095 38.7795 12.4733 38.8985 12.2026 39.4927V43.9356H10.418V37.2559Z"
-              fill="white"
-            />
-            <path
-              d="M18.831 43.3547C18.1777 43.7913 17.4087 44.0223 16.623 44.0181C15.375 44.0181 14.6367 43.1887 14.6367 42.0751C14.6367 40.5794 16.0114 39.7903 18.8444 39.4706V39.0981C18.8444 38.6133 18.4767 38.3291 17.7961 38.3291C17.1164 38.3291 16.5634 38.5989 16.165 39.0971L14.9794 38.4223C15.6015 37.5506 16.55 37.1147 17.8239 37.1147C19.5673 37.1147 20.5455 37.8703 20.5455 39.0981C20.5455 39.0981 20.5436 43.9269 20.5455 43.9394H18.9865L18.831 43.3547ZM16.3686 41.9474C16.3686 42.3967 16.6498 42.8162 17.1606 42.8162C17.7126 42.8162 18.2511 42.5877 18.7887 42.1125V40.5304C17.1471 40.733 16.3686 41.1573 16.3686 41.9474Z"
-              fill="white"
-            />
-            <path
-              fillRule="evenodd"
-              clipRule="evenodd"
-              d="M21.9336 37.4342L23.3899 37.2336L23.5512 38.0256C24.371 37.4246 25.0229 37.1059 25.8437 37.1059C27.2184 37.1059 27.9288 37.8355 27.9288 39.2793V43.9296H26.1691V39.5846C26.1691 38.7667 25.9579 38.399 25.3214 38.399C24.7973 38.399 24.2731 38.6361 23.6741 39.1392V43.9296H21.9336V37.4342Z"
-              fill="white"
-            />
-            <path
-              d="M32.2317 42.5003C33.5642 42.4907 33.6784 41.1323 33.6784 40.2491C33.6784 39.2008 33.1677 38.355 32.2192 38.355C31.5885 38.355 30.8819 38.8158 30.8819 40.3221C30.8819 41.1438 30.9405 42.5118 32.2317 42.5003ZM35.3671 37.2328V43.5582C35.3671 44.6718 35.2787 46.515 32.0983 46.5314C30.785 46.541 29.5658 46.013 29.3239 44.8677L31.0567 44.5874C31.1296 44.9166 31.3322 45.2421 32.3152 45.2421C33.2263 45.2421 33.664 44.8072 33.664 43.7637V42.9851L33.641 42.9611C33.3616 43.4622 32.9373 43.9355 31.9168 43.9355C30.3578 43.9355 29.1328 42.8546 29.1328 40.5966C29.1328 38.3627 30.3981 37.1118 31.817 37.109C33.1514 37.107 33.6429 37.7147 33.76 38.0334L33.736 38.0315L33.8829 37.2328H35.3671ZM39.5709 44.0584C37.6029 44.0584 36.4279 42.7912 36.4279 40.5928C36.4279 38.3704 37.6163 37.1051 39.5431 37.1051C41.4698 37.1051 42.616 38.3339 42.616 40.5045C42.616 40.6216 42.6016 40.7349 42.6016 40.8501H38.1539C38.1664 42.1173 38.6925 42.7557 39.7274 42.7557C40.3907 42.7557 40.8314 42.4869 41.2442 41.9003L42.5306 42.6136C41.9642 43.5611 40.9427 44.0584 39.5709 44.0584ZM40.8899 39.7096C40.8899 38.8178 40.3773 38.2917 39.5431 38.2917C38.7482 38.2917 38.2519 38.8062 38.1827 39.7106L40.8899 39.7096ZM45.6256 34.7214L44.9776 36.3966L44.3191 34.7214H43.7546V36.9294H44.1203V35.0872H44.1299L44.8547 36.9304H45.088L45.808 35.0872H45.8195V36.9304H46.1824V34.7224L45.6256 34.7214ZM41.56 34.7214V35.0152H42.2503V36.9304H42.6151V35.0152H43.3072V34.7214H41.56Z"
-              fill="white"
-            />
-          </svg>
-        </a>
+            <li className={CLASS_LIST_ITEM_LEAD}>Sledujte nás</li>
+            <li className={CLASS_LIST_BREAK_SM_DOWN} aria-hidden="true" />
+            {socials.map((social, index) => (
+              <li key={`footer-social-link-${index}`}>
+                <SocialButton
+                  name={social.name}
+                  href={social.url}
+                  aria-label={social.label}
+                />
+              </li>
+            ))}
+          </ul>
+        </div>
 
-        <div className={CLASS_GRID}>
+        <div className={CLASS_MENU}>
           {data.columns.map((column, index) => (
-            <div key={`footer-column-${index}`}>
-              <p className={CLASS_TITLE}>{column.title}</p>
-              <ul className={CLASS_LIST}>
+            // id pairs keep button/panel relationship unique when multiple footers exist on one page
+            <div
+              className={CLASS_MENU_SECTION}
+              data-footer-section
+              key={`footer-column-${index}`}
+            >
+              <button
+                type="button"
+                className={CLASS_ACCORDION_TOGGLE}
+                data-footer-toggle
+                id={`${accordionIdPrefix}-footer-section-toggle-${index}`}
+                aria-expanded={index === 0 ? "true" : "false"}
+                aria-controls={`${accordionIdPrefix}-footer-section-panel-${index}`}
+              >
+                <span className={CLASS_TITLE}>{column.title}</span>
+                <span className={CLASS_ACCORDION_ICON} aria-hidden="true">
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 80 80"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M66.666 33.333 40 60 13.333 33.333 20 26.667l20 20 20-20 6.666 6.666Z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+              </button>
+              <ul
+                className={CLASS_LIST}
+                id={`${accordionIdPrefix}-footer-section-panel-${index}`}
+              >
                 {column.links.map((link, linkIndex) => (
                   <li
                     className="mb-small"
@@ -86,18 +153,25 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
           ))}
         </div>
 
-        <hr />
+        <hr className={cx(CLASS_DIVIDER, CLASS_DIVIDER_HIDE_XS_DOWN)} />
 
-        <div className={CLASS_SOCIALS}>
-          <ul className={cx(CLASS_LIST, CLASS_LIST_INLINE)}>
-            <li>Sledujte nás</li>
-            {socials.map((social, index) => (
-              <li className="mr-small" key={`footer-social-link-${index}`}>
-                <SocialButton
-                  name={social.name}
-                  href={social.url}
-                  aria-label={social.label}
-                />
+        <div className={CLASS_BAR}>
+          <ul
+            className={cx(
+              CLASS_LIST,
+              CLASS_LIST_INLINE,
+              CLASS_LIST_SPACE_SMALL,
+            )}
+          >
+            <li className={CLASS_LIST_ITEM_LEAD}>
+              Stiahnite si aplikáciu Môj Orange
+            </li>
+            <li className={CLASS_LIST_BREAK_SM_DOWN} aria-hidden="true" />
+            {apps.map((app, index) => (
+              <li key={`footer-app-link-${index}`}>
+                <a href={app.url} target="_blank" rel="noopener noreferrer">
+                  <img src={app.src} alt={app.label} />
+                </a>
               </li>
             ))}
           </ul>
@@ -110,12 +184,18 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
           </a>
         </div>
 
-        <hr />
+        <hr className={CLASS_DIVIDER} />
 
         <div className={CLASS_BOTTOM}>
-          <ul className={cx(CLASS_LIST, CLASS_LIST_INLINE)}>
+          <ul
+            className={cx(
+              CLASS_LIST,
+              CLASS_LIST_INLINE,
+              CLASS_LIST_STACK_SM_DOWN,
+            )}
+          >
             {data.bottomLinks?.map((link, index) => (
-              <li className="mr-small" key={`footer-legal-link-${index}`}>
+              <li key={`footer-legal-link-${index}`}>
                 <a href={link.url}>{link.label}</a>
               </li>
             ))}

package/src/components/Footer/constants.ts

@@ -1,11 +1,21 @@
 export const CLASS_ROOT = "footer";
 
 export const CLASS_CONTAINER = `${CLASS_ROOT}__container`;
-export const CLASS_GRID = `${CLASS_ROOT}__grid`;
 export const CLASS_LOGO = `${CLASS_ROOT}__logo`;
 export const CLASS_TITLE = `${CLASS_ROOT}__title`;
 export const CLASS_LIST = `${CLASS_ROOT}__list`;
+export const CLASS_LIST_SPACE_SMALL = `${CLASS_ROOT}__list--space-small`;
 export const CLASS_LIST_INLINE = `${CLASS_ROOT}__list--inline`;
-export const CLASS_SOCIALS = `${CLASS_ROOT}__socials`;
+export const CLASS_LIST_STACK_SM_DOWN = `${CLASS_ROOT}__list--stack-sm-down`;
+export const CLASS_LIST_BREAK_SM_DOWN = `${CLASS_ROOT}__list-break--sm-down`;
+export const CLASS_LIST_ITEM_LEAD = `${CLASS_ROOT}__list-item--lead`;
 export const CLASS_BOTTOM = `${CLASS_ROOT}__bottom`;
 export const CLASS_BOTTOM_COPYRIGHT = `${CLASS_ROOT}__bottom-copyright`;
+export const CLASS_MENU = `${CLASS_ROOT}__menu`;
+export const CLASS_MENU_SECTION = `${CLASS_ROOT}__menu-section`;
+export const CLASS_BAR = `${CLASS_ROOT}__bar`;
+export const CLASS_MB_LARGE = `${CLASS_ROOT}--mb-xlarge`;
+export const CLASS_ACCORDION_TOGGLE = `${CLASS_ROOT}__accordion-toggle`;
+export const CLASS_ACCORDION_ICON = `${CLASS_ROOT}__accordion-icon`;
+export const CLASS_DIVIDER = `${CLASS_ROOT}__divider`;
+export const CLASS_DIVIDER_HIDE_XS_DOWN = `${CLASS_DIVIDER}--hide-xs-down`;

package/src/components/Footer/data.ts

@@ -95,4 +95,17 @@ export const socials: Array<{ name: SocialName; url: string; label: string }> =
     },
   ];
 
+export const apps = [
+  {
+    label: "App Store",
+    src: "/appstore.svg",
+    url: "https://apps.apple.com/sk/app/m%C3%B4j-orange/id519421813",
+  },
+  {
+    label: "Google Play",
+    src: "/googleplay.svg",
+    url: "https://play.google.com/store/apps/details?id=sk.orange.android.orangego",
+  },
+];
+
 export default data;