@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.1

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

@@ -0,0 +1,642 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { Section } from "../Section";
+
+/**
+ * Section Component Unit Tests
+ *
+ * These unit tests focus on testing individual functionality and behavior
+ * of the Section component in isolation. They cover:
+ *
+ * 🏗️ COMPONENT STRUCTURE
+ * - Default rendering behavior
+ * - CSS class application
+ * - HTML element rendering
+ * - Component initialization
+ * - Container wrapper structure
+ *
+ * 🎨 STYLING & CLASSES
+ * - Base CSS class application
+ * - Color-based class generation
+ * - Spacing variant classes
+ * - Custom className merging
+ * - Conditional class application
+ *
+ * 🔧 PROPS HANDLING
+ * - Individual prop testing
+ * - Prop combinations
+ * - Default prop values
+ * - Prop validation and fallbacks
+ * - Custom tag rendering
+ *
+ * 📦 CONTENT RENDERING
+ * - Children rendering through Container
+ * - Text content
+ * - JSX content
+ * - Empty content handling
+ * - Multiple children
+ *
+ * 🎯 SPECIFIC FUNCTIONALITY
+ * - Color prop behavior (white, gray, black, orange)
+ * - Spacing prop behavior (default, small, xsmall)
+ * - Tag prop behavior (div, section, article, etc.)
+ * - ClassName prop merging
+ * - Additional props spreading
+ * - Container integration
+ *
+ * ⚡ PERFORMANCE & OPTIMIZATION
+ * - Component re-rendering
+ * - Prop change handling
+ * - Memory usage patterns
+ * - Bundle size impact
+ *
+ * 🔍 DETAILED ASSERTIONS
+ * - Exact class presence/absence
+ * - Element count verification
+ * - Attribute validation
+ * - Content accuracy
+ * - DOM structure integrity
+ */
+
+describe("Section Component Unit Tests", () => {
+  describe("Component Structure & Initialization", () => {
+    it("renders with default structure and base class", () => {
+      const { getByTestId } = render(<Section data-testid="test-section" />);
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+      expect(section).toHaveClass("section");
+      expect(section.tagName.toLowerCase()).toBe("div");
+    });
+
+    it("renders with Container wrapper when children are provided", () => {
+      const { container } = render(
+        <Section data-testid="test-section">
+          <p>Test content</p>
+        </Section>,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      const containerElement = section.querySelector(".container");
+
+      expect(section).toBeInTheDocument();
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement).toHaveClass("container");
+      expect(containerElement).toContainElement(
+        screen.getByText("Test content"),
+      );
+    });
+
+    it("renders without Container wrapper when no children", () => {
+      const { container } = render(<Section data-testid="test-section" />);
+      const section = container.querySelector('[data-testid="test-section"]');
+      const containerElement = section.querySelector(".container");
+
+      expect(section.children.length).toBe(1);
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement).toHaveClass("container");
+      expect(containerElement.children.length).toBe(0);
+    });
+
+    it("maintains component structure with various props", () => {
+      const { getByTestId } = render(
+        <Section
+          data-testid="test-section"
+          color="gray"
+          spacing="small"
+          className="custom-class"
+        />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+      expect(section).toHaveClass("section");
+      expect(section.tagName.toLowerCase()).toBe("div");
+    });
+  });
+
+  describe("CSS Classes & Styling", () => {
+    it("applies base section class correctly", () => {
+      const { getByTestId } = render(<Section data-testid="test-section" />);
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+    });
+
+    it("merges custom className with base class", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" className="custom-class" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("custom-class");
+    });
+
+    it("handles multiple custom classes", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" className="class1 class2 class3" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("class1");
+      expect(section).toHaveClass("class2");
+      expect(section).toHaveClass("class3");
+    });
+
+    it("handles empty className gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" className="" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+    });
+  });
+
+  describe("Color Prop Behavior", () => {
+    it("applies no background class for white color (default)", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="white" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).not.toHaveClass("bg-white");
+    });
+
+    it("applies correct background class for gray color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="gray" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-gray");
+    });
+
+    it("applies correct background class for black color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="black" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-black");
+    });
+
+    it("applies correct background class for orange color", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="orange" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-orange");
+    });
+
+    it("handles all color variants correctly", () => {
+      const colors = ["white", "gray", "black", "orange"];
+
+      colors.forEach((color, index) => {
+        const { getByTestId } = render(
+          <Section data-testid={`test-section-${index}`} color={color} />,
+        );
+        const section = getByTestId(`test-section-${index}`);
+
+        expect(section).toHaveClass("section");
+
+        if (color === "white") {
+          expect(section).not.toHaveClass("bg-white");
+        } else {
+          expect(section).toHaveClass(`bg-${color}`);
+        }
+      });
+    });
+  });
+
+  describe("Spacing Prop Behavior", () => {
+    it("applies no spacing class when spacing is not provided", () => {
+      const { getByTestId } = render(<Section data-testid="test-section" />);
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).not.toHaveClass("section--default");
+      expect(section).not.toHaveClass("section--small");
+      expect(section).not.toHaveClass("section--xsmall");
+    });
+
+    it("applies correct spacing class for default spacing", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" spacing="default" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("section--default");
+    });
+
+    it("applies correct spacing class for small spacing", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" spacing="small" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("section--small");
+    });
+
+    it("applies correct spacing class for xsmall spacing", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" spacing="xsmall" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("section--xsmall");
+    });
+
+    it("handles all spacing variants correctly", () => {
+      const spacings = ["default", "small", "xsmall"];
+
+      spacings.forEach((spacing, index) => {
+        const { getByTestId } = render(
+          <Section data-testid={`test-section-${index}`} spacing={spacing} />,
+        );
+        const section = getByTestId(`test-section-${index}`);
+
+        expect(section).toHaveClass("section");
+        expect(section).toHaveClass(`section--${spacing}`);
+      });
+    });
+  });
+
+  describe("Tag Prop Behavior", () => {
+    it("renders as div by default", () => {
+      const { getByTestId } = render(<Section data-testid="test-section" />);
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("div");
+    });
+
+    it("renders as section when tag is section", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="section" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("section");
+    });
+
+    it("renders as article when tag is article", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="article" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("article");
+    });
+
+    it("renders as main when tag is main", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="main" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("main");
+    });
+
+    it("renders as aside when tag is aside", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="aside" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("aside");
+    });
+
+    it("renders as header when tag is header", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="header" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("header");
+    });
+
+    it("renders as footer when tag is footer", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="footer" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("footer");
+    });
+
+    it("handles all semantic HTML tags correctly", () => {
+      const tags = [
+        "div",
+        "section",
+        "article",
+        "main",
+        "aside",
+        "header",
+        "footer",
+      ];
+
+      tags.forEach((tag, index) => {
+        const { getByTestId } = render(
+          <Section data-testid={`test-section-${index}`} tag={tag} />,
+        );
+        const section = getByTestId(`test-section-${index}`);
+
+        expect(section.tagName.toLowerCase()).toBe(tag);
+        expect(section).toHaveClass("section");
+      });
+    });
+  });
+
+  describe("Content Rendering", () => {
+    it("renders text children correctly through Container", () => {
+      render(<Section data-testid="test-section">Simple text content</Section>);
+
+      expect(screen.getByText("Simple text content")).toBeInTheDocument();
+    });
+
+    it("renders JSX children correctly through Container", () => {
+      render(
+        <Section data-testid="test-section">
+          <h1>Title</h1>
+          <p>Paragraph content</p>
+        </Section>,
+      );
+
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(screen.getByText("Paragraph content")).toBeInTheDocument();
+    });
+
+    it("renders multiple children correctly through Container", () => {
+      render(
+        <Section data-testid="test-section">
+          <div>Child 1</div>
+          <div>Child 2</div>
+          <div>Child 3</div>
+        </Section>,
+      );
+
+      expect(screen.getByText("Child 1")).toBeInTheDocument();
+      expect(screen.getByText("Child 2")).toBeInTheDocument();
+      expect(screen.getByText("Child 3")).toBeInTheDocument();
+    });
+
+    it("renders complex nested JSX correctly through Container", () => {
+      render(
+        <Section data-testid="test-section">
+          <header>
+            <h1>Page Header</h1>
+            <nav>
+              <ul>
+                <li>
+                  <a href="#home">Home</a>
+                </li>
+                <li>
+                  <a href="#about">About</a>
+                </li>
+              </ul>
+            </nav>
+          </header>
+          <main>
+            <article>
+              <h2>Article Title</h2>
+              <p>
+                Article content with <strong>bold text</strong>.
+              </p>
+            </article>
+          </main>
+        </Section>,
+      );
+
+      expect(screen.getByText("Page Header")).toBeInTheDocument();
+      expect(screen.getByText("Home")).toBeInTheDocument();
+      expect(screen.getByText("About")).toBeInTheDocument();
+      expect(screen.getByText("Article Title")).toBeInTheDocument();
+      expect(screen.getByText(/Article content with/)).toBeInTheDocument();
+      expect(screen.getByText("bold text")).toBeInTheDocument();
+    });
+
+    it("handles empty children gracefully", () => {
+      const { getByTestId } = render(<Section data-testid="test-section" />);
+      const section = getByTestId("test-section");
+      const containerElement = section.querySelector(".container");
+
+      expect(section).toBeInTheDocument();
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement.children.length).toBe(0);
+    });
+
+    it("handles null children gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section">{null}</Section>,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+    });
+
+    it("handles undefined children gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section">{undefined}</Section>,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+    });
+
+    it("renders Container with proper class when children are provided", () => {
+      const { container } = render(
+        <Section data-testid="test-section">
+          <p>Test content</p>
+        </Section>,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      const containerElement = section.querySelector(".container");
+
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement).toHaveClass("container");
+      expect(containerElement).toContainElement(
+        screen.getByText("Test content"),
+      );
+    });
+  });
+
+  describe("Props Combinations", () => {
+    it("combines color and spacing props correctly", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="gray" spacing="small" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("section--small");
+    });
+
+    it("combines color, spacing, and custom tag correctly", () => {
+      const { getByTestId } = render(
+        <Section
+          data-testid="test-section"
+          color="black"
+          spacing="xsmall"
+          tag="article"
+        />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("article");
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-black");
+      expect(section).toHaveClass("section--xsmall");
+    });
+
+    it("combines all props correctly", () => {
+      const { getByTestId } = render(
+        <Section
+          data-testid="test-section"
+          color="orange"
+          spacing="default"
+          tag="main"
+          className="custom-class"
+        >
+          <h1>Content</h1>
+        </Section>,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section.tagName.toLowerCase()).toBe("main");
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-orange");
+      expect(section).toHaveClass("section--default");
+      expect(section).toHaveClass("custom-class");
+      expect(screen.getByText("Content")).toBeInTheDocument();
+    });
+  });
+
+  describe("Additional Props Spreading", () => {
+    it("passes through id attribute", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" id="section-id" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveAttribute("id", "section-id");
+    });
+
+    it("passes through role attribute", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" role="banner" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveAttribute("role", "banner");
+    });
+
+    it("passes through aria attributes", () => {
+      const { getByTestId } = render(
+        <Section
+          data-testid="test-section"
+          aria-label="Test section"
+          aria-describedby="description"
+        />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveAttribute("aria-label", "Test section");
+      expect(section).toHaveAttribute("aria-describedby", "description");
+    });
+
+    it("passes through data attributes", () => {
+      const { getByTestId } = render(
+        <Section
+          data-testid="test-section"
+          data-custom="value"
+          data-another="another-value"
+        />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveAttribute("data-custom", "value");
+      expect(section).toHaveAttribute("data-another", "another-value");
+    });
+
+    it("passes through event handlers", () => {
+      const handleClick = jest.fn();
+      const { getByTestId } = render(
+        <Section data-testid="test-section" onClick={handleClick} />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+      // Event handler is attached but not tested here as it's unit test
+    });
+  });
+
+  describe("Edge Cases & Error Handling", () => {
+    it("handles invalid color prop gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" color="invalid-color" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-invalid-color");
+    });
+
+    it("handles invalid spacing prop gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" spacing="invalid-spacing" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("section--invalid-spacing");
+    });
+
+    it("handles invalid tag prop gracefully", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section" tag="invalid-tag" />,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+      // Invalid tag should fallback to div or handle gracefully
+    });
+
+    it("handles boolean children", () => {
+      const { getByTestId } = render(
+        <Section data-testid="test-section">{true}</Section>,
+      );
+      const section = getByTestId("test-section");
+
+      expect(section).toBeInTheDocument();
+    });
+
+    it("handles number children", () => {
+      render(<Section data-testid="test-section">{42}</Section>);
+
+      expect(screen.getByText("42")).toBeInTheDocument();
+    });
+
+    it("handles array children", () => {
+      render(
+        <Section data-testid="test-section">
+          {["Item 1", "Item 2", "Item 3"]}
+        </Section>,
+      );
+
+      expect(screen.getByText(/Item 1/)).toBeInTheDocument();
+      expect(screen.getByText(/Item 2/)).toBeInTheDocument();
+      expect(screen.getByText(/Item 3/)).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Tabs/TODO.md

@@ -0,0 +1,2 @@
+- [x] Copy original Tabs
+- [ ] Style it according to ODS 2.0 Figma

package/src/components/Tabs/Tab.tsx

@@ -0,0 +1,55 @@
+import cx from "classnames";
+
+interface TabProps
+  extends React.HTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
+  /** Id of the tabpanel this tab controls. */
+  controls?: string;
+  href?: string;
+  /** Active state */
+  isActive?: boolean;
+  /** Disabled state. */
+  isDisabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const CLASS_TABLIST_ITEM = "tab-list__item";
+const CLASS_TABLIST_TAB = "tab-list__tab";
+
+const Tab: React.FC<TabProps> = ({
+  href,
+  children,
+  className,
+  controls,
+  isDisabled,
+  isActive,
+  ...other
+}) => {
+  const tabClasses = cx(CLASS_TABLIST_TAB, className);
+
+  const tabindex = isActive ? 0 : -1;
+
+  const Tag = href ? "a" : "button";
+
+  return (
+    <li className={CLASS_TABLIST_ITEM} role="presentation">
+      <Tag
+        type={href ? undefined : "button"}
+        role={href ? undefined : "tab"}
+        href={href}
+        className={tabClasses}
+        aria-selected={isActive}
+        aria-controls={controls || undefined}
+        tabIndex={tabindex}
+        aria-disabled={isDisabled}
+        {...other}
+      >
+        {children}
+      </Tag>
+    </li>
+  );
+};
+
+Tab.displayName = "Tab";
+
+export { Tab };