@orangesk/orange-design-system 2.0.0-beta.16 → 2.0.0-beta.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.16",
+  "version": "2.0.0-beta.17",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -14,14 +14,15 @@
   ],
   "main": "build/components/index.js",
   "scripts": {
-    "dev": "npm run build:scss-exports && next dev",
-    "build": "npm run build:scss-exports && next build && npm run sprite",
+    "dev": "npm run build:scss-exports && npm run build:search-index && next dev",
+    "build": "npm run build:scss-exports && npm run build:search-index && next build && npm run sprite",
     "build:bundle": "npm run build:scss-exports && npx rollup -c && npm run build:megamenu && npm run build:footer",
     "build:megamenu": "npm run build:scss-exports && npx rollup -c rollup.megamenu.config.mjs",
     "dev:megamenu": "npm run build:scss-exports && npx rollup -c rollup.megamenu.config.mjs --watch",
     "build:footer": "npm run build:scss-exports && npx rollup -c rollup.footer.config.mjs",
     "dev:footer": "npm run build:scss-exports && npx rollup -c rollup.footer.config.mjs --watch",
     "build:scss-exports": "node scripts/build-scss-exports.js",
+    "build:search-index": "node scripts/mdx-search-index.js",
     "start": "next start",
     "lint": "next lint",
     "test": "jest",
@@ -46,6 +47,7 @@
     "html-react-parser": "^5.2.7",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
+    "minisearch": "7.2.0",
     "next": "16.0.1",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
@@ -83,7 +85,7 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.9.2",
+    "@types/node": "^24.10.0",
     "@types/pretty": "^2.0.3",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
@@ -95,7 +97,7 @@
     "eslint-plugin-unused-imports": "^4.3.0",
     "fs-extra": "^11.3.2",
     "glob": "^11.0.3",
-    "html-validate": "10.2.1",
+    "html-validate": "10.3.0",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "30.2.0",
@@ -106,7 +108,7 @@
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-postcss": "^4.0.2",
-    "sass": "^1.93.2",
+    "sass": "^1.93.3",
     "svg-sprite": "^2.0.4",
     "typescript": "5.9.3"
   }

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

@@ -1,11 +1,12 @@
 /* Code component styles */
 .code {
-  font-feature-settings: 'calt' 1;
+  font-feature-settings: "calt" 1;
   text-rendering: optimizeLegibility;
 }
 
-.code[class*='language-'] {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
+.code[class*="language-"] {
+  font-family:
+    "Monaco", "Menlo", "Ubuntu Mono", "Consolas", "source-code-pro", monospace;
 }
 
 /* Inline code styles */
@@ -24,7 +25,7 @@
   &.inline {
     display: inline;
   }
-  
+
   &.block {
     display: block;
   }
@@ -55,4 +56,4 @@
   overflow: auto;
   margin: 0;
   margin-bottom: 1rem; /* mb-4 */
-} 
+}

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

@@ -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/FeatureAccordion/tests/FeatureAccordion.conformance.test.js

@@ -29,6 +29,7 @@ describe("FeatureAccordion conformance", () => {
       rules: {
         "attribute-boolean-style": "off",
         "prefer-native-element": "off",
+        "attribute-empty-style": "off",
       },
     });
   });

package/src/components/Forms/Field/tests/Autocomplete.Field.conformance.test.js

@@ -35,7 +35,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "prefer-native-element": "off",
-      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Checkbox.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/File.Field.conformance.test.js

@@ -37,6 +37,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Group.Field.conformance.test.js

@@ -37,6 +37,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Radio.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Rangeslider.Field.test.js

@@ -50,6 +50,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Select.Field.conformance.test.js

@@ -35,6 +35,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Text.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Forms/Field/tests/Textarea.Field.conformance.test.js

@@ -33,6 +33,7 @@ it("is valid html", () => {
     rules: {
       "no-inline-style": "off",
       "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
     },
   });
 });

package/src/components/Link/Link.tsx

@@ -18,7 +18,7 @@ export interface LinkProps {
   isUnderline?: boolean;
   /** whether the link should have normal font weight */
   isNormal?: boolean;
-  /** when true, adds the .link--no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
+  /** when true, adds the .no-accent modifier to disable orange accent color on hover (useful for dark backgrounds) */
   noAccent?: boolean;
 }
 
