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

package/dist/collection/components/sqm-rewards-table/sqm-rewards-table.js

@@ -9,7 +9,7 @@ import { useChildElements } from "../../tables/useChildElements";
 import mockRewardData from "./mockRewardData";
 import { tryMethod, useRewardsTable } from "./useRewardsTable";
 /**
- * @uiName Rewards Table
+ * @uiName Reward Table
  */
 export class RewardsTable {
   constructor() {

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

@@ -4,7 +4,7 @@ export default {
 };
 export const ScrollTag = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll" }),
+    h("sqm-scroll", { "scroll-tag-name": "sqm-text", "button-text": "Scroll", "scroll-animation": "smooth" }),
     h("div", { style: { position: "absolute", bottom: "0" } },
       h("sqm-text", { slot: "label" },
         h("h3", null, "Earn more rewards"),
@@ -12,7 +12,15 @@ export const ScrollTag = () => {
 };
 export const ScrollId = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id" }),
+    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "smooth" }),
+    h("div", { style: { position: "absolute", bottom: "0" } },
+      h("sqm-text", { slot: "label", id: "my-id" },
+        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")))));
+};
+export const ScrollAutoAnimation = () => {
+  return (h("div", { style: { position: "relative", height: "2000px" } },
+    h("sqm-scroll", { "button-text": "Scroll", "scroll-id": "my-id", "scroll-animation": "auto" }),
     h("div", { style: { position: "absolute", bottom: "0" } },
       h("sqm-text", { slot: "label", id: "my-id" },
         h("h3", null, "Earn more rewards"),
@@ -20,7 +28,7 @@ export const ScrollId = () => {
 };
 export const ScrollTabGroup = () => {
   return (h("div", { style: { position: "relative", height: "2000px" } },
-    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3" }),
+    h("sqm-scroll", { "button-text": "Redeem rewards", "scroll-id": "tab-3", "scroll-animation": "smooth" }),
     h("div", { style: { position: "absolute", bottom: "0" }, innerHTML: `
               <sqm-tabs>
               <sqm-tab header="Leaderboard">
@@ -109,12 +117,9 @@ export const ShoelaceProps = () => {
     h("br", null),
     " ",
     h("hr", null),
-    h("h3", null, "Caret:"),
-    h("sqm-scroll", { caret: true }, "Button"),
-    h("br", null),
-    " ",
-    h("hr", null),
     h("h3", null, "Icon:"),
+    h("sqm-scroll", { "button-type": "primary", iconName: "facebook" }, "Icon Name"),
+    h("br", null),
     h("sqm-scroll", { iconName: "gear", iconSlot: "prefix" }, "Icon Slot Prefix"),
     h("br", null),
     h("sqm-scroll", { iconName: "gear", iconSlot: "suffix" }, "Icon Slot Suffix"),
@@ -131,22 +136,8 @@ export const ShoelaceProps = () => {
     h("br", null),
     " ",
     h("hr", null),
-    h("h3", null, "Disabled:"),
-    h("sqm-scroll", { disabled: true }, "Button"),
-    h("br", null),
-    " ",
-    h("hr", null),
-    h("h3", null, "Link:"),
-    h("sqm-scroll", { href: "https://example.com/" }, "Link"),
-    h("br", null),
-    h("sqm-scroll", { href: "https://example.com/", target: "_self" }, "Same Window"),
-    h("br", null),
-    h("sqm-scroll", { href: "/assets/images/wordmark.svg", download: "shoelace.svg" }, "Download"),
-    h("br", null),
-    " ",
-    h("hr", null),
     h("h3", null, "Mobile Friendly:"),
-    h("sqm-scroll", { "mobile-friendly": true }, "Button"),
+    h("sqm-scroll", { mobile: true }, "Button"),
     h("br", null),
     " ",
     h("hr", null)));

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,9 +49,9 @@ 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 {
@@ -50,14 +63,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 +88,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 +115,10 @@ export class Scroll {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Button Text",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "button-text",
@@ -110,7 +135,10 @@ export class Scroll {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Scroll Tag Name",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "scroll-tag-name",
@@ -127,7 +155,10 @@ export class Scroll {
       "required": false,
       "optional": true,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "Scroll Id",
+            "name": "uiName"
+          }],
         "text": ""
       },
       "attribute": "scroll-id",
@@ -144,30 +175,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 +202,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 +228,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 +248,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 +268,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 +288,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 +314,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 +332,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": "Mobile Button",
+            "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

@@ -17,36 +17,36 @@ export function ShareButtonView(props, children) {
   const vanillaStyle = `
     *::part(base) {
      border: none;
-			--sl-focus-ring-color-primary: ${props.backgroundcolor
-    ? props.backgroundcolor
+			--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;
@@ -72,6 +72,6 @@ export function ShareButtonView(props, children) {
     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)));
 }