@orangesk/orange-design-system 2.0.0-beta.45 → 2.0.0-beta.46

package/src/components/CarouselHero/tests/CarouselHero.unit.test.jsx

@@ -79,7 +79,9 @@ describe("rendering CarouselHero", () => {
     });
 
     it("play/pause button has proper ARIA label when displayed", () => {
-      const { container } = render(<CarouselHero interval={3000} />);
+      const { container } = render(
+        <CarouselHero enableAutoplay interval={3000} />,
+      );
 
       const playPauseButton = container.querySelector(
         ".carousel-hero__play-pause",
@@ -171,9 +173,11 @@ describe("rendering CarouselHero", () => {
       expect(tabButtons[2]).toHaveAttribute("tabIndex", "-1");
     });
 
-    it("shows play/pause button when interval is provided", () => {
+    it("shows play/pause button when autoplay is enabled and interval is provided", () => {
       const { container } = render(
-        <CarouselHero interval={3000}>{children}</CarouselHero>,
+        <CarouselHero enableAutoplay interval={3000}>
+          {children}
+        </CarouselHero>,
       );
 
       expect(
@@ -181,6 +185,16 @@ describe("rendering CarouselHero", () => {
       ).toBe(1);
     });
 
+    it("does not show play/pause button when autoplay is not enabled", () => {
+      const { container } = render(
+        <CarouselHero interval={3000}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+    });
+
     it("does not show play/pause button when interval is not provided", () => {
       const { container } = render(<CarouselHero>{children}</CarouselHero>);
 
@@ -199,15 +213,26 @@ describe("rendering CarouselHero", () => {
       ).toBe(0);
     });
 
-    it("sets data-interval attribute when interval is provided", () => {
+    it("sets data-interval attribute when autoplay is enabled and interval is provided", () => {
       const { container } = render(
-        <CarouselHero interval={5000}>{children}</CarouselHero>,
+        <CarouselHero enableAutoplay interval={5000}>
+          {children}
+        </CarouselHero>,
       );
 
       const carousel = container.querySelector(".carousel-hero");
       expect(carousel).toHaveAttribute("data-interval", "5000");
     });
 
+    it("does not set data-interval attribute when autoplay is not enabled", () => {
+      const { container } = render(
+        <CarouselHero interval={5000}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).not.toHaveAttribute("data-interval");
+    });
+
     it("does not set data-interval attribute when interval is not provided", () => {
       const { container } = render(<CarouselHero>{children}</CarouselHero>);
 
@@ -243,7 +268,7 @@ describe("rendering CarouselHero", () => {
       expect(carousel.hasAttribute("data-swiper-options")).toBe(false);
     });
 
-    it("shows play/pause button when swiperOptions has autoplay with delay >= 1000ms", () => {
+    it("shows play/pause button when autoplay is enabled and swiperOptions has autoplay with delay >= 1000ms", () => {
       const swiperOptions = {
         autoplay: {
           delay: 3000,
@@ -251,7 +276,9 @@ describe("rendering CarouselHero", () => {
         },
       };
       const { container } = render(
-        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+        <CarouselHero enableAutoplay swiperOptions={swiperOptions}>
+          {children}
+        </CarouselHero>,
       );
 
       expect(
@@ -259,6 +286,28 @@ describe("rendering CarouselHero", () => {
       ).toBe(1);
     });
 
+    it("does not show play/pause button when autoplay is not enabled, even if swiperOptions includes autoplay", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 3000,
+          disableOnInteraction: false,
+        },
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      expect(
+        container.getElementsByClassName("carousel-hero__play-pause").length,
+      ).toBe(0);
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel).not.toHaveAttribute(
+        "data-swiper-options",
+        JSON.stringify(swiperOptions),
+      );
+    });
+
     it("does not show play/pause button when swiperOptions autoplay delay < 1000ms", () => {
       const swiperOptions = {
         autoplay: {
@@ -266,7 +315,9 @@ describe("rendering CarouselHero", () => {
         },
       };
       const { container } = render(
-        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+        <CarouselHero enableAutoplay swiperOptions={swiperOptions}>
+          {children}
+        </CarouselHero>,
       );
 
       expect(
@@ -279,13 +330,31 @@ describe("rendering CarouselHero", () => {
         autoplay: true,
       };
       const { container } = render(
-        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+        <CarouselHero enableAutoplay swiperOptions={swiperOptions}>
+          {children}
+        </CarouselHero>,
       );
 
       expect(
         container.getElementsByClassName("carousel-hero__play-pause").length,
       ).toBe(0);
     });
+    it("removes autoplay from forwarded swiperOptions until autoplay is enabled", () => {
+      const swiperOptions = {
+        autoplay: {
+          delay: 3000,
+        },
+        speed: 500,
+      };
+      const { container } = render(
+        <CarouselHero swiperOptions={swiperOptions}>{children}</CarouselHero>,
+      );
+
+      const carousel = container.querySelector(".carousel-hero");
+      expect(carousel.getAttribute("data-swiper-options")).toBe(
+        JSON.stringify({ speed: 500 }),
+      );
+    });
   });
 
   describe("Swiper integration", () => {

package/src/components/Forms/InputStepper/InputStepper.tsx

@@ -52,6 +52,7 @@ const InputStepper: React.FC<InputStepperProps> = ({
     <div
       className={cx(CLASS_ROOT, className, {
         [`${CLASS_ROOT}--disabled`]: isDisabled,
+        [`${CLASS_ROOT}--invalid`]: isInvalid,
       })}
       ref={elementRef}
       data-inputstepper={config ? JSON.stringify(config) : true}
@@ -70,6 +71,7 @@ const InputStepper: React.FC<InputStepperProps> = ({
           id={id}
           name={name}
           disabled={isDisabled}
+          isInvalid={isInvalid}
           htmlType="number"
           inputMode="numeric"
         />

package/src/components/Forms/InputStepper/styles/style.scss

@@ -14,8 +14,7 @@
       appearance: textfield;
       z-index: 0;
       border-radius: 0;
-      padding: space.get("xsmall") space.get("xsmall") convert.to-rem(8px)
-        space.get("xsmall");
+      padding: space.get("xsmall");
       text-align: center;
       border-left: 0;
       border-right: 0;
@@ -109,6 +108,17 @@
       z-index: 1;
     }
 
+    &--invalid {
+      .input-stepper__button,
+      .input-stepper__number,
+      .input-stepper__button--minus:hover:not(:disabled),
+      .input-stepper__button--plus:hover:not(:disabled),
+      .input-stepper__button--minus:active:not(:disabled),
+      .input-stepper__button--plus:active:not(:disabled) {
+        border-color: var(--color-border-negative);
+      }
+    }
+
     &__button--minus:disabled,
     &__button--plus:disabled {
       &::before {

package/src/components/Forms/InputStepper/tests/InputStepper.unit.test.jsx

@@ -28,6 +28,14 @@ describe("rendering InputStepper", () => {
       expect(getByLabelText("zvýšiť počet")).toBeDisabled();
       expect(getByRole("spinbutton")).toBeDisabled();
     });
+    it("has invalid classes when isInvalid prop is passed", () => {
+      const { getByTestId, getByRole } = render(
+        <InputStepper data-testid="test-id" id="id" isInvalid />,
+      );
+
+      expect(getByTestId("test-id")).toHaveClass("input-stepper--invalid");
+      expect(getByRole("spinbutton")).toHaveClass("is-invalid");
+    });
     it("has InputStepper removed input field, replaced it with text number and set defaultValue with when config prop is passed", () => {
       const { getByText } = render(
         <InputStepper

package/src/styles/shame.scss

@@ -1,8 +1,8 @@
 @layer utilities {
   /**
-* Resets for megamenu and footer
-* This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
-**/
+  * Resets for megamenu and footer
+  * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.
+  **/
   .osk-footer-menu,
   .mm-header ul,
   .megamenu-header ul {
@@ -14,4 +14,17 @@
       margin-bottom: 0;
     }
   }
+
+  /**
+  * Fixes for header and megamenu when modal is open
+  * This is required to prevent the header and megamenu from shifting when a modal is open due to scrollbar disappearance.
+  * This is a temporary fix and will be removed once the header and megamenu components are migrated to ods2
+  **/
+  body.has-modal {
+    .mm-header.is-sticky,
+    .megamenu-header.is-sticky,
+    [data-megamenu].is-sticky:not(.megamenu) {
+      padding-right: var(--ods-modal-scrollbar-width, 0px);
+    }
+  }
 }

package/src/styles/tools/convert.scss

@@ -3,10 +3,18 @@
 @use "../tokens/base";
 
 @function to-em($size, $font-size: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $font-size) * 1em;
 }
 
 @function to-rem($size, $base: base.$font-size) {
+  @if $size == 0 {
+    @return 0;
+  }
+
   @return math.div($size, $base) * 1rem;
 }