@@ -40,7 +40,7 @@ export const Link: React.FC<LinkProps & React.HTMLAttributes<HTMLElement>> = ({
       "is-light": colorScheme === "light",
       underline: isUnderline,
       normal: isNormal,
-      "link--no-accent": noAccent,
+      "no-accent": noAccent,
     },
     className,
   );

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

@@ -4,9 +4,9 @@
 @mixin base {
   font-weight: bold;
   text-decoration: underline;
+  text-underline-offset: 0.1em;
   color: inherit;
   background: none;
-  text-decoration: none;
   cursor: pointer;
 }
 

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

@@ -44,10 +44,3 @@
     @include mixins.icon-right;
   }
 }
-
-@layer utilities {
-  .link--no-accent:hover {
-    color: inherit !important;
-    text-decoration: underline;
-  }
-}

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

@@ -64,7 +64,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "attribute-boolean-style": "off", "valid-id": "off" },
+    rules: {
+      "attribute-boolean-style": "off",
+      "valid-id": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

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

@@ -34,7 +34,11 @@ const example = (
 it("is valid html", () => {
   const { container } = render(example);
   expect(container).toHTMLValidate({
-    rules: { "no-inline-style": "off", "attribute-boolean-style": "off" },
+    rules: {
+      "no-inline-style": "off",
+      "attribute-boolean-style": "off",
+      "attribute-empty-style": "off",
+    },
   });
 });
 

package/src/styles/base/globals.scss

@@ -1,42 +1,6 @@
 @use "../tokens/base";
 @use "../tokens/space";
-@use "../tokens/color";
-@use "../tokens/tag-colors";
-
-// Consider to add more conditions for light and dark themes
-:root,
-:host,
-:host(.is-light),
-.is-light,
-.bg-white,
-#root.is-light,
-#root-modals.is-light,
-#root-tooltips.is-light,
-#root-dropdowns.is-light {
-  @each $name, $value in color.$colors-light {
-    --color-#{$name}: #{$value};
-  }
-  @each $name, $value in tag-colors.$tag-colors-light {
-    --#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
-
-:host(.is-dark),
-.is-dark,
-.bg-black,
-#root.is-dark,
-#root-modals.is-dark,
-#root-tooltips.is-dark,
-#root-dropdowns.is-dark {
-  @each $name, $value in color.$colors-dark {
-    --color-#{$name}: #{$value};
-  }
-  @each $name, $value in tag-colors.$tag-colors-dark {
-    --#{$name}: #{$value};
-  }
-  color: var(--color-text-default);
-}
+@use "../tokens/color-vars";
 
 :root,
 :host {

package/src/styles/base/styleguide.scss

@@ -30,6 +30,7 @@ main {
 
 .code-wrapper {
   border: 1px solid var(--color-border-strong);
+  margin-bottom: 30px;
 
   pre {
     margin-bottom: 0 !important;

package/src/styles/export/color.js

@@ -12,12 +12,12 @@ export const exports = {
   "violet": "#a885d8",
   "yellow": "#ffd200",
   "gray-300": "#eeeeee",
-  "gray-400": "#ddd",
+  "gray-400": "#dddddd",
   "gray-500": "#dddddd",
   "gray-600": "#999",
   "gray-700": "#666666",
-  "gray-800": "#595959",
-  "gray-900": "#333",
+  "gray-800": "#666666",
+  "gray-900": "#333333",
   "success": "rgba(34, 135, 34, 0.0784313725)",
   "danger": "rgba(205, 60, 20, 0.0784313725)",
   "info": "rgba(65, 112, 216, 0.0784313725)",

package/src/styles/tokens/color-vars.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "./color";
+@use "./tag-colors";
+
+// Light theme CSS variables
+:root,
+:host,
+:host(.is-light),
+.is-light,
+.bg-white,
+#root.is-light,
+#root-modals.is-light,
+#root-tooltips.is-light,
+#root-dropdowns.is-light {
+  @each $name, $value in color.$colors-light {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-light {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}
+
+// Dark theme CSS variables
+:host(.is-dark),
+.is-dark,
+.bg-black,
+#root.is-dark,
+#root-modals.is-dark,
+#root-tooltips.is-dark,
+#root-dropdowns.is-dark {
+  @each $name, $value in color.$colors-dark {
+    --color-#{$name}: #{$value};
+  }
+  @each $name, $value in tag-colors.$tag-colors-dark {
+    --#{$name}: #{$value};
+  }
+  color: var(--color-text-default);
+}