@saasquatch/mint-components 1.5.0-113 → 1.5.0-117

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -1,51 +1,51 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-export function TextSpanView(props, children) {
-  const style = {
-    p: {
-      "font-size": "var(--sl-font-size-small)",
-      "font-weight": "400",
-      color: "var(--sl-color-gray-800)",
-      margin: "0",
-    },
-    subtext: {
-      "font-size": "var(--sl-font-size-x-small)",
-      "font-weight": "400",
-      color: "var(--sl-color-gray-600)",
-      margin: "0",
-    },
-    h1: {
-      "font-size": "var(--sl-font-size-xx-large)",
-      "font-weight": "600",
-      color: "var(--sl-color-gray-800)",
-      margin: "0",
-    },
-    h2: {
-      "font-size": "var(--sl-font-size-x-large)",
-      "font-weight": "600",
-      color: "var(--sl-color-gray-800)",
-      margin: "0",
-    },
-    h3: {
-      "font-size": "var(--sl-font-size-large)",
-      "font-weight": "600",
-      color: "var(--sl-color-gray-800)",
-      margin: "0",
-    },
-    h4: {
-      "font-size": "13px",
-      "font-weight": "600",
-      color: "var(--sl-color-gray-800)",
-      margin: "0",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
+const style = {
+  p: {
+    "font-size": "var(--sl-font-size-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  subtext: {
+    "font-size": "var(--sl-font-size-x-small)",
+    "font-weight": "400",
+    color: "var(--sl-color-gray-600)",
+    margin: "0",
+  },
+  h1: {
+    "font-size": "var(--sl-font-size-xx-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h2: {
+    "font-size": "var(--sl-font-size-x-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h3: {
+    "font-size": "var(--sl-font-size-large)",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+  h4: {
+    "font-size": "13px",
+    "font-weight": "600",
+    color: "var(--sl-color-gray-800)",
+    margin: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
     sqm-text-span {
       display: inline;
     }
   `;
+export function TextSpanView(props, children) {
   return (h("span", { class: sheet.classes[props.type] },
     h("style", { type: "text/css" },
       vanillaStyle,

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+import { Circle, Gift } from "./SVGs";
+const style = {
+  TimelineReward: {
+    color: "var(--sl-color-neutral-900)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .container": {
+      display: "flex",
+    },
+    "& .line": {
+      display: "none",
+      color: "transparent",
+      userSelect: "none",
+      background: "var(--sl-color-primary-300)",
+      width: "4px",
+      borderRadius: "4px",
+      margin: "-2px",
+      position: "relative",
+      left: "12px",
+      top: "34px",
+    },
+    "& .step": {
+      display: "flex",
+    },
+    "& .icon": {
+      position: "relative",
+      top: "4px",
+      zIndex: "1",
+      color: "var(--sl-color-primary-300)",
+      marginRight: "var(--sl-spacing-large)",
+    },
+    "& .reward": {
+      marginRight: "var(--sl-spacing-x-small)",
+      fontSize: "var(--sl-font-size-x-large)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .unit": {
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-small)",
+    },
+    "& .description": {
+      fontSize: "var(--sl-font-size-medium)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+const vanillaStyle = `
+	:host{
+		display: block; 
+	}
+
+	:host(:not(:last-of-type)) .line {
+		display: block; 
+	}
+	`;
+export function TimelineEntryView(props) {
+  var _a;
+  const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
+  return (h("div", { class: sheet.classes.TimelineReward },
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: "container" },
+      h("div", { class: "line" }, "/"),
+      h("div", { class: "step" },
+        timeline_icon === "gift" && (h("div", { class: "icon" },
+          h(Gift, null))),
+        timeline_icon === "circle" && (h("div", { class: "icon" },
+          h(Circle, null))),
+        h("div", null,
+          h("div", null,
+            h("span", { class: "reward" }, props.reward),
+            h("span", { class: "unit" }, props.unit)),
+          h("div", { class: "description" }, props.desc))))));
+}

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -1,19 +1,14 @@
 import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Method, Prop, State } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
 import { useRequestRerender } from "../../tables/re-render";
 import { getProps } from "../../utils/utils";
-import { Circle, Gift } from "./SVGs";
+import { TimelineEntryView } from "./sqm-timeline-entry-view";
 /**
  * @uiName Timeline Entry
  */
 export class TimelineReward {
   constructor() {
     this.ignored = true;
-    //   @State() line: boolean = false;
-    //   @Method() async setLine(value: boolean) {
-    //     this.line = value;
-    //   }
     this.iconState = "gift";
     withHooks(this);
   }
@@ -141,77 +136,3 @@ export class TimelineReward {
     }
   }; }
 }
-function TimelineEntryView(props) {
-  var _a;
-  const style = {
-    TimelineReward: {
-      color: "var(--sl-color-neutral-900)",
-      lineHeight: "var(--sl-line-height-dense)",
-      "& .container": {
-        display: "flex",
-      },
-      "& .line": {
-        display: "none",
-        color: "transparent",
-        userSelect: "none",
-        background: "var(--sl-color-primary-300)",
-        width: "4px",
-        borderRadius: "4px",
-        margin: "-2px",
-        position: "relative",
-        left: "12px",
-        top: "34px",
-      },
-      "& .step": {
-        display: "flex",
-      },
-      "& .icon": {
-        position: "relative",
-        top: "4px",
-        zIndex: "1",
-        color: "var(--sl-color-primary-300)",
-        marginRight: "var(--sl-spacing-large)",
-      },
-      "& .reward": {
-        marginRight: "var(--sl-spacing-x-small)",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-      },
-      "& .unit": {
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-small)",
-      },
-      "& .description": {
-        fontSize: "var(--sl-font-size-medium)",
-      },
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  const vanillaStyle = `
-	:host{
-		display: block;   
-	}
-
-	:host(:not(:last-child)) .line {
-		display: block;
-	}
-	`;
-  const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h("div", { class: sheet.classes.TimelineReward },
-    h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    h("div", { class: "container" },
-      h("div", { class: "line" }, "/"),
-      h("div", { class: "step" },
-        timeline_icon === "gift" && (h("div", { class: "icon" },
-          h(Gift, null))),
-        timeline_icon === "circle" && (h("div", { class: "icon" },
-          h(Circle, null))),
-        h("div", null,
-          h("div", null,
-            h("span", { class: "reward" }, props.reward),
-            h("span", { class: "unit" }, props.unit)),
-          h("div", { class: "description" }, props.desc))))));
-}

package/dist/collection/components/sqm-timeline/sqm-timeline.js

@@ -35,24 +35,6 @@ export class Timeline {
 		::slotted(*:not(:only-child):not(:last-child)) {
 			margin-bottom: var(--sl-spacing-xx-large);
 		}
-
-		// ::slotted(*:not(:only-child):not(:first-child)) * {
-		// 	background: yellow;
-		// }
-
-		// ::slotted(*:not(:only-child):not(:first-child))::before {
-		// 	display: block;
-		// 	content: "";
-		// 	position: relative;
-		// 	height: 65px;
-		// 	width: 4px;
-		// 	top: -15px;
-		// 	left: 50px;
-		// 	margin-top: -44px;
-		// 	margin-bottom: -15px;
-		// 	border-radius: 4px;
-		// 	background: red;
-		// }
 	`;
     return (h("div", null,
       h("style", { type: "text/css" }, vanillaStyle),

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 export function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
   const style = {
     LabelContainer: {
       "margin-bottom": props.labelMargin === "none"

package/dist/collection/global/styles.js

@@ -466,6 +466,7 @@ html {
   --sl-shadow-large: 0 2px 8px #0d131e1a;
   --sl-shadow-x-large: 0 4px 16px #0d131e1a;
   /** LV: Could use the Anvil spacing rules, but probably not necessary **/
+  --sl-spacing-none: 0rem;
   --sl-spacing-xxx-small: 0.125rem;
   --sl-spacing-xx-small: 0.25rem;
   --sl-spacing-x-small: 0.5rem;

package/dist/collection/global/styles.ts

@@ -467,6 +467,7 @@ html {
   --sl-shadow-large: 0 2px 8px #0d131e1a;
   --sl-shadow-x-large: 0 4px 16px #0d131e1a;
   /** LV: Could use the Anvil spacing rules, but probably not necessary **/
+  --sl-spacing-none: 0rem;
   --sl-spacing-xxx-small: 0.125rem;
   --sl-spacing-xx-small: 0.25rem;
   --sl-spacing-x-small: 0.5rem;

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

@@ -65,14 +65,14 @@ export const Dashboard = () => {
     shareString: "https://ssqt.co/johnsmithrox",
     open: false,
     disabled: false,
-    tooltiptext: "Share link copied",
+    tooltipText: "Share link copied",
     onClick: () => console.log("Share link copied"),
   };
   const sharecodeProps = {
     shareString: "JOHNSMITH1",
     open: false,
     disabled: false,
-    tooltiptext: "Share code copied",
+    tooltipText: "Share code copied",
     onClick: () => console.log("Share code copied"),
   };
   const twitterButtonProps = {

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

@@ -32,13 +32,6 @@ 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);

package/dist/collection/stories/Widget.stories.js

@@ -0,0 +1,49 @@
+import { useState } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import referralWidget from "../templates/ReferralWidget.html";
+import monoWidget from "../templates/MonoWidget.html";
+import loyaltyWidget from "../templates/LoyaltyWidget.html";
+export default {
+  title: "Templates / Widgets",
+};
+// 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 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", { style: { height: "50vh" } },
+    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("br", null),
+    h("div", { innerHTML: states.previewTemplate })));
+}
+export const ReferralWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate(referralWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: referralWidget }));
+});
+export const MonoWidget = createHookStory(() => {
+  const { states, callbacks } = useTemplate(monoWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: monoWidget }));
+});
+export const Loyalty = createHookStory(() => {
+  const { states, callbacks } = useTemplate(loyaltyWidget);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: loyaltyWidget }));
+});

