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

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

@@ -188,13 +188,32 @@
 
 @mixin scrollbar-base {
   position: relative;
+  overflow: visible;
 }
 
 @mixin scrollbar-horizontal {
-  height: convert.to-rem(6px);
+  height: convert.to-rem(8px);
   appearance: none;
-  background-color: var(--color-surface-moderate);
+  background-color: transparent;
   border-radius: 99px;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: convert.to-rem(1px);
+    right: 0;
+    bottom: convert.to-rem(1px);
+    left: 0;
+    background-color: var(--color-surface-moderate);
+    border-radius: 99px;
+    pointer-events: none;
+  }
+
+  &:hover .carousel__scrollbar-drag,
+  .carousel__scrollbar-drag:hover {
+    height: convert.to-rem(8px);
+    margin-top: 0;
+  }
 }
 
 @mixin scrollbar-drag {
@@ -202,6 +221,7 @@
   background-color: var(--color-fill-contrast);
   border-radius: 99px;
   height: convert.to-rem(6px);
+  margin-top: convert.to-rem(1px);
 
   &:hover {
     background-color: var(--color-fill-secondary) !important;

package/src/components/CarouselHero/CarouselHero.tsx

@@ -32,6 +32,7 @@ interface CarouselHeroProps {
   children?: ReactNode;
   tabs?: TabItem[];
   interval?: number;
+  enableAutoplay?: boolean;
   [key: string]: any;
 }
 
@@ -41,6 +42,7 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
   children,
   tabs = [],
   interval,
+  enableAutoplay = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselHeroStatic);
@@ -56,11 +58,21 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
     pagination: CLASS_PAGINATION,
   };
 
+  const forwardedSwiperOptions = (() => {
+    if (!swiperOptions) return undefined;
+    if (enableAutoplay || !("autoplay" in swiperOptions)) return swiperOptions;
+
+    const { autoplay: _autoplay, ...rest } = swiperOptions;
+
+    return Object.keys(rest).length > 0 ? rest : undefined;
+  })();
+
   const hasAutoplay =
-    (swiperOptions?.autoplay &&
+    enableAutoplay &&
+    (((swiperOptions?.autoplay &&
       typeof swiperOptions.autoplay === "object" &&
-      (swiperOptions.autoplay as any).delay >= 1000) ||
-    (interval && interval >= 1000);
+      (swiperOptions.autoplay as any).delay >= 1000) as boolean) ||
+      !!(interval && interval >= 1000));
 
   const playPauseIcon = "pause";
 
