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

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

@@ -0,0 +1,549 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { PromoBanner } from "../";
+
+describe("PromoBanner", () => {
+  describe("rendering", () => {
+    describe("initial state", () => {
+      it("renders with default props", () => {
+        render(<PromoBanner />);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toBeInTheDocument();
+      });
+
+      it("has default CSS class", () => {
+        render(<PromoBanner />);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toHaveClass("promo-banner");
+      });
+
+      it("renders as Grid component", () => {
+        const { container } = render(<PromoBanner />);
+        const grid = container.querySelector(".grid");
+        expect(grid).toBeInTheDocument();
+      });
+    });
+
+    describe("content", () => {
+      it("renders children content", () => {
+        render(
+          <PromoBanner>
+            <h2>Test Title</h2>
+            <p>Test description</p>
+          </PromoBanner>,
+        );
+
+        expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+          "Test Title",
+        );
+        expect(screen.getByText("Test description")).toBeInTheDocument();
+      });
+
+      it("renders text children", () => {
+        render(<PromoBanner>Simple text content</PromoBanner>);
+        expect(screen.getByText("Simple text content")).toBeInTheDocument();
+      });
+
+      it("renders complex JSX children", () => {
+        render(
+          <PromoBanner>
+            <div data-testid="complex-content">
+              <h1>Complex Title</h1>
+              <p>
+                Complex description with <strong>bold text</strong>
+              </p>
+              <button type="button">Action Button</button>
+            </div>
+          </PromoBanner>,
+        );
+
+        expect(screen.getByTestId("complex-content")).toBeInTheDocument();
+        expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+          "Complex Title",
+        );
+        expect(screen.getByRole("button")).toHaveTextContent("Action Button");
+      });
+
+      it("renders multiple children", () => {
+        render(
+          <PromoBanner>
+            <h2>Title</h2>
+            <p>Description</p>
+            <button type="button">Button</button>
+          </PromoBanner>,
+        );
+
+        expect(screen.getByRole("heading")).toBeInTheDocument();
+        expect(screen.getByText("Description")).toBeInTheDocument();
+        expect(screen.getByRole("button")).toBeInTheDocument();
+      });
+    });
+
+    describe("prop variations", () => {
+      describe("className", () => {
+        it("applies custom className", () => {
+          render(<PromoBanner className="custom-class" />);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("custom-class");
+        });
+
+        it("merges custom className with default", () => {
+          render(<PromoBanner className="custom-class" />);
+          const banner = document.querySelector(".promo-banner");
+          expect(banner).toHaveClass("promo-banner", "custom-class");
+        });
+      });
+
+      describe("itemClassName", () => {
+        it("applies custom itemClassName to content column", () => {
+          render(
+            <PromoBanner itemClassName="custom-item-class">
+              Content
+            </PromoBanner>,
+          );
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).toHaveClass("custom-item-class");
+        });
+
+        it("merges itemClassName with default item classes", () => {
+          render(
+            <PromoBanner itemClassName="custom-item-class">
+              Content
+            </PromoBanner>,
+          );
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).toHaveClass("promo-banner__item", "custom-item-class");
+        });
+      });
+    });
+
+    describe("variant", () => {
+      describe("default (horizontal) variant", () => {
+        it("uses correct column sizes without image", () => {
+          render(<PromoBanner>Content</PromoBanner>);
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+          expect(contentCol).toHaveClass("grid__col");
+        });
+
+        it("uses correct column sizes with image", () => {
+          render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          expect(contentCol).toHaveClass("grid__col");
+          expect(imageCol).toHaveClass("grid__col");
+        });
+
+        it("does not apply vertical-specific classes", () => {
+          render(<PromoBanner>Content</PromoBanner>);
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).not.toHaveClass(
+            "align-items-center",
+            "align-center",
+            "align-self-center",
+          );
+        });
+      });
+
+      describe("vertical variant", () => {
+        it("applies vertical variant column layout", () => {
+          render(<PromoBanner variant="vertical">Content</PromoBanner>);
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+          expect(contentCol).toHaveClass("grid__col");
+        });
+
+        it("applies vertical alignment classes", () => {
+          render(<PromoBanner variant="vertical">Content</PromoBanner>);
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).toHaveClass(
+            "align-items-center",
+            "align-center",
+            "align-self-center",
+          );
+        });
+
+        it("applies vertical image column layout", () => {
+          render(
+            <PromoBanner variant="vertical" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          expect(imageCol).toHaveClass("grid__col");
+        });
+
+        it("applies center alignment to image in vertical variant", () => {
+          render(
+            <PromoBanner variant="vertical" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const imageElement = document.querySelector(".promo-banner__image");
+          expect(imageElement).toHaveClass("align-center");
+        });
+      });
+
+      describe("reverse variant", () => {
+        it("applies reverse variant column layout", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          expect(contentCol).toHaveClass("grid__col");
+          expect(imageCol).toHaveClass("grid__col");
+        });
+
+        it("renders image before content in DOM order", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const grid = document.querySelector(".grid");
+          const children = Array.from(grid.children);
+          const imageCol = document
+            .querySelector(".promo-banner__image")
+            .closest(".grid__col");
+          const contentCol = document
+            .querySelector(".promo-banner__item")
+            .closest(".grid__col");
+
+          expect(children.indexOf(imageCol)).toBeLessThan(
+            children.indexOf(contentCol),
+          );
+        });
+
+        it("does not apply vertical-specific classes", () => {
+          render(
+            <PromoBanner variant="reverse" image="test.jpg">
+              Content
+            </PromoBanner>,
+          );
+          const item = document.querySelector(".promo-banner__item");
+          expect(item).not.toHaveClass(
+            "align-items-center",
+            "align-center",
+            "align-self-center",
+          );
+        });
+      });
+    });
+
+    describe("image", () => {
+      it("does not render image when not provided", () => {
+        render(<PromoBanner>Content only</PromoBanner>);
+        const image = document.querySelector(".promo-banner__image");
+        expect(image).not.toBeInTheDocument();
+      });
+
+      it("renders image when provided", () => {
+        render(
+          <PromoBanner image="https://example.com/test.jpg">
+            Content
+          </PromoBanner>,
+        );
+        const image = screen.getByRole("img");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", "https://example.com/test.jpg");
+      });
+
+      it("applies default alt text", () => {
+        render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+        const image = screen.getByRole("img");
+        expect(image).toHaveAttribute("alt", "Obrázok");
+      });
+
+      it("has default image classes", () => {
+        render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+        const image = screen.getByRole("img");
+        expect(image).toHaveClass("mb-none");
+      });
+
+      describe("imageClassName", () => {
+        it("applies custom imageClassName", () => {
+          render(
+            <PromoBanner image="test.jpg" imageClassName="custom-image-class">
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).toHaveClass("custom-image-class");
+        });
+
+        it("merges imageClassName with default image classes", () => {
+          render(
+            <PromoBanner image="test.jpg" imageClassName="custom-image-class">
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).toHaveClass(
+            "promo-banner__image",
+            "custom-image-class",
+          );
+        });
+      });
+
+      describe("alignImage", () => {
+        it("applies bottom alignment", () => {
+          render(
+            <PromoBanner image="test.jpg" alignImage="bottom">
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).toHaveClass("align-self-bottom");
+        });
+
+        it("applies top alignment", () => {
+          render(
+            <PromoBanner image="test.jpg" alignImage="top">
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).toHaveClass("align-self-top");
+        });
+
+        it("does not apply alignment class when not specified", () => {
+          render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).not.toHaveClass("align-self-bottom");
+          expect(imageContainer).not.toHaveClass("align-self-top");
+        });
+      });
+
+      describe("bleedImage", () => {
+        it("applies bleed class when bleedImage is true", () => {
+          render(
+            <PromoBanner image="test.jpg" bleedImage>
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).toHaveClass(
+            "promo-banner__image--bleed-right",
+          );
+        });
+
+        it("does not apply bleed class when bleedImage is false", () => {
+          render(
+            <PromoBanner image="test.jpg" bleedImage={false}>
+              Content
+            </PromoBanner>,
+          );
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).not.toHaveClass(
+            "promo-banner__image--bleed-right",
+          );
+        });
+
+        it("does not apply bleed class when bleedImage is not specified", () => {
+          render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+          const imageContainer = document.querySelector(".promo-banner__image");
+          expect(imageContainer).not.toHaveClass(
+            "promo-banner__image--bleed-right",
+          );
+        });
+      });
+
+      describe("imageFullWidth", () => {
+        it("applies fullwidth class when imageFullWidth is true", () => {
+          render(
+            <PromoBanner image="test.jpg" imageFullWidth>
+              Content
+            </PromoBanner>,
+          );
+          const image = screen.getByRole("img");
+          expect(image).toHaveClass("fullwidth");
+        });
+
+        it("does not apply fullwidth class when imageFullWidth is false", () => {
+          render(
+            <PromoBanner image="test.jpg" imageFullWidth={false}>
+              Content
+            </PromoBanner>,
+          );
+          const image = screen.getByRole("img");
+          expect(image).not.toHaveClass("fullwidth");
+        });
+
+        it("does not apply fullwidth class when imageFullWidth is not specified", () => {
+          render(<PromoBanner image="test.jpg">Content</PromoBanner>);
+          const image = screen.getByRole("img");
+          expect(image).not.toHaveClass("fullwidth");
+        });
+      });
+    });
+
+    describe("combined props", () => {
+      it("handles all image-related props together", () => {
+        render(
+          <PromoBanner
+            image="test.jpg"
+            alignImage="top"
+            bleedImage
+            imageFullWidth
+            imageClassName="custom-image"
+          >
+            Content
+          </PromoBanner>,
+        );
+
+        const imageContainer = document.querySelector(".promo-banner__image");
+        const image = screen.getByRole("img");
+
+        expect(imageContainer).toHaveClass(
+          "promo-banner__image",
+          "promo-banner__image--bleed-right",
+          "align-self-top",
+          "custom-image",
+        );
+        expect(image).toHaveClass("mb-none", "fullwidth");
+      });
+
+      it("handles all variant and styling props together", () => {
+        render(
+          <PromoBanner
+            variant="vertical"
+            className="custom-banner"
+            itemClassName="custom-item"
+            image="test.jpg"
+            imageClassName="custom-image"
+          >
+            Content
+          </PromoBanner>,
+        );
+
+        const banner = document.querySelector(".promo-banner");
+        const item = document.querySelector(".promo-banner__item");
+        const imageContainer = document.querySelector(".promo-banner__image");
+
+        expect(banner).toHaveClass("promo-banner", "custom-banner");
+        expect(item).toHaveClass(
+          "promo-banner__item",
+          "align-items-center",
+          "align-center",
+          "align-self-center",
+          "custom-item",
+        );
+        expect(imageContainer).toHaveClass(
+          "promo-banner__image",
+          "align-center",
+          "custom-image",
+        );
+      });
+    });
+
+    describe("edge cases", () => {
+      it("handles empty children", () => {
+        render(<PromoBanner>{""}</PromoBanner>);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toBeInTheDocument();
+      });
+
+      it("handles null children", () => {
+        render(<PromoBanner>{null}</PromoBanner>);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toBeInTheDocument();
+      });
+
+      it("handles undefined children", () => {
+        render(<PromoBanner>{undefined}</PromoBanner>);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toBeInTheDocument();
+      });
+
+      it("handles number children", () => {
+        render(<PromoBanner>{42}</PromoBanner>);
+        expect(screen.getByText("42")).toBeInTheDocument();
+      });
+
+      it("handles boolean children", () => {
+        render(<PromoBanner>{true}</PromoBanner>);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toBeInTheDocument();
+      });
+
+      it("handles array children", () => {
+        render(<PromoBanner>{["Item 1", "Item 2", "Item 3"]}</PromoBanner>);
+        expect(screen.getByText(/Item 1/)).toBeInTheDocument();
+        expect(screen.getByText(/Item 2/)).toBeInTheDocument();
+        expect(screen.getByText(/Item 3/)).toBeInTheDocument();
+      });
+
+      it("handles empty image URL", () => {
+        render(<PromoBanner image="">Content</PromoBanner>);
+        // Empty image URL should not render an image element
+        expect(screen.queryByRole("img")).not.toBeInTheDocument();
+      });
+
+      it("handles invalid alignImage gracefully", () => {
+        render(
+          <PromoBanner image="test.jpg" alignImage="invalid">
+            Content
+          </PromoBanner>,
+        );
+        const imageContainer = document.querySelector(".promo-banner__image");
+        expect(imageContainer).toHaveClass("promo-banner__image");
+        // Invalid align values are passed through but shouldn't break the component
+        expect(imageContainer).toHaveClass("align-self-invalid");
+      });
+
+      it("handles invalid variant gracefully", () => {
+        render(<PromoBanner variant="invalid">Content</PromoBanner>);
+        const contentCol = document
+          .querySelector(".promo-banner__item")
+          .closest(".grid__col");
+        // Should use default horizontal behavior
+        expect(contentCol).toHaveClass("grid__col");
+        const item = document.querySelector(".promo-banner__item");
+        expect(item).not.toHaveClass(
+          "align-items-center",
+          "align-center",
+          "align-self-center",
+        );
+      });
+    });
+
+    describe("additional props", () => {
+      it("applies custom className to banner", () => {
+        render(<PromoBanner className="test-banner">Content</PromoBanner>);
+        const banner = document.querySelector(".promo-banner");
+        expect(banner).toHaveClass("promo-banner", "test-banner");
+      });
+
+      it("component structure is stable", () => {
+        const { container } = render(<PromoBanner>Content</PromoBanner>);
+        const banner = container.querySelector(".promo-banner");
+        const item = container.querySelector(".promo-banner__item");
+
+        expect(banner).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
+        expect(banner).toHaveClass("promo-banner");
+        expect(item).toHaveClass("promo-banner__item");
+      });
+    });
+  });
+});

