import { h } from "@stencil/core";
import { HeroView } from "./sqm-hero-view";
import scenario from "../sqm-hero/sqm-hero.feature";
export default {
  title: "Components/Hero Layout",
  parameters: {
    scenario,
  },
};
export const LoginOneColumn = () => {
  const props = {
    states: {
      columns: 1,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 0,
    },
    content: {
      primaryColumn: [
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("sqm-portal-login", null),
      ],
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const LoginOneColumnWithMinHeight = () => {
  return (h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 1, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "#FFFFFF" },
    h("sqm-portal-login", null)));
};
export const LoginOneColumnWithColor = () => {
  const props = {
    states: {
      columns: 1,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 0,
      background: "LightSlateGrey",
    },
    content: {
      primaryColumn: h("sqm-portal-login", null),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const LoginOneColumnWithImage = () => {
  const props = {
    states: {
      columns: 1,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 0,
      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
    },
    content: { primaryColumn: h("sqm-portal-login", null) },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginLargePadding = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 0,
      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
      secondaryBackground: "LightSlateGrey",
    },
    content: {
      primaryColumn: h("sqm-portal-login", null),
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginMediumPadding = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "medium",
      minHeight: 0,
      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
      secondaryBackground: "LightSlateGrey",
    },
    content: {
      primaryColumn: h("sqm-portal-login", null),
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginSmallPadding = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "small",
      minHeight: 0,
      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
      secondaryBackground: "LightSlateGrey",
    },
    content: {
      primaryColumn: h("sqm-portal-login", null),
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginNoPadding = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "none",
      minHeight: 0,
      background: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
      secondaryBackground: "LightSlateGrey",
    },
    content: {
      primaryColumn: h("sqm-portal-login", null),
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginReverseWrap = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap-reverse",
      background: "LightSlateGrey",
      paddingSize: "large",
      minHeight: 0,
      secondaryBackground: "https://images.unsplash.com/photo-1599676821464-3555954838dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1939&q=80",
    },
    content: {
      primaryColumn: h("sqm-portal-change-password", null),
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const TwoColumnLoginWithImgElement = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 0,
    },
    content: {
      primaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("sqm-portal-login", null))),
      secondaryColumn: (h("div", null,
        h("img", { src: "https://images.unsplash.com/photo-1487528278747-ba99ed528ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" }),
        h("p", null, "Pellentesque mauris urna, lacinia non turpis sed, pulvinar congue ligula. Sed mattis condimentum eros nec vulputate. Cras consectetur eget libero at viverra. Aliquam suscipit feugiat ante sit amet sagittis. Fusce pulvinar interdum odio ut dapibus. Nulla aliquet ultricies augue nec dignissim. Morbi vulputate hendrerit sem."))),
    },
  };
  return (h("div", { style: { height: "800px" } },
    h(HeroView, Object.assign({}, props))));
};
export const MinHeight = () => {
  const props = {
    states: {
      columns: 2,
      wrapDirection: "wrap",
      paddingSize: "large",
      minHeight: 600,
      background: "https://images.unsplash.com/photo-1487528278747-ba99ed528ebc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
    },
    content: {
      secondaryColumn: (h("div", null,
        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
        h("sqm-portal-login", null))),
    },
  };
  return h(HeroView, Object.assign({}, props));
};
export const InstantAccessLoggedOutView = () => {
  return (h("sqm-hero", { background: "https://res.cloudinary.com/saasquatch/image/upload/v1683589933/Portal%20Assets/Screen-Shot-2022-01-06-at-3.23.58-AM.png", columns: 2, "padding-size": "medium", "wrap-direction": "wrap", "secondary-background": "var(--sqm-portal-background)", "column-to-hide-in-mobile": "primary" },
    h("sqm-referred-registration", { slot: "secondary-column", "register-label": "Get $50 off", "padding-bottom": "small", "padding-left": "x-large", "padding-right": "x-large", "padding-top": "small" },
      h("sqm-titled-section", { "text-align": "center", "label-margin": "small", padding: "none", slot: "top" },
        h("h1", { slot: "label" }, "You got $50 off thanks to a friend!"),
        h("p", { slot: "content" },
          h("span", null, "Use this reward to get $50 off your next purchase."))),
      h("div", { slot: "bottom" },
        h("p", { style: { textAlign: "center" } }, "*Valid on purchases of $75 or more"),
        h("sqm-portal-footer", { slot: "footer", "show-powered-by": "true", "padding-bottom": "none", "padding-left": "none", "padding-right": "none", "padding-top": "none", "hide-support-text": true, "terms-text": "Terms And Conditions", "terms-link": "https://example.com" })))));
};
