@orangesk/orange-design-system 2.0.0-beta.7 → 2.0.0-beta.9

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

@@ -0,0 +1,163 @@
+import { render } from "@testing-library/react";
+
+import { AnchorNavigation } from "../AnchorNavigation";
+
+const basicItems = [
+  { label: "Key Features", href: "#features", isActive: true },
+  { label: "Pricing", href: "#pricing" },
+  { label: "Getting Started", href: "#getting-started" },
+  { label: "Contact", href: "#contact" },
+];
+
+const moreItems = [
+  { label: "Overview", href: "#overview", isActive: true },
+  { label: "Features", href: "#features" },
+  { label: "Documentation", href: "#docs" },
+  { label: "API Reference", href: "#api" },
+  { label: "Examples", href: "#examples" },
+  { label: "Support", href: "#support" },
+];
+
+describe("rendering AnchorNavigation", () => {
+  describe("initial state", () => {
+    it("has default class anchor-navigation", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation data-testid="test-id" items={basicItems} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
+    });
+
+    it("has data-anchor-navigation attribute", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation data-testid="test-id" items={basicItems} />,
+      );
+      expect(getByTestId("test-id")).toHaveAttribute("data-anchor-navigation");
+    });
+
+    it("renders container with anchor-navigation__content class", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      expect(
+        container.querySelector(".anchor-navigation__content"),
+      ).toBeInTheDocument();
+    });
+
+    it("renders grid with correct classes", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+      const grid = container.querySelector(".anchor-navigation__content-left");
+      expect(grid).toBeInTheDocument();
+      expect(grid).toHaveClass("list-inline");
+      expect(grid).toHaveClass("horizontal-scroll");
+      expect(grid).toHaveClass("mb-none");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders all navigation items", () => {
+      const { getByText } = render(<AnchorNavigation items={basicItems} />);
+
+      expect(getByText("Key Features")).toBeInTheDocument();
+      expect(getByText("Pricing")).toBeInTheDocument();
+      expect(getByText("Getting Started")).toBeInTheDocument();
+      expect(getByText("Contact")).toBeInTheDocument();
+    });
+
+    it("renders navigation items as links with correct href", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const featuresLink = container.querySelector('a[href="#features"]');
+      const pricingLink = container.querySelector('a[href="#pricing"]');
+
+      expect(featuresLink).toBeInTheDocument();
+      expect(featuresLink).toHaveTextContent("Key Features");
+      expect(pricingLink).toBeInTheDocument();
+      expect(pricingLink).toHaveTextContent("Pricing");
+    });
+
+    it("applies active class to items with isActive prop", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const activeLink = container.querySelector('a[href="#features"]');
+      const inactiveLink = container.querySelector('a[href="#pricing"]');
+
+      expect(activeLink).toHaveClass("is-active");
+      expect(inactiveLink).not.toHaveClass("is-active");
+    });
+
+    it("applies anchor-navigation__item class to all links", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const links = container.querySelectorAll(".anchor-navigation__item");
+      expect(links).toHaveLength(basicItems.length);
+    });
+
+    it("renders multiple items correctly", () => {
+      const { getByText } = render(<AnchorNavigation items={moreItems} />);
+
+      expect(getByText("Overview")).toBeInTheDocument();
+      expect(getByText("Features")).toBeInTheDocument();
+      expect(getByText("Documentation")).toBeInTheDocument();
+      expect(getByText("API Reference")).toBeInTheDocument();
+      expect(getByText("Examples")).toBeInTheDocument();
+      expect(getByText("Support")).toBeInTheDocument();
+    });
+
+    it("applies custom className", () => {
+      const { getByTestId } = render(
+        <AnchorNavigation
+          data-testid="test-id"
+          items={basicItems}
+          className="custom-class"
+        />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("anchor-navigation");
+      expect(getByTestId("test-id")).toHaveClass("custom-class");
+    });
+  });
+
+  describe("children content", () => {
+    it("renders children in content-right section when provided", () => {
+      const { container, getByText } = render(
+        <AnchorNavigation items={basicItems}>
+          <div>Additional Content</div>
+        </AnchorNavigation>,
+      );
+
+      const contentRight = container.querySelector(
+        ".anchor-navigation__content-right",
+      );
+      expect(contentRight).toBeInTheDocument();
+      expect(getByText("Additional Content")).toBeInTheDocument();
+    });
+
+    it("does not render content-right section when no children", () => {
+      const { container } = render(<AnchorNavigation items={basicItems} />);
+
+      const contentRight = container.querySelector(
+        ".anchor-navigation__content-right",
+      );
+      expect(contentRight).not.toBeInTheDocument();
+    });
+
+    it("renders complex children content", () => {
+      const { getByText, getByRole } = render(
+        <AnchorNavigation items={basicItems}>
+          <div className="pricing">
+            <div className="bold">2 €</div>
+            <div>No commitment</div>
+          </div>
+          <button>Get Started</button>
+        </AnchorNavigation>,
+      );
+
+      expect(getByText("2 €")).toBeInTheDocument();
+      expect(getByText("No commitment")).toBeInTheDocument();
+      expect(getByRole("button", { name: "Get Started" })).toBeInTheDocument();
+    });
+  });
+
+  describe("displayName", () => {
+    it("has correct displayName", () => {
+      expect(AnchorNavigation.displayName).toBe("AnchorNavigation");
+    });
+  });
+});

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

