import { h } from "@stencil/core";
import scenarioTimeline from "./sqm-timeline.feature";
import scenarioTimelineEntry from "./sqm-timeline-entry.feature";
const scenario = scenarioTimeline + scenarioTimelineEntry;
export default {
  title: "Components/Timeline",
  parameters: {
    scenario,
  },
};
export const TimelineWith1Reward = () => {
  return (h("div", null,
    h("sqm-timeline", null,
      h("sqm-timeline-entry", { textColor: "red", lineColor: "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
    h("br", null),
    " ",
    h("hr", null),
    " ",
    h("br", null),
    h("sqm-timeline", { icon: "circle" },
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }))));
};
export const TimelineWith2Rewards = () => {
  return (h("div", null,
    h("sqm-timeline", null,
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
    h("br", null),
    " ",
    h("hr", null),
    " ",
    h("br", null),
    h("sqm-timeline", { icon: "circle" },
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }))));
};
export const TimelineWith3Rewards = () => {
  return (h("div", null,
    h("sqm-timeline", null,
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
    h("br", null),
    " ",
    h("hr", null),
    " ",
    h("br", null),
    h("sqm-timeline", { icon: "circle" },
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }))));
};
export const TimelineWith4Rewards = () => {
  return (h("div", null,
    h("sqm-timeline", null,
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })),
    h("br", null),
    " ",
    h("hr", null),
    " ",
    h("br", null),
    h("sqm-timeline", { icon: "circle" },
      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
};
export const TimelineWithCustomColors = () => {
  return (h("sqm-timeline", null,
    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
    h("sqm-timeline-entry", { "text-color": "red", "line-color": "red", reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })));
};
