import { h } from "@stencil/core";
import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
import { DropdownFieldView, } from "./sqm-dropdown-field-view";
export default {
  title: "Components/Dropdown Field",
};
const defaultProps = {
  states: {
    registrationFormState: {},
  },
  content: {
    dropdownName: "options",
    dropdownLabel: "Select an option",
    errorMessage: "Must select an option",
    selectOptions: [
      h("sl-menu-item", { value: "option-1" }, "Option 1"),
      h("sl-menu-item", { value: "option-2" }, "Option 2"),
      h("sl-menu-item", { value: "option-3" }, "Option 3"),
    ],
  },
};
export const Default = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps))));
export const CustomLabel = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    dropdownLabel: "Pick your favorite",
  } }))));
export const Error = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        options: "Must select an option",
      },
    },
  } }))));
export const CustomError = createHookStory(() => (h(DropdownFieldView, Object.assign({}, defaultProps, { content: {
    ...defaultProps.content,
    errorMessage: "An option must be selected to continue",
  }, states: {
    ...defaultProps.states,
    registrationFormState: {
      validationErrors: {
        options: "Must select an option",
      },
    },
  } }))));
