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

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

@@ -2,10 +2,23 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, Prop, State } from "@stencil/core";
 import { useScroll } from "./useScroll";
 import { createStyleSheet } from "../../styling/JSS";
+/**
+ * @uiName Scroll
+ */
 export class Scroll {
   constructor() {
     this.ignored = true;
+    /**
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
+     */
     this.buttonType = "default";
+    /**
+     * @uiName Scroll Animation Style
+     * @uiType string
+     * @uiEnum ["smooth", "auto"]
+     */
     this.scrollAnimation = "smooth";
     withHooks(this);
   }
@@ -36,12 +49,13 @@ export class Scroll {
     const styleString = sheet.toString();
     const vanillaStyle = `
 		:host{
-			display: block;
+			display: contents;
 		}
-		${this.mobileFriendly &&
+		${this.mobile &&
       `
 		@media only screen and (max-width: 499px) {
 			:host {
+				display: block;
 				width: 100%;
 			}
 		}
@@ -50,14 +64,14 @@ export class Scroll {
     let classStack = "";
     if (this.outline)
       classStack += "outline ";
-    if (this.mobileFriendly)
+    if (this.mobile)
       classStack += "mobile ";
     return (h("div", { class: sheet.classes.Button },
       h("style", { type: "text/css" },
         vanillaStyle,
         styleString),
-      h("sl-button", { type: this.outline ? "primary" : this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, href: this.href, circle: this.circle, name: this.name, target: this.target, download: this.download, disabled: this.disabled, caret: this.caret, loading: this.loading, class: classStack },
-        this.iconSlot && this.iconName && (h("sl-icon", { slot: this.iconSlot, name: this.iconName })),
+      h("sl-button", { type: this.outline ? "primary" : this.buttonType, onClick: callbacks.scroll, size: this.size, pill: this.pill, circle: this.circle, class: classStack },
+        (this.iconSlot || this.iconName) && (h("sl-icon", { slot: this.iconSlot || "prefix", name: this.iconName })),
         this.buttonText,
         h("slot", null))));
   }
@@ -75,7 +89,16 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Button Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"default\", \"primary\", \"success\", \"neutral\", \"warning\", \"danger\", \"text\"]",
+            "name": "uiEnum"
+          }],
         "text": ""
       },
       "attribute": "button-type",
@@ -93,7 +116,10 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Button Text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "button-text",
@@ -110,7 +136,10 @@ export class Scroll {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Scroll Tag Name",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "scroll-tag-name",
@@ -127,7 +156,10 @@ export class Scroll {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Scroll Id",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "scroll-id",
@@ -144,30 +176,22 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Scroll Animation Style",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"smooth\", \"auto\"]",
+            "name": "uiEnum"
+          }],
         "text": ""
       },
       "attribute": "scroll-animation",
       "reflect": false,
       "defaultValue": "\"smooth\""
     },
-    "mobileFriendly": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "mobile-friendly",
-      "reflect": false
-    },
     "size": {
       "type": "string",
       "mutable": false,
@@ -179,7 +203,16 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Size",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"small\", \"medium\", \"large\"]",
+            "name": "uiEnum"
+          }],
         "text": ""
       },
       "attribute": "size",
@@ -196,8 +229,11 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Outline",
+            "name": "uiName"
+          }],
+        "text": "Draws an outlined button with primary color."
       },
       "attribute": "outline",
       "reflect": false
@@ -213,29 +249,15 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Pill",
+            "name": "uiName"
+          }],
+        "text": "Draws a pill-style button with rounded edges."
       },
       "attribute": "pill",
       "reflect": false
     },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "href",
-      "reflect": false
-    },
     "circle": {
       "type": "boolean",
       "mutable": false,
@@ -247,30 +269,16 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Circle",
+            "name": "uiName"
+          }],
+        "text": "Draws a circle button."
       },
       "attribute": "circle",
       "reflect": false
     },
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "name",
-      "reflect": false
-    },
-    "target": {
+    "iconSlot": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -281,13 +289,22 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Icon Slot",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"prefix\", \"suffix\"]",
+            "name": "uiEnum"
+          }],
         "text": ""
       },
-      "attribute": "target",
+      "attribute": "icon-slot",
       "reflect": false
     },
