@saasquatch/mint-components 1.5.0-99 → 1.5.0

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

@@ -11,24 +11,21 @@ export class Timeline {
      * @uiName Icon
      * @uiType string
      * @uiEnum ["gift", "circle"]
+     * @uiEnumNames ["Gift", "Circle"]
      */
     this.icon = "gift";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    //@ts-ignore
     const rewards = useChildElements();
-    //TODO: Change to methods or attributes instead of properties
-    rewards.forEach((reward, idx) => {
-      if (rewards.length > 1 && idx != rewards.length - 1) {
-        reward.line = true;
+    rewards.forEach((reward) => {
+      try {
+        reward.setIcon(this.icon);
+      }
+      catch {
+        // incase child is not sqm-timeline-entry
       }
-      //TODO: Change to method
-      else
-        reward.line = false;
-      //TODO: Chango to method
-      reward.icon = this.icon;
     });
     const vanillaStyle = `
 		:host{
@@ -38,44 +35,6 @@ export class Timeline {
 		::slotted(*:not(:only-child):not(:last-child)) {
 			margin-bottom: var(--sl-spacing-xx-large);
 		}
-
-		// ::slotted(*:not(:only-child):not(:last-child))::before {
-		// 	display: block;
-		// 	content: "";
-		// 	height: 100%;
-		// 	background: var(--sl-color-primary-300);
-		// }
-
-		// ::slotted(*:not(:first-child))::before {
-		// 	display: block;
-		// 	position: relative;
-		// 	content: "";
-		// 	background: var(--sl-color-primary-300);
-		// 	height: 90px;
-		// 	width: 4px;
-		// 	top: 12px;
-		// 	left: 10px;
-		// 	margin-top: -44px;
-		// 	margin-bottom: 8px;
-		// 	border-radius: 4px;
-		// }
-
-
-    // ZH: Temporary Patch fix
-    // ::slotted(*:not(:first-child))::before {
-	// 		display: block;
-	// 		position: relative;
-	// 		content: "";
-	// 		background: var(--sl-color-primary-300);
-	// 		min-height: 150px;
-	// 		max-height: 300px;
-	// 		width: 4px;
-	// 		top: 12px;
-	// 		left: 10px;
-	// 		margin-top: -85px;
-	// 		margin-bottom: 8px;
-	// 		border-radius: 4px;
-	// 	}
 	`;
     return (h("div", null,
       h("style", { type: "text/css" }, vanillaStyle),
@@ -88,8 +47,8 @@ export class Timeline {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string",
+        "original": "\"gift\" | \"circle\"",
+        "resolved": "\"circle\" | \"gift\"",
         "references": {}
       },
       "required": false,
@@ -104,6 +63,9 @@ export class Timeline {
           }, {
             "text": "[\"gift\", \"circle\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Gift\", \"Circle\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },

package/dist/collection/components/sqm-titled-section/TitledSection.stories.js

@@ -1,5 +1,4 @@
 import { h } from "@stencil/core";
-import { media, sharebutton } from "../sqm-referral-card/ReferralCard.stories";
 import scenario from "./sqm-titled-section.feature";
 export default {
   title: "Components/Titled Section",
@@ -11,31 +10,19 @@ export const AlignLeft = () => {
   return (h("sqm-titled-section", { "text-align": "left" },
     h("sqm-text", { slot: "label" },
       h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
-    h("sqm-text", { slot: "content" },
-      h("sqm-referral-card", null,
-        media("left"),
-        sharebutton("right")))));
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
 };
 export const AlignCenter = () => {
   return (h("sqm-titled-section", { "text-align": "center" },
     h("sqm-text", { slot: "label" },
       h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
-    h("sqm-text", { slot: "content" },
-      h("sqm-referral-card", null,
-        media("left"),
-        sharebutton("right")))));
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
 };
 export const AlignRight = () => {
   return (h("sqm-titled-section", { "text-align": "right" },
     h("sqm-text", { slot: "label" },
       h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")),
-    h("sqm-text", { slot: "content" },
-      h("sqm-referral-card", null,
-        media("left"),
-        sharebutton("right")))));
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
 };
 export const Padding = () => {
   return (h("div", null,

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/components/sqm-titled-section/sqm-titled-section.js

@@ -11,18 +11,21 @@ export class TitledSection {
      * @uiName Text Align
      * @uiType string
      * @uiEnum ["left", "center", "right"]
+     * @uiEnumNames ["Left", "Center", "Right"]
      */
     this.textAlign = "left";
     /**
      * @uiName Label margin style
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.labelMargin = "small";
     /**
      * @uiName Section padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+     * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
      */
     this.padding = "none";
     withHooks(this);
@@ -76,6 +79,9 @@ export class TitledSection {
           }, {
             "text": "[\"left\", \"center\", \"right\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"Left\", \"Center\", \"Right\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -108,6 +114,9 @@ export class TitledSection {
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },
@@ -140,6 +149,9 @@ export class TitledSection {
           }, {
             "text": "[\"none\", \"xxx-small\", \"xx-small\", \"x-small\", \"small\", \"medium\", \"large\", \"x-large\", \"xx-large\", \"xxx-large\", \"xxxx-large\"]",
             "name": "uiEnum"
+          }, {
+            "text": "[\"None\", \"XXX-Small\", \"XX-Small\", \"X-Small\", \"Small\", \"Medium\", \"Large\", \"X-Large\", \"XX-Large\", \"XXX-Large\", \"XXXX-Large\"]",
+            "name": "uiEnumNames"
           }],
         "text": ""
       },

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/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

@@ -5,13 +5,12 @@ export function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   const { show } = states;
-  console.log("table", 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": {
@@ -37,14 +36,13 @@ export function GenericTableView(props) {
           background: "#FFFFFF",
           border: "1px solid var(--sl-color-neutral-200)",
           boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-          borderRadius: "var(--sl-border-radius-medium)",
+          borderRadius: "var(--sl-border-radius-large)",
           padding: "var(--sl-spacing-medium)",
           fontSize: "var(--sl-font-size-small)",
           marginBottom: "var(--sl-spacing-large)",
         },
         "& td": {
           display: "grid",
-          gridTemplateColumns: "0.5fr 0.5fr",
           borderTop: "none",
           padding: "0",
           marginBottom: "var(--sl-spacing-medium)",
@@ -85,9 +83,8 @@ export function GenericTableView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  if (show === "empty") {
+  if (show === "empty")
     return elements.emptyElement;
-  }
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
@@ -96,12 +93,13 @@ export function GenericTableView(props) {
       h("tbody", null,
         show === "loading" && elements.loadingElement,
         show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
-          console.log("ROW", row);
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
-            console.log("CELL", cell);
-            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/collection/tables/useChildElements.js

@@ -2,7 +2,9 @@ import { useHost } from "@saasquatch/component-boilerplate";
 import { useEffect, useState } from "@saasquatch/universal-hooks";
 export function useChildElements() {
   const host = useHost();
-  const initialState = host.children.length ? Array.from(host.children) : [];
+  const initialState = host.children.length
+    ? Array.from(host.children)
+    : [];
   const [childElements, setChildElements] = useState(initialState);
   useEffect(() => {
     const observer = new MutationObserver(() => {

package/dist/esm/{GenericTableView-4a1292db.js → GenericTableView-6924630b.js}

@@ -6,13 +6,12 @@ function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   const { show } = states;
-  console.log("table", 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": {
@@ -38,14 +37,13 @@ function GenericTableView(props) {
           background: "#FFFFFF",
           border: "1px solid var(--sl-color-neutral-200)",
           boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
-          borderRadius: "var(--sl-border-radius-medium)",
+          borderRadius: "var(--sl-border-radius-large)",
           padding: "var(--sl-spacing-medium)",
           fontSize: "var(--sl-font-size-small)",
           marginBottom: "var(--sl-spacing-large)",
         },
         "& td": {
           display: "grid",
-          gridTemplateColumns: "0.5fr 0.5fr",
           borderTop: "none",
           padding: "0",
           marginBottom: "var(--sl-spacing-medium)",
@@ -86,9 +84,8 @@ function GenericTableView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  if (show === "empty") {
+  if (show === "empty")
     return elements.emptyElement;
-  }
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
@@ -97,12 +94,13 @@ function GenericTableView(props) {
       h("tbody", null,
         show === "loading" && elements.loadingElement,
         show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => {
-          console.log("ROW", row);
           return (h("tr", { style: {
               borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
             }, part: "table-row" }, row.map((cell, j) => {
-            console.log("CELL", cell);
-            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" },