@saasquatch/mint-components 1.5.5 → 1.5.6-2

package/dist/collection/components/sqm-checkbox-field/sqm-checkbox-field.js

@@ -13,20 +13,21 @@ export class CheckboxField {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Checkbox label
+     * @uiName Checkbox Label
      */
     this.checkboxLabel = "By signing up you agree to the {labelLink}";
     /**
-     * @uiName Checkbox label link
      * Used with link text if the checkbox label contains {labelLink}
+     *
+     * @uiName Checkbox Label Link
      */
     this.checkboxLabelLink = "https://example.com";
     /**
-     * @uiName Checkbox label link text
+     * @uiName Checkbox Label Link Text
      */
     this.checkboxLabelLinkText = "Terms and Conditions";
     /**
-     * @uiName Unchecked error message
+     * @uiName Unchecked Error Message
      */
     this.errorMessage = "Must be checked";
     /**
@@ -68,7 +69,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox name attribute",
+            "text": "Checkbox Name Attribute",
             "name": "uiName"
           }],
         "text": ""
@@ -88,7 +89,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox label",
+            "text": "Checkbox Label",
             "name": "uiName"
           }],
         "text": ""
@@ -109,10 +110,10 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox label link\nUsed with link text if the checkbox label contains {labelLink}",
+            "text": "Checkbox Label Link",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Used with link text if the checkbox label contains {labelLink}"
       },
       "attribute": "checkbox-label-link",
       "reflect": false,
@@ -130,7 +131,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox label link text",
+            "text": "Checkbox Label Link Text",
             "name": "uiName"
           }],
         "text": ""
@@ -151,7 +152,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Unchecked error message",
+            "text": "Unchecked Error Message",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -11,8 +11,8 @@ import { getProps } from "../../utils/utils";
 export class DividedLayout {
   constructor() {
     /**
-     * Uses CSS border style syntax
-     * @uiName Border style
+     * Uses Shorthand CSS border syntax
+     * @uiName Border Style
      */
     this.dividerStyle = "1px solid #EAEAEA";
     withHooks(this);
@@ -66,10 +66,10 @@ export class DividedLayout {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Border style",
+            "text": "Border Style",
             "name": "uiName"
           }],
-        "text": "Uses CSS border style syntax"
+        "text": "Uses Shorthand CSS border syntax"
       },
       "attribute": "divider-style",
       "reflect": false,

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field.js

@@ -13,11 +13,11 @@ export class DropdownField {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Dropdown label
+     * @uiName Dropdown Label
      */
     this.dropdownLabel = "Select an option";
     /**
-     * @uiName Unselected error message
+     * @uiName Unselected Error Message
      */
     this.errorMessage = "Select an option";
     /**
@@ -61,7 +61,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Dropdown name attribute",
+            "text": "Dropdown Name Attribute",
             "name": "uiName"
           }],
         "text": ""
@@ -81,7 +81,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Dropdown label",
+            "text": "Dropdown Label",
             "name": "uiName"
           }],
         "text": ""
@@ -102,7 +102,7 @@ export class DropdownField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Unselected error message",
+            "text": "Unselected Error Message",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-edit-profile/sqm-edit-profile.js

@@ -61,10 +61,10 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Enable editing button text",
+            "text": "Edit Profile Text",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Enable editing button text"
       },
       "attribute": "editprofiletext",
       "reflect": false
@@ -81,7 +81,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Cancel button text",
+            "text": "Cancel Button Text",
             "name": "uiName"
           }],
         "text": ""
@@ -101,7 +101,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Update info button text",
+            "text": "Info Button Text",
             "name": "uiName"
           }],
         "text": ""
@@ -121,7 +121,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First name field label",
+            "text": "First Name Label",
             "name": "uiName"
           }],
         "text": ""
@@ -141,7 +141,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last name field label",
+            "text": "Last Name Label",
             "name": "uiName"
           }],
         "text": ""
@@ -161,7 +161,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Region field label",
+            "text": "Region Field Label",
             "name": "uiName"
           }],
         "text": ""
@@ -181,10 +181,10 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show or hide current region",
+            "text": "Show Region",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Show or hide current region"
       },
       "attribute": "showregion",
       "reflect": false

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

@@ -2,6 +2,7 @@ import { Component, h, Host, Prop } from "@stencil/core";
 import { EmptyStateView } from "./sqm-empty-view";
 /**
  * @uiName Empty State Content
+ * @validParents ["sqm-referral-table","sqm-rewards-table","sqm-leaderboard", "sqm-reward-exchange-list"]
  */
 export class HeroImage {
   render() {

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -47,7 +47,7 @@ export class FormMessage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Type of alert",
+            "text": "Alert Type",
             "name": "uiName"
           }],
         "text": ""
@@ -67,10 +67,10 @@ export class FormMessage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Icon to use in alert",
+            "text": "Icon",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Icon to use in alert"
       },
       "attribute": "icon",
       "reflect": false

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

