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

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

@@ -0,0 +1,35 @@
+@use '../../../styles/tokens/breakpoint';
+@use '../../../styles/tools/generate';
+@use './mixins';
+@use './config';
+@use 'sass:map' as sassmap;
+@use 'sass:string';
+@use '../../../styles/tools/map';
+@use '../../../styles/tools/layout';
+
+.section {
+  $this: &;
+
+  @include mixins.spacing('default');
+  @include mixins.spacing-rules();
+
+  &--default {
+    @include mixins.spacing('default');
+  }
+
+  &--small {
+    @include mixins.spacing('small');
+  }
+
+  &--xsmall {
+    @include mixins.spacing('xsmall');
+  }
+
+  .container > & {
+    @include layout.reset-last-child-margin-bottom;
+  }
+
+  &__image-stuck-to-bottom {
+    @include mixins.image-stuck-to-bottom;
+  }
+}

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

@@ -0,0 +1,502 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import userEvent from "@testing-library/user-event";
+
+import { Section } from "../";
+
+/**
+ * Section Component Conformance Tests
+ *
+ * These tests verify the complete functionality of the Section component including:
+ *
+ * 🎯 HTML VALIDITY
+ * - HTML validity with various prop combinations
+ * - Semantic HTML tag correctness
+ * - Complex JSX structure validation
+ * - Container wrapper structure
+ *
+ * ♿ ACCESSIBILITY (A11y)
+ * - WCAG 2.1 compliance using jest-axe
+ * - Proper use of semantic HTML tags
+ * - ARIA attributes and their validity
+ * - Interactive elements (buttons, inputs, selects)
+ * - Focus management and keyboard navigation
+ * - Screen reader compatibility
+ *
+ * 🎨 FUNCTIONAL BEHAVIOR
+ * - Correct application of CSS classes (section, bg-*, section--*)
+ * - All colors: white (default), gray, black, orange
+ * - All spacing variants: default, small, xsmall
+ * - Multiple props combinations
+ * - Custom tag rendering (section, article, main, aside, header, footer)
+ * - Passing through additional props (id, role, aria-*)
+ * - Container integration and structure
+ *
+ * 📝 CONTENT RENDERING
+ * - Text children rendering through Container
+ * - Complex JSX children
+ * - Multiple children
+ * - Empty children
+ *
+ * ⚠️ EDGE CASES
+ * - Null, undefined, boolean children
+ * - Number and array children
+ * - Invalid props graceful handling
+ * - Boundary usage cases
+ *
+ * 🔗 INTEGRATION TESTS
+ * - Working with form elements
+ * - Interactive components
+ * - Event handling
+ * - Focus management
+ * - User interactions using userEvent
+ *
+ * 📊 TEST COVERAGE
+ * - All props: color, spacing, tag, className, children
+ * - All color and spacing variants
+ * - All supported HTML tags
+ * - Accessibility violations
+ * - HTML validation errors
+ * - User interaction scenarios
+ * - Container wrapper functionality
+ */
+
+describe("Section Conformance Tests", () => {
+  describe("HTML Validity", () => {
+    it("is valid HTML with default props", () => {
+      const { container } = render(<Section />);
+      expect(container).toHTMLValidate();
+    });
+
+    it("is valid HTML with all props", () => {
+      const { container } = render(
+        <Section
+          color="gray"
+          spacing="small"
+          tag="section"
+          className="test-class"
+          data-testid="test-section"
+        >
+          <h2>Test Content</h2>
+          <p>Test paragraph</p>
+        </Section>,
+      );
+      expect(container).toHTMLValidate();
+    });
+
+    it("is valid HTML with custom tag", () => {
+      const { container } = render(
+        <Section tag="article">
+          <h1>Article Title</h1>
+        </Section>,
+      );
+      expect(container).toHTMLValidate();
+    });
+
+    it("is valid HTML with Container wrapper", () => {
+      const { container } = render(
+        <Section>
+          <div>Content wrapped in Container</div>
+        </Section>,
+      );
+      expect(container).toHTMLValidate();
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("is accessible with default props", async () => {
+      const { container } = render(<Section />);
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with semantic HTML tag", async () => {
+      const { container } = render(
+        <Section tag="main">
+          <h1>Main Content</h1>
+        </Section>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with complex content", async () => {
+      const { container } = render(
+        <Section color="gray" spacing="small">
+          <header>
+            <h1>Page Title</h1>
+            <nav aria-label="Main navigation">
+              <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 <a href="#link">link</a>.
+              </p>
+            </article>
+          </main>
+        </Section>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with interactive elements", async () => {
+      const { container } = render(
+        <Section>
+          <button type="button">Click me</button>
+          <input type="text" aria-label="Search" />
+          <select aria-label="Choose option">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </Section>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with ARIA attributes", async () => {
+      const { container } = render(
+        <Section
+          tag="section"
+          aria-labelledby="section-title"
+          aria-describedby="section-description"
+        >
+          <h2 id="section-title">Section Title</h2>
+          <p id="section-description">Section description</p>
+        </Section>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+
+    it("is accessible with Container wrapper", async () => {
+      const { container } = render(
+        <Section>
+          <div role="main">
+            <h1>Main Content</h1>
+            <p>Content wrapped in Container</p>
+          </div>
+        </Section>,
+      );
+      expect(await axe(container)).toHaveNoViolations();
+    });
+  });
+
+  describe("Functional Behavior", () => {
+    it("renders with correct default classes", () => {
+      const { container } = render(<Section data-testid="test-section" />);
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("section");
+      expect(section).not.toHaveClass("bg-white");
+    });
+
+    it("applies color classes correctly", () => {
+      const colors = ["gray", "black", "orange"];
+      colors.forEach((color) => {
+        const { container } = render(
+          <Section color={color} data-testid="test-section" />,
+        );
+        const section = container.querySelector('[data-testid="test-section"]');
+        expect(section).toHaveClass(`bg-${color}`);
+      });
+    });
+
+    it("applies spacing classes correctly", () => {
+      const spacings = ["default", "small", "xsmall"];
+      spacings.forEach((spacing) => {
+        const { container } = render(
+          <Section spacing={spacing} data-testid="test-section" />,
+        );
+        const section = container.querySelector('[data-testid="test-section"]');
+        expect(section).toHaveClass(`section--${spacing}`);
+      });
+    });
+
+    it("combines multiple props correctly", () => {
+      const { container } = render(
+        <Section
+          color="gray"
+          spacing="small"
+          className="custom-class"
+          data-testid="test-section"
+        />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-gray");
+      expect(section).toHaveClass("section--small");
+      expect(section).toHaveClass("custom-class");
+    });
+
+    it("renders with custom tag", () => {
+      const tags = ["section", "article", "main", "aside", "header", "footer"];
+      tags.forEach((tag) => {
+        const { container } = render(
+          <Section tag={tag} data-testid="test-section" />,
+        );
+        const element = container.querySelector(`[data-testid="test-section"]`);
+        expect(element.tagName.toLowerCase()).toBe(tag);
+      });
+    });
+
+    it("passes through additional props", () => {
+      const { container } = render(
+        <Section
+          data-testid="test-section"
+          id="test-id"
+          role="banner"
+          aria-label="Test section"
+        />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveAttribute("id", "test-id");
+      expect(section).toHaveAttribute("role", "banner");
+      expect(section).toHaveAttribute("aria-label", "Test section");
+    });
+
+    it("renders 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(containerElement).toBeInTheDocument();
+      expect(containerElement).toHaveClass("container");
+      expect(containerElement).toContainElement(
+        screen.getByText("Test content"),
+      );
+    });
+
+    it("does not render 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);
+    });
+  });
+
+  describe("Content Rendering", () => {
+    it("renders text children through Container", () => {
+      render(<Section>Test content</Section>);
+      expect(screen.getByText("Test content")).toBeInTheDocument();
+    });
+
+    it("renders complex JSX children through Container", () => {
+      render(
+        <Section>
+          <h1>Title</h1>
+          <p>
+            Paragraph with <strong>bold text</strong>
+          </p>
+          <ul>
+            <li>Item 1</li>
+            <li>Item 2</li>
+          </ul>
+        </Section>,
+      );
+      expect(screen.getByText("Title")).toBeInTheDocument();
+      expect(screen.getByText("Paragraph with")).toBeInTheDocument();
+      expect(screen.getByText("bold text")).toBeInTheDocument();
+      expect(screen.getByText("Item 1")).toBeInTheDocument();
+      expect(screen.getByText("Item 2")).toBeInTheDocument();
+    });
+
+    it("renders multiple children through Container", () => {
+      render(
+        <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 empty children", () => {
+      const { container } = render(<Section />);
+      const section = container.querySelector(".section");
+      const containerElement = section.querySelector(".container");
+
+      expect(section).toBeInTheDocument();
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement.children.length).toBe(0);
+    });
+
+    it("renders Container with proper structure", () => {
+      const { container } = render(
+        <Section>
+          <h1>Test Title</h1>
+          <p>Test paragraph</p>
+        </Section>,
+      );
+      const section = container.querySelector(".section");
+      const containerElement = section.querySelector(".container");
+
+      expect(containerElement).toBeInTheDocument();
+      expect(containerElement).toHaveClass("container");
+      expect(containerElement).toContainElement(screen.getByText("Test Title"));
+      expect(containerElement).toContainElement(
+        screen.getByText("Test paragraph"),
+      );
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("handles null children", () => {
+      const { container } = render(<Section>{null}</Section>);
+      const section = container.querySelector(".section");
+      expect(section).toBeInTheDocument();
+    });
+
+    it("handles undefined children", () => {
+      const { container } = render(<Section>{undefined}</Section>);
+      const section = container.querySelector(".section");
+      expect(section).toBeInTheDocument();
+    });
+
+    it("handles boolean children", () => {
+      const { container } = render(<Section>{true}</Section>);
+      const section = container.querySelector(".section");
+      expect(section).toBeInTheDocument();
+    });
+
+    it("handles number children", () => {
+      render(<Section>{42}</Section>);
+      expect(screen.getByText("42")).toBeInTheDocument();
+    });
+
+    it("handles array children", () => {
+      render(<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();
+    });
+
+    it("handles invalid color prop gracefully", () => {
+      const { container } = render(
+        <Section color="invalid-color" data-testid="test-section" />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("bg-invalid-color");
+    });
+
+    it("handles invalid spacing prop gracefully", () => {
+      const { container } = render(
+        <Section spacing="invalid-spacing" data-testid="test-section" />,
+      );
+      const section = container.querySelector('[data-testid="test-section"]');
+      expect(section).toHaveClass("section");
+      expect(section).toHaveClass("section--invalid-spacing");
+    });
+  });
+
+  describe("Integration Tests", () => {
+    it("works with form elements", async () => {
+      const user = userEvent.setup();
+      render(
+        <Section>
+          <form>
+            <input type="text" data-testid="input" />
+            <button type="button" data-testid="button">
+              Click me
+            </button>
+          </form>
+        </Section>,
+      );
+
+      const input = screen.getByTestId("input");
+      const button = screen.getByTestId("button");
+
+      await user.type(input, "test value");
+      expect(input).toHaveValue("test value");
+
+      await user.click(button);
+      // Button click should work without form submission
+    });
+
+    it("works with interactive components", async () => {
+      const user = userEvent.setup();
+      const handleClick = jest.fn();
+
+      render(
+        <Section>
+          <button onClick={handleClick} data-testid="button">
+            Click me
+          </button>
+        </Section>,
+      );
+
+      const button = screen.getByTestId("button");
+      await user.click(button);
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("maintains focus management", async () => {
+      const user = userEvent.setup();
+      render(
+        <Section>
+          <button data-testid="button1">Button 1</button>
+          <button data-testid="button2">Button 2</button>
+        </Section>,
+      );
+
+      const button1 = screen.getByTestId("button1");
+      const button2 = screen.getByTestId("button2");
+
+      await user.tab();
+      expect(button1).toHaveFocus();
+
+      await user.tab();
+      expect(button2).toHaveFocus();
+    });
+
+    it("works with Container wrapper for complex interactions", async () => {
+      const user = userEvent.setup();
+      const handleSubmit = jest.fn((e) => {
+        e.preventDefault();
+      });
+
+      render(
+        <Section>
+          <form onSubmit={handleSubmit}>
+            <input type="text" data-testid="name-input" placeholder="Name" />
+            <input type="email" data-testid="email-input" placeholder="Email" />
+            <button type="submit" data-testid="submit-btn">
+              Submit
+            </button>
+          </form>
+        </Section>,
+      );
+
+      const nameInput = screen.getByTestId("name-input");
+      const emailInput = screen.getByTestId("email-input");
+      const submitBtn = screen.getByTestId("submit-btn");
+
+      await user.type(nameInput, "John Doe");
+      await user.type(emailInput, "john@example.com");
+      await user.click(submitBtn);
+
+      expect(nameInput).toHaveValue("John Doe");
+      expect(emailInput).toHaveValue("john@example.com");
+      expect(handleSubmit).toHaveBeenCalledTimes(1);
+    });
+  });
+});