@orangesk/orange-design-system 2.0.0-beta.18 → 2.0.0-beta.19

package/src/components/Carousel/tests/Carousel.static.test.js

@@ -13,9 +13,15 @@ jest.mock("swiper", () => ({
     destroy: jest.fn(),
     update: jest.fn(),
     on: jest.fn(),
+    enable: jest.fn(),
+    disable: jest.fn(),
     activeIndex: 0,
     isBeginning: true,
     isEnd: false,
+    slides: [{}, {}, {}],
+    params: {
+      slidesPerView: 1,
+    },
   })),
 }));
 
@@ -44,9 +50,15 @@ describe("Carousel Static - External Controls", () => {
       destroy: jest.fn(),
       update: jest.fn(),
       on: jest.fn(),
+      enable: jest.fn(),
+      disable: jest.fn(),
       activeIndex: 0,
       isBeginning: true,
       isEnd: false,
+      slides: [{}, {}, {}],
+      params: {
+        slidesPerView: 1,
+      },
     };
 
     Swiper.mockImplementation(() => mockSwiperInstance);
@@ -189,6 +201,7 @@ describe("Carousel Static - External Controls", () => {
     it("should disable next button when at end", () => {
       mockSwiperInstance.isBeginning = false;
       mockSwiperInstance.isEnd = true;
+      mockSwiperInstance.activeIndex = 2; // Set to last slide so activeIndex + slidesPerView >= slidesCount
 
       carouselInstance.updateExternalControlsState();
 
@@ -401,3 +414,203 @@ describe("Carousel Static - External Controls", () => {
     });
   });
 });
+
+describe("Carousel Static - Auto-Disable Feature", () => {
+  let carouselElement;
+  let carouselInstance;
+  let mockSwiperInstance;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    // Create mock Swiper instance with slides array
+    mockSwiperInstance = {
+      slideNext: jest.fn(),
+      slidePrev: jest.fn(),
+      destroy: jest.fn(),
+      update: jest.fn(),
+      on: jest.fn(),
+      enable: jest.fn(),
+      disable: jest.fn(),
+      activeIndex: 0,
+      isBeginning: true,
+      isEnd: false,
+      slides: [], // Will be populated in tests
+      params: {
+        slidesPerView: 1.2,
+      },
+    };
+
+    Swiper.mockImplementation(() => mockSwiperInstance);
+
+    document.body.innerHTML = `
+      <div class="carousel" data-carousel-id="test-carousel" id="test-carousel">
+        <div class="carousel__viewport">
+          <div class="carousel__track">
+            <div class="carousel__slide">Slide 1</div>
+            <div class="carousel__slide">Slide 2</div>
+            <div class="carousel__slide">Slide 3</div>
+          </div>
+        </div>
+        <div class="carousel__pagination"></div>
+      </div>
+    `;
+
+    carouselElement = document.querySelector(".carousel");
+    global.requestAnimationFrame = jest.fn((cb) => cb());
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    global.requestAnimationFrame = undefined;
+  });
+
+  describe("Auto-disable when content fits", () => {
+    it("should enable carousel when more slides than slidesPerView", () => {
+      // 3 slides, slidesPerView 1.2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 1.2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+
+    it("should disable carousel when slides match slidesPerView", () => {
+      // 2 slides, slidesPerView 2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should disable carousel when slides less than slidesPerView", () => {
+      // 1 slide, slidesPerView 3
+      mockSwiperInstance.slides = [document.createElement("div")];
+      mockSwiperInstance.params.slidesPerView = 3;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should enable carousel when slides exceed slidesPerView by more than 1", () => {
+      // 5 slides, slidesPerView 2
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+  });
+
+  describe("Update state on resize/breakpoint change", () => {
+    it("should update carousel enabled state on resize event", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // Clear previous calls
+      mockSwiperInstance.disable.mockClear();
+      mockSwiperInstance.enable.mockClear();
+
+      // Simulate resize event with different breakpoint
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 3;
+
+      // Get the resize callback
+      const resizeCallback = mockSwiperInstance.on.mock.calls.find(
+        (call) => call[0] === "resize",
+      );
+      if (resizeCallback) {
+        resizeCallback[1]();
+        expect(mockSwiperInstance.enable).toHaveBeenCalled();
+      }
+    });
+
+    it("should handle resize with decimal slidesPerView", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = 2.5;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // 4 slides > 2.5, should be enabled
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+  });
+
+  describe("Edge cases for auto-disable", () => {
+    it("should handle carousel with no slides", () => {
+      mockSwiperInstance.slides = [];
+      mockSwiperInstance.params.slidesPerView = 1;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should handle slidesPerView as string number", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = "2";
+
+      carouselInstance = new Carousel(carouselElement);
+
+      expect(mockSwiperInstance.disable).toHaveBeenCalled();
+    });
+
+    it("should default to slidesPerView 1 if not specified", () => {
+      mockSwiperInstance.slides = [
+        document.createElement("div"),
+        document.createElement("div"),
+      ];
+      mockSwiperInstance.params.slidesPerView = undefined;
+
+      carouselInstance = new Carousel(carouselElement);
+
+      // 2 slides > 1 (default), should be enabled
+      expect(mockSwiperInstance.enable).toHaveBeenCalled();
+    });
+
+    it("should not crash if updateCarouselEnabledState called without instance", () => {
+      carouselInstance = new Carousel(carouselElement);
+      carouselInstance.instance = null;
+
+      expect(() => {
+        carouselInstance.updateCarouselEnabledState();
+      }).not.toThrow();
+    });
+  });
+});

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

@@ -272,4 +272,62 @@ describe("rendering Carousel", () => {
       expect(carousel).toHaveAttribute("data-carousel-id", "test-data-id");
     });
   });
+
+  describe("Auto-disable feature", () => {
+    const items = [
+      <p key="item1">item1</p>,
+      <p key="item2">item2</p>,
+      <p key="item3">item3</p>,
+    ];
+
+    it("should render carousel element with id for auto-disable feature", () => {
+      const { container } = render(
+        <Carousel id="auto-disable-test" items={items} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveAttribute("id", "auto-disable-test");
+    });
+
+    it("should support swiperOptions with slidesPerView for auto-disable", () => {
+      const swiperOptions = {
+        slidesPerView: 2,
+        breakpoints: {
+          1240: {
+            slidesPerView: 3,
+          },
+        },
+      };
+      const { container } = render(
+        <Carousel items={items} swiperOptions={swiperOptions} />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel.getAttribute("data-swiper-options")).toContain(
+        "slidesPerView",
+      );
+    });
+
+    it("should work with bleedRight carousel and auto-disable", () => {
+      const { container } = render(
+        <Carousel items={items} bleedRight showScrollbar />,
+      );
+      const carousel = container.querySelector(".carousel");
+      expect(carousel).toHaveClass("carousel--bleed-right");
+    });
+
+    it("should support minimal slides for testing auto-disable", () => {
+      const minimalItems = [<p key="item1">item1</p>];
+      const { container } = render(<Carousel items={minimalItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(1);
+    });
+
+    it("should support many slides for testing auto-disable with high slidesPerView", () => {
+      const manyItems = Array.from({ length: 10 }, (_, i) => (
+        <p key={`item${i}`}>item{i}</p>
+      ));
+      const { container } = render(<Carousel items={manyItems} />);
+      const slides = container.getElementsByClassName("carousel__slide");
+      expect(slides.length).toBe(10);
+    });
+  });
 });

package/src/components/Expander/Expander.static.ts

@@ -13,35 +13,34 @@ export default class Expander {
   }
 
   toggle() {
-    console.log('Toggle event triggered');
-    const summary = this.element.querySelector('summary');
-    
+    const summary = this.element.querySelector("summary");
+
     if (!summary) {
       return;
     }
-    
-    const summaryText = summary.getAttribute('data-summary');
-    const summaryOpenedText = summary.getAttribute('data-summary-opened');
+
+    const summaryText = summary.getAttribute("data-summary");
+    const summaryOpenedText = summary.getAttribute("data-summary-opened");
 
     summary.setAttribute(
-      'aria-expanded',
-      summary.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
+      "aria-expanded",
+      summary.getAttribute("aria-expanded") === "true" ? "false" : "true",
     );
 
     if (summaryOpenedText) {
       const text =
-        summary.getAttribute('aria-expanded') === 'true'
+        summary.getAttribute("aria-expanded") === "true"
           ? summaryOpenedText
           : summaryText;
 
       if (text) {
-        summary.setAttribute('aria-label', text);
+        summary.setAttribute("aria-label", text);
       }
     }
   }
 
   init() {
-    this.element.addEventListener('toggle', this.toggle);
+    this.element.addEventListener("toggle", this.toggle);
   }
 
   update() {
@@ -50,7 +49,7 @@ export default class Expander {
   }
 
   destroy() {
-    this.element.removeEventListener('toggle', this.toggle);
+    this.element.removeEventListener("toggle", this.toggle);
   }
 
   static getInstance(el: HTMLElementWithExpander | null): Expander | null {

package/src/components/Footer/Footer.tsx

@@ -68,7 +68,7 @@ const Footer: React.FC<FooterProps> = ({ className, data = footerData }) => {
         <div className={CLASS_GRID}>
           {data.columns.map((column, index) => (
             <div key={`footer-column-${index}`}>
-              <h5 className={CLASS_TITLE}>{column.title}</h5>
+              <p className={CLASS_TITLE}>{column.title}</p>
               <ul className={CLASS_LIST}>
                 {column.links.map((link, linkIndex) => (
                   <li

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

@@ -107,14 +107,14 @@ describe("Footer Conformance Tests", () => {
 
   describe("Semantic HTML", () => {
     it("uses proper semantic elements", () => {
-      const { getByRole, getAllByRole } = render(<Footer />);
+      const { getByRole, getAllByRole, container } = render(<Footer />);
 
       // Footer should be a landmark
       expect(getByRole("contentinfo")).toBeInTheDocument();
 
-      // Should have proper heading structure
-      const headings = getAllByRole("heading", { level: 5 });
-      expect(headings.length).toBe(4); // One for each column
+      // Should have proper column titles (now rendered as paragraphs with footer__title class)
+      const titles = container.querySelectorAll(".footer__title");
+      expect(titles.length).toBe(4); // One for each column
 
       // Should have navigation lists
       const lists = getAllByRole("list");

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

@@ -115,14 +115,14 @@ describe("Footer", () => {
   });
 
   it("has proper semantic structure", () => {
-    const { getByRole, getAllByRole } = render(<Footer />);
+    const { getByRole, getAllByRole, container } = render(<Footer />);
 
     // Should have footer landmark
     expect(getByRole("contentinfo")).toBeInTheDocument();
 
-    // Should have headings for each column
-    const headings = getAllByRole("heading", { level: 5 });
-    expect(headings).toHaveLength(4); // 4 columns
+    // Should have column titles (now rendered as paragraphs with footer__title class)
+    const titles = container.querySelectorAll(".footer__title");
+    expect(titles).toHaveLength(4); // 4 columns
 
     // Should have lists for navigation
     const lists = getAllByRole("list");

package/src/components/Megamenu/Megamenu.tsx

@@ -81,12 +81,9 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
           data-hide-when-sticky="true"
         >
           <div className={CLASS_CONTAINER}>
-            <h2 id="top-menu-title" className="sr-only">
-              Top menu
-            </h2>
             <ul
               className={cx(CLASS_NAV, CLASS_NAV_SPACE_SMALL)}
-              aria-labelledby="top-menu-title"
+              aria-label="Top menu"
             >
               <li className={CLASS_NAV_ITEM}>
                 <a
@@ -123,10 +120,7 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
 
         <div className={CLASS_MAIN}>
           <div className={CLASS_CONTAINER}>
-            <h2 id="menu-title" className="sr-only">
-              Hlavné menu
-            </h2>
-            <ul className={CLASS_NAV} aria-labelledby="menu-title">
+            <ul className={CLASS_NAV} aria-label="Hlavné menu">
               <li className={cx(CLASS_NAV_ITEM, CLASS_NAV_ITEM_MAIN)}>
                 <a
                   href="#"
@@ -199,62 +193,75 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                       </div>
 
                       <div className={CLASS_CARD}>
-                        <h3 id="pausaly-heading">Paušály</h3>
+                        <p id="pausaly-heading" className={CLASS_TEXT_LARGE}>
+                          Internet
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="pausaly-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prehľad paušálov</a>
+                            <a href="#">Prehľad internetu</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem nové číslo</a>
+                            <a href="#">Mobilný internet</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Yoxo paušál</a>{" "}
-                            <span
-                              className={cx(
-                                CLASS_TAG,
-                                CLASS_TAG_ORANGE,
-                                CLASS_TAG_SMALL,
-                              )}
-                            >
-                              Novinka
-                            </span>
+                            <a href="#">Bezpečný internet so sebou</a>
+                          </li>
+                          <li className={CLASS_SUBNAV_ITEM}>
+                            <a href="#">Domáca linka k internetu</a>
                           </li>
                         </ul>
 
-                        <h3 id="volania-s-kreditom-heading">
-                          Volania s kreditom
-                        </h3>
+                        <p
+                          id="volania-s-kreditom-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Televízia
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="volania-s-kreditom-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prima Voľba</a>
+                            <a href="#">Najlepšia TV na doma</a>
+                          </li>
+                          <li className={CLASS_SUBNAV_ITEM}>
+                            <a href="#">TV cez satelit</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Prima Kids</a>
+                            <a href="#">TV cez internet</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">FunFón</a>
+                            <a href="#">Novinky na Orange TV</a>
                           </li>
                         </ul>
 
-                        <h3 id="zahranicie-heading">Zahraničie</h3>
+                        <p id="zahranicie-heading" className={CLASS_TEXT_LARGE}>
+                          Internet + televízia
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="zahranicie-heading"
                         >
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Roaming</a>
+                            <a href="#">Ponuka Love</a>{" "}
+                            <span
+                              className={cx(
+                                CLASS_TAG,
+                                CLASS_TAG_ORANGE,
+                                CLASS_TAG_SMALL,
+                              )}
+                            >
+                              Novinka
+                            </span>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Cestovateľské balíky</a>
+                            <a href="#">Výhodný pár zariadení</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Volania do zahraničia</a>
@@ -266,36 +273,29 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                       </div>
 
                       <div className={CLASS_CARD}>
-                        <h3 id="nase-sluzby-heading">Ste náš zákazník?</h3>
+                        <p
+                          id="nase-sluzby-heading"
+                          className={CLASS_TEXT_LARGE}
+                        >
+                          Ste náš zákazník?
+                        </p>
                         <ul
                           className={CLASS_SUBNAV}
                           role="group"
                           aria-labelledby="nase-sluzby-heading"
                         >
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem zmeniť paušál</a>
-                          </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Dobiť kredit</a>
-                          </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Predĺžiť služby</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Chcem nový telefón</a>
+                            <a href="#">Nový internet</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Navzájom zadarmo</a>
-                          </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Orange Svojim</a>
+                            <a href="#">Nová televízia</a>
                           </li>
                           <li className={CLASS_SUBNAV_ITEM}>
                             <a href="#">Odporučte Orange</a>
                           </li>
-                          <li className={CLASS_SUBNAV_ITEM}>
-                            <a href="#">Ostatné služby</a>
-                          </li>
                         </ul>
                       </div>
                     </div>
@@ -394,10 +394,10 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                         CLASS_INPUT,
                         CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
                       )}
-                      id="search-1"
+                      id="megamenu-search-input"
                       type="text"
                       placeholder="Search"
-                      name="search-1"
+                      name="search"
                       defaultValue={searchEmpty ? "" : "apple"}
                     />
                     {searchEmpty ? (
@@ -558,10 +558,10 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                     CLASS_INPUT,
                     CLASS_INPUT_SEARCH_ICON_WITH_PLACEHOLDER,
                   )}
-                  id="search-1"
+                  id="megamenu-mobile-search-input"
                   type="text"
                   placeholder="Search"
-                  name="search-1"
+                  name="search"
                 />
                 <ul className={cx(CLASS_SUBNAV, "hide")}>
                   <li className={CLASS_SUBNAV_ITEM}>
@@ -647,7 +647,12 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                           </ul>
                         </div>
                         <div>
-                          <h3 id="mobile-internet-heading">Internet</h3>
+                          <p
+                            id="mobile-internet-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Internet
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
@@ -667,7 +672,12 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-tv-heading">Televízia</h3>
+                          <p
+                            id="mobile-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
+                            Televízia
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
@@ -687,9 +697,12 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-internet-tv-heading">
+                          <p
+                            id="mobile-internet-tv-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
                             Internet + televízia
-                          </h3>
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"
@@ -718,9 +731,12 @@ export const Megamenu = ({ className, searchEmpty }: MegamenuProps) => {
                             </li>
                           </ul>
 
-                          <h3 id="mobile-customer-heading">
+                          <p
+                            id="mobile-customer-heading"
+                            className={CLASS_TEXT_LARGE}
+                          >
                             Ste náš zákazník?
-                          </h3>
+                          </p>
                           <ul
                             className={CLASS_SUBNAV}
                             role="group"