@@ -9,17 +9,25 @@ import { getProps } from "../../utils/utils";
  */
 export class Hero {
   constructor() {
-    /** @uiName Number of columns in the layout */
+    /**
+     * Number of columns in the layout
+     *
+     * @uiName Columns
+     */
     this.columns = 1;
     /**
-    * Can either be an image url, colour or Shoelace variable.
-    *
-    * @uiName Background
-    */
+     * Can be an image url, colour or Shoelace variable.
+     *
+     * @uiName Background
+     */
     this.background = "var(--sl-color-gray-50)";
-    /** @uiName Padding size */
+    /** @uiName Padding Size */
     this.paddingSize = "large";
-    /** @uiName Wrap direction */
+    /**
+     * Flexbox wrap direction, accepts wrap or wrap-reverse
+     *
+     * @uiName Wrap Direction
+     */
     this.wrapDirection = "wrap";
     withHooks(this);
   }
@@ -49,10 +57,10 @@ export class Hero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Number of columns in the layout",
+            "text": "Columns",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Number of columns in the layout"
       },
       "attribute": "columns",
       "reflect": false,
@@ -73,7 +81,7 @@ export class Hero {
             "text": "Background",
             "name": "uiName"
           }],
-        "text": "Can either be an image url, colour or Shoelace variable."
+        "text": "Can be an image url, colour or Shoelace variable."
       },
       "attribute": "background",
       "reflect": false,
@@ -91,7 +99,7 @@ export class Hero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding size",
+            "text": "Padding Size",
             "name": "uiName"
           }],
         "text": ""
@@ -112,10 +120,10 @@ export class Hero {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Secondary background image or color (for use in right column)",
+            "text": "Secondary Background",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Secondary background image or color (for use in the right column)"
       },
       "attribute": "secondary-background",
       "reflect": false
@@ -132,10 +140,10 @@ export class Hero {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Wrap direction",
+            "text": "Wrap Direction",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Flexbox wrap direction, accepts wrap or wrap-reverse"
       },
       "attribute": "wrap-direction",
       "reflect": false,

package/dist/collection/components/sqm-hero-image/sqm-hero-image.js

