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

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

const loadingStatus = ["inactive", "active", "finished", "error"];

export const Default = () => ({
  Component,
  props: {
    status: select("Loading status (status)", loadingStatus, "active"),
    iconDescription: text(
      "Icon description (iconDescription)",
      "Active loading indicator"
    ),
    description: text(
      "Loading progress description (description)",
      "Loading data..."
    ),
    successDelay: number(
      "The duration for successful state before `on:success` fires (successDelay)",
      1500
    ),
  },
});

export const UxExample = () => ({ Component, props: { story: "ux-example" } });

UxExample.story = { name: "UX Example" };