import { h } from "@stencil/core";
import { MatrixStory } from "../sqm-stencilbook/Matrix";
import { TaskCardView } from "./sqm-task-card-view";
import { ProgressBarView } from "./progress-bar/progress-bar-view";
import scenarioTaskCard from "./sqm-task-card.feature";
import scenarioProgressBar from "./progress-bar/progress-bar.feature";
import { DateTime } from "luxon";
import { Resizer } from "../sqm-stencilbook/Resizer";
const scenario = scenarioTaskCard + scenarioProgressBar;
export default {
  title: "Components/Task Card/",
  parameters: {
    scenario,
  },
};
const storyFrame = {
  display: "inline-flex",
  gap: "32px",
};
const resizable = {
  width: "347px",
  minWidth: "347px",
  resize: "horizontal",
  height: "fit-content",
  overflow: "hidden",
};
const oneAction = {
  callbacks: {
    sendEvent: () => void 0,
    onClick: () => void 0,
  },
  content: {
    rewardAmount: "20",
    rewardUnit: "SaaSquatch Points",
    cardTitle: "Complete a survey",
    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
    repeatable: false,
    showProgressBar: false,
    steps: false,
    buttonText: "Take survey",
    buttonLink: "https://example.com/",
    openNewTab: false,
    rewardDuration: null,
    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
    expiryMessage: "Ends {endDate}",
    startsOnMessage: "Starts {startDate}",
    endedMessage: "Ended {endDate}",
    finite: 0,
    goal: 1,
    locale: "en",
  },
  states: {
    progress: 0,
    loading: false,
    loadingEvent: false,
  },
};
const coupleActions = {
  callbacks: {
    sendEvent: () => void 0,
    onClick: () => void 0,
  },
  content: {
    rewardAmount: "40",
    rewardUnit: "SaaSquatch Points",
    cardTitle: "Comment on 5 articles",
    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
    repeatable: false,
    showProgressBar: true,
    steps: true,
    buttonText: "Take survey",
    buttonLink: "https://example.com/",
    openNewTab: false,
    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
    rewardDuration: null,
    expiryMessage: "Ends {endDate}",
    startsOnMessage: "Starts {startDate}",
    endedMessage: "Ended {endDate}",
    finite: 0,
    goal: 5,
    locale: "en",
  },
  states: {
    progress: 1,
    loading: false,
    loadingEvent: false,
  },
};
const manyActions = {
  callbacks: {
    sendEvent: () => void 0,
    onClick: () => void 0,
  },
  content: {
    rewardAmount: "150",
    rewardUnit: "SaaSquatch Points",
    cardTitle: "Spend $500 at our Store",
    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
    repeatable: false,
    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
    showProgressBar: true,
    steps: false,
    progressBarUnit: "$",
    buttonText: "Take survey",
    buttonLink: "https://example.com/",
    openNewTab: false,
    rewardDuration: null,
    expiryMessage: "Ends {endDate}",
    startsOnMessage: "Starts {startDate}",
    endedMessage: "Ended {endDate}",
    finite: 0,
    goal: 500,
    locale: "en",
  },
  states: { progress: 100, loading: false, loadingEvent: false },
};
export const TaskCard = () => {
  const expire = {
    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
  };
  const expireRepeat = { ...expire, repeatable: true };
  return (h("div", { style: storyFrame },
    h(Resizer, null,
      h("h4", null, "Not Repeatable"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "" }, states: { ...oneAction.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, description: "" }, states: { ...coupleActions.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, description: "" }, states: { ...manyActions.states, progress: 230 } }))),
    h(Resizer, null,
      h("h4", null, "Repeatable"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 2 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } }))),
    h(Resizer, null,
      h("h4", null, "Complete"),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } }))),
    h(Resizer, null,
      h("h4", null, "Unavailable"),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
};
export const TaskCardNotRepeatable = () => {
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 230 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 } })),
      h("h5", null))));
};
export const TaskCardRepeatable = () => {
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true }, states: { ...oneAction.states, progress: 1 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 7 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true }, states: { ...coupleActions.states, progress: 10 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 500 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 650 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true }, states: { ...manyActions.states, progress: 1000 } })),
      h("h5", null))));
};
export const TaskCardRepeatableFinite = () => {
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 1 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, finite: 2 }, states: { ...oneAction.states, progress: 2 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 2 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 2 }, states: { ...coupleActions.states, progress: 10 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 12 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, repeatable: true, finite: 3 }, states: { ...coupleActions.states, progress: 15 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 200 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 500 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 2 }, states: { ...manyActions.states, progress: 1000 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1200 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, repeatable: true, finite: 3 }, states: { ...manyActions.states, progress: 1500 } })),
      h("h5", null))));
};
export const TaskCardEndDate = () => {
  const expire = {
    rewardDuration: DateTime.now().minus({ days: 1 }).toISO() +
      "/" +
      DateTime.now().plus({ days: 1 }).toISO(),
  };
  const expireRepeat = { ...expire, repeatable: true };
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, ...expireRepeat }, states: { ...oneAction.states, progress: 1 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...coupleActions.content, ...expireRepeat }, states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...manyActions.content, ...expireRepeat }, states: { ...manyActions.states, progress: 1000 } })),
      h("h5", null))));
};
export const TaskCardLoading = () => {
  const loading = {
    states: { loading: true, progress: 0, loadingEvent: false },
  };
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, loading)),
      " ",
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, loading)),
      " ",
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, loading)),
      " ",
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, loading)),
      " ",
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, loading)),
      " ",
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, loading)),
      " ",
      h("h5", null))));
};
export const TaskCardNotStarted = () => {
  const expire = {
    rewardDuration: DateTime.now().plus({ days: 1 }).toISO() +
      "/" +
      DateTime.now().plus({ days: 2 }).toISO(),
  };
  const expireRepeat = { ...expire, repeatable: true };
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
      h("h5", null))));
};
export const TaskCardEnded = () => {
  const expire = {
    rewardDuration: DateTime.now().minus({ days: 2 }).toISO() +
      "/" +
      DateTime.now().minus({ days: 1 }).toISO(),
  };
  const expireRepeat = { ...expire, repeatable: true };
  return (h("div", { style: storyFrame },
    h("div", { style: resizable },
      h("h4", null, "One Action"),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 0 }, content: { ...oneAction.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, oneAction, { states: { ...oneAction.states, progress: 1 }, content: { ...oneAction.content, ...expireRepeat } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "A Couple Actions"),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { states: { ...coupleActions.states, progress: 1 }, content: { ...coupleActions.content, ...expireRepeat } })),
      h("h5", null)),
    h("div", { style: resizable },
      h("h4", null, "Many Actions"),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expire } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 100 }, content: { ...manyActions.content, ...expireRepeat } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { states: { ...manyActions.states, progress: 500 }, content: { ...manyActions.content, ...expireRepeat } })),
      h("h5", null))));
};
export const TaskCardButtonHidden = () => {
  const expire = {
    rewardDuration: "2021-11-30T08:00:00.000Z/2021-12-01T08:00:00.000Z",
  };
  const expireRepeat = { ...expire, repeatable: true };
  return (h("div", { style: storyFrame },
    h(Resizer, null,
      h("h4", null, "Not Repeatable"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, description: "", hideButton: true }, states: { ...oneAction.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: {
          ...coupleActions.content,
          description: "",
          hideButton: true,
        }, states: { ...coupleActions.states, progress: 0 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: {
          ...manyActions.content,
          description: "",
          hideButton: true,
        }, states: { ...manyActions.states, progress: 230 } }))),
    h(Resizer, null,
      h("h4", null, "Repeatable"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, repeatable: true, hideButton: true }, states: { ...oneAction.states, progress: 2 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: {
          ...coupleActions.content,
          repeatable: true,
          hideButton: true,
        }, states: { ...coupleActions.states, progress: 7 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: {
          ...manyActions.content,
          repeatable: true,
          hideButton: true,
        }, states: { ...manyActions.states, progress: 650 } }))),
    h(Resizer, null,
      h("h4", null, "Complete"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 1 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 5 } })),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 500 } }))),
    h(Resizer, null,
      h("h4", null, "Unavailable"),
      h(TaskCardView, Object.assign({}, oneAction, { content: { ...oneAction.content, hideButton: true }, states: { ...oneAction.states, progress: 0 } }, expireRepeat)),
      h("h5", null),
      h(TaskCardView, Object.assign({}, coupleActions, { content: { ...coupleActions.content, hideButton: true }, states: { ...coupleActions.states, progress: 3 } }, expireRepeat)),
      h("h5", null),
      h(TaskCardView, Object.assign({}, manyActions, { content: { ...manyActions.content, hideButton: true }, states: { ...manyActions.states, progress: 250 } }, expireRepeat)))));
};
export const ProgressBar = () => {
  const props = {
    progress: 0,
    goal: 500,
    progressBarUnit: "$",
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 100, 500, 650, 1200] }, props: props, Component: ProgressBarView })));
};
export const ProgressBarSteps = () => {
  const props = {
    progress: 0,
    steps: true,
    goal: 5,
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
};
export const ProgressBarRepeatable = () => {
  const props = {
    progress: 0,
    goal: 500,
    progressBarUnit: "$",
    repeatable: true,
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
};
export const ProgressBarStepsRepeatable = () => {
  const props = {
    progress: 0,
    steps: true,
    goal: 5,
    repeatable: true,
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 12] }, props: props, Component: ProgressBarView })));
};
export const ProgressBarFinite = () => {
  const props = {
    progress: 0,
    goal: 500,
    progressBarUnit: "$",
    repeatable: true,
    finite: 2,
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 250, 500, 750, 1000, 1250] }, props: props, Component: ProgressBarView })));
};
export const ProgressBarStepsFinite = () => {
  const props = {
    progress: 0,
    steps: true,
    goal: 5,
    repeatable: true,
    finite: 2,
  };
  return (h("div", null,
    h(MatrixStory, { matrix: { progress: [0, 1, 5, 7, 10, 12] }, props: props, Component: ProgressBarView })));
};