@@ -69,9 +81,11 @@ const CarouselHero: React.FC<CarouselHeroProps> = ({
       className={classes}
       ref={carouselRef}
       data-carousel-hero
-      {...(interval && interval >= 1000 ? { "data-interval": interval } : {})}
-      {...(swiperOptions
-        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+      {...(enableAutoplay && interval && interval >= 1000
+        ? { "data-interval": interval }
+        : {})}
+      {...(forwardedSwiperOptions
+        ? { "data-swiper-options": JSON.stringify(forwardedSwiperOptions) }
         : {})}
       {...other}
     >

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

@@ -41,6 +41,7 @@ const exampleWithTabs = (
 
 const exampleWithAutoplay = (
   <CarouselHero
+    enableAutoplay
     interval={3000}
     tabs={[{ label: "Auto Tab 1" }, { label: "Auto Tab 2" }]}
   >
@@ -57,6 +58,7 @@ const exampleWithAutoplay = (
 
 const exampleWithComplexContent = (
   <CarouselHero
+    enableAutoplay
     tabs={[{ label: "Product 1" }, { label: "Product 2" }]}
     interval={5000}
     swiperOptions={{ speed: 300 }}

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/Footer/styles/mixins.scss

@@ -25,7 +25,8 @@
     &:focus,
     &:active {
       text-decoration: underline;
-      text-underline-offset: convert.to-rem(4px);
+      text-underline-offset: convert.to-rem(2px);
+      text-decoration-thickness: auto;
     }
 
     &:focus-visible {

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

@@ -37,11 +37,17 @@
 
   .checkbox--toggle .checkbox + .checkbox-display {
     position: relative;
-    background: color.$black;
-    border-color: color.$black;
+    background: var(--color-fill-contrast);
+    border-color: var(--color-fill-contrast);
     background-image:
-      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23000'/%3E%3C/svg%3E"),
+      url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
       url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23fff'/%3E%3C/svg%3E");
+
+    .is-dark & {
+      background-image:
+        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M3 7L1 9l5 5L16 4l-2-2-8 8-3-3z' fill='%23fff'/%3E%3C/svg%3E"),
+        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M12 2L10 0L6 4L2 0L0 2L4 6L0 10L2 12L6 8L10 12L12 10L8 6L12 2Z' fill='%23000'/%3E%3C/svg%3E");
+    }
     background-position:
       5px center,
       right 7px center;
@@ -51,19 +57,20 @@
       content: "";
       pointer-events: none;
       position: absolute;
-      background: color.$white;
+      background: var(--color-fill-primary);
       top: 0;
       left: 0;
       width: 50%;
       height: 100%;
       transform: translateX(0);
       transition: transform 200ms ease-out;
+      border-radius: convert.to-rem(3px);
     }
   }
 
   .checkbox--toggle .checkbox:checked + .checkbox-display {
-    background-color: var(--color-surface-secondary);
-    border-color: var(--color-surface-secondary);
+    background-color: var(--color-surface-tertiary);
+    border-color: var(--color-surface-tertiary);
 
     &::after {
       transform: translateX(100%);

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,22 @@
       z-index: 1;
     }
 
+    &--invalid {
+      .input-stepper__button,
+      .input-stepper__number,
+      .input-stepper__button--minus:active:not(:disabled),
+      .input-stepper__button--plus:active:not(:disabled) {
+        border-color: var(--color-border-negative);
+      }
+
+      @media (hover: hover) and (pointer: fine) {
+        .input-stepper__button--minus:hover:not(:disabled),
+        .input-stepper__button--plus:hover:not(:disabled) {
+          border-color: var(--color-border-negative);
+        }
+      }
+    }
+
     &__button--minus:disabled,
     &__button--plus:disabled {
       &::before {
@@ -116,13 +131,15 @@
       }
     }
 
-    &__button--minus:hover:not(:disabled),
-    &__button--plus:hover:not(:disabled) {
-      background-color: var(--color-fill-contrast);
-      border-color: var(--color-fill-contrast);
+    @media (hover: hover) and (pointer: fine) {
+      &__button--minus:hover:not(:disabled),
+      &__button--plus:hover:not(:disabled) {
+        background-color: var(--color-fill-contrast);
+        border-color: var(--color-fill-contrast);
 
-      &::before {
-        background-color: var(--color-fill-primary);
+        &::before {
+          background-color: var(--color-fill-primary);
+        }
       }
     }
 

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/components/Link/styles/mixins.scss

@@ -4,7 +4,6 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
-  text-underline-offset: 0.1em;
   color: inherit;
   background: none;
   cursor: pointer;

package/src/components/Megamenu/Megamenu.tsx

@@ -414,9 +414,9 @@ export const Megamenu = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

package/src/components/Megamenu/MegamenuBlog.tsx

@@ -325,9 +325,9 @@ export const MegamenuBlog = ({
           aria-labelledby={ids.mobileMainTitleId}
           aria-hidden="true"
         >
-          <h2 id={ids.mobileMainTitleId} className="sr-only">
+          <span id={ids.mobileMainTitleId} className="sr-only">
             Hlavné menu
-          </h2>
+          </span>
           <button
             aria-label="Zatvoriť menu"
             className={CLASS_MOBILE_OVERLAY}

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

@@ -59,7 +59,7 @@
     font-size: inherit;
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
 
     &:hover,
     &:focus,
@@ -630,7 +630,8 @@
 @mixin mobile-account-logout {
   display: inline-block;
   text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-underline-offset: convert.to-rem(2px);
+  text-decoration-thickness: auto;
   margin-bottom: convert.to-rem(20px);
   font-weight: 400 !important;
 }
@@ -665,8 +666,15 @@
 }
 
 @mixin mobile-account-link {
-  text-decoration: underline;
-  text-underline-offset: convert.to-rem(4px);
+  text-decoration: none !important;
+
+  &:hover,
+  &:focus,
+  &:active {
+    text-decoration: underline !important;
+    text-underline-offset: convert.to-rem(2px);
+    text-decoration-thickness: auto;
+  }
 }
 
 @mixin container {
@@ -696,7 +704,7 @@
   a:focus {
     text-decoration: underline;
     text-underline-offset: convert.to-rem(2px);
-    text-decoration-thickness: 1px;
+    text-decoration-thickness: auto;
   }
 
   @include breakpoint.get("md", "down") {
@@ -709,19 +717,15 @@
 }
 
 @mixin text-large {
-  font-size: convert.to-rem(18px) !important;
+  font-size: convert.to-rem(28px) !important;
+  line-height: convert.to-rem(32px);
   font-weight: 700;
-  line-height: convert.to-rem(22px);
-
-  @include breakpoint.get("md", "down") {
-    font-size: convert.to-rem(24px) !important;
-    line-height: convert.to-rem(28px);
-  }
 }
 
 @mixin caption {
   @include generate.css-map(typographyConfig.$caption, "default");
   margin-top: 0;
+  margin-bottom: convert.to-rem(20px);
 }
 
 @mixin caption-large {
@@ -817,6 +821,10 @@
 @mixin accordion {
   @include accordion.base;
   margin-bottom: 0px !important;
+
+  a {
+    text-decoration: none !important;
+  }
 }
 
 @mixin accordion-item {

package/src/components/Preview/CodeExample.tsx

@@ -6,16 +6,78 @@ import unescape from "unescape-html";
 import { formatHTML } from "../../utils/formatCode";
 import { Button } from "../Button";
 import Code from "../Code/";
+import { getElementDisplayName } from "./getElementDisplayName";
 
 interface CodeExampleProps {
   codeJSXOptions?: Record<string, any>;
   codeTypes?: string[];
   children?: ReactNode;
+  htmlThemeClass?: string;
   jsxCode?: string; // Pre-generated JSX string (from server-side PreviewAuto)
   htmlCode?: ReactNode; // Code for HTML rendering
   [key: string]: any;
 }
 
+const addClassToOpeningTag = (tag: string, className: string): string => {
+  if (tag.includes(' class="')) {
+    return tag.replace(/ class="([^"]*)"/, (_, existingClassName) => {
+      const mergedClassName = [existingClassName, className]
+        .filter(Boolean)
+        .join(" ");
+      return ` class="${mergedClassName}"`;
+    });
+  }
+
+  return tag.replace(/^<([\w-]+)/, `<$1 class="${className}"`);
+};
+
+const applyThemeClassToMarkup = (
+  markup: string,
+  themeClass?: string,
+  wrapMultipleRoots = false,
+): string => {
+  if (!themeClass || !markup.trim()) {
+    return markup;
+  }
+
+  if (wrapMultipleRoots) {
+    return `<div class="${themeClass}">${markup}</div>`;
+  }
+
+  return markup.replace(/^<[^>]+>/, (openingTag) =>
+    addClassToOpeningTag(openingTag, themeClass),
+  );
+};
+
+const renderMarkupToHtml = (markup: ReactNode, themeClass?: string): string => {
+  if (!markup) {
+    return "";
+  }
+
+  if (typeof markup === "string") {
+    return markup;
+  }
+
+  if (Array.isArray(markup)) {
+    const renderedMarkup = markup
+      .map((markupItem) =>
+        renderToStaticMarkup(markupItem as React.ReactElement),
+      )
+      .join("");
+
+    return applyThemeClassToMarkup(
+      renderedMarkup,
+      themeClass,
+      markup.length > 1,
+    );
+  }
+
+  return applyThemeClassToMarkup(
+    renderToStaticMarkup(markup as React.ReactElement),
+    themeClass,
+  );
+};
+
 /**
  * Remove props that are undefined or null
  * Don't show React.Fragment in code example
@@ -68,25 +130,7 @@ const getJSXAsStringFromMarkup = (
     showDefaultProps: false,
     showFunctions: true,
     functionValue: (fn: any) => fn.name,
-    displayName: (ReactElement: any) => {
-      // Try to get display name from various sources
-      if (ReactElement.props && ReactElement.props.mdxType) {
-        return ReactElement.props.mdxType;
-      }
-      if (ReactElement.type && ReactElement.type.displayName) {
-        return ReactElement.type.displayName;
-      }
-      if (ReactElement.type && ReactElement.type.name) {
-        return ReactElement.type.name;
-      }
-      if (typeof ReactElement.type === "string") {
-        return ReactElement.type;
-      }
-      // Fallback to type name or 'Component'
-      return (
-        ReactElement.type?.displayName || ReactElement.type?.name || "Component"
-      );
-    },
+    displayName: getElementDisplayName,
     filterProps: ["mdxType", "originalType", ...filterProps],
     ...otherOptions,
   };
@@ -124,6 +168,7 @@ const CodeExample: React.FC<CodeExampleProps> = ({
   children,
   codeJSXOptions,
   codeTypes = ["html", "jsx"],
+  htmlThemeClass,
   jsxCode,
   htmlCode,
   ...other
@@ -184,18 +229,14 @@ const CodeExample: React.FC<CodeExampleProps> = ({
           typeof htmlCode === "string"
             ? unescape(htmlCode)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(htmlCode as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(htmlCode, htmlThemeClass)),
               );
       } else {
         codeToShow =
           typeof children === "string"
             ? unescape(children)
             : unescape(
-                formatHTML(
-                  renderToStaticMarkup(children as React.ReactElement),
-                ),
+                formatHTML(renderMarkupToHtml(children, htmlThemeClass)),
               );
       }
       break;