@@ -3,12 +3,6 @@
 
 @mixin layout-base {
   position: relative;
-
-  &:focus-within,
-  &:hover {
-    outline: 2px solid var(--color-border-accent);
-    outline-offset: 1px;
-  }
 }
 
 @mixin control {

package/src/components/Button/Button.tsx

@@ -16,6 +16,7 @@ interface CommonProps {
   type?: ButtonType;
   className?: string;
   children?: React.ReactNode;
+  preserveWidth?: boolean;
 }
 
 type AnchorProps = CommonProps &
@@ -62,6 +63,7 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--${type}`]: type,
       [`${CLASS_ROOT}--default`]: isDefault,
+      [`${CLASS_ROOT}--preserve-width`]: props.preserveWidth,
       "is-dark": colorScheme === "dark",
       "is-light": colorScheme === "light",
       "is-active": isActive,

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

@@ -153,3 +153,8 @@
     cursor: not-allowed;
   }
 }
+
+@mixin preserve-width {
+  width: initial !important;
+  min-width: initial !important;
+}

package/src/components/Button/styles/style.scss

@@ -43,4 +43,8 @@
   .btn--large .icon--large {
     @include mixins.large-button-large-icon-size-fix();
   }
+
+  .btn--preserve-width {
+    @include mixins.preserve-width;
+  }
 }

package/src/components/Card/Card.tsx

@@ -6,6 +6,7 @@ export const cardColors = [
   "black",
   "orange",
   "gray",
+  "gray-lighter",
   "blue",
   "green",
   "pink",
@@ -14,22 +15,25 @@ export const cardColors = [
   "accent1-blog",
   "accent2-blog",
   "accent",
+  "none",
 ] as const;
 export type CardColor = (typeof cardColors)[number];
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   /** Custom background color */
   color?: CardColor;
+  noBorder?: boolean;
 }
 
 export const CLASS_ROOT = "card";
 
 const Card = React.forwardRef<HTMLDivElement, CardProps>(
-  ({ className, color = "white", ...other }, ref) => {
+  ({ className, color = "white", noBorder, ...other }, ref) => {
     const classes = cx(
       CLASS_ROOT,
       {
         [`bg-${color}`]: color !== "white",
+        [`${CLASS_ROOT}--no-border`]: noBorder,
       },
       className,
     );

package/src/components/Card/styles/style.scss

@@ -35,5 +35,9 @@
     &__product-header--space-small &__product-content {
       @include mixins.card-product-header(space.get());
     }
+
+    &--no-border {
+      border: none;
+    }
   }
 }

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

@@ -26,6 +26,7 @@ import {
   SELECTOR_ACTIVE,
   CLASS_SLIDE_NEXT,
   CLASS_SLIDE_PREV,
+  CLASS_BLEED_RIGHT,
 } from "./constants";
 
 export const defaultConfig: SwiperOptions = {
@@ -124,6 +125,11 @@ export default class Carousel {
         slideChange: this.handleSlideChange,
       },
     });
+
+    // Check if this is a bleed-right carousel and adjust after initialization
+    if (this.element.classList.contains(CLASS_BLEED_RIGHT)) {
+      this.adjustConfigForBleedRight();
+    }
   }
 
   getElements() {
@@ -148,7 +154,7 @@ export default class Carousel {
         ...((this.config.pagination ?? {}) as object),
         el: paginationEl,
         clickable: true,
-        bulletClass: "carousel__pagination-item",
+        bulletClass: CLASS_DOT,
         bulletActiveClass: CLASS_ACTIVE,
       },
     };
@@ -172,6 +178,66 @@ export default class Carousel {
     };
   }
 
+  adjustConfigForBleedRight() {
+    // For bleed-right variant, calculate the exact bleed amount dynamically
+    // This allows the last slide to scroll back to align with container edge
+
+    // Wait for next frame to ensure container has final dimensions
+    requestAnimationFrame(() => {
+      // Find the container element
+      const container = this.element.closest(".container") as HTMLElement;
+      if (!container || !this.instance) return;
+
+      // Calculate the actual bleed amount with limits to match CSS
+      const containerWidth = container.offsetWidth;
+      const halfViewportWidth = window.innerWidth / 2;
+      const halfContainerWidth = containerWidth / 2;
+      let bleedAmount = halfViewportWidth - halfContainerWidth;
+
+      // On very large screens (above 2K), stop the bleeding effect entirely
+      if (window.innerWidth >= 2560) {
+        bleedAmount = 0;
+      }
+
+      // Only add offset if there's actual bleeding (positive value)
+      if (bleedAmount > 0) {
+        // Update the Swiper configuration
+        this.instance.params.slidesOffsetAfter = bleedAmount;
+        this.instance.update();
+      } else {
+        // Remove offset if no bleeding should occur
+        this.instance.params.slidesOffsetAfter = 0;
+        this.instance.update();
+      }
+
+      // Also listen for window resize to recalculate
+      const handleResize = () => {
+        if (this.instance && container) {
+          const newContainerWidth = container.offsetWidth;
+          const newHalfViewportWidth = window.innerWidth / 2;
+          const newHalfContainerWidth = newContainerWidth / 2;
+          let newBleedAmount = newHalfViewportWidth - newHalfContainerWidth;
+
+          // Apply same limits as above
+          if (window.innerWidth >= 2560) {
+            newBleedAmount = 0;
+          }
+
+          if (newBleedAmount > 0) {
+            this.instance.params.slidesOffsetAfter = newBleedAmount;
+          } else {
+            this.instance.params.slidesOffsetAfter = 0;
+          }
+          this.instance.update();
+        }
+      };
+
+      // Remove any existing resize listener to avoid duplicates
+      window.removeEventListener("resize", handleResize);
+      window.addEventListener("resize", handleResize);
+    });
+  }
+
   /**
    * Handles the slide change event on the carousel.
    * Updates the tooltip position for the active slide and hides tooltips for non-active slides.

package/src/components/Carousel/Carousel.tsx

@@ -27,6 +27,10 @@ interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
   colorScheme?: "light" | "dark";
   /** Carousel items */
   items: ReactNode[];
+  /** Always show scrollbar and hide dots */
+  showScrollbar?: boolean;
+  /** Make carousel bleed to the right edge of screen while keeping left aligned with container */
+  bleedRight?: boolean;
   className?: string;
 }
 
@@ -35,6 +39,8 @@ const Carousel: React.FC<CarouselProps> = ({
   swiperOptions,
   items,
   colorScheme,
+  showScrollbar = false,
+  bleedRight = false,
   ...other
 }) => {
   const [carouselRef] = useStatic(CarouselStatic);
@@ -46,21 +52,33 @@ const Carousel: React.FC<CarouselProps> = ({
   const classes = cx(CLASS_ROOT, className, {
     "is-dark": colorScheme === "dark",
     "is-light": colorScheme === "light",
+    [`${CLASS_ROOT}--scrollbar`]: showScrollbar,
+    [`${CLASS_ROOT}--bleed-right`]: bleedRight,
   });
 
   const elementClasses = {
     prev: cx(CLASS_PREV),
     next: cx(CLASS_NEXT),
-    dots: cx(CLASS_DOTS, "show-md"),
+    dots: cx(CLASS_DOTS, showScrollbar ? "hide" : "show-md"),
   };
 
+  // Only override pagination when showScrollbar is true
+  const customSwiperOptions = showScrollbar
+    ? {
+        pagination: {
+          enabled: false,
+        },
+        ...swiperOptions,
+      }
+    : swiperOptions;
+
   return (
     <div
       className={classes}
       ref={carouselRef}
       data-carousel
-      {...(swiperOptions
-        ? { "data-swiper-options": JSON.stringify(swiperOptions) }
+      {...(showScrollbar || swiperOptions
+        ? { "data-swiper-options": JSON.stringify(customSwiperOptions) }
         : {})}
       {...other}
     >
@@ -68,25 +86,29 @@ const Carousel: React.FC<CarouselProps> = ({
         <div className={CLASS_VIEWPORT}>
           <div className={CLASS_TRACK}>{carouselItems}</div>
         </div>
-        <button
-          type="button"
-          aria-label="Naspäť"
-          className={elementClasses.prev}
-        >
-          <Icon size="medium" name="chevron-left" />
-        </button>
-        <button
-          type="button"
-          aria-label="Ďalej"
-          className={elementClasses.next}
-        >
-          <Icon size="medium" name="chevron-right" />
-        </button>
+        {showScrollbar ? null : (
+          <>
+            <button
+              type="button"
+              aria-label="Naspäť"
+              className={elementClasses.prev}
+            >
+              <Icon size="medium" name="chevron-left" />
+            </button>
+            <button
+              type="button"
+              aria-label="Ďalej"
+              className={elementClasses.next}
+            >
+              <Icon size="medium" name="chevron-right" />
+            </button>
+          </>
+        )}
       </div>
 
-      <div role="tablist" className={elementClasses.dots} />
+      {!showScrollbar && <div role="tablist" className={elementClasses.dots} />}
 
-      <div className={cx(CLASS_SCROLLBAR, "hide-md")}>
+      <div className={cx(CLASS_SCROLLBAR, !showScrollbar && "hide-md")}>
         <div className={CLASS_SCROLLBAR_DRAG} />
       </div>
     </div>

package/src/components/Carousel/constants.ts

@@ -14,6 +14,8 @@ export const CLASS_SCROLLBAR = `${CLASS_ROOT}__scrollbar`;
 export const CLASS_SCROLLBAR_HORIZONTAL = `${CLASS_ROOT}__scrollbar-horizontal`;
 export const CLASS_SCROLLBAR_DRAG = `${CLASS_ROOT}__scrollbar-drag`;
 export const CLASS_ACTIVE = "is-active";
+export const CLASS_SCROLLBAR_VARIANT = `${CLASS_ROOT}--scrollbar`;
+export const CLASS_BLEED_RIGHT = `${CLASS_ROOT}--bleed-right`;
 
 export const SELECTOR_VIEWPORT = `.${CLASS_VIEWPORT}`;
 export const SELECTOR_TRACK = `.${CLASS_TRACK}`;

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

@@ -25,7 +25,6 @@ $breakout-buttons-breakpoints: (
 );
 
 $viewport-horizontal-spacing: (
-  "default": -#{space.get("small")},
   // button dimension + space - slide padding,
-  "md": convert.to-rem(50px),
+  "md": convert.to-rem(50px)
 );

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

@@ -43,6 +43,11 @@
     }
   }
 
+  .carousel--scrollbar & {
+    margin-left: 0;
+    margin-right: 0;
+  }
+
   @include breakpoint.get("sm", "down") {
     padding-bottom: math.div(config.$space, 2);
   }
@@ -88,15 +93,19 @@
       margin-right: -#{convert.to-rem(60px)};
     }
   }
+
+  &.carousel--bleed-right {
+    margin-left: 0;
+    margin-right: 0;
+  }
 }
 
 @mixin slide-base {
   display: flex;
   flex-direction: column;
   max-width: 100%;
-  // width: auto !important;
   flex: 0 0 auto;
-  padding: 0 math.div(config.$space, 2);
+  padding: 0 convert.to-rem(20px) 0 0;
   user-select: none;
 
   > * {
@@ -193,4 +202,28 @@
   opacity: 1;
   background-color: var(--color-fill-contrast);
   border-radius: 99px;
+  height: convert.to-rem(6px);
+}
+
+@mixin scrollbar-variant {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+@mixin bleed-right-variant {
+  .carousel__viewport {
+    // Extend the viewport to the right edge of the screen
+    width: calc(100% + 50vw - 50%);
+    margin-right: 0;
+
+    // Keep left margin for container alignment
+    @include breakpoint.get("md") {
+      margin-left: convert.to-rem(50px);
+    }
+
+    // On very large screens (above 2K), stop the bleeding effect entirely
+    @media (min-width: 2560px) {
+      width: 100%;
+    }
+  }
 }

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

@@ -5,6 +5,14 @@
   .carousel {
     @include mixins.base;
 
+    &--scrollbar {
+      @include mixins.scrollbar-variant;
+    }
+
+    &--bleed-right {
+      @include mixins.bleed-right-variant;
+    }
+
     .container > & {
       @include mixins.base-breakout-buttons;
     }

package/src/components/Icon/styles/style.scss

@@ -28,6 +28,17 @@
           display: block;
         }
       }
+
+      // In light theme, explicitly show light and hide dark
+      .is-light & {
+        &--light {
+          display: block;
+        }
+
+        &--dark {
+          display: none;
+        }
+      }
     }
 
     &--with-text-end {

package/src/components/Icon/tests/Pictogram.unit.test.js

@@ -117,4 +117,42 @@ describe("Pictogram component", () => {
       expect(getByTestId("test-pictogram")).toHaveClass("custom-class");
     });
   });
+
+  describe("theme switching", () => {
+    it("shows light version by default", () => {
+      const { container } = render(<Pictogram name="pictogram-skylink" />);
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+      // Note: CSS display logic is tested via CSS rules, not inline styles
+    });
+
+    it("renders correctly within is-light context", () => {
+      const { container } = render(
+        <div className="is-light">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+
+    it("renders correctly within is-dark context", () => {
+      const { container } = render(
+        <div className="is-dark">
+          <Pictogram name="pictogram-skylink" />
+        </div>,
+      );
+      const lightUse = container.querySelector(".icon__use--light");
+      const darkUse = container.querySelector(".icon__use--dark");
+
+      expect(lightUse).toBeInTheDocument();
+      expect(darkUse).toBeInTheDocument();
+    });
+  });
 });

package/src/components/Link/styles/style.scss

@@ -24,7 +24,7 @@
     @include mixins.base-inherit();
 
     &:hover {
-      color: var(--color-fill-tertiary);
+      color: var(--color-text-accent);
       text-decoration: underline;
     }
     &:focus {

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

@@ -125,21 +125,6 @@ describe("Link Conformance Tests", () => {
       expect(results).toHaveNoViolations();
     });
 
-    it("has no accessibility violations for inverse links", async () => {
-      const { container } = render(
-        <div>
-          <Link href="#" isInverse>
-            Inverse link
-          </Link>
-          <Link href="#" color="orange" isInverse>
-            Orange inverse link
-          </Link>
-        </div>,
-      );
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
     it("has no accessibility violations for links with custom attributes", async () => {
       const { container } = render(
         <div>
@@ -212,11 +197,11 @@ describe("Link Conformance Tests", () => {
   describe("Cross-browser Compatibility", () => {
     it("renders consistently across different prop combinations", () => {
       const testCases = [
-        { href: "/", color: "default", isInverse: false },
-        { href: "/", color: "orange", isInverse: true },
-        { href: "/", color: "black", isInverse: false },
-        { tag: "button", type: "button", color: "default", isInverse: false },
-        { tag: "button", type: "button", color: "orange", isInverse: true },
+        { href: "/", color: "default" },
+        { href: "/", color: "orange" },
+        { href: "/", color: "black" },
+        { tag: "button", type: "button", color: "default" },
+        { tag: "button", type: "button", color: "orange" },
       ];
 
       testCases.forEach((props, index) => {