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

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

@@ -1,113 +1,113 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import React from "react";
+import { render } from "@testing-library/react";
 
-import { Cover } from '../Cover';
+import { Cover } from "../Cover";
 
-const image = '/test-image.jpg';
+const image = "/test-image.jpg";
 const picture = {
-  default: '/test-picture.jpg',
-  md: '/test-picture-md.jpg',
-  xl: '/test-picture-xl.jpg',
+  default: "/test-picture.jpg",
+  md: "/test-picture-md.jpg",
+  xl: "/test-picture-xl.jpg",
 };
 
 // bgSrc prop is required
-describe('rendering Cover', () => {
-  describe('initial state', () => {
-    it('has default class cover', () => {
+describe("rendering Cover", () => {
+  describe("initial state", () => {
+    it("has default class cover", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover').length).toBe(1);
+      expect(container.getElementsByClassName("cover").length).toBe(1);
     });
-    it('has default class cover__image', () => {
+    it("has default class cover__image", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.getElementsByClassName('cover__image').length).toBe(1);
+      expect(container.getElementsByClassName("cover__image").length).toBe(1);
     });
   });
-  describe('passed props', () => {
-    it('passes other props', () => {
+  describe("passed props", () => {
+    it("passes other props", () => {
       const { getByTestId } = render(
-        <Cover data-testid="test" bgSrc={image} />
+        <Cover data-testid="test" bgSrc={image} />,
       );
-      expect(getByTestId('test')).toBeInTheDocument();
+      expect(getByTestId("test")).toBeInTheDocument();
     });
-    it('renders children', () => {
+    it("renders children", () => {
       const { getByText } = render(<Cover bgSrc={image}>test-text</Cover>);
-      expect(getByText('test-text')).toBeInTheDocument();
+      expect(getByText("test-text")).toBeInTheDocument();
     });
-    it('has additional class when className is set', () => {
+    it("has additional class when className is set", () => {
       const { container } = render(
-        <Cover bgSrc={image} className="test-class" />
+        <Cover bgSrc={image} className="test-class" />,
       );
-      expect(container.getElementsByClassName('cover').length).toBe(1);
-      expect(container.getElementsByClassName('test-class').length).toBe(1);
+      expect(container.getElementsByClassName("cover").length).toBe(1);
+      expect(container.getElementsByClassName("test-class").length).toBe(1);
     });
-    it('has class cover__content when children are set', () => {
+    it("has class cover__content when children are set", () => {
       const { container } = render(<Cover bgSrc={image}>test</Cover>);
-      expect(container.getElementsByClassName('cover__content').length).toBe(1);
+      expect(container.getElementsByClassName("cover__content").length).toBe(1);
     });
-    it('has additional class when contentClass and children are set', () => {
+    it("has additional class when contentClass and children are set", () => {
       const { container } = render(
         <Cover bgSrc={image} contentClass="test-content-class">
           test
-        </Cover>
+        </Cover>,
       );
       expect(
-        container.getElementsByClassName('test-content-class').length
+        container.getElementsByClassName("test-content-class").length,
       ).toBe(1);
     });
-    ['small', 'medium', 'large'].map(size => {
+    ["small", "medium", "large", "xlarge"].map((size) => {
       it(`has cover--${size} class when size is set to ${size}`, () => {
         const { container } = render(<Cover bgSrc={image} size={size} />);
         expect(container.getElementsByClassName(`cover--${size}`).length).toBe(
-          1
+          1,
         );
       });
     });
-    ['top', 'bottom'].map(position => {
+    ["top", "bottom"].map((position) => {
       it(`has cover__image--${position} class when bgPosition is set to ${position}`, () => {
         const { container } = render(
-          <Cover bgSrc={image} bgPosition={position} />
+          <Cover bgSrc={image} bgPosition={position} />,
         );
         expect(
-          container.getElementsByClassName(`cover__image--${position}`).length
+          container.getElementsByClassName(`cover__image--${position}`).length,
         ).toBe(1);
       });
     });
-    it('doesnt have cover__image--center class when bgPosition is set to center', () => {
+    it("doesnt have cover__image--center class when bgPosition is set to center", () => {
       const { container } = render(<Cover bgSrc={image} bgPosition="center" />);
       expect(
-        container.getElementsByClassName('cover__image--center').length
+        container.getElementsByClassName("cover__image--center").length,
       ).toBe(0);
     });
-    it('renders img element, not picture, when bgSrc is set to string', () => {
+    it("renders img element, not picture, when bgSrc is set to string", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('picture').length).toBe(0);
+      expect(container.querySelectorAll("img").length).toBe(1);
+      expect(container.querySelectorAll("picture").length).toBe(0);
     });
-    it('img element has src set to bgSrc when bgSrc is string', () => {
+    it("img element has src set to bgSrc when bgSrc is string", () => {
       const { container } = render(<Cover bgSrc={image} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        '/test-image.jpg'
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        "/test-image.jpg",
       );
     });
-    it('renders picture element with source and img elements when bgSrc is set to object with multiple properties', () => {
+    it("renders picture element with source and img elements when bgSrc is set to object with multiple properties", () => {
       const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelectorAll('picture').length).toBe(1);
-      expect(container.querySelectorAll('img').length).toBe(1);
-      expect(container.querySelectorAll('source').length > 0).toBeTruthy();
+      expect(container.querySelectorAll("picture").length).toBe(1);
+      expect(container.querySelectorAll("img").length).toBe(1);
+      expect(container.querySelectorAll("source").length > 0).toBeTruthy();
     });
-    it('img element has src set to bgSrc.default when bgSrc is object', () => {
+    it("img element has src set to bgSrc.default when bgSrc is object", () => {
       const { container } = render(<Cover bgSrc={picture} />);
-      expect(container.querySelector('img').getAttribute('src')).toBe(
-        picture.default
+      expect(container.querySelector("img").getAttribute("src")).toBe(
+        picture.default,
       );
     });
     Object.keys(picture)
-      .filter(el => el !== 'default')
-      .map(key => {
-        it('srcSet of source element has correct value from bgSrc object', () => {
+      .filter((el) => el !== "default")
+      .map((key) => {
+        it("srcSet of source element has correct value from bgSrc object", () => {
           const { container } = render(<Cover bgSrc={picture} />);
           const correctSource = container.querySelector(
-            `source[srcset="${picture[key]}"]`
+            `source[srcset="${picture[key]}"]`,
           );
           expect(correctSource).toBeInTheDocument();
         });

package/src/components/Divider/Divider.tsx

@@ -5,36 +5,22 @@ import { Icon } from "../Icon";
 
 export interface DividerProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
-  /** Custom background color */
-  color?: "black" | "white";
   /** Custom content inside divider */
   content?: ReactNode;
   /** Icon which will be rendered inside divider */
   icon?: string;
-  /** Divider line has width of 1px */
-  thinLine?: boolean;
 }
 
 const CLASS_ROOT = "divider";
 
 const Divider: React.FC<DividerProps> = ({
   className,
-  color,
   icon,
   content,
-  thinLine,
   ...other
 }) => {
-  const classes = cx(
-    CLASS_ROOT,
-    {
-      [`${CLASS_ROOT}--${color}`]: color,
-    },
-    className,
-  );
-  const lineClass = cx(`${CLASS_ROOT}__line`, {
-    [`${CLASS_ROOT}__line--thin`]: thinLine,
-  });
+  const classes = cx(CLASS_ROOT, className);
+  const lineClass = `${CLASS_ROOT}__line`;
   const contentClass = `${CLASS_ROOT}__content`;
 
   return (

package/src/components/Divider/styles/config.scss

@@ -1,26 +1,9 @@
-@use "../../../styles/tokens/color";
 @use "../../../styles/tokens/space";
 
 $base: (
   font-weight: bold,
 );
 
-$colors: (
-  "default": (
-    // TODO: Use color tokens instead of hardcoded values
-    content: color.$gray-700,
-    line: var(--color-border-subtle),
-  ),
-  "black": (
-    content: color.$black,
-    line: color.$black,
-  ),
-  "white": (
-    content: color.$white,
-    line: color.$white,
-  ),
-);
-
 $spacing: (
   default: space.get(),
   md: space.get("large"),

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

@@ -2,6 +2,7 @@
 @use "../../../styles/tools/generate";
 @use "../../../styles/tools/map";
 @use "../../../styles/tokens/breakpoint";
+@use "../../../styles/tokens/color";
 
 @mixin divider-base($base: config.$base) {
   display: flex;
@@ -14,7 +15,8 @@
 
   @each $breakpoint, $value in config.$spacing {
     @include breakpoint.get($breakpoint) {
-      padding: $value;
+      padding-top: $value;
+      padding-bottom: $value;
     }
   }
 }
@@ -26,20 +28,16 @@
   justify-content: center;
 }
 
-@mixin divider-content-color($color, $config: config.$colors) {
-  color: map.map-deep-get($config, $color, "content");
+@mixin divider-content-color() {
+  color: var(--color-text-secondary);
 }
 
 @mixin divider-line() {
-  border-width: 0 0 2px;
+  border-width: 0 0 1px;
   border-style: solid;
   flex-grow: 1;
 }
 
-@mixin divider-line-thin() {
-  border-width: 0 0 1px;
-}
-
-@mixin divider-line-color($color, $config: config.$colors) {
-  border-color: map.map-deep-get($config, $color, "line");
+@mixin divider-line-color() {
+  border-color: var(--color-border-strong);
 }

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

@@ -8,26 +8,12 @@
 
     &__content {
       @include mixins.divider-content;
-
-      @each $color, $values in config.$colors {
-        #{generate.variant-name($color, ".divider--")} & {
-          @include mixins.divider-content-color($color);
-        }
-      }
+      @include mixins.divider-content-color();
     }
 
     &__line {
       @include mixins.divider-line;
-
-      &--thin {
-        @include mixins.divider-line-thin;
-      }
-
-      @each $color, $values in config.$colors {
-        #{generate.variant-name($color, ".divider--")} & {
-          @include mixins.divider-line-color($color);
-        }
-      }
+      @include mixins.divider-line-color();
     }
   }
 }

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

@@ -8,7 +8,7 @@ const example = (
     <Divider />
     <Divider content={<span>Hello node</span>} />
     <Divider content="Hello string" />
-    <Divider color="black" icon="add" />
+    <Divider icon="add" />
   </>
 );
 

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

@@ -22,23 +22,6 @@ describe("rendering Divider", () => {
       expect(getByTestId("test-id")).toHaveClass("divider");
       expect(getByTestId("test-id")).toHaveClass("test-class");
     });
-
-    it("child div has class divider__line--thin when thinLine is set to true", () => {
-      const { container } = render(<Divider thinLine={true} />);
-      expect(
-        container.getElementsByClassName("divider__line--thin").length,
-      ).toBe(1);
-    });
-
-    ["black", "white"].map((color) => {
-      it(`has divider--${color} class when color is set to ${color}`, () => {
-        const { getByTestId } = render(
-          <Divider color={color} data-testid="test-id" />,
-        );
-        expect(getByTestId("test-id")).toHaveClass("divider");
-        expect(getByTestId("test-id")).toHaveClass(`divider--${color}`);
-      });
-    });
     it("has class divider__content when content prop is set", () => {
       const { container } = render(<Divider content="test-content" />);
       expect(container.getElementsByClassName("divider__content").length).toBe(

package/src/components/DocumentationSidebar/DocumentationSidebar.tsx

@@ -4,8 +4,10 @@ import React from "react";
 import cx from "classnames";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import MiniSearch from "minisearch";
 import { Image } from "../Image";
 import { Icon } from "../Icon";
+import { TextInput } from "../Forms/TextInput";
 import packageJson from "../../../package.json";
 
 export interface DocumentationSidebarItem {
@@ -13,6 +15,7 @@ export interface DocumentationSidebarItem {
   href?: string;
   target?: React.HTMLAttributeAnchorTarget;
   items?: DocumentationSidebarItem[];
+  content?: string; // Optional: MDX content for searching
 }
 
 export interface DocumentationSidebarProps {
@@ -26,6 +29,90 @@ export interface DocumentationSidebarProps {
 
 const CLASS_ROOT = "documentation-sidebar";
 
+interface SearchResult {
+  id: string;
+  label: string;
+  href: string;
+}
+
+interface IndexedItem {
+  id: string;
+  label: string;
+  href: string;
+  content: string;
+}
+
+interface MiniSearchResult {
+  id: string;
+  label?: string;
+  href?: string;
+  score?: number;
+}
+
+// Flatten and index all menu items for search
+const flattenMenuItems = (
+  items: DocumentationSidebarItem[],
+  indexedItems: IndexedItem[] = [],
+): IndexedItem[] => {
+  items.forEach((item) => {
+    if (item.href) {
+      indexedItems.push({
+        id: item.href,
+        label: item.label,
+        href: item.href,
+        content: `${item.label} ${item.content || ""}`,
+      });
+    }
+    if (item.items && item.items.length > 0) {
+      flattenMenuItems(item.items, indexedItems);
+    }
+  });
+  return indexedItems;
+};
+
+// Initialize MiniSearch with indexed items
+const initializeSearch = (items: DocumentationSidebarItem[]) => {
+  const indexedItems = flattenMenuItems(items);
+  const miniSearch = new MiniSearch({
+    fields: ["label", "content"],
+    storeFields: ["id", "label", "href"],
+  });
+  miniSearch.addAll(indexedItems);
+  return miniSearch;
+};
+
+// Merge search index from MDX files with menu items
+const mergeSearchIndex = (
+  items: DocumentationSidebarItem[],
+  indexData: Array<{ href: string; content: string }>,
+): DocumentationSidebarItem[] => {
+  const contentMap = new Map(
+    indexData.map((item) => [item.href, item.content]),
+  );
+
+  const merge = (
+    items: DocumentationSidebarItem[],
+  ): DocumentationSidebarItem[] => {
+    return items.map((item) => {
+      const mergedItem = { ...item };
+
+      // Add content from search index if available and not already set
+      if (item.href && !item.content && contentMap.has(item.href)) {
+        mergedItem.content = contentMap.get(item.href);
+      }
+
+      // Recursively merge child items
+      if (item.items) {
+        mergedItem.items = merge(item.items);
+      }
+
+      return mergedItem;
+    });
+  };
+
+  return merge(items);
+};
+
 const SidebarItem: React.FC<{
   item: DocumentationSidebarItem;
   pathname: string;
@@ -142,12 +229,63 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
   const { items, className, onChangeHref, children } = props;
 
   const [isMenuOpenOnMobile, setIsMenuOpenOnMobile] = React.useState(false);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchResults, setSearchResults] = React.useState<SearchResult[]>([]);
+  const [miniSearch, setMiniSearch] = React.useState<MiniSearch | null>(null);
   const pathname = usePathname();
   const sidebarRef = React.useRef<HTMLElement>(null);
 
+  // Initialize search on mount
+  React.useEffect(() => {
+    const search = initializeSearch(items);
+    setMiniSearch(search);
+
+    // Load additional content from search index if available
+    const loadSearchIndex = async () => {
+      try {
+        const response = await fetch("/search-index.json");
+        if (!response.ok) throw new Error("Failed to fetch search index");
+        const indexData = await response.json();
+
+        // Re-initialize search with both menu items and indexed MDX content
+        const mergedItems = mergeSearchIndex(items, indexData);
+        const updatedSearch = initializeSearch(mergedItems);
+        setMiniSearch(updatedSearch);
+      } catch (err) {
+        // Search index not found or fetch failed, continue with menu items only
+        console.debug("Search index not available, using menu items only");
+      }
+    };
+
+    loadSearchIndex();
+  }, [items]);
+
+  // Handle search input
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    if (query.trim() && miniSearch) {
+      const results = miniSearch.search(query, {
+        boost: { label: 10 },
+        fuzzy: (term) => {
+          // Allow 1 character difference for short terms, more for longer terms
+          return term.length > 3 ? 0.2 : 0.3;
+        },
+        prefix: true, // Enable prefix matching (search "text" matches "text-secondary")
+        combineWith: "AND", // Require all terms to match
+      }) as unknown as SearchResult[];
+      setSearchResults(results.slice(0, 10)); // Limit to 10 results
+    } else {
+      setSearchResults([]);
+    }
+  };
+
   React.useEffect(() => {
     const handleEsc = (event: KeyboardEvent) => {
-      if (event.key === "Escape") setIsMenuOpenOnMobile(false);
+      if (event.key === "Escape") {
+        setIsMenuOpenOnMobile(false);
+        setSearchQuery("");
+        setSearchResults([]);
+      }
     };
     document.addEventListener("keydown", handleEsc);
     return () => document.removeEventListener("keydown", handleEsc);
@@ -171,6 +309,8 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
   const handleSelect = (href: string) => {
     onChangeHref?.(href);
     setIsMenuOpenOnMobile(false);
+    setSearchQuery("");
+    setSearchResults([]);
   };
 
   const classes = cx(CLASS_ROOT, className, {
@@ -197,7 +337,53 @@ export const DocumentationSidebar: React.FC<DocumentationSidebarProps> = (
       >
         <Image src="/logo.svg" alt="logo" />
 
-        <nav className={`${CLASS_ROOT}__nav`}>
+        <div className={`${CLASS_ROOT}__search-container`}>
+          <TextInput
+            id="search-documentation"
+            htmlType="search"
+            placeholder="Search documentation..."
+            value={searchQuery}
+            onChange={(e) => handleSearch(e.currentTarget.value)}
+            width="fullwidth"
+            aria-label="Search documentation"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              className={`${CLASS_ROOT}__search-clear`}
+              onClick={() => {
+                setSearchQuery("");
+                setSearchResults([]);
+              }}
+              aria-label="Clear search"
+            >
+              ✕
+            </button>
+          )}
+        </div>
+
+        {searchResults.length > 0 && (
+          <div className={`${CLASS_ROOT}__search-results`}>
+            <ul className={`${CLASS_ROOT}__search-list`}>
+              {searchResults.map((result) => (
+                <li key={result.id}>
+                  <Link
+                    href={result.href}
+                    className={`${CLASS_ROOT}__search-result-link`}
+                    onClick={() => handleSelect(result.href)}
+                  >
+                    {result.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        <nav
+          className={`${CLASS_ROOT}__nav`}
+          style={{ display: searchResults.length > 0 ? "none" : "block" }}
+        >
           <ul className={`${CLASS_ROOT}__list`}>
             {items.map((item, index) => (
               <SidebarItem

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

@@ -161,10 +161,10 @@
 
     &:hover {
       color: var(--color-text-default);
+    }
 
-      &--active {
-        color: var(--color-text-inverse);
-      }
+    &:hover &--active {
+      color: var(--color-text-inverse);
     }
 
     &--active {
@@ -201,6 +201,79 @@
     padding-left: convert.to-rem(15px);
   }
 
+  // Search styles
+  &__search-container {
+    position: relative;
+    margin-bottom: 16px;
+  }
+
+  &__search-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    border: none;
+    background: none;
+    color: #999;
+    cursor: pointer;
+    padding: 4px 8px;
+    font-size: 1rem;
+    line-height: 1;
+
+    &:hover {
+      color: var(--color-text-default);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: 2px;
+    }
+  }
+
+  &__search-results {
+    margin-bottom: 16px;
+    border: 1px solid var(--color-border-subtle);
+    border-radius: convert.to-rem(5px);
+    background: white;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  &__search-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      margin: 0;
+      padding: 0;
+      border-bottom: 1px solid var(--color-border-subtle);
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &__search-result-link {
+    display: block;
+    padding: 8px 12px;
+    color: #666;
+    text-decoration: none;
+    font-size: 0.9rem;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: var(--color-surface-subtle);
+      color: var(--color-text-default);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--color-border-accent);
+      outline-offset: -2px;
+    }
+  }
+
   // Mobile behavior - below lg breakpoint (992px)
   @include breakpoint.get(lg, downfrom) {
     grid-template-columns: 1fr;

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

@@ -66,7 +66,7 @@
   &[disabled],
   &[aria-disabled="true"] {
     pointer-events: none;
-    color: color.$gray-600;
+    color: var(--color-surface-moderate);
   }
 
   @each $prop, $value in sass-map.get($dropdown-menu-item, "default") {