From a77791927a87c8f972d052ff45cd8596dd945e79 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <98550729+Cata1989@users.noreply.github.com>
Date: Thu, 11 Jan 2024 13:10:14 +0200
Subject: [PATCH] docs(Search): add storybook examples for Search input (#766)

---
 .../_storybook/bq-search.input.stories.tsx    | 80 +++++++++++++++++++
 .../components/input/_storybook/bq-search.mdx | 36 +++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 packages/beeq/src/components/input/_storybook/bq-search.input.stories.tsx
 create mode 100644 packages/beeq/src/components/input/_storybook/bq-search.mdx

diff --git a/packages/beeq/src/components/input/_storybook/bq-search.input.stories.tsx b/packages/beeq/src/components/input/_storybook/bq-search.input.stories.tsx
new file mode 100644
index 000000000..b4f598b04
--- /dev/null
+++ b/packages/beeq/src/components/input/_storybook/bq-search.input.stories.tsx
@@ -0,0 +1,80 @@
+import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, nothing } from 'lit-html';
+
+import { default as metaInput } from './bq-input.stories';
+import mdxSearch from './bq-search.mdx';
+
+const meta: Meta = {
+  ...metaInput,
+  title: 'Components/Search',
+  parameters: {
+    docs: {
+      page: mdxSearch,
+    },
+  },
+  args: {
+    ...metaInput.args,
+    placeholder: 'Search...',
+    prefix: true,
+    type: 'search',
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+const Template = (args: Args) => {
+  return html`
+    <bq-input
+      autocapitalize=${ifDefined(args.autocapitalize)}
+      autocomplete=${ifDefined(args.autocomplete)}
+      autocorrect=${ifDefined(args.autocorrect)}
+      ?autofocus=${args.autofocus}
+      clear-button-label=${args['clear-button-label']}
+      debounce-time=${args['debounce-time']}
+      ?disable-clear=${args['disable-clear']}
+      ?disabled=${args.disabled}
+      form=${ifDefined(args.form)}
+      iputmode=${args.inputmode}
+      max=${ifDefined(args.max)}
+      maxlength=${ifDefined(args.maxlength)}
+      min=${ifDefined(args.min)}
+      minlength=${ifDefined(args.minlength)}
+      name=${ifDefined(args.name)}
+      pattern=${ifDefined(args.pattern)}
+      placeholder=${args.placeholder}
+      ?readonly=${args.readonly}
+      ?required=${args.required}
+      step=${ifDefined(args.step)}
+      type=${ifDefined(args.type)}
+      validation-status=${args['validation-status']}
+      value=${ifDefined(args.value)}
+      @bqBlur=${args.bqBlur}
+      @bqChange=${args.bqChange}
+      @bqClear=${args.bqClear}
+      @bqFocus=${args.bqFocus}
+      @bqInput=${args.bqInput}
+    >
+      ${args.prefix ? html`<bq-icon name="magnifying-glass" slot="prefix"></bq-icon>` : nothing}
+    </bq-input>
+  `;
+};
+
+export const Default: Story = {
+  render: Template,
+};
+
+export const Value: Story = {
+  render: Template,
+  args: {
+    value: 'Value to search',
+  },
+};
+
+export const Disabled: Story = {
+  render: Template,
+  args: {
+    disabled: true,
+  },
+};
diff --git a/packages/beeq/src/components/input/_storybook/bq-search.mdx b/packages/beeq/src/components/input/_storybook/bq-search.mdx
new file mode 100644
index 000000000..301d1f4f7
--- /dev/null
+++ b/packages/beeq/src/components/input/_storybook/bq-search.mdx
@@ -0,0 +1,36 @@
+import { ArgTypes, Title, Subtitle } from '@storybook/addon-docs';
+
+<div className="bq-doc__wrapper" data-theme="light">
+  <div className="bq-doc__container" >
+    <Title>Search</Title>
+
+    The Search component is a crucial element in user interfaces that facilitates quick and efficient information retrieval.
+    It enables users to enter keywords or phrases, filtering through vast amounts of data to locate specific content or relevant results.
+
+    <Subtitle>Usage</Subtitle>
+
+    - Do use the Search component prominently and easily accessible, ensuring it aligns with the user's search intent.
+    - Do provide a clear and concise label for the Search input field, indicating the type of data users should enter.
+    - Do provide autocomplete functionality to assist users in narrowing down their search terms and enhancing accuracy.
+    - Do consider progressive disclosure, gradually revealing more search options or filters as the user refines their search criteria.
+    - Do utilize search prediction algorithms to suggest relevant search terms based on user input, saving time and effort.
+    - Do provide real-time search to provide immediate feedback as users type, demonstrating the search engine's efficiency.
+    - Do visually highlight matching search terms within the retrieved results, improving readability and highlighting relevant content.
+    - Do allow users to sort search results based on various criteria, such as relevance, date, or popularity, enhancing the user experience.
+
+    <Subtitle>👍 When to use</Subtitle>
+
+    The Search component should be used when you need to search user input, such as:
+
+    - Content Indexing: Implement the Search component in applications with vast amounts of content to facilitate quick and efficient navigation.
+    - Product Search: Provide a Search feature in eCommerce platforms to help users locate specific products or categories.
+    - Knowledge Base Retrieval: Incorporate Search into knowledge bases to enable users to quickly find relevant information and documentation.
+    - Support Ticket Resolution: Integrate Search in support systems to assist users in finding answers to frequently asked questions (FAQs) and resolving common issues.
+    - Customizable Search: Allow users to customize their search experience by defining filters, sorting options, and advanced search parameters.
+    - Accessibility Considerations: Ensure the Search component is accessible to users with disabilities, incorporating appropriate labels, alternative text, and screen reader compatibility.
+
+    <Title>Properties</Title>
+
+    <ArgTypes of="bq-input" />
+  </div>
+</div>