@saasquatch/mint-components 1.3.3-5 → 1.3.3-6

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

@@ -1,305 +1,305 @@
-import { h } from "@stencil/core";
-import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
-import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
-import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import jss from "jss";
-import preset from "jss-preset-default";
-import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
-import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
-import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
-import { PortalContainerView } from "../components/sqm-portal-container/sqm-portal-container-view";
-import { StatContainerView } from "../components/sqm-stat-container/sqm-stat-container-view";
-import { PortalProfileView } from "../components/sqm-portal-profile/sqm-portal-profile-view";
-import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
-export default {
-  title: "New Portal",
-};
-const style = {
-  HeaderSubtitleBold: {
-    "font-weight": 500,
-    "text-decoration": "underline",
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-const barProps = {
-  data: {
-    programs: [
-      {
-        key: "program1",
-        label: "My Referral Program",
-      },
-      {
-        key: "program2",
-        label: "My Rewards Program",
-      },
-    ],
-  },
-};
-const item1Props = {
-  states: {
-    active: false,
-  },
-  data: {
-    label: "Dashboard",
-    icon: "house",
-    path: "/",
-  },
-};
-const item2Props = {
-  states: {
-    active: true,
-  },
-  data: {
-    label: "Activity",
-    icon: "bar-chart",
-    path: "/",
-  },
-};
-const Sidebar = () => {
-  return (h(NavigationSidebarView, Object.assign({}, barProps),
-    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
-    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
-};
-export const Dashboard = () => {
-  const sharelinkProps = {
-    shareString: "https://ssqt.co/johnsmithrox",
-    open: false,
-    disabled: false,
-    tooltiptext: "Share link copied",
-    onClick: () => console.log("Share link copied"),
-  };
-  const sharecodeProps = {
-    shareString: "JOHNSMITH1",
-    open: false,
-    disabled: false,
-    tooltiptext: "Share code copied",
-    onClick: () => console.log("Share code copied"),
-  };
-  const twitterButtonProps = {
-    medium: "twitter",
-    loading: false,
-    disabled: false,
-    pill: true,
-    type: "default",
-    size: "medium",
-    icon: "twitter",
-    hideicon: false,
-    iconslot: "prefix",
-    onClick: () => "Facebook share clicked",
-    hide: false,
-  };
-  const facebookButtonProps = {
-    medium: "facebook",
-    loading: false,
-    disabled: false,
-    pill: true,
-    type: "default",
-    size: "medium",
-    icon: "facebook",
-    hideicon: false,
-    iconslot: "prefix",
-    onClick: () => "Facebook share clicked",
-    hide: false,
-  };
-  const linkedinButtonProps = {
-    medium: "linkedin",
-    loading: false,
-    disabled: false,
-    pill: true,
-    type: "default",
-    size: "medium",
-    icon: "linkedin",
-    hideicon: false,
-    iconslot: "prefix",
-    onClick: () => "Facebook share clicked",
-    hide: false,
-  };
-  return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString),
-    h(Sidebar, null),
-    h("sqm-divided-layout", { direction: "column" },
-      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "xx-small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("p", null, "Welcome back,"))),
-          content: (h("sqm-text", null,
-            h("h1", null, "John Smith"))),
-        })),
-        h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345" }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58" }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540" }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305" }), "Awaiting Payout"))),
-      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "x-large",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h2", null, "Partner and Profit"))),
-          content: (h("sqm-text", null,
-            h("p", null, "Get rewarded for referring potential customers to MyCompany. Earn commission for each successful lead you send our way"))),
-        })),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h3", null, "Share your referral link"))),
-          content: h(ShareLinkView, Object.assign({}, sharelinkProps)),
-        })),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h3", null, "Share your referral code"))),
-          content: h(ShareLinkView, Object.assign({}, sharecodeProps)),
-        })),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h3", null, "Share via social media"))),
-          content: (h(PortalContainerView, Object.assign({}, {
-            direction: "row",
-            padding: "large",
-            gap: "xxx-large",
-            minWidth: "150px",
-          }),
-            h(ShareButtonView, Object.assign({}, twitterButtonProps), "Tweet about us"),
-            h(ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
-            h(ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
-        }))))));
-};
-export const EditProfile = () => {
-  return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString),
-    h(Sidebar, null),
-    h("sqm-divided-layout", { direction: "column" },
-      h(PortalProfileView, Object.assign({}, {
-        states: {
-          success: false,
-          loading: false,
-          submitDisabled: false,
-          showCountry: false,
-          user: {
-            id: "01",
-            accountId: "111100000",
-            firstName: "Joe",
-            lastName: "Smith",
-            email: "jsmith@gmail.com",
-            countryCode: "5000",
-          },
-          text: {
-            firstnametext: "First Name",
-            lastnametext: "Last Name",
-            emailtext: "Email",
-            countrytext: "Country",
-            editProfileHeader: "Edit your profile",
-            editProfileSubHeader: "Personal Information",
-            submitChangeButtonText: "Submit Changes",
-          },
-          formState: {
-            country: "Canada",
-            firstName: "Joe",
-            lastName: "Smith",
-            errors: null,
-            error: "",
-          },
-        },
-        callbacks: {
-          onSubmit: (e) => console.log(e),
-          onChange: (e) => console.log(e),
-        },
-      })),
-      h(PortalChangePasswordView, Object.assign({}, {
-        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"),
-        },
-      })))));
-};
-export const Commissions = () => {
-  return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString),
-    h(Sidebar, null),
-    h("sqm-divided-layout", { direction: "column" },
-      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "xx-small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h2", null, "Commissions"))),
-          content: (h("sqm-text", null,
-            h("p", null,
-              "for the",
-              " ",
-              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
-              " ",
-              "program"))),
-        })),
-        h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000" }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800" }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180" }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20" }), "Redeemed"))))));
-};
-export const Activity = () => {
-  return (h("sqm-divided-layout", { direction: "row" },
-    h("style", { type: "text/css" }, styleString),
-    h(Sidebar, null),
-    h("sqm-divided-layout", { direction: "column" },
-      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "xx-small",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h2", null, "Activity"))),
-          content: (h("sqm-text", null,
-            h("p", null,
-              "for the",
-              " ",
-              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
-              " ",
-              "program"))),
-        })),
-        h(PortalSectionView, Object.assign({}, {
-          labelMargin: "x-large",
-          padding: "none",
-          label: (h("sqm-text", null,
-            h("h3", null, "Referral Activity"))),
-          content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800" }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180" }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20" }), "Disqualified"))),
-        }))),
-      h(PortalSectionView, Object.assign({}, {
-        labelMargin: "x-large",
-        padding: "xxx-large",
-        label: (h("sqm-text", null,
-          h("h3", null, "Traffic Generated"))),
-        content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000" }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800" }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180" }), "From share mediums"))),
-      })))));
-};
+import { h } from "@stencil/core";
+import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
+import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
+import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
+import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
+import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
+import { PortalContainerView } from "../components/sqm-portal-container/sqm-portal-container-view";
+import { StatContainerView } from "../components/sqm-stat-container/sqm-stat-container-view";
+import { PortalProfileView } from "../components/sqm-portal-profile/sqm-portal-profile-view";
+import { PortalChangePasswordView } from "../components/sqm-portal-change-password/sqm-portal-change-password-view";
+export default {
+  title: "New Portal",
+};
+const style = {
+  HeaderSubtitleBold: {
+    "font-weight": 500,
+    "text-decoration": "underline",
+  },
+};
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+const barProps = {
+  data: {
+    programs: [
+      {
+        key: "program1",
+        label: "My Referral Program",
+      },
+      {
+        key: "program2",
+        label: "My Rewards Program",
+      },
+    ],
+  },
+};
+const item1Props = {
+  states: {
+    active: false,
+  },
+  data: {
+    label: "Dashboard",
+    icon: "house",
+    path: "/",
+  },
+};
+const item2Props = {
+  states: {
+    active: true,
+  },
+  data: {
+    label: "Activity",
+    icon: "bar-chart",
+    path: "/",
+  },
+};
+const Sidebar = () => {
+  return (h(NavigationSidebarView, Object.assign({}, barProps),
+    h(NavigationSidebarItemView, Object.assign({}, item1Props)),
+    h(NavigationSidebarItemView, Object.assign({}, item2Props))));
+};
+export const Dashboard = () => {
+  const sharelinkProps = {
+    shareString: "https://ssqt.co/johnsmithrox",
+    open: false,
+    disabled: false,
+    tooltiptext: "Share link copied",
+    onClick: () => console.log("Share link copied"),
+  };
+  const sharecodeProps = {
+    shareString: "JOHNSMITH1",
+    open: false,
+    disabled: false,
+    tooltiptext: "Share code copied",
+    onClick: () => console.log("Share code copied"),
+  };
+  const twitterButtonProps = {
+    medium: "twitter",
+    loading: false,
+    disabled: false,
+    pill: true,
+    type: "default",
+    size: "medium",
+    icon: "twitter",
+    hideicon: false,
+    iconslot: "prefix",
+    onClick: () => "Facebook share clicked",
+    hide: false,
+  };
+  const facebookButtonProps = {
+    medium: "facebook",
+    loading: false,
+    disabled: false,
+    pill: true,
+    type: "default",
+    size: "medium",
+    icon: "facebook",
+    hideicon: false,
+    iconslot: "prefix",
+    onClick: () => "Facebook share clicked",
+    hide: false,
+  };
+  const linkedinButtonProps = {
+    medium: "linkedin",
+    loading: false,
+    disabled: false,
+    pill: true,
+    type: "default",
+    size: "medium",
+    icon: "linkedin",
+    hideicon: false,
+    iconslot: "prefix",
+    onClick: () => "Facebook share clicked",
+    hide: false,
+  };
+  return (h("sqm-divided-layout", { direction: "row" },
+    h("style", { type: "text/css" }, styleString),
+    h(Sidebar, null),
+    h("sqm-divided-layout", { direction: "column" },
+      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "xx-small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("p", null, "Welcome back,"))),
+          content: (h("sqm-text", null,
+            h("h1", null, "John Smith"))),
+        })),
+        h(StatContainerView, Object.assign({}, { space: "64px" }),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "x-large",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h2", null, "Partner and Profit"))),
+          content: (h("sqm-text", null,
+            h("p", null, "Get rewarded for referring potential customers to MyCompany. Earn commission for each successful lead you send our way"))),
+        })),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h3", null, "Share your referral link"))),
+          content: h(ShareLinkView, Object.assign({}, sharelinkProps)),
+        })),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h3", null, "Share your referral code"))),
+          content: h(ShareLinkView, Object.assign({}, sharecodeProps)),
+        })),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h3", null, "Share via social media"))),
+          content: (h(PortalContainerView, Object.assign({}, {
+            direction: "row",
+            padding: "large",
+            gap: "xxx-large",
+            minWidth: "150px",
+          }),
+            h(ShareButtonView, Object.assign({}, twitterButtonProps), "Tweet about us"),
+            h(ShareButtonView, Object.assign({}, facebookButtonProps), "Share on Facebook"),
+            h(ShareButtonView, Object.assign({}, linkedinButtonProps), "Post on Linkedin"))),
+        }))))));
+};
+export const EditProfile = () => {
+  return (h("sqm-divided-layout", { direction: "row" },
+    h("style", { type: "text/css" }, styleString),
+    h(Sidebar, null),
+    h("sqm-divided-layout", { direction: "column" },
+      h(PortalProfileView, Object.assign({}, {
+        states: {
+          success: false,
+          loading: false,
+          submitDisabled: false,
+          showCountry: false,
+          user: {
+            id: "01",
+            accountId: "111100000",
+            firstName: "Joe",
+            lastName: "Smith",
+            email: "jsmith@gmail.com",
+            countryCode: "5000",
+          },
+          text: {
+            firstnametext: "First Name",
+            lastnametext: "Last Name",
+            emailtext: "Email",
+            countrytext: "Country",
+            editProfileHeader: "Edit your profile",
+            editProfileSubHeader: "Personal Information",
+            submitChangeButtonText: "Submit Changes",
+          },
+          formState: {
+            country: "Canada",
+            firstName: "Joe",
+            lastName: "Smith",
+            errors: null,
+            error: "",
+          },
+        },
+        callbacks: {
+          onSubmit: (e) => console.log(e),
+          onChange: (e) => console.log(e),
+        },
+      })),
+      h(PortalChangePasswordView, Object.assign({}, {
+        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"),
+        },
+      })))));
+};
+export const Commissions = () => {
+  return (h("sqm-divided-layout", { direction: "row" },
+    h("style", { type: "text/css" }, styleString),
+    h(Sidebar, null),
+    h("sqm-divided-layout", { direction: "column" },
+      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "xx-small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h2", null, "Commissions"))),
+          content: (h("sqm-text", null,
+            h("p", null,
+              "for the",
+              " ",
+              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              " ",
+              "program"))),
+        })),
+        h(StatContainerView, Object.assign({}, { space: "64px" }),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+};
+export const Activity = () => {
+  return (h("sqm-divided-layout", { direction: "row" },
+    h("style", { type: "text/css" }, styleString),
+    h(Sidebar, null),
+    h("sqm-divided-layout", { direction: "column" },
+      h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "xx-small",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h2", null, "Activity"))),
+          content: (h("sqm-text", null,
+            h("p", null,
+              "for the",
+              " ",
+              h("span", { class: sheet.classes.HeaderSubtitleBold }, "Partner Program #1"),
+              " ",
+              "program"))),
+        })),
+        h(PortalSectionView, Object.assign({}, {
+          labelMargin: "x-large",
+          padding: "none",
+          label: (h("sqm-text", null,
+            h("h3", null, "Referral Activity"))),
+          content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+        }))),
+      h(PortalSectionView, Object.assign({}, {
+        labelMargin: "x-large",
+        padding: "xxx-large",
+        label: (h("sqm-text", null,
+          h("h3", null, "Traffic Generated"))),
+        content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+      })))));
+};