Merge branch 'main' into pagination-compound

.storybook/preview.ts

@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/react';
 import THEME from './theme';
 
+import '../src/index.scss';
+
 const preview: Preview = {
   tags: ['autodocs'],
   parameters: {

package.json

@@ -31,8 +31,8 @@
     "storybook": "storybook dev -p 6006 --no-open",
     "storybook:build": "pnpm build && storybook build",
     "e2e:internal": "E2E=true pnpm storybook:build && playwright test",
-    "e2e:watch": "docker compose up --watch --exit-code-from playwright-e2e",
-    "e2e:update": "docker compose run -e UPDATE_SNAPSHOTS=--update-snapshots playwright-e2e",
+    "e2e:watch": "docker compose up --remove-orphans --watch --exit-code-from playwright-e2e",
+    "e2e:update": "docker compose run --remove-orphans -e UPDATE_SNAPSHOTS=--update-snapshots playwright-e2e",
     "e2e:report": "playwright show-report",
     "e2e": "docker compose up --remove-orphans --exit-code-from playwright-e2e"
   },
@@ -45,10 +45,12 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@radix-ui/react-toolbar": "^1.1.0",
-    "clsx": "^2.1.1"
+    "clsx": "^2.1.1",
+    "react-highlight-words": "^0.20.0"
   },
   "peerDependencies": {
     "@bloomreach/discovery-web-sdk": "^1.2.1",
@@ -83,6 +85,7 @@
     "@types/node": "^20.16.14",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
+    "@types/react-highlight-words": "^0.20.0",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.3",

src/components/search-box/search-box.properties.scss

@@ -0,0 +1,53 @@
+@property --lui-search-box-min-height {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 36px;
+}
+
+@property --lui-search-box-padding {
+  syntax: "*";
+  inherits: true;
+  initial-value: 6px 8px;
+}
+
+@property --lui-search-box-gap {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 8px;
+}
+
+@property --lui-search-box-border-radius {
+  syntax: "*";
+  inherits: true;
+  initial-value: 4px;
+}
+
+@property --lui-search-box-border-width {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 1px;
+}
+
+@property --lui-search-box-border-style {
+  syntax: "solid | dashed | dotted | double | groove | ridge | inset | outset";
+  inherits: true;
+  initial-value: solid;
+}
+
+@property --lui-search-box-border-color {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #bdcee3;
+}
+
+@property --lui-search-box-border-color-hover {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #8d9db9;
+}
+
+@property --lui-search-box-border-color-focus {
+  syntax: "<color>";
+  inherits: true;
+  initial-value: #00ace5;
+}

src/components/search-box/search-box.scss

@@ -1,3 +1,48 @@
+@use './search-box.properties.scss';
+
 .lui-search-box {
-  // component styles
+  display: flex;
+  min-height: var(--lui-search-box-min-height);
+  padding: var(--lui-search-box-padding);
+  align-items: center;
+  gap: var(--lui-search-box-gap);
+  align-self: stretch;
+  border-radius: var(--lui-search-box-border-radius);
+  border: var(--lui-search-box-border-width) var(--lui-search-box-border-style)
+    var(--lui-search-box-border-color);
+
+  &:hover {
+    border-color: var(--lui-search-box-border-color-hover);
+  }
+
+  &:focus-within {
+    border-color: var(--lui-search-box-border-color-focus);
+  }
+
+  &.lui-suggestions-open {
+    border-radius: var(--lui-search-box-border-radius) var(--lui-search-box-border-radius) 0 0;
+  }
+}
+
+.lui-search-box-input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+}
+
+.lui-search-box-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: #5e739c;
+
+  &:focus {
+    outline: none;
+    color: #000;
+  }
 }