@orangesk/orange-design-system 2.0.0-beta.2 → 2.0.0-beta.21

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

@@ -0,0 +1,67 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { BodyBanner } from "../";
+
+const example = (
+  <>
+    <BodyBanner size="small" buttonText="Learn More">
+      <h3>Small Banner Example</h3>
+      <p>This is a small banner with image and call-to-action button.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="large"
+      buttonText="Get Started"
+      imageUrl="https://picsum.photos/seed/test/640/380"
+    >
+      <h3>Large Banner Example</h3>
+      <p>This is a large banner with two-column layout.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="small"
+      color="background-accent"
+      buttonText="Discover"
+      imageUrl="https://picsum.photos/seed/test2/640/380"
+    >
+      <h3>Accent Background</h3>
+      <p>Brand accent background banner.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="small"
+      color="surface-subtle"
+      buttonText="Explore"
+      imageUrl="https://picsum.photos/seed/test3/640/380"
+    >
+      <h3>Subtle Surface</h3>
+      <p>Gentle background color banner.</p>
+    </BodyBanner>
+
+    <BodyBanner size="small" buttonText="Learn More">
+      <h3>Text-Only Banner</h3>
+      <p>Banner without image focusing on text content.</p>
+    </BodyBanner>
+
+    <BodyBanner
+      size="large"
+      color="background-primary"
+      buttonText="Start Now"
+      imageUrl="https://picsum.photos/seed/test4/640/380"
+    >
+      <h3>Primary Background</h3>
+      <p>Clean white background banner.</p>
+    </BodyBanner>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate();
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

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

@@ -0,0 +1,194 @@
+import { render } from "@testing-library/react";
+
+import { BodyBanner } from "../";
+
+describe("rendering BodyBanner", () => {
+  describe("initial state", () => {
+    it("has default className body-banner", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).toBeInTheDocument();
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+    });
+  });
+
+  describe("sizes", () => {
+    it("doesn't have body-banner--small class when size is small (default)", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).not.toHaveClass(
+        "body-banner--small",
+      );
+    });
+
+    it("has body-banner--large class when size is large", () => {
+      const { container } = render(<BodyBanner size="large" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner--large",
+      );
+    });
+  });
+
+  describe("colors", () => {
+    it("doesn't have color class when color is background-primary (default)", () => {
+      const { container } = render(<BodyBanner color="background-primary" />);
+      expect(container.querySelector(".body-banner")).not.toHaveClass(
+        "background-primary",
+      );
+    });
+
+    it("has background-primary class by default (when no color specified)", () => {
+      const { container } = render(<BodyBanner />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+    });
+
+    it("has background-accent class when color is background-accent", () => {
+      const { container } = render(<BodyBanner color="background-accent" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "background-accent",
+      );
+    });
+
+    it("has surface-subtle class when color is surface-subtle", () => {
+      const { container } = render(<BodyBanner color="surface-subtle" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "surface-subtle",
+      );
+    });
+
+    it("supports all available colors", () => {
+      const colors = [
+        "background-primary",
+        "background-accent",
+        "surface-subtle",
+      ];
+
+      colors.forEach((color) => {
+        const { container } = render(<BodyBanner color={color} />);
+
+        if (color !== "background-primary") {
+          expect(container.querySelector(".body-banner")).toHaveClass(color);
+        }
+      });
+    });
+  });
+
+  describe("children and button", () => {
+    it("renders children content", () => {
+      const { getByText } = render(
+        <BodyBanner>
+          <h3>Test Title</h3>
+          <p>Test Description</p>
+        </BodyBanner>,
+      );
+      expect(getByText("Test Title")).toBeInTheDocument();
+      expect(getByText("Test Description")).toBeInTheDocument();
+    });
+
+    it("renders button text", () => {
+      const { getByText } = render(<BodyBanner buttonText="Learn More" />);
+      expect(getByText("Learn More")).toBeInTheDocument();
+    });
+
+    it("renders both children and button", () => {
+      const { getByText } = render(
+        <BodyBanner buttonText="Click Me">
+          <h3>Content</h3>
+        </BodyBanner>,
+      );
+      expect(getByText("Content")).toBeInTheDocument();
+      expect(getByText("Click Me")).toBeInTheDocument();
+    });
+  });
+
+  describe("image", () => {
+    it("renders image when imageUrl is provided", () => {
+      const { getByRole } = render(
+        <BodyBanner imageUrl="https://example.com/image.jpg" />,
+      );
+      const image = getByRole("img");
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute("src", "https://example.com/image.jpg");
+    });
+
+    it("doesn't render image when imageUrl is not provided", () => {
+      const { queryByRole } = render(<BodyBanner />);
+      const image = queryByRole("img");
+      expect(image).not.toBeInTheDocument();
+    });
+
+    it("renders image in separate column when size is large", () => {
+      const { container, getAllByRole } = render(
+        <BodyBanner size="large" imageUrl="https://example.com/image.jpg" />,
+      );
+      const images = getAllByRole("img");
+      expect(images.length).toBe(1);
+      const imageContainer = container.querySelector(".body-banner__image");
+      expect(imageContainer).toBeInTheDocument();
+    });
+
+    it("renders image in content when size is small", () => {
+      const { container, getByRole } = render(
+        <BodyBanner size="small" imageUrl="https://example.com/image.jpg" />,
+      );
+      const imageContainer = container.querySelector(".body-banner__image");
+      expect(imageContainer).toBeInTheDocument();
+      const image = getByRole("img");
+      expect(image).toBeInTheDocument();
+    });
+  });
+
+  describe("className prop", () => {
+    it("has additional class when className is set", () => {
+      const { container } = render(<BodyBanner className="custom-class" />);
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "body-banner",
+      );
+      expect(container.querySelector(".body-banner")).toHaveClass(
+        "custom-class",
+      );
+    });
+  });
+
+  describe("button className prop", () => {
+    it("applies buttonClassName to the button", () => {
+      const { getByRole } = render(
+        <BodyBanner buttonText="Click" buttonClassName="custom-button-class" />,
+      );
+      const button = getByRole("button");
+      expect(button).toHaveClass("custom-button-class");
+    });
+  });
+
+  describe("responsive layout", () => {
+    it("renders grid structure with proper content column", () => {
+      const { container } = render(
+        <BodyBanner size="small">
+          <h3>Test</h3>
+        </BodyBanner>,
+      );
+      const gridCol = container.querySelector(".body-banner__content");
+      expect(gridCol).toBeInTheDocument();
+    });
+
+    it("has button container", () => {
+      const { container } = render(<BodyBanner buttonText="Click" />);
+      const buttonContainer = container.querySelector(".body-banner__button");
+      expect(buttonContainer).toBeInTheDocument();
+    });
+
+    it("has content-inner container", () => {
+      const { container } = render(
+        <BodyBanner>
+          <h3>Test</h3>
+        </BodyBanner>,
+      );
+      const contentInner = container.querySelector(
+        ".body-banner__content-inner",
+      );
+      expect(contentInner).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Breadcrumbs/BreadcrumbItem.tsx

@@ -26,22 +26,31 @@ const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
 }) => {
   const itemClasses = cx(ITEM_CLASS_ROOT, className);
 
-  // Ak je URL, všetky props idú na <a>, inak na <li>
+  // If current page, don't render as anchor even if URL is provided
+  if (isCurrent) {
+    return (
+      <li
+        className={itemClasses}
+        {...(isCurrent ? { "aria-current": "page" } : {})}
+        {...other}
+      >
+        {text}
+      </li>
+    );
+  }
+
+  // If URL provided and not current, render as anchor
   if (url) {
     return (
       <li className={itemClasses}>
-        <a
-          href={url}
-          className={LINK_CLASS_ROOT}
-          {...(isCurrent ? { "aria-current": "page" } : {})}
-          {...other}
-        >
+        <a href={url} className={LINK_CLASS_ROOT} {...other}>
           {text}
         </a>
       </li>
     );
   }
 
+  // No URL, no current status - just text
   return (
     <li className={itemClasses} {...other}>
       {text}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -12,8 +12,6 @@ interface BreadcrumbItemData {
 interface BreadcrumbsProps {
   /** Additional CSS classes */
   className?: string;
-  /** Use white breadcrumbs on dark background */
-  colorScheme?: "dark" | "light";
   /** Breadcrumb items */
   items: BreadcrumbItemData[];
   /** Navigation label */
@@ -28,18 +26,12 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
   className,
   label,
   items,
-  colorScheme,
   ...other
 }) => {
-  const classes = cx(CLASS_ROOT, className, {
-    "is-dark": colorScheme === "dark",
-    "is-light": colorScheme === "light",
-  });
+  const classes = cx(CLASS_ROOT, className);
 
-  // Nájdeme index posledného prvku s URL
-  const lastUrlIndex = [...items].reverse().findIndex((item) => !!item.url);
-  const lastAnchorIndex =
-    lastUrlIndex === -1 ? -1 : items.length - 1 - lastUrlIndex;
+  // Mark the last item as current
+  const lastIndex = items.length - 1;
 
   return (
     <nav aria-label={label} className={classes} {...other}>
@@ -48,7 +40,7 @@ const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
           <BreadcrumbItem
             {...item}
             key={item.text}
-            isCurrent={!!item.url && index === lastAnchorIndex}
+            isCurrent={index === lastIndex}
           />
         ))}
       </ol>

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

@@ -43,7 +43,7 @@
 
 @mixin item {
   display: inline-block;
-  color: color.$gray-700;
+  color: var(--color-text-secondary);
   margin-bottom: 0;
 
   &::before {
@@ -70,8 +70,6 @@
 }
 
 @mixin item-dark {
-  color: color.$gray-600;
-
   &::before {
     @include separator-white();
   }
@@ -89,5 +87,5 @@
 }
 
 @mixin link-current {
-  color: color.$gray-700;
+  color: var(--color-text-secondary);
 }

package/src/components/Breadcrumbs/tests/BreadcrumbItem.unit.test.js

@@ -85,13 +85,13 @@ describe("rendering BreadcrumbItem", () => {
       expect(anchor).toHaveAttribute("href", "/test-url");
     });
 
-    it("anchor element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
+    it("li element has aria-current attribute set to 'page' when isCurrent prop is passed", () => {
       const { container } = render(
         <BreadcrumbItem text="test" url="/test" isCurrent />,
       );
-      expect(container.querySelector("a").getAttribute("aria-current")).toBe(
-        "page",
-      );
+      const li = container.querySelector("li");
+      expect(li).toHaveAttribute("aria-current", "page");
+      expect(li.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("does not render anchor when isCurrent is true but no URL provided", () => {
@@ -192,12 +192,14 @@ describe("rendering BreadcrumbItem", () => {
       expect(li).toContainElement(anchor);
     });
 
-    it("aria-current is only applied when both URL and isCurrent are provided", () => {
+    it("aria-current is only applied when isCurrent is true", () => {
       const { container } = render(
         <BreadcrumbItem text="test" url="/test" isCurrent />,
       );
+      const li = container.querySelector("li");
       const anchor = container.querySelector("a");
-      expect(anchor).toHaveAttribute("aria-current", "page");
+      expect(li).toHaveAttribute("aria-current", "page");
+      expect(anchor).not.toBeInTheDocument();
     });
 
     it("aria-current is not applied when isCurrent is false", () => {
@@ -205,13 +207,17 @@ describe("rendering BreadcrumbItem", () => {
         <BreadcrumbItem text="test" url="/test" isCurrent={false} />,
       );
       const anchor = container.querySelector("a");
-      expect(anchor).not.toHaveAttribute("aria-current");
+      const li = container.querySelector("li");
+      expect(anchor).toBeInTheDocument();
+      expect(li).not.toHaveAttribute("aria-current");
     });
 
-    it("aria-current is not applied when no URL is provided", () => {
+    it("aria-current is applied to li when isCurrent is true and no URL is provided", () => {
       const { container } = render(<BreadcrumbItem text="test" isCurrent />);
       const anchor = container.querySelector("a");
+      const li = container.querySelector("li");
       expect(anchor).not.toBeInTheDocument();
+      expect(li).toHaveAttribute("aria-current", "page");
     });
   });
 

package/src/components/Breadcrumbs/tests/Breadcrumbs.integration.test.js

@@ -25,15 +25,12 @@ describe("Breadcrumbs Integration Tests", () => {
       const anchors = container.querySelectorAll("a");
 
       expect(listItems).toHaveLength(6);
-      expect(anchors).toHaveLength(5); // Last item has no URL
+      expect(anchors).toHaveLength(5); // Last item is not an anchor (current page)
 
-      // Last anchor should have aria-current
-      expect(anchors[anchors.length - 1]).toHaveAttribute(
-        "aria-current",
-        "page",
-      );
-      // Last item should be plain text
-      expect(listItems[listItems.length - 1].querySelector("a")).toBeNull();
+      // Last item should have aria-current and be plain text
+      const lastItem = listItems[listItems.length - 1];
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).toBeNull();
     });
 
     it("handles e-commerce navigation correctly", () => {
@@ -72,16 +69,11 @@ describe("Breadcrumbs Integration Tests", () => {
       ];
 
       const { container } = render(
-        <Breadcrumbs
-          items={multilingualNav}
-          label="Navigation"
-          colorScheme="dark"
-        />,
+        <Breadcrumbs items={multilingualNav} label="Navigation" />,
       );
 
       const nav = container.querySelector("nav");
       expect(nav).toHaveClass("osk-breadcrumbs");
-      expect(nav).toHaveClass("is-dark");
       expect(nav).toHaveAttribute("aria-label", "Navigation");
 
       const listItems = container.querySelectorAll("li");
@@ -105,6 +97,7 @@ describe("Breadcrumbs Integration Tests", () => {
 
       const nav = container.querySelector("nav");
       const ol = container.querySelector("ol");
+      const listItems = container.querySelectorAll("li");
       const anchors = container.querySelectorAll("a");
 
       // Check navigation structure
@@ -113,17 +106,16 @@ describe("Breadcrumbs Integration Tests", () => {
       expect(ol).toHaveClass("osk-breadcrumbs__container");
 
       // Check anchor accessibility
-      anchors.forEach((anchor, index) => {
+      anchors.forEach((anchor) => {
         expect(anchor).toHaveAttribute("href");
         expect(anchor).toHaveClass("osk-breadcrumbs__link");
-
-        // Last anchor should have aria-current
-        if (index === anchors.length - 1) {
-          expect(anchor).toHaveAttribute("aria-current", "page");
-        } else {
-          expect(anchor).not.toHaveAttribute("aria-current");
-        }
+        expect(anchor).not.toHaveAttribute("aria-current");
       });
+
+      // Last item should have aria-current on li, not anchor
+      const lastItem = listItems[listItems.length - 1];
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).toBeNull();
     });
 
     it("provides proper keyboard navigation support", () => {
@@ -145,21 +137,6 @@ describe("Breadcrumbs Integration Tests", () => {
   });
 
   describe("styling integration", () => {
-    it("applies dark mode styling correctly", () => {
-      const items = [
-        { url: "/home", text: "Domov" },
-        { text: "Aktuálna stránka" },
-      ];
-
-      const { container } = render(
-        <Breadcrumbs items={items} colorScheme="dark" />,
-      );
-
-      const nav = container.querySelector("nav");
-      expect(nav).toHaveClass("osk-breadcrumbs");
-      expect(nav).toHaveClass("is-dark");
-    });
-
     it("combines custom classes with default classes", () => {
       const items = [{ text: "Test" }];
 

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

@@ -73,16 +73,6 @@ describe("rendering Breadcrumbs", () => {
       );
     });
 
-    it('has class osk-breadcrumbs--dark when colorScheme="dark" is passed', () => {
-      const { container } = render(
-        <Breadcrumbs items={[]} colorScheme="dark" />,
-      );
-      expect(container.getElementsByClassName("osk-breadcrumbs").length).toBe(
-        1,
-      );
-      expect(container.getElementsByClassName("is-dark").length).toBe(1);
-    });
-
     it("combines multiple CSS classes correctly", () => {
       const { getByTestId } = render(
         <Breadcrumbs
@@ -104,12 +94,16 @@ describe("rendering Breadcrumbs", () => {
 
     itemsArr.map(({ url, text }, index) => {
       it(`renders BreadcrumbItem with text ${text} ${
-        url ? "inside anchor element with url " + url : ""
+        url && index !== itemsArr.length - 1
+          ? "inside anchor element with url " + url
+          : ""
       }`, () => {
         const { container } = render(<Breadcrumbs items={itemsArr} />);
         const listElements = container.querySelectorAll("li");
         expect(listElements[index].textContent).toBe(text);
-        if (url) {
+
+        // Only non-last items with URL should have anchors
+        if (url && index !== itemsArr.length - 1) {
           expect(listElements[index].children[0].getAttribute("href")).toBe(
             url,
           );
@@ -117,18 +111,18 @@ describe("rendering Breadcrumbs", () => {
       });
     });
 
-    it("if last item renders anchor element, this element has aria-current attribute set to 'page'", () => {
+    it("last item does not render as anchor element", () => {
       const items = [
         { url: "/test1", text: "test1-text" },
         { url: "/test2", text: "test2-text" },
         { url: "/test3", text: "test3-text" },
       ];
       const { container } = render(<Breadcrumbs items={items} />);
-      const anchors = container.querySelectorAll("a");
-      expect(anchors[anchors.length - 1]).toHaveAttribute(
-        "aria-current",
-        "page",
-      );
+      const listItems = container.querySelectorAll("li");
+      const lastItem = listItems[listItems.length - 1];
+
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("marks last item as current page even without URL", () => {
@@ -167,6 +161,7 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={complexItemsArr} />);
       const anchors = container.querySelectorAll("a");
 
+      // Only non-last items should have anchors (last item is current page, plain text)
       anchors.forEach((anchor) => {
         expect(anchor).toHaveClass("osk-breadcrumbs__link");
       });
@@ -187,7 +182,7 @@ describe("rendering Breadcrumbs", () => {
       expect(nav).toContainElement(ol);
     });
 
-    it('last item has aria-current="page" when it has URL', () => {
+    it('last item has aria-current="page" and is not an anchor', () => {
       const itemsWithLastUrl = [
         { url: "/home", text: "Domov" },
         { url: "/current", text: "Aktuálna stránka" },
@@ -196,9 +191,9 @@ describe("rendering Breadcrumbs", () => {
       const { container } = render(<Breadcrumbs items={itemsWithLastUrl} />);
       const listElements = container.querySelectorAll("li");
       const lastItem = listElements[listElements.length - 1];
-      const lastAnchor = lastItem.querySelector("a");
 
-      expect(lastAnchor).toHaveAttribute("aria-current", "page");
+      expect(lastItem).toHaveAttribute("aria-current", "page");
+      expect(lastItem.querySelector("a")).not.toBeInTheDocument();
     });
 
     it("last item without URL is still marked as current", () => {
@@ -229,8 +224,9 @@ describe("rendering Breadcrumbs", () => {
       const anchor = container.querySelector("a");
 
       expect(listItems).toHaveLength(1);
-      expect(anchor).toHaveAttribute("href", "/home");
-      expect(anchor).toHaveAttribute("aria-current", "page");
+      // Single item is the last (current) item, so no anchor
+      expect(anchor).not.toBeInTheDocument();
+      expect(listItems[0]).toHaveAttribute("aria-current", "page");
     });
 
     it("handles items with special characters in text", () => {

package/src/components/Button/Button.tsx

@@ -10,12 +10,12 @@ interface CommonProps {
   isActive?: boolean;
   isDefault?: boolean;
   isDisabled?: boolean;
-  colorScheme?: "dark" | "light";
   isSquare?: boolean;
   size?: ButtonSize;
   type?: ButtonType;
   className?: string;
   children?: React.ReactNode;
+  preserveWidth?: boolean;
 }
 
 type AnchorProps = CommonProps &
@@ -45,9 +45,7 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
     htmlType = "button",
     href,
     isActive,
-    isDefault,
     isDisabled,
-    colorScheme,
     size,
     isSquare,
     type,
@@ -61,9 +59,7 @@ const Button = React.forwardRef<any, ButtonProps>((props, ref) => {
       [`${CLASS_ROOT}--square`]: isSquare,
       [`${CLASS_ROOT}--${size}`]: size,
       [`${CLASS_ROOT}--${type}`]: type,
-      [`${CLASS_ROOT}--default`]: isDefault,
-      "is-dark": colorScheme === "dark",
-      "is-light": colorScheme === "light",
+      [`${CLASS_ROOT}--preserve-width`]: props.preserveWidth,
       "is-active": isActive,
     },
     className,