import { h } from "@stencil/core";
export default {
  title: "Components/Scroll",
};
export const ScrollTag = () => {
  return (h("div", { style: { position: "relative", height: "2000px" } },
    h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll", "scroll-animation": "smooth" }),
    h("div", { style: { position: "absolute", bottom: "0" } },
      h("sqm-text", { slot: "label" },
        h("h3", null, "Earn more rewards"),
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
};
export const ScrollId = () => {
  return (h("div", { style: { position: "relative", height: "2000px" } },
    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "smooth" }),
    h("div", { style: { position: "absolute", bottom: "0" } },
      h("sqm-text", { slot: "label", id: "my-id" },
        h("h3", null, "Earn more rewards"),
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
};
export const ScrollAutoAnimation = () => {
  return (h("div", { style: { position: "relative", height: "2000px" } },
    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "auto" }),
    h("div", { style: { position: "absolute", bottom: "0" } },
      h("sqm-text", { slot: "label", id: "my-id" },
        h("h3", null, "Earn more rewards"),
        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
};
export const ScrollTabGroup = () => {
  return (h("div", { style: { position: "relative", height: "2000px" } },
    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
              <sqm-tabs>
              <sqm-tab header="Leaderboard">
                <sqm-hero-image
                  image-url="https://i.imgur.com/MVgOJn7.png"
                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
                  layout="columns"
                  image-percentage="33%"
                  padding-image="large"
                  padding-text="large"
                  background-color=""
                ></sqm-hero-image>
                <sqm-leaderboard></sqm-leaderboard>
              </sqm-tab>
              <sqm-tab header="Referral history"
              >
                <sqm-referral-table></sqm-referral-table>
              </sqm-tab>
              <sqm-tab header="Reward history">
                <sqm-rewards-table></sqm-rewards-table>
              </sqm-tab>
              <sqm-tab header="Redeem">
                <sqm-reward-exchange-list></sqm-reward-exchange-list>
              </sqm-tab>
            </sqm-tabs>
      ` })));
};
export const ScrollTabGroupInner = () => {
  return (h("div", { style: { position: "relative", height: "2000px" } },
    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-tag-name": "sqm-reward-exchange-list" }),
    h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
              <sqm-tabs>
              <sqm-tab header="Leaderboard">
                <sqm-hero-image
                  image-url="https://i.imgur.com/MVgOJn7.png"
                  description="Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!"
                  layout="columns"
                  image-percentage="33%"
                  padding-image="large"
                  padding-text="large"
                  background-color=""
                ></sqm-hero-image>
                <sqm-leaderboard></sqm-leaderboard>
              </sqm-tab>
              <sqm-tab header="Referral history"
              >
                <sqm-referral-table></sqm-referral-table>
              </sqm-tab>
              <sqm-tab header="Reward history">
                <sqm-rewards-table></sqm-rewards-table>
              </sqm-tab>
              <sqm-tab header="Redeem">
                <sqm-reward-exchange-list></sqm-reward-exchange-list>
              </sqm-tab>
            </sqm-tabs>
      ` })));
};
export const ShoelaceProps = () => {
  return (h("div", null,
    h("div", { style: { display: "flex", gap: "60px" } },
      h("div", { style: { textAlign: "center" } },
        h("h3", null, "Type:"),
        h("sqm-scroll", { "button-type": "primary" }, "Primary"),
        h("br", null),
        h("sqm-scroll", { "button-type": "success" }, "Success"),
        h("br", null),
        h("sqm-scroll", { "button-type": "neutral" }, "Neutral"),
        h("br", null),
        h("sqm-scroll", { "button-type": "warning" }, "Warning"),
        h("br", null),
        h("sqm-scroll", { "button-type": "danger" }, "Danger")),
      h("div", { style: { textAlign: "center" } },
        h("h3", null, "Outline:"),
        h("sqm-scroll", { outline: true, "button-type": "primary" }, "Primary"),
        h("br", null),
        h("sqm-scroll", { outline: true, "button-type": "success" }, "Success"),
        h("br", null),
        h("sqm-scroll", { outline: true, "button-type": "neutral" }, "Neutral"),
        h("br", null),
        h("sqm-scroll", { outline: true, "button-type": "warning" }, "Warning"),
        h("br", null),
        h("sqm-scroll", { outline: true, "button-type": "danger" }, "Danger"))),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Text:"),
    h("sqm-scroll", { "button-type": "text" }, "Text"),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Size:"),
    h("sqm-scroll", { size: "small" }, "Small"),
    h("br", null),
    h("sqm-scroll", { size: "medium" }, "Medium"),
    h("br", null),
    h("sqm-scroll", { size: "large" }, "Large"),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Pill:"),
    h("sqm-scroll", { pill: true }, "Button"),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Icon:"),
    h("sqm-scroll", { "button-type": "primary", iconName: "facebook" }, "Icon Name"),
    h("br", null),
    h("sqm-scroll", { iconName: "gear", iconSlot: "prefix" }, "Icon Slot Prefix"),
    h("br", null),
    h("sqm-scroll", { iconName: "gear", iconSlot: "suffix" }, "Icon Slot Suffix"),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Circle:"),
    h("sqm-scroll", { circle: true }, "X"),
    h("br", null),
    " ",
    h("hr", null),
    h("h3", null, "Mobile Friendly:"),
    h("sqm-scroll", { mobile: true }, "Button"),
    h("br", null),
    " ",
    h("hr", null)));
};
