import { ArgTypes, Stories, Title, Subtitle } from '@storybook/addon-docs';

<div className="bq-doc__wrapper" data-theme="light">
  <div className="bq-doc__container" >
    <Title>Dropdown</Title>

    The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen. They provide an efficient way to save space and present a long list of options in a compact and organized manner.
    Dropdowns are commonly used in navigation menus, forms, and other interactive elements where users need to select from a list of options.

    <Subtitle>Usage</Subtitle>

    - Providing users with a list of options in a compact and organized manner, such as by displaying a dropdown menu, a select box, or a list of options.
    - Allowing users to quickly and easily select one or multiple options from the list, so that they can complete a task or make a choice.
    - Providing a clear and concise way to display options, so that users can easily see and understand the content.
    - Allowing users to type or search for specific options within the dropdown, so that they can quickly find the options that they need.

    To display a dropdown you need to have a trigger element (e.g.: `bq-button`, `bq-avatar`, etc) and all the elements insinde the panel (e.g.: `bq-option`).
    The Dropdown Component has as dependency the `bq-panel` utility component.

    <Subtitle>👍 When to use</Subtitle>

    Do's

    - Use clear and concise language for the options in the dropdown, so that users can easily understand the context and meaning of the content.
    - Use visually distinct styles and colors for the options in the dropdown, so that users can easily see and understand the type and importance of the content.
    - Ensure that the dropdown component is responsive and easy to use, with a smooth and intuitive interaction that is accessible to users with different abilities and needs.
    - Provide clear and concise instructions or actions for users to select options or close the dropdown, so that they can complete their task or interaction.
    - Consider the use of keyboard navigation, so that users can easily navigate and select options within the dropdown using their keyboard.

    Don'ts

    - Use dropdowns in a way that interferes with other elements on the page or with other interactions, such as covering important content or blocking links or buttons.
    - Use dropdowns for options that are not important or relevant, as this can lead to confusion or frustration for users.
    - Use dropdowns in a way that is misleading or inaccurate, as this can erode trust and credibility with users.
    - Use dropdowns in a way that makes it difficult for users to see or understand the options, such as by using small or unclear text or by displaying too many options at once.

    <Title>Properties</Title>

    <ArgTypes of="bq-dropdown" />
  </div>
</div>
