@utrecht/components/search-bar/src/stories/default.stories.mdx

Components for the Municipality of Utrecht based on the NL Design System architecture

{/* @license CC0-1.0 */}

import { ArgsTable, Canvas, Meta, Story } from "@storybook/blocks";
import { argTypes, defaultArgs, exampleArgs, SearchBar } from "../story-template";
import "../../../textbox/src/index.scss";
import "../../../button/src/index.scss";
import "../index.scss";

<Meta
  id="css-search-bar"
  title="CSS Component/Search Bar"
  component={SearchBar}
  argTypes={argTypes}
  args={defaultArgs}
  parameters={{
    status: {
      type: "WORK IN PROGRESS",
    },
  }}
/>

# Search Bar

<Canvas>
  <Story name="Default" args={{ ...exampleArgs, isOpen: false }}>
    {SearchBar.bind({})}
  </Story>
</Canvas>

# Search Bar dropdown is open

<Canvas>
  <Story name="Dropdown is open" args={{ ...exampleArgs, isOpen: true }}>
    {SearchBar.bind({})}
  </Story>
</Canvas>

# is Selected

<Canvas>
  <Story name="Is selected" args={{ ...exampleArgs, isOpen: true, isSelected: true }}>
    {SearchBar.bind({})}
  </Story>
</Canvas>

# is Active

<Canvas>
  <Story name="Is Active" args={{ ...exampleArgs, isOpen: true, isActive: true }}>
    {SearchBar.bind({})}
  </Story>
</Canvas>

<ArgsTable story="Default" />