package/src/components/PromotionCard/PromotionCard.tsx

@@ -1,26 +1,25 @@
-import React from 'react';
-import cx from 'classnames';
+import React from "react";
+import cx from "classnames";
 
-import { Card } from '../Card';
+import { Card, CardColor } from "../Card";
 
-import { CLASS_ROOT } from './constants';
+import { CLASS_ROOT } from "./constants";
 
 export interface PromotionCardProps {
-  /** Inverse colors */
-  colorScheme?: 'light' | 'dark';
   className?: string;
   children?: React.ReactNode;
+  color?: CardColor;
   [key: string]: any;
 }
 
-export const PromotionCard: React.FC<PromotionCardProps> = ({ 
-  colorScheme = 'light', 
-  className, 
-  children, 
-  ...other 
+export const PromotionCard: React.FC<PromotionCardProps> = ({
+  className,
+  children,
+  color = "background-primary",
+  ...other
 }) => {
   const classes = cx(CLASS_ROOT, className);
-  const color = colorScheme === 'dark' ? 'black' : 'white';
+
   return (
     <Card className={classes} color={color} {...other}>
       {children}
@@ -28,4 +27,4 @@ export const PromotionCard: React.FC<PromotionCardProps> = ({
   );
 };
 
-PromotionCard.displayName = 'PromotionCard';
+PromotionCard.displayName = "PromotionCard";

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

@@ -18,7 +18,7 @@
 
   @include breakpoint.get("md") {
     flex-direction: row !important;
-    margin: space.get("medium") 0;
+    margin: space.get("large") 0;
     justify-content: space-between;
   }
 }
@@ -82,6 +82,7 @@
   font-size: convert.to-rem(24px);
   line-height: convert.to-rem(math.round(24px * 1.1));
   max-width: convert.to-rem(580px);
+  font-weight: 700;
 
   @include breakpoint.get("md") {
     display: inline-block;