import { h } from "@stencil/core";
import scenario from "./sqm-portal-container.feature";
export default {
  title: "Components/Microsite Container",
  parameters: {
    scenario,
  },
};
export const TooWideColumn = () => (h("div", { style: { width: "200px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large" },
    h("div", { style: { background: "grey", border: "1px solid red" } }, "Small"),
    h("div", { style: { background: "lightblue", width: "1000px" } }, "Too wide, content goes off the side of the page for ever and is hidden."))));
export const TooWideRow = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large", direction: "row", "min-width": "160px" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const TooWideSmallGap = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "small", direction: "row", "min-width": "160px" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const TooWidePadding = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
  h("sqm-portal-container", { padding: "xxx-large", gap: "xxx-large", direction: "row", "min-width": "160px" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const TooWideDisplayFlex = () => (h("div", { style: { width: "500px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large", direction: "row", display: "flex", "min-width": "160px" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const HalfWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const HalfWidthCenter = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large", direction: "row", minWidth: "160px", maxWidth: "50%", center: true },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const FullWidth = () => (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
  h("sqm-portal-container", { gap: "xxx-large", direction: "row", maxWidth: "100%" },
    h("sqm-share-button", { icon: "envelope", medium: "email", size: "medium", class: "hydrated" }, "Email a friend"),
    h("sqm-share-button", { medium: "twitter", size: "medium", class: "hydrated" }, "Post about us on X"),
    h("sqm-share-button", { medium: "facebook", size: "medium", class: "hydrated" }, "Share on Facebook"))));
export const SpaceBetween = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const SpaceAround = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-around" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const SpaceEvenly = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-evenly" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const ResponsiveBox = () => {
  return (h("div", { style: { width: "100%", maxWidth: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "space-between", "flex-wrap": "nowrap" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const Start = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const Center = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "center" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const End = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "end" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
export const BackgroundColor = () => {
  return (h("div", { style: { width: "1000px", border: "1px dashed grey" } },
    h("sqm-portal-container", { center: true, direction: "row", display: "flex", "justify-content": "start", "background-color": "red" },
      h("sqm-stat-container", { space: "xxx-large", display: "flex" },
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardsRedeemed/CREDIT/global" },
          h("sqm-text", null,
            h("p", null, "Rewards Redeemed"))),
        h("sqm-big-stat", { "flex-reverse": "true", alignment: "left", "stat-type": "/rewardBalance/CREDIT/POINT/value/global" },
          h("sqm-text", null,
            h("p", null, "Points Balance")))),
      h("sqm-scroll", { "scroll-id": "tab-2", outline: true, "button-type": "primary", "button-text": "Redeem your rewards", mobile: true }))));
};
