import { withKnobs, select, boolean, text } from "@storybook/addon-knobs";
import Component from "./ComboBox.Story.svelte";

export default { title: "ComboBox", decorators: [withKnobs] };

const sizes = {
  "Extra large size (xl)": "xl",
  "Regular size (lg)": "",
  "Small size (sm)": "sm",
};

export const Default = () => ({
  Component,
  props: {
    size: select("Field size (size)", sizes, ""),
    placeholder: text("Placeholder text (placeholder)", "Filter..."),
    titleText: text("Title (titleText)", "Combobox title"),
    helperText: text("Helper text (helperText)", "Optional helper text here"),
    light: boolean("Light (light)", false),
    disabled: boolean("Disabled (disabled)", false),
    invalid: boolean("Invalid (invalid)", false),
    invalidText: text(
      "Invalid text (invalidText)",
      "A valid value is required"
    ),
    name: "combo-box-name",
  },
});