@saasquatch/mint-components 1.5.6-2 → 1.6.0-0

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 require('./use-callback-e754042f.js');
-const index_module = require('./index.module-fb61a163.js');
+const index_module = require('./index.module-b9e4136f.js');
 require('./extends-08099afd.js');
-const useChildElements = require('./useChildElements-24538fc5.js');
+const useChildElements = require('./useChildElements-315320bd.js');
 const utils = require('./utils-6847bc06.js');
 
 const TabsView = ({ content, placement, }) => {
@@ -38,7 +38,7 @@ const TabsView = ({ content, placement, }) => {
 const REVEAL_EVENT = "sq:reveal";
 function useTabs() {
   const rawTabs = useChildElements.useChildElements();
-  const host = index_module.P();
+  const host = index_module.S();
   const tabs = stencilHooks_module.useMemo(() => rawTabs
     .filter((tab) => tab.tagName === "SQM-TAB")
     .map((tab, i) => {

package/dist/cjs/{useChildElements-24538fc5.js → useChildElements-315320bd.js}

@@ -1,10 +1,10 @@
 'use strict';
 
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-fb61a163.js');
+const index_module = require('./index.module-b9e4136f.js');
 
 function useChildElements() {
-  const host = index_module.P();
+  const host = index_module.S();
   const initialState = host.children.length
     ? Array.from(host.children)
     : [];

package/dist/cjs/{useReferralTable-1e71d2dc.js → useReferralTable-32fed069.js}

@@ -2,9 +2,9 @@
 
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-fb61a163.js');
-const reRender = require('./re-render-7248fc06.js');
-const useChildElements = require('./useChildElements-24538fc5.js');
+const index_module = require('./index.module-b9e4136f.js');
+const reRender = require('./re-render-90da06a2.js');
+const useChildElements = require('./useChildElements-315320bd.js');
 
 const debug = stencilHooks_module.browser("sq:useReferralTable");
 const CSS_NAMESPACE = "sqm-referral-table";
@@ -178,8 +178,8 @@ const GET_REFERRAL_DATA = index_module.dist.gql `
 `;
 function useReferralTable(props, emptyElement, loadingElement) {
   var _a, _b, _c;
-  const user = index_module.ie();
-  const programIdContext = index_module.M();
+  const user = index_module.ae();
+  const programIdContext = index_module.A();
   // Default to context, overriden by props
   const programId = (_a = props.programId) !== null && _a !== void 0 ? _a : programIdContext;
   // If no program ID, shows all programs
@@ -201,15 +201,15 @@ function useReferralTable(props, emptyElement, loadingElement) {
     loading: false,
     page: 0,
   });
-  const locale = index_module.An();
-  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.sn(GET_REFERRER_DATA, {
+  const locale = index_module.O();
+  const { data: referrerResponse, loading: referrerLoading, refetch, } = index_module.pn(GET_REFERRER_DATA, {
     programId: programId === "classic" ? null : programId,
     rewardFilter,
     locale,
   }, !props.showReferrer || !(user === null || user === void 0 ? void 0 : user.jwt));
   const referrerData = (_b = referrerResponse === null || referrerResponse === void 0 ? void 0 : referrerResponse.viewer) === null || _b === void 0 ? void 0 : _b.referredByReferral;
   const showReferrerRow = props.showReferrer && !!(referrerData === null || referrerData === void 0 ? void 0 : referrerData.dateReferralStarted);
-  const { envelope: referralData, states, callbacks, } = index_module.mn(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
+  const { envelope: referralData, states, callbacks, } = index_module.In(GET_REFERRAL_DATA, (data) => { var _a; return (_a = data === null || data === void 0 ? void 0 : data.viewer) === null || _a === void 0 ? void 0 : _a.referrals; }, {
     limit: props.perPage,
     offset: 0,
   }, {

package/dist/collection/components/sqm-asset-card/sqm-asset-card.js

@@ -33,7 +33,7 @@ export class AssetCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Banner Title",
+            "text": "Banner title",
             "name": "uiName"
           }],
         "text": ""
@@ -53,7 +53,7 @@ export class AssetCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Banner Image",
+            "text": "Banner image",
             "name": "uiName"
           }],
         "text": ""

package/dist/collection/components/sqm-big-stat/sqm-big-stat.js

@@ -7,17 +7,12 @@ import { isDemo, useHost } from "@saasquatch/component-boilerplate";
 /**
  *
  * @uiName Big Stat
- * @slots [{"name":"","title":"Stat Text"}]
- * @example Points Balance -  <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/rewardBalance/CREDIT/POINT/value/global">Points Balance</sqm-big-stat>
- * @example GiftCards Earned - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/integrationRewardsCountFiltered/AVAILABLE/global">Giftcards Earned</sqm-big-stat>
- * @example Referrals - <sqm-big-stat flex-reverse="true" alignment="left" stat-type="/referralsCount">Referrals</sqm-big-stat>
-  */
+ * @slot the description of the component
+ */
 export class BigStat {
   constructor() {
     /**
-     * Controls the order of the stat value & description column
-     *
-     * @uiName Flex Reverse
+     * @uiName Flex Reverse - controls the order of the stat value & description column
      */
     this.flexReverse = false;
     this.ignored = true;
@@ -54,7 +49,7 @@ export class BigStat {
             "name": "uiName"
           }, {
             "text": "{\"version\": 1.1}",
-            "name": "uiWidgetOptions"
+            "name": "uiOptions"
           }],
         "text": "Select what type of stat to display. Manual paths are also supported."
       },
@@ -73,10 +68,10 @@ export class BigStat {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Flex Reverse",
+            "text": "Flex Reverse - controls the order of the stat value & description column",
             "name": "uiName"
           }],
-        "text": "Controls the order of the stat value & description column"
+        "text": ""
       },
       "attribute": "flex-reverse",
       "reflect": false,
@@ -94,7 +89,7 @@ export class BigStat {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Alignment",
+            "text": "Alignment - controls the alignment of the flexbox",
             "name": "uiName"
           }, {
             "text": "string",
@@ -106,7 +101,7 @@ export class BigStat {
             "text": "[\"Left\", \"Right\", \"Center\"]",
             "name": "uiEnumNames"
           }],
-        "text": "Controls the alignment of the flexbox"
+        "text": ""
       },
       "attribute": "alignment",
       "reflect": false

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

@@ -6,7 +6,7 @@ import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
  * @uiName Brand Container
- * @slots [{"name":"","title":"Branded Content"}]
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
  */
 export class BrandComponent {
   constructor() {

package/dist/collection/components/sqm-card-feed/sqm-card-feed.js

@@ -4,7 +4,6 @@ import { getProps } from "../../utils/utils";
 import { CardFeedView } from "./sqm-card-feed-view";
 /**
  * @uiName Card Feed
- * @slots [{"name":"","title":"Cards"}]
  */
 export class CardFeed {
   constructor() {

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

@@ -13,21 +13,20 @@ 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";
     /**
@@ -69,7 +68,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox Name Attribute",
+            "text": "Checkbox name attribute",
             "name": "uiName"
           }],
         "text": ""
@@ -89,7 +88,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox Label",
+            "text": "Checkbox label",
             "name": "uiName"
           }],
         "text": ""
@@ -110,10 +109,10 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox Label Link",
+            "text": "Checkbox label link\nUsed with link text if the checkbox label contains {labelLink}",
             "name": "uiName"
           }],
-        "text": "Used with link text if the checkbox label contains {labelLink}"
+        "text": ""
       },
       "attribute": "checkbox-label-link",
       "reflect": false,
@@ -131,7 +130,7 @@ export class CheckboxField {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Checkbox Label Link Text",
+            "text": "Checkbox label link text",
             "name": "uiName"
           }],
         "text": ""
@@ -152,7 +151,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 Shorthand CSS border syntax
-     * @uiName Border Style
+     * Uses CSS border style 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 Shorthand CSS border syntax"
+        "text": "Uses CSS border style 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": "Edit Profile Text",
+            "text": "Enable editing button text",
             "name": "uiName"
           }],
-        "text": "Enable editing button text"
+        "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": "Info Button Text",
+            "text": "Update info button text",
             "name": "uiName"
           }],
         "text": ""
@@ -121,7 +121,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "First Name Label",
+            "text": "First name field label",
             "name": "uiName"
           }],
         "text": ""
@@ -141,7 +141,7 @@ export class EditProfile {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Last Name Label",
+            "text": "Last name field 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 Region",
+            "text": "Show or hide current region",
             "name": "uiName"
           }],
-        "text": "Show or hide current region"
+        "text": ""
       },
       "attribute": "showregion",
       "reflect": false

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

@@ -2,7 +2,6 @@ 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": "Alert Type",
+            "text": "Type of alert",
             "name": "uiName"
           }],
         "text": ""
@@ -67,10 +67,10 @@ export class FormMessage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Icon",
+            "text": "Icon to use in alert",
             "name": "uiName"
           }],
-        "text": "Icon to use in alert"
+        "text": ""
       },
       "attribute": "icon",
       "reflect": false

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

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

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

@@ -4,8 +4,6 @@ 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() {
@@ -40,9 +38,7 @@ export class HeroImage {
      */
     this.imageMobilePos = "top";
     /**
-     * CTA Button Opens Link in New Tab
-     *
-     * @uiName Button New Tab
+     * @uiName CTA Button Link Open in New Tab
      */
     this.buttonNewTab = false;
     /**
@@ -388,10 +384,10 @@ export class HeroImage {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Button New Tab",
+            "text": "CTA Button Link Open in New Tab",
             "name": "uiName"
           }],
-        "text": "CTA Button Opens Link in New Tab"
+        "text": ""
       },
       "attribute": "button-new-tab",
       "reflect": false,

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

@@ -1,8 +1,5 @@
 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,6 +79,78 @@ 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",
@@ -285,12 +357,12 @@ export const PointsLeaderboard = () => {
     },
     data: {
       rankType: "rowNumber",
-      leaderboard: users,
+      leaderboard: pointsUsers,
       rowNumber: 10,
       viewerRank: {
         firstName: "Viktor",
         lastInitial: "V",
-        textValue: "82",
+        textValue: "82 Points",
         rank: 1,
         rowNumber: 1,
       },