add Search subcomponents and example

Author: Lukas742

packages/main/src/webComponents/Search/Search.mdx

@@ -1,6 +1,11 @@
-import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
-import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import { Canvas, Description, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './Search.stories';
+import { SearchItem } from '../SearchItem/index.js';
+import { SearchItemGroup } from '../SearchItemGroup/index.js';
+import { SearchItemShowMore } from '../SearchItemShowMore/index.js';
+import { SearchMessageArea } from '../SearchMessageArea/index.js';
+import { SearchScope } from '../SearchScope/index.js';
 
 <Meta of={ComponentStories} />
 
@@ -35,7 +40,7 @@ const scopeData = [
   { name: 'Log work', scope: 'apps' },
   { name: 'Manage Products', scope: 'apps' },
   { name: 'Mobile Phones', scope: 'products' },
-  { name: 'Tablet', scope: 'products' }
+  { name: 'Tablet', scope: 'products' },
 ];
 
 function SearchComponent(props) {
@@ -50,7 +55,7 @@ function SearchComponent(props) {
       setFilterData(
         scopeData.filter((item) => {
           return item.scope === scope.text.toLowerCase();
-        })
+        }),
       );
     }
   };
@@ -67,4 +72,79 @@ function SearchComponent(props) {
 
 </details>
 
+### Search with `SearchShowMore` Item
+
+Search with Grouped Suggestions and Show More (N) Item
+
+<Canvas of={ComponentStories.ShowMoreItem} />
+
+<details>
+    <summary>Show static code</summary>
+
+```tsx
+const allItems = [
+  { text: 'Search Item 1', icon: historyIcon },
+  { text: 'Search Item 2', icon: searchIcon },
+  { text: 'Search Item 3', icon: historyIcon },
+  { text: 'Search Item 4', icon: historyIcon },
+  { text: 'Search Item 5', icon: searchIcon },
+  { text: 'Search Item 6', icon: globeIcon },
+];
+const visibleItems = allItems.slice(0, 3);
+const hiddenItems = allItems.slice(3);
+
+export function ShowMoreItem() {
+  const [showHiddenItems, setShowHiddenItems] = useState(false);
+
+  return (
+    <Search showClearIcon={true} placeholder="Placeholder">
+      <SearchItemGroup headerText="Group Header 1">
+        {visibleItems.map((item) => (
+          <SearchItem key={item.text} text={item.text} icon={item.icon} />
+        ))}
+        {!showHiddenItems && (
+          <SearchItemShowMore itemsToShowCount={hiddenItems.length} onClick={() => setShowHiddenItems(true)} />
+        )}
+        {showHiddenItems && hiddenItems.map((item) => <SearchItem key={item.text} text={item.text} icon={item.icon} />)}
+      </SearchItemGroup>
+
+      <SearchItemGroup headerText="Group Header 2">
+        <SearchItem text="Search Item 1" icon={historyIcon} />
+        <SearchItem text="Search Item 2" icon={historyIcon} />
+        <SearchItem text="Search Item 3" icon={globeIcon} />
+      </SearchItemGroup>
+    </Search>
+  );
+}
+```
+
+</details>
+
+## Subcomponents
+
+### SearchItem
+
+<Description of={SearchItem} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SearchItem} />
+
+### SearchItemGroup
+
+<Description of={SearchItemGroup} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SearchItemGroup} />
+
+### SearchItemShowMore
+
+<Description of={SearchItemShowMore} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SearchItemShowMore} />
+
+### SearchMessageArea
+
+<Description of={SearchMessageArea} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SearchMessageArea} />
+
+### SearchScope
+
+<Description of={SearchScope} />
+<ArgTypesWithNote metaOf={ComponentStories} of={SearchScope} />
+
 <Footer />

packages/main/src/webComponents/Search/Search.stories.tsx

@@ -1,6 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import globeIcon from '@ui5/webcomponents-icons/dist/globe.js';
+import historyIcon from '@ui5/webcomponents-icons/dist/history.js';
+import searchIcon from '@ui5/webcomponents-icons/dist/search.js';
 import { useState } from 'react';
 import { SearchItem } from '../SearchItem/index.js';
+import { SearchItemGroup } from '../SearchItemGroup/index.js';
+import { SearchItemShowMore } from '../SearchItemShowMore/index.js';
 import { SearchScope } from '../SearchScope/index.js';
 import { Search } from './index.js';
 import type { SearchPropTypes } from './index.js';
@@ -70,3 +75,51 @@ export const WithScopeAndItems: Story = {
     );
   },
 };
+
+const allItems = [
+  { text: 'Search Item 1', icon: historyIcon },
+  { text: 'Search Item 2', icon: searchIcon },
+  { text: 'Search Item 3', icon: historyIcon },
+  { text: 'Search Item 4', icon: historyIcon },
+  { text: 'Search Item 5', icon: searchIcon },
+  { text: 'Search Item 6', icon: globeIcon },
+];
+const visibleItems = allItems.slice(0, 3);
+const hiddenItems = allItems.slice(3);
+
+export const ShowMoreItem: Story = {
+  args: {
+    showClearIcon: true,
+    placeholder: 'Placeholder',
+  },
+  render(args) {
+    const [showHiddenItems, setShowHiddenItems] = useState(false);
+
+    return (
+      <Search {...args}>
+        <SearchItemGroup headerText="Group Header 1">
+          {visibleItems.map((item) => {
+            return <SearchItem key={item.text} text={item.text} icon={item.icon} />;
+          })}
+          {!showHiddenItems && (
+            <SearchItemShowMore
+              itemsToShowCount={hiddenItems.length}
+              onClick={() => {
+                setShowHiddenItems(true);
+              }}
+            />
+          )}
+          {showHiddenItems &&
+            hiddenItems.map((item) => {
+              return <SearchItem key={item.text} text={item.text} icon={item.icon} />;
+            })}
+        </SearchItemGroup>
+        <SearchItemGroup headerText="Group Header 2">
+          <SearchItem text="Search Item 1" icon={historyIcon} />
+          <SearchItem text="Search Item 2" icon={historyIcon} />
+          <SearchItem text="Search Item 3" icon={globeIcon} />
+        </SearchItemGroup>
+      </Search>
+    );
+  },
+};