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

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/Card/Card.tsx

@@ -6,6 +6,7 @@ export const cardColors = [
   "black",
   "orange",
   "gray",
+  "gray-lighter",
   "blue",
   "green",
   "pink",

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) => {

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

@@ -8,9 +8,6 @@ Unit tests for the Link component:
 - Color Variants:
   - Applies correct class for each color variant (default, orange, black).
   - Combines color with inverse class when both are set.
-- Inverse Styling:
-  - Applies inverse class when isInverse is true.
-  - Does not apply inverse class when isInverse is false.
 - Props Forwarding:
   - Forwards additional HTML attributes (target, rel, aria-label, etc.).
   - Forwards event handlers (onClick, onMouseEnter, etc.).
@@ -222,13 +219,7 @@ describe("Link Component", () => {
 
     it("handles null and undefined props gracefully", () => {
       render(
-        <Link
-          href="/"
-          data-testid="link"
-          color={null}
-          isInverse={undefined}
-          className={null}
-        >
+        <Link href="/" data-testid="link" color={null} className={null}>
           Test
         </Link>,
       );

package/src/components/Megamenu/Megamenu.static.ts

@@ -287,8 +287,10 @@ export default class Megamenu {
     if (topElement) {
       if (window.scrollY > 15) {
         topElement.classList.add("is-hidden");
+        this.element.classList.add("top-hidden");
       } else {
         topElement.classList.remove("is-hidden");
+        this.element.classList.remove("top-hidden");
       }
     }
   }