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

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/Grid/Grid.tsx

@@ -9,7 +9,7 @@ export type GridRowGapSize =
   | "large"
   | "xlarge"
   | Record<string, "medium" | "large" | "xlarge">;
-export type GridColumnGapSize = "none";
+export type GridColumnGapSize = "none" | "small" | "default" | "large";
 
 export interface GridProps extends React.HTMLAttributes<HTMLElement> {
   vAlign?: GridVAlign;

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

@@ -1,10 +1,12 @@
-@use '../../../styles/tokens/space';
+@use "../../../styles/tokens/space";
 
 $grid-base: 12 !default;
 
-$grid-row-gap-sizes: ('medium', 'large', 'xlarge');
+$grid-row-gap-sizes: ("medium", "large", "xlarge");
 
 $column-gap: (
-  default: space.get('small'),
+  small: space.get("xsmall"),
+  default: space.get("small"),
+  large: space.get("medium"),
   none: 0,
 );

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

@@ -1,11 +1,11 @@
 @use "sass:map";
-@use 'sass:math';
+@use "sass:math";
 
-@use './../../../styles/tools/generate';
-@use './../../../styles/tools/layout';
-@use './../../../styles/tokens/breakpoint';
-@use './../../../styles/tokens/space';
-@use './config';
+@use "./../../../styles/tools/generate";
+@use "./../../../styles/tools/layout";
+@use "./../../../styles/tokens/breakpoint";
+@use "./../../../styles/tokens/space";
+@use "./config";
 
 @mixin grid-base() {
   display: flex;
@@ -16,18 +16,23 @@
 
   /* Fixes VoiceOver no announcing unordered lists */
   > li::before {
-    content: ' ';
+    content: " ";
     position: absolute;
     width: 0;
     height: 0;
   }
 }
 
-@mixin grid-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  margin-left: -$gap;
-  margin-right: -$gap;
+  @if ($size == "default") {
+    margin-left: -$gap;
+    margin-right: -$gap;
+  } @else {
+    margin-left: -$gap !important;
+    margin-right: -$gap !important;
+  }
 }
 
 @mixin grid-with-equal-height-content(
@@ -53,7 +58,7 @@
 }
 
 @mixin grid-row-gap(
-  $size: 'medium',
+  $size: "medium",
   $grid-col-selector: '[class*="grid__col"]'
 ) {
   margin-top: #{space.get($size) * -1};
@@ -70,11 +75,16 @@
   max-width: 100%;
 }
 
-@mixin grid-col-column-gap($size: 'default', $column-gap: config.$column-gap) {
+@mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
   $gap: map.get($column-gap, $size);
 
-  padding-left: $gap;
-  padding-right: $gap;
+  @if ($size == "default") {
+    padding-left: $gap;
+    padding-right: $gap;
+  } @else {
+    padding-left: $gap !important;
+    padding-right: $gap !important;
+  }
 }
 
 @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
@@ -100,25 +110,25 @@
 }
 
 @mixin column-classes() {
-  *[class*='grid__col'] {
+  *[class*="grid__col"] {
     @include grid-col-base();
   }
 
   @include breakpoint.each using ($breakpoint) {
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-shrink {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-shrink {
       @include column-shrink;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-fill {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-fill {
       @include column-fill;
     }
 
-    .grid__col-#{generate.variant-name($breakpoint, '-')}-auto {
+    .grid__col-#{generate.variant-name($breakpoint, "-")}-auto {
       @include column-auto;
     }
 
     @for $i from 1 through config.$grid-base {
-      .grid__col-#{generate.variant-name($breakpoint, '-')}-#{$i} {
+      .grid__col-#{generate.variant-name($breakpoint, "-")}-#{$i} {
         @include column-size($i);
       }
     }

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

@@ -62,6 +62,17 @@ describe("Grid", () => {
     });
   });
 
+  ["small", "large", "none"].forEach((columnGapSize) => {
+    it(`applies grid--column-gap-${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
+      const { getByTestId } = render(
+        <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
+      );
+      expect(getByTestId("test-id")).toHaveClass(
+        `grid--column-gap-${columnGapSize}`,
+      );
+    });
+  });
+
   it("merges additional className", () => {
     const { getByTestId } = render(
       <Grid data-testid="test-id" className="test-class" />,

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;
-  }
-}