@@ -4,6 +4,8 @@ import { getProps } from "../../utils/utils";
 import { HeroImageView } from "./sqm-hero-image-view";
 /**
  * @uiName Hero Image
+ * @example Two Column Layout - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="columns" image-pos="right" background-color="#F9F9F9"></sqm-hero-image>
+ * @example Overlay - <sqm-hero-image image-url="https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png" header="MyCompany Rewards" description="Refer a friend and earn up to $1200 in rewards" layout="overlay" image-pos="center" background-color="#F9F9F9" button-link="https://www.example.com" button-new-tab button-text="Earn!" image-percentage="45" overlay-opacity=".5" padding-image="small" padding-text="xxxx-large"></sqm-hero-image>
  */
 export class HeroImage {
   constructor() {
@@ -38,7 +40,9 @@ export class HeroImage {
      */
     this.imageMobilePos = "top";
     /**
-     * @uiName CTA Button Link Open in New Tab
+     * CTA Button Opens Link in New Tab
+     *
+     * @uiName Button New Tab
      */
     this.buttonNewTab = false;
     /**
@@ -384,10 +388,10 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "CTA Button Link Open in New Tab",
+            "text": "Button New Tab",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "CTA Button Opens Link in New Tab"
       },
       "attribute": "button-new-tab",
       "reflect": false,

package/dist/collection/components/sqm-hook-story-container/sqm-hook-story-container.js

@@ -1,5 +1,8 @@
 import { h, Component, State, Prop } from "@stencil/core";
 import * as hooks from "@saasquatch/stencil-hooks";
+/**
+ * @undocumented
+ */
 export class SqmHookStoryContainer {
   constructor() {
     this.ignored = true;

package/dist/collection/components/sqm-leaderboard/Leaderboard.stories.js

@@ -79,78 +79,6 @@ const users = [
     rowNumber: 10,
   },
 ];
-const pointsUsers = [
-  {
-    firstName: "",
-    lastInitial: "",
-    textValue: "82 Points",
-    rank: 1,
-    rowNumber: 1,
-  },
-  {
-    firstName: "MF",
-    lastInitial: "D",
-    textValue: "73 Points",
-    rank: 2,
-    rowNumber: 2,
-  },
-  {
-    firstName: "Freddie",
-    lastInitial: "G",
-    textValue: "64 Points",
-    rank: 3,
-    rowNumber: 3,
-  },
-  {
-    firstName: "Benny",
-    lastInitial: "B",
-    textValue: "55 Points",
-    rank: 4,
-    rowNumber: 4,
-  },
-  {
-    firstName: "Mos",
-    lastInitial: "D",
-    textValue: "46 Points",
-    rank: 5,
-    rowNumber: 5,
-  },
-  {
-    firstName: "Joe",
-    lastInitial: "S",
-    textValue: "42 Points",
-    rank: 6,
-    rowNumber: 6,
-  },
-  {
-    firstName: "Zach",
-    lastInitial: "H",
-    textValue: "41 Points",
-    rank: 7,
-    rowNumber: 7,
-  },
-  {
-    firstName: "Sarah",
-    lastInitial: "S",
-    textValue: "39 Points",
-    rank: 8,
-    rowNumber: 8,
-  },
-  {
-    firstName: "James",
-    lastInitial: "",
-    textValue: "33 Points",
-    rank: 9,
-    rowNumber: 9,
-  },
-  {
-    firstName: "",
-    lastInitial: "J",
-    textValue: "29 Points",
-    rank: 10,
-    rowNumber: 10,
-  },
-];
 const defaultStyles = {
   usersheading: "User",
   statsheading: "Referrals",
@@ -357,12 +285,12 @@ export const PointsLeaderboard = () => {
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: pointsUsers,
+      leaderboard: users,
       rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        textValue: "82 Points",
+        textValue: "82",
         rank: 1,
         rowNumber: 1,
       },

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

@@ -7,6 +7,9 @@ import { LeaderboardView } from "./sqm-leaderboard-view";
 import { useLeaderboard } from "./useLeaderboard";
 /**
  * @uiName Leaderboard
+ * @example Referral Converted Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topConvertedReferrers" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" > </sqm-empty></sqm-leaderboard>
+ * @example Referral Started Leaderboard - <sqm-leaderboard usersheading="Referrer" statsheading="Referrals" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topStartedReferrers" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to refer a friend and reach the top of the leaderboard" > </sqm-empty></sqm-leaderboard>
+ * @example Point Earners Leaderboard - <sqm-leaderboard usersheading="Users" statsheading="Points Earned" rankheading="Rank" rank-type="rowNumber" leaderboard-type="topPointEarners" show-rank anonymous-user="Anonymous User"> <sqm-empty empty-state-image="https://res.cloudinary.com/saasquatch/image/upload/v1644000223/squatch-assets/empty_leaderboard2.png" empty-state-header="View your rank in the leaderboard" empty-state-text="Be the first to earn points and reach the top of the leaderboard" ></sqm-empty></sqm-leaderboard>
  */
 export class Leaderboard {
   constructor() {
@@ -17,9 +20,8 @@ export class Leaderboard {
      */
     this.hideViewer = false;
     /**
-     * Text displayed for users without names in the leaderboard
-     *
-     * @uiName Anonymous User Name
+     * Title displayed for users without names
+     * @uiName Unknown User Text
      */
     this.anonymousUser = "Anonymous User";
     /**
@@ -150,7 +152,7 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Rank Column",
+            "text": "Show Leaderboard Rank",
             "name": "uiName"
           }],
         "text": ""
@@ -249,10 +251,10 @@ export class Leaderboard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Anonymous User Name",
+            "text": "Unknown User Text",
             "name": "uiName"
           }],
-        "text": "Text displayed for users without names in the leaderboard"
+        "text": "Title displayed for users without names"
       },
       "attribute": "anonymous-user",
       "reflect": false,
@@ -277,9 +279,9 @@ export class Leaderboard {
             "name": "uiWidget"
           }, {
             "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiOptions"
+            "name": "uiWidgetOptions"
           }],
-        "text": "Only count leaderboard activity within a given interval"
+        "text": ""
       },
       "attribute": "interval",
       "reflect": false

package/dist/collection/components/sqm-leaderboard-rank/sqm-leaderboard-rank.js

@@ -44,7 +44,7 @@ export class LeaderboardRank {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Default rank",
+            "text": "Default Rank",
             "name": "uiName"
           }, {
             "text": "string",
@@ -94,7 +94,7 @@ export class LeaderboardRank {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Leaderboard type",
+            "text": "Leaderboard Type",
             "name": "uiName"
           }, {
             "text": "string",
@@ -143,14 +143,14 @@ export class LeaderboardRank {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Leaderboard time interval",
+            "text": "Leaderboard Time Interval",
             "name": "uiName"
           }, {
             "text": "DateRange",
             "name": "uiWidget"
           }, {
             "text": "{\"allowPastDates\":true, \"months\": 1}",
-            "name": "uiOptions"
+            "name": "uiWidgetOptions"
           }],
         "text": ""
       },

package/dist/collection/components/sqm-name-fields/sqm-name-fields.js

@@ -11,11 +11,11 @@ export class NameFields {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName First name field label
+     * @uiName First Name label
      */
     this.firstNameLabel = "First Name";
     /**
-     * @uiName Last name field label
+     * @uiName Last Name label
      */
     this.lastNameLabel = "Last Name";
     withHooks(this);
@@ -39,7 +39,7 @@ export class NameFields {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First name field label",
+            "text": "First Name label",
             "name": "uiName"
           }],
         "text": ""
@@ -60,7 +60,7 @@ export class NameFields {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last name field label",
+            "text": "Last Name label",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-navigation-menu/sqm-navigation-menu.js

@@ -42,7 +42,7 @@ export class NavigationMenu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Include dropdown menu",
+            "text": "Include Dropdown Menu",
             "name": "uiName"
           }],
         "text": ""
@@ -62,10 +62,10 @@ export class NavigationMenu {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Label on the header menu",
+            "text": "Menu Label",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Label on the header menu"
       },
       "attribute": "menu-label",
       "reflect": false

package/dist/collection/components/sqm-navigation-sidebar/sqm-navigation-sidebar.js

@@ -2,7 +2,7 @@ import { withHooks } from "@saasquatch/stencil-hooks";
 import { Component, h, State } from "@stencil/core";
 import { NavigationSidebarView } from "./sqm-navigation-sidebar-view";
 /**
- * A holder for navigation menu items
+ * A container for navigation menu items
  *
  * @uiName Navigation Sidebar
  */

package/dist/collection/components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item.js

@@ -34,7 +34,7 @@ export class NavigationSidebarItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Navigation path",
+            "text": "Navigation Path",
             "name": "uiName"
           }],
         "text": ""