Merge pull request #471 from Infineon/470-documentation-search-bar

Documentation: search bar

packages/components/src/components/search-bar/Usage.mdx

@@ -0,0 +1,32 @@
+import { Meta  } from '@storybook/blocks'
+
+import * as SearchBarStories from './search-bar.stories';
+import SearchBarInteracion from '../../../public-storybook/images/search-bar/search-bar-interaction.png';
+import SearchBarMobile from '../../../public-storybook/images/search-bar/search-bar-mobile.png';
+
+
+<Meta of={SearchBarStories} /> 
+
+# Search Bar
+The search bar component offers our users a focused and simple use of search.
+
+## Usage
+
+### When to use
+- If you need a global search function in your navbar.
+
+### When not to use
+- If you use want to use a search function inside a component, like a table. Use a basic search field instead.
+
+## Search Bar Trigger
+The bar is only displayed when the user has clicked/tapped a placeholder trigger. This can either be a search field, a search icon with a label or, if the viewport is getting smaller, simply a search icon. The bar is immediately displayed in its focus state, which includes the Cancel Link to cancel the search process and get back to the previous view. It is also possible to cancel the search process by clicking or tapping the dark overlay.
+<img src={SearchBarInteracion} alt="Search Bar Trigger" />
+
+## Mobile
+On mobile devices the keyboard should appear if the user hit a trigger, for example a search icon. While the keyboard is displayed, a dark overlay lies over the content.
+<img src={SearchBarMobile} alt="Search Bar Mobile" />
+
+
+*** 
+Check out the Figma component: **[Search Bar](https://www.figma.com/file/VxG1MQaNdzsjiW6P6WmVt9/Documentation-assets?type=design&node-id=19589-15068&mode=design&t=Ed99x3PylVFS5FVG-4)**
+***