-    "download": {
+    "iconName": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -298,47 +315,16 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "download",
-      "reflect": false
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "disabled",
-      "reflect": false
-    },
-    "caret": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Icon Name",
+            "name": "uiName"
+          }],
         "text": ""
       },
-      "attribute": "caret",
+      "attribute": "icon-name",
       "reflect": false
     },
-    "loading": {
+    "mobile": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -347,46 +333,15 @@ export class Scroll {
         "references": {}
       },
       "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "loading",
-      "reflect": false
-    },
-    "iconSlot": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "icon-slot",
-      "reflect": false
-    },
-    "iconName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
-        "tags": [],
-        "text": ""
+        "tags": [{
+            "text": "Full Width on Mobile",
+            "name": "uiName"
+          }],
+        "text": "Sets button to be full width in mobile resolutions"
       },
-      "attribute": "icon-name",
+      "attribute": "mobile",
       "reflect": false
     }
   }; }

package/dist/collection/components/sqm-share-button/ShareButton.stories.js

@@ -8,11 +8,11 @@ export default {
   },
 };
 export const WithIconPrefix = () => {
-  const props = { medium: "whatsapp", iconslot: "prefix" };
+  const props = { medium: "whatsapp", iconSlot: "prefix" };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithIconSuffix = () => {
-  const props = { medium: "whatsapp", iconslot: "suffix" };
+  const props = { medium: "whatsapp", iconSlot: "suffix" };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithIconOverride = () => {
@@ -30,15 +30,15 @@ export const TextStyle = () => {
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithoutIcon = () => {
-  const props = { medium: "facebook", hideicon: true };
+  const props = { medium: "facebook", hideIcon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithoutText = () => {
-  const props = { medium: "facebook", hidetext: true };
+  const props = { medium: "facebook", hideText: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const TextStyleWithoutIcon = () => {
-  const props = { medium: "facebook", type: "text", hideicon: true };
+  const props = { medium: "facebook", type: "text", hideIcon: true };
   return h(ShareButtonView, Object.assign({}, props), "Share");
 };
 export const WithCustomColors = () => {
@@ -47,7 +47,7 @@ export const WithCustomColors = () => {
     type: "text",
     backgroundcolor: "red",
     textcolor: "yellow",
-    iconslot: "prefix",
+    iconSlot: "prefix",
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };
@@ -55,8 +55,8 @@ export const WithCustomBorderRadius = () => {
   const props = {
     medium: "facebook",
     type: "text",
-    borderradius: 8,
-    iconslot: "prefix",
+    borderRadius: 8,
+    iconSlot: "prefix",
   };
   return h(ShareButtonView, Object.assign({}, props), "Facebook");
 };

package/dist/collection/components/sqm-share-button/sqm-share-button-view.js

@@ -13,40 +13,51 @@ const medium = {
   linemessenger: { color: "#00B300", text: "#fff", icon: "line" },
   pinterest: { color: "#e60023", text: "#fff", icon: "pinterest" },
 };
+const style = {
+  HostBlock: HostBlock,
+  buttonStyle: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: "0",
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
 export function ShareButtonView(props, children) {
   const vanillaStyle = `
-    *::part(base) {
-     border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
+	*::part(base) {
+	border: none;
+			--sl-focus-ring-color-primary: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}80!important;
 
-      background: ${props.backgroundcolor
-    ? props.backgroundcolor
+	background: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""};
-      color: ${props.textcolor
-    ? props.textcolor
+	color: ${props.textColor
+    ? props.textColor
     : props.medium
       ? medium[props.medium].text
       : ""};
-      border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
-    }
+	border-radius: ${props.borderRadius ? props.borderRadius + "px" : ""};
+	}
 
 	*::part(base):hover {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
+		border-color: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}D1!important;
 	}
-	
+
 	*::part(base):focus {
-		border-color: ${props.backgroundcolor
-    ? props.backgroundcolor
+		border-color: ${props.backgroundColor
+    ? props.backgroundColor
     : props.medium
       ? medium[props.medium].color
       : ""}D1!important;
@@ -56,22 +67,11 @@ export function ShareButtonView(props, children) {
 		position: relative;
 		top: 2%;
 	}
-  `;
-  const style = {
-    HostBlock: HostBlock,
-    buttonStyle: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      lineHeight: "0",
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
+	`;
   return props.hide ? (h(Host, { style: { display: "none" } })) : (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("style", { type: "text/css" }, vanillaStyle),
     h("sl-button", { class: sheet.classes.buttonStyle, loading: props.loading, disabled: props.disabled, pill: props.pill, size: props.size, type: props.type, onClick: props.onClick, exportparts: `base: ${props.type}sharebutton-base` },
-      !props.hideicon && (h("sl-icon", { slot: props.iconslot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
-      !props.hidetext && children)));
+      !props.hideIcon && (h("sl-icon", { slot: props.iconSlot || "prefix", name: props.icon ? props.icon : medium[props.medium].icon, exportparts: "icon" })),
+      !props.hideText && children)));
 }

package/dist/collection/components/sqm-share-button/sqm-share-button.js

@@ -7,7 +7,7 @@ import { getProps } from "../../utils/utils";
 import deepmerge from "deepmerge";
 /**
  * @uiName Share Button
- * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"]
+ * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideIcon"]
  */
 export class ShareButton {
   constructor() {
@@ -23,15 +23,15 @@ export class ShareButton {
      * @uiEnum ["prefix", "suffix" ]
      * @uiEnumNames ["Prefix", "Suffix"]
      */
-    this.iconslot = "prefix";
+    this.iconSlot = "prefix";
     /**
      * @uiName Hide the icon
      */
-    this.hideicon = false;
+    this.hideIcon = false;
     /**
      * @uiName Hide the text
      */
-    this.hidetext = false;
+    this.hideText = false;
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -101,7 +101,7 @@ export class ShareButton {
       "attribute": "program-id",
       "reflect": false
     },
-    "borderradius": {
+    "borderRadius": {
       "type": "number",
       "mutable": false,
       "complexType": {
@@ -118,10 +118,10 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "borderradius",
+      "attribute": "border-radius",
       "reflect": false
     },
-    "backgroundcolor": {
+    "backgroundColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -141,10 +141,10 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "backgroundcolor",
+      "attribute": "background-color",
       "reflect": false
     },
-    "textcolor": {
+    "textColor": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -164,7 +164,7 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "textcolor",
+      "attribute": "text-color",
       "reflect": false
     },
     "pill": {
@@ -263,7 +263,7 @@ export class ShareButton {
       "attribute": "size",
       "reflect": false
     },
-    "iconslot": {
+    "iconSlot": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -289,7 +289,7 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "iconslot",
+      "attribute": "icon-slot",
       "reflect": false,
       "defaultValue": "\"prefix\""
     },
@@ -313,7 +313,7 @@ export class ShareButton {
       "attribute": "icon",
       "reflect": false
     },
-    "hideicon": {
+    "hideIcon": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -330,11 +330,11 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "hideicon",
+      "attribute": "hide-icon",
       "reflect": false,
       "defaultValue": "false"
     },
-    "hidetext": {
+    "hideText": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -351,11 +351,11 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "hidetext",
+      "attribute": "hide-text",
       "reflect": false,
       "defaultValue": "false"
     },
-    "sharetitle": {
+    "shareTitle": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -372,10 +372,10 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "sharetitle",
+      "attribute": "share-title",
       "reflect": false
     },
-    "sharetext": {
+    "shareText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -392,7 +392,7 @@ export class ShareButton {
           }],
         "text": ""
       },
-      "attribute": "sharetext",
+      "attribute": "share-text",
       "reflect": false
     },
     "demoData": {
@@ -400,7 +400,7 @@ export class ShareButton {
       "mutable": false,
       "complexType": {
         "original": "DemoData<ShareButtonViewProps>",
-        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideicon?: boolean; hidetext?: boolean; iconslot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; }",
+        "resolved": "{ loading?: boolean; medium?: \"facebook\" | \"twitter\" | \"email\" | \"direct\" | \"linkedin\" | \"sms\" | \"fbmessenger\" | \"whatsapp\" | \"linemessenger\" | \"pinterest\" | \"reminder\" | \"unknown\"; disabled?: boolean; pill?: boolean; type?: \"text\" | \"default\" | \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\"; size?: \"small\" | \"medium\" | \"large\"; icon?: string; hideIcon?: boolean; hideText?: boolean; iconSlot?: \"prefix\" | \"suffix\"; onClick?: () => void; hide?: boolean; borderRadius?: number; backgroundColor?: string; textColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",