@bostonuniversity/bulib-wc/src/search/search.stories.mdx

collection of web components and styles used at Boston University Libraries

import { Story, Preview, Meta, Props, html, withKnobs, withWebComponentsKnobs } from '@open-wc/demoing-storybook';
import './bulib-search.js';

<Meta 
  title="Web Components|bulib-search"
  decorators={[withKnobs, withWebComponentsKnobs]}
  parameters={{
    component: "bulib-search",
    options: { selectedPanel: "storybookjs/knobs/accessibility" }
  }}
/>

# Search Component

Provide a simple, analytics-enabled search form over a variety of `search_options`.

## Usages 

### Default (empty)

When not given any extra attributes, `bulib-search` defaults to searching over `primo`.

<Preview withToolbar>
  <Story name="default">
    {html`
      <h4>default styling</h4>
      <bulib-search></bulib-search>
      <br><hr />
      <h4>secondary styling <code>.secondary</code></h4>
      <bulib-search class="secondary"></bulib-search>
    `}
  </Story>
</Preview>

### Two options without default

If you provide it with multile `str_options`, it will default to searching over the first one.

<Preview withToolbar>
  <Story name="options-no-default">
    {html`
      <h4>default styling</h4>
      <bulib-search str_options="primo wp" debug></bulib-search>
      <br><hr>
      <h4>secondary styling <code>.secondary</code></h4>
      <bulib-search str_options="primo wp" debug class="secondary"></bulib-search>
    `}
  </Story>
</Preview>


### Multiple Options with `str_selected`

You can manually set which of the `str_options` is selected by using the `str_selected` attribute.

<Preview withToolbar>
  <Story name="options-with-default">
    {html`
      <bulib-search str_options="primo wp help" str_selected="wp" debug></bulib-search>
    `}
  </Story>
</Preview>


### Fallback Example

To provide a fallback (for browsers that don't support web components), insert a traditional `form` (with action) inside 
  off the `<bulib-search>` tag.

_note: you won't be able to tell the difference between this and the first in this view, but click 'Show code' 
  to see the difference in the markup_

<Preview withToolbar>
  <Story name="options-with-fallback">
    {html`
      <bulib-search str_options="guides wp">
        <form action="http://library.bu.edu/srch.php" method="get">
          <input name="q" type="text" /><button type="submit">Search</button>
        </form>
      </bulib-search>
    `}
  </Story>
</Preview>


## API - Properties 

<Props of="bulib-search" />