@saasquatch/mint-components 1.2.1 → 1.2.2-11

package/dist/collection/stories/ChangePassword.stories.js

@@ -8,14 +8,44 @@ export default {
   },
 };
 const defaultProps = {
-  states: { open: false, loading: false, success: false, error: "" },
+  states: {
+    open: false,
+    loading: false,
+    success: false,
+    error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
+  },
   callbacks: {
     setOpen: (o) => console.log(o),
     submit: (e) => console.log("Submit", e),
   },
 };
 const openProps = {
-  states: { open: true, loading: false, success: false, error: "" },
+  states: {
+    open: true,
+    loading: false,
+    success: false,
+    error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
+  },
   callbacks: {
     setOpen: (o) => console.log(o),
     submit: (e) => console.log("Submit", e),
@@ -27,6 +57,16 @@ const errorProps = {
     loading: false,
     success: false,
     error: "Network error. Please try again.",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -39,6 +79,16 @@ const passwordErrorProps = {
     loading: false,
     success: false,
     error: "Passwords do not match.",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -51,6 +101,16 @@ const loadingProps = {
     loading: true,
     success: false,
     error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),
@@ -63,6 +123,16 @@ const successProps = {
     loading: false,
     success: true,
     error: "",
+    content: {
+      modalChangePasswordHeader: "Change Password",
+      cancelText: "Cancel",
+      changePasswordButtonText: "Change Password",
+      passwordFieldLabel: "Password",
+      confirmPasswordFieldLabel: "Confirm new password",
+      successMessage: "Your password has been updated.",
+      portalChangePasswordHeader: "Password",
+      portalChangePasswordButtonText: "Change your password...",
+    },
   },
   callbacks: {
     setOpen: (o) => console.log(o),

package/dist/collection/stories/Hero.stories.js

@@ -0,0 +1,98 @@
+import { h } from "@stencil/core";
+import { HeroView } from "../components/sqm-hero/sqm-hero-view";
+export default {
+  title: "Hero Layout",
+  parameters: {
+  //   scenario,
+  },
+};
+export const LoginOneColumn = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+    },
+    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 LoginOneColumnWithColor = () => {
+  const props = {
+    states: {
+      columns: 1,
+      wrapDirection: "wrap",
+      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",
+      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 TwoColumnLogin = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+    },
+    content: {
+      primaryColumn: (h("sqm-portal-login", { style: { width: "85%" } })),
+      secondaryColumn: (h("div", { style: { width: "85%" } },
+        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",
+    },
+    content: {
+      primaryColumn: (h("sqm-portal-login", { style: { width: "85%" } })),
+      secondaryColumn: (h("div", { style: { width: "85%" } },
+        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 TwoColumnLoginWithImage = () => {
+  const props = {
+    states: {
+      columns: 2,
+      wrapDirection: "wrap",
+    },
+    content: {
+      primaryColumn: (h("div", { style: { width: "85%" } },
+        h("h1", { style: { textAlign: "center" } }, "Get Referring!"),
+        h("sqm-portal-login", null))),
+      secondaryColumn: (h("img", { src: "https://images.unsplash.com/photo-1629004021495-83fe9b730acb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=735&q=80" })),
+    },
+  };
+  return (h("div", { style: { height: "800px" } },
+    h(HeroView, Object.assign({}, props))));
+};

package/dist/collection/stories/NewPortal.stories.js

@@ -197,6 +197,9 @@ export const EditProfile = () => {
             lastnametext: "Last Name",
             emailtext: "Email",
             countrytext: "Country",
+            editProfileHeader: "Edit your profile",
+            editProfileSubHeader: "Personal Information",
+            submitChangeButtonText: "Submit Changes",
           },
           formState: {
             country: "Canada",
@@ -212,7 +215,22 @@ export const EditProfile = () => {
         },
       })),
       h(PortalChangePasswordView, Object.assign({}, {
-        states: { open: true, error: "", loading: false, success: false },
+        states: {
+          open: true,
+          error: "",
+          loading: false,
+          success: false,
+          content: {
+            modalChangePasswordHeader: "Change Password",
+            cancelText: "Cancel",
+            changePasswordButtonText: "Change Password",
+            passwordFieldLabel: "Password",
+            confirmPasswordFieldLabel: "Confirm new password",
+            successMessage: "Your password has been updated.",
+            portalChangePasswordHeader: "Password",
+            portalChangePasswordButtonText: "Change your password...",
+          },
+        },
         callbacks: {
           setOpen: () => console.log("open"),
           submit: () => console.log("submit"),

package/dist/collection/stories/PortalEmailVerification.stories.js

@@ -19,6 +19,8 @@ const defaultProps = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const errorProps = {
@@ -33,6 +35,8 @@ const errorProps = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const loadingProps = {
@@ -47,6 +51,8 @@ const loadingProps = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 const successProps = {
@@ -61,6 +67,8 @@ const successProps = {
   content: {
     email: "email@example.com",
     verifyMessage: "A verification email was sent to {email}. Please verify your email to continue to the portal.",
+    emailVerificationHeader: "Verify your email",
+    resendEmailButtonText: "Re-send Email",
   },
 };
 export const Default = () => h(PortalEmailVerificationView, Object.assign({}, defaultProps));

package/dist/collection/stories/PortalFooter.stories.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+import { PortalFooterView } from "../components/sqm-portal-footer/sqm-portal-footer-view";
+export default {
+  title: "Portal Footer",
+  parameters: {},
+};
+const defaultProps = {
+  supportEmail: "support@example.com",
+  supportText: "For program support, contact {email}",
+  showPoweredBy: true,
+  poweredByLink: "https://saasquatch.com",
+  paddingTop: "large",
+  paddingRight: "large",
+  paddingBottom: "large",
+  paddingLeft: "large",
+};
+export const DefaultFooter = () => h(PortalFooterView, Object.assign({}, defaultProps));
+export const FooterWithTerms = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions" })));
+export const FooterWithFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps, { faqLink: "https://example.com", faqText: "FAQ" })));
+export const FooterWithTermsAndFAQ = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ" })));
+export const FooterNoPoweredBy = () => (h(PortalFooterView, Object.assign({}, defaultProps, { termsLink: "https://example.com", termsText: "Terms and Conditions", faqLink: "https://example.com", faqText: "FAQ", showPoweredBy: false })));

package/dist/collection/stories/PortalProfile.stories.js

@@ -28,6 +28,9 @@ const defaultProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -61,6 +64,9 @@ const noCountry = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -94,6 +100,9 @@ const loadingProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -127,6 +136,9 @@ const disabledProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -160,6 +172,9 @@ const errorProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",
@@ -193,6 +208,9 @@ const successProps = {
       lastnametext: "Last Name",
       emailtext: "Email",
       countrytext: "Country",
+      editProfileHeader: "Edit your profile",
+      editProfileSubHeader: "Personal Information",
+      submitChangeButtonText: "Submit Changes",
     },
     formState: {
       country: "Canada",

package/dist/collection/stories/PortalRegister.stories.js

@@ -17,7 +17,7 @@ const defaultProps = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
 };
 const errorProps = {
   states: {
@@ -33,7 +33,10 @@ const errorProps = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: {
+    pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
+  },
 };
 const loadingProps = {
   states: {
@@ -49,7 +52,7 @@ const loadingProps = {
   refs: {
     formRef: {},
   },
-  content: { pageLabel: "Register" },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
 };
 const slottedProps = {
   states: {
@@ -67,6 +70,7 @@ const slottedProps = {
   },
   content: {
     pageLabel: "Register",
+    confirmPasswordLabel: "Confirm Password",
     formData: (h("div", null,
       h("sl-input", { style: { marginBottom: "var(--sl-spacing-x-large)" }, exportparts: "label: input-label", label: "Slotted Input", required: true }),
       h("sl-input", { exportparts: "label: input-label", label: "Slotted Input 2", required: true }))),

package/dist/collection/stories/PortalResetPassword.stories.js

@@ -15,6 +15,13 @@ const defaultProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -30,6 +37,13 @@ const defaultPropsNoConfirm = {
     confirmPassword: false,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -45,6 +59,13 @@ const errorProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -60,6 +81,13 @@ const loadingProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -75,6 +103,13 @@ const successProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,
@@ -90,6 +125,13 @@ const validatingCodeProps = {
     confirmPassword: true,
     oobCodeValidating: false,
     oobCodeValid: false,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+    },
   },
   callbacks: {
     submit: async (e) => await e,

package/dist/collection/stories/PortalTemplates.stories.js

@@ -0,0 +1,143 @@
+import { useState } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import portalTemplate from "../templates/Portal.html";
+import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html";
+import multiProgramTemplate from "../templates/MultiProgramPortal.html";
+import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
+import dashboardTemplate from "../templates/Dashboard.html";
+import editProfileTemplate from "../templates/EditProfile.html";
+import activityTemplate from "../templates/Activity.html";
+import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
+import verifyEmailTemplate from "../templates/VerifyEmail.html";
+import loginTemplate from "../templates/Login.html";
+import registerTemplate from "../templates/Register.html";
+import forgotPasswordTemplate from "../templates/ForgotPassword.html";
+import resetPasswordTemplate from "../templates/ResetPassword.html";
+import emailVerifiedTemplate from "../templates/EmailVerified.html";
+import emailVerificationTemplate from "../templates/EmailVerification.html";
+import marked from "marked";
+import LoginReadme from "../components/sqm-portal-login/readme.md";
+import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md";
+import RegisterReadme from "../components/sqm-portal-register/readme.md";
+import EditProfileReadme from "../components/sqm-portal-profile/readme.md";
+import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md";
+import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md";
+import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md";
+import { navigation } from "@saasquatch/component-boilerplate";
+export default {
+  title: "Templates / Portal",
+};
+// slot="footer"
+// support-email="john@foodservicerewards.com"
+// terms-link="example.com"
+// faq-link="example.com"
+// padding="large"
+// show-powered-by="false"
+// powered-by-link="https://www.saasquatch.com/"
+function useTemplate(templateString) {
+  const [editedTemplate, setEditedTemplate] = useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = useState(templateString);
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate },
+  };
+}
+function TemplateView(props) {
+  const { states, callbacks, readme } = props;
+  return [
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    readme ? (h("details", null,
+      h("summary", null, "Props readme"),
+      h("div", { innerHTML: marked(readme) }))) : (""),
+    h("div", { innerHTML: states.previewTemplate }),
+  ];
+}
+function Buttons({ callbacks, states, template }) {
+  return (h("div", null,
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
+}
+function DefaultTemplateView(props) {
+  const { states, callbacks } = props;
+  return (h("div", null,
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
+    h("h2", null, "Navigation"),
+    h("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(9, 80px)",
+        gridGap: "10px",
+      } },
+      h("button", { onClick: () => navigation.push("/") }, "Dashboard"),
+      h("button", { onClick: () => navigation.push("/activity") }, "Activity"),
+      h("button", { onClick: () => navigation.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => navigation.push("/login") }, "Login"),
+      h("button", { onClick: () => navigation.push("/register") }, "Register"),
+      h("button", { onClick: () => navigation.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => navigation.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => navigation.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => navigation.push("/resetPassword") }, "Reset Password")),
+    h("br", null),
+    h("div", { innerHTML: states.previewTemplate })));
+}
+export const DefaultPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate(portalTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
+});
+export const MultiProgramPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate(multiProgramTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
+});
+export const Login = createHookStory(() => {
+  const { states, callbacks } = useTemplate(loginTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
+});
+export const ForgotPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate(forgotPasswordTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+});
+export const Register = createHookStory(() => {
+  const { states, callbacks } = useTemplate(registerTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+});
+export const Dashboard = createHookStory(() => {
+  const { states, callbacks } = useTemplate(dashboardTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const Activity = createHookStory(() => {
+  const { states, callbacks } = useTemplate(activityTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const EditProfile = createHookStory(() => {
+  const { states, callbacks } = useTemplate(editProfileTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+});
+export const ResetPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate(resetPasswordTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+});
+export const EmailVerification = createHookStory(() => {
+  const { states, callbacks } = useTemplate(emailVerificationTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+});
+export const EmailVerified = createHookStory(() => {
+  const { states, callbacks } = useTemplate(emailVerifiedTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+});
+export const Widget = createHookStory(() => {
+  return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
+      data: {
+        html: dashboardTemplate,
+      },
+    } }));
+});
+export const ResetPasswordEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate(resetPasswordEmailTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const VerifyEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate(verifyEmailTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});

package/dist/collection/stories/PoweredByImg.stories.js

@@ -0,0 +1,14 @@
+import { h } from "@stencil/core";
+import { PoweredByImg } from "../components/sqm-portal-footer/PoweredByImg";
+export default {
+  title: "Powered By",
+};
+export const Default = () => {
+  return h(PoweredByImg, null);
+};
+export const CustomColor = () => {
+  return h(PoweredByImg, { color: "salmon" });
+};
+export const CustomWidthAndHeight = () => {
+  return h(PoweredByImg, { width: 300, height: 50 });
+};