package/dist/collection/tables/GenericTableView.js

@@ -8,9 +8,9 @@ export function GenericTableView(props) {
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
+  // Due to mobile media queries being dependant on props, not feasiable to move out of render function
   const style = {
     Table: {
-      //   borderCollapse: "collapse",
       tableLayout: "fixed",
       width: "100%",
       "& th": {
@@ -43,7 +43,6 @@ export function GenericTableView(props) {
         },
         "& td": {
           display: "grid",
-          gridTemplateColumns: "0.5fr 0.5fr",
           borderTop: "none",
           padding: "0",
           marginBottom: "var(--sl-spacing-medium)",
@@ -84,9 +83,8 @@ export function GenericTableView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  if (show === "empty") {
-    return h("div", null, elements.emptyElement);
-  }
+  if (show === "empty")
+    return elements.emptyElement;
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
@@ -98,7 +96,10 @@ export function GenericTableView(props) {
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
-            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":" }, cell));
+            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
+                gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
+                  : "0.5fr 0.5fr",
+              } }, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },

package/dist/esm/{GenericTableView-6b7b537b.js → GenericTableView-6924630b.js}

@@ -9,9 +9,9 @@ function GenericTableView(props) {
   const hiddenCols = data.hiddenColumns && data.hiddenColumns.split(",").map(Number);
   const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
   const tablet = `@media (min-width: ${Boolean(rows.length < 2) ? data.mdBreakpoint : data.smBreakpoint}px) and (max-width: ${data.mdBreakpoint}px)`;
+  // Due to mobile media queries being dependant on props, not feasiable to move out of render function
   const style = {
     Table: {
-      //   borderCollapse: "collapse",
       tableLayout: "fixed",
       width: "100%",
       "& th": {
@@ -44,7 +44,6 @@ function GenericTableView(props) {
         },
         "& td": {
           display: "grid",
-          gridTemplateColumns: "0.5fr 0.5fr",
           borderTop: "none",
           padding: "0",
           marginBottom: "var(--sl-spacing-medium)",
@@ -85,9 +84,8 @@ function GenericTableView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  if (show === "empty") {
-    return h("div", null, elements.emptyElement);
-  }
+  if (show === "empty")
+    return elements.emptyElement;
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
@@ -99,7 +97,10 @@ function GenericTableView(props) {
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
-            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":" }, cell));
+            return (h("td", { class: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "hidden" : "", "data-label": columns[j] + ":", style: {
+                gridTemplateColumns: (hiddenCols === null || hiddenCols === void 0 ? void 0 : hiddenCols.includes(j)) ? "1fr"
+                  : "0.5fr 0.5fr",
+              } }, cell));
           })));
         })))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },