@orangesk/orange-design-system 2.0.0-beta.17 → 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/Grid/Grid.tsx

@@ -9,7 +9,7 @@ export type GridRowGapSize =
   | "large"
   | "xlarge"
   | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+export type GridColumnGapSize = "none" | "small" | "default" | "large";
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -1,10 +1,12 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ('medium', 'large', 'xlarge');
+$grid-row-gap-sizes: ("medium", "large", "xlarge");
 
 $column-gap: (
-  default: space.get('small'),
+  small: space.get("xsmall"),
+  default: space.get("small"),
+  large: space.get("medium"),
   none: 0,
 );

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use 'sass:math';
+@use "sass:math";
 
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tokens/space';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+@use "./config";
 
 @mixin grid-base() {
   display: flex;
@@ -16,18 +16,23 @@
 
   /* Fixes VoiceOver no announcing unordered lists */
   > li::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     width: 0;
     height: 0;
   }
 }
 
-@mixin grid-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  margin-left: -$gap;
-  margin-right: -$gap;
+  @if ($size == "default") {
+    margin-left: -$gap;
+    margin-right: -$gap;
+  } @else {
+    margin-left: -$gap !important;
+    margin-right: -$gap !important;
+  }
 }
 
 @mixin grid-with-equal-height-content(
@@ -53,7 +58,7 @@
 }
 
 @mixin grid-row-gap(
-  $size: 'medium',
+  $size: "medium",
   $grid-col-selector: '[class*="grid__col"]'
 ) {
   margin-top: #{space.get($size) * -1};
@@ -70,11 +75,16 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  padding-left: $gap;
-  padding-right: $gap;
+  @if ($size == "default") {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  }
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
@@ -100,25 +110,25 @@
 }
 
 @mixin column-classes() {
-  *[class*='grid__col'] {
+  *[class*="grid__col"] {
     @include grid-col-base();
   }
 
   @include breakpoint.each using ($breakpoint) {
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-shrink {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
       @include column-shrink;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-fill {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
       @include column-fill;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-auto {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
       @include column-auto;
     }
 
     @for $i from 1 through config.$grid-base {
-      .grid__col-#{generate.variant-name($breakpoint, '-')}-#{$i} {
+      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
         @include column-size($i);
       }
     }

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

@@ -62,6 +62,17 @@ describe("Grid", () => {
     });
   });
 
+  ["small", "large", "none"].forEach((columnGapSize) => {
+    it(`applies grid--column-gap-${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(
+        `grid--column-gap-${columnGapSize}`,
+      );
+    });
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,