@saasquatch/mint-components 1.5.0-73 → 1.5.0-77

package/dist/cjs/{useReferralTable-e473585e.js → useReferralTable-45f295ba.js}

@@ -3,7 +3,8 @@
 const index = require('./index-b0129cd6.js');
 const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
 const index_module = require('./index.module-54724339.js');
-const useChildElements = require('./useChildElements-4bc9b219.js');
+const reRender = require('./re-render-2f8d0f37.js');
+const useChildElements = require('./useChildElements-a68699b4.js');
 
 const CSS_NAMESPACE = "sqm-referral-table";
 const GET_REFERRER_DATA = index_module.dist.gql `
@@ -223,7 +224,7 @@ function useReferralTable(props, emptyElement, loadingElement) {
       callbacks.setCurrentPage(0);
     }
   }, [props.showReferrer]);
-  const tick = useChildElements.useRerenderListener();
+  const tick = reRender.useRerenderListener();
   const data = referralData === null || referralData === void 0 ? void 0 : referralData.data;
   const components = useChildElements.useChildElements();
   async function getComponentData(components) {

package/dist/collection/collection-manifest.json

@@ -62,16 +62,16 @@
     "./components/sqm-rewards-table/columns/sqm-rewards-table-status-column.js",
     "./components/sqm-route/sqm-route.js",
     "./components/sqm-router/sqm-router.js",
+    "./components/sqm-scroll/sqm-scroll.js",
     "./components/sqm-share-button/sqm-share-button.js",
     "./components/sqm-share-code/sqm-share-code.js",
     "./components/sqm-share-link/sqm-share-link.js",
     "./components/sqm-stat-container/sqm-stat-container.js",
     "./components/sqm-stencilbook/sqm-stencilbook.js",
     "./components/sqm-tab/sqm-tab.js",
-    "./components/sqm-tab-group/sqm-tab-group.js",
-    "./components/sqm-tab-panel/sqm-tab-panel.js",
     "./components/sqm-table-cell/sqm-table-cell.js",
     "./components/sqm-table-row/sqm-table-row.js",
+    "./components/sqm-tabs/sqm-tabs.js",
     "./components/sqm-task-card/sqm-task-card.js",
     "./components/sqm-text/sqm-text.js",
     "./components/sqm-text-span/sqm-text-span.js",

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

@@ -3,38 +3,50 @@ export default {
   title: "Components/Hero Image",
 };
 export const OverlayHeader = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayDescription = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayButton = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxx-small" }));
 };
 export const OverlayLong = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayLeft = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "left", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayCenter = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "center", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const OverlayRight = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "overlay", "image-pos": "right", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const OverlayCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
-export const OverlayCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.9", layout: "overlay" }));
+export const OverlayCustomOpacity = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/bTwu1Um.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", "text-color": "#fffc4b", "overlay-color": "#ff7f7f", "overlay-opacity": "0.3", layout: "overlay", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const Columns = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
+};
+export const ColumnsPadding = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "padding-image": "xxxx-large", "padding-text": "large" }));
+};
+export const ColumnsLong = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum", "button-text": "Start earning", layout: "columns", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsReverse = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", imagePos: "right", imageMobilePos: "bottom", "padding-image": "none", "padding-text": "xxxx-large" }));
 };
 export const ColumnsCustomPercentage = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/2evfTx7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "25%", "max-height": "150px", "max-width": "100%", paddingImage: "large", paddingText: "large" }));
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/MVgOJn7.png", description: "Be one of the top 3 referrers at the end of the year and receive Klip free for 1 year!", layout: "columns", "image-percentage": "33%", "padding-image": "large", "padding-text": "large", "background-color": "" }));
 };
-export const ColumnsCustom = () => {
-  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f" }));
+export const ColumnsCustomColors = () => {
+  return (h("sqm-hero-image", { "image-url": "https://i.imgur.com/yr6ER3R.png", header: "Klip Rewards", description: "Refer friends or complete tasks while using Klip to earn rewards", "button-text": "Start earning", layout: "columns", "text-color": "#fffc4b", "background-color": "#ff7f7f", "padding-image": "none", "padding-text": "xxxx-large" }));
 };

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

@@ -17,13 +17,11 @@ export function HeroImageView(props, children) {
     },
     Image: {
       display: "block",
-      maxWidth: props.maxWidth || "100%",
-      minHeight: props.minHeight || "300px",
+      maxWidth: "100%",
       objectFit: "cover",
       margin: "auto",
     },
     Background: {
-      minHeight: props.minHeight,
       backgroundImage: `url(${props.imageUrl})`,
       backgroundSize: "cover",
       backgroundPosition: props.imagePos || "center",
@@ -48,7 +46,7 @@ export function HeroImageView(props, children) {
         width: props.imagePercentage ? props.imagePercentage + "%" : "50%",
         padding: "var(--sl-spacing-" + props.paddingImage + ")",
         boxSizing: "border-box",
-        margin: props.maxHeight ? "auto" : "",
+        // margin: props.maxHeight ? "auto" : "",
         "@media (max-width: 599px)": {
           width: "100%",
         },
@@ -63,6 +61,7 @@ export function HeroImageView(props, children) {
         "@media (max-width: 599px)": {
           width: "100%",
           textAlign: "center",
+          padding: "calc(0.5*var(--sl-spacing-" + props.paddingText + "))",
         },
       },
       "@media (max-width: 599px)": {
@@ -120,10 +119,7 @@ export function HeroImageView(props, children) {
     return (h("div", null,
       h("div", { class: sheet.classes.Column },
         h("div", { class: "image-area" },
-          h("img", { class: sheet.classes.Image, src: props.imageUrl, style: {
-              minHeight: props.minHeight || "100%",
-              maxHeight: props.maxHeight,
-            } })),
+          h("img", { class: sheet.classes.Image, src: props.imageUrl })),
         h("div", { class: "text-area" },
           props.header && (h("div", { class: sheet.classes.Header }, props.header)),
           props.description && (h("div", { class: sheet.classes.Description }, props.description)),

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

@@ -7,10 +7,6 @@ import { HeroImageView } from "./sqm-hero-image-view";
  */
 export class HeroImage {
   constructor() {
-    /**
-     * @uiName Maximum Image Width
-     */
-    this.maxWidth = "100%";
     /**
      * @uiName Overlay Color
      * @uiWidget color
@@ -21,7 +17,7 @@ export class HeroImage {
      */
     this.overlayOpacity = "0.75";
     /**
-     * @uiName Image Link
+     * @uiName Image Layout
      * @uiType string
      * @uiEnum ["overlay", "columns"]
      */
@@ -48,13 +44,13 @@ export class HeroImage {
      */
     this.buttonNewTab = false;
     /**
-     * @uiName Padding Text
+     * @uiName Text Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
     this.paddingText = "xxxx-large";
     /**
-     * @uiName Padding Image
+     * @uiName Image Padding
      * @uiType string
      * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
      */
@@ -89,67 +85,6 @@ export class HeroImage {
       "attribute": "image-url",
       "reflect": false
     },
-    "minHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Minimum Image Height",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "min-height",
-      "reflect": false
-    },
-    "maxHeight": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Maximum Image Height",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "max-height",
-      "reflect": false
-    },
-    "maxWidth": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Maximum Image Width",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "max-width",
-      "reflect": false,
-      "defaultValue": "\"100%\""
-    },
     "overlayColor": {
       "type": "string",
       "mutable": false,
@@ -253,7 +188,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Image Link",
+            "text": "Image Layout",
             "name": "uiName"
           }, {
             "text": "string",
@@ -464,7 +399,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Text",
+            "text": "Text Padding",
             "name": "uiName"
           }, {
             "text": "string",
@@ -496,7 +431,7 @@ export class HeroImage {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Padding Image",
+            "text": "Image Padding",
             "name": "uiName"
           }, {
             "text": "string",

package/dist/collection/components/sqm-image/Image.stories.js

@@ -5,21 +5,24 @@ export default {
 export const Image = () => {
   return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png" });
 };
-export const ImageAlignLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "left" });
+export const ImageAlignmentLeft = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "left" }));
 };
-export const ImageAlignCenter = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "center" }));
+export const ImageAlignmentCenter = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "center" }));
 };
-export const ImageAlignRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", align: "right" }));
+export const ImageAlignmentRight = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", alignment: "right" }));
 };
 export const ImageMarginLeft = () => {
-  return h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px" });
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", left: "100px", alignment: "center" }));
 };
 export const ImageMarginRight = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", right: "100px", alignment: "center" }));
 };
 export const ImageBackground = () => {
-  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick" }));
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/tn47wOj.png", "background-color": "firebrick", alignment: "center" }));
+};
+export const ImageSizeConstrained = () => {
+  return (h("sqm-image", { "image-url": "https://i.imgur.com/oIiVdMM.jpg", minHeight: "192px", maxWidth: "192px" }));
 };

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

@@ -5,12 +5,12 @@ export function ImageView(props) {
     Container: {
       display: "flex",
       width: "100%",
-      justifyContent: props.align || "center",
+      justifyContent: props.alignment || "center",
       background: props.backgroundColor || "",
     },
     Image: {
       maxWidth: props.maxWidth || "100%",
-      maxHiehgt: props.maxHeight || "100%",
+      minHeight: props.minHeight || "100%",
       objectFit: "cover",
       marginLeft: props.left || "0",
       marginRight: props.right || "0",

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

@@ -12,7 +12,7 @@ export class Image {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      */
-    this.align = "center";
+    this.alignment = "center";
     this.ignored = true;
     withHooks(this);
   }
@@ -83,7 +83,7 @@ export class Image {
       "attribute": "right",
       "reflect": false
     },
-    "align": {
+    "alignment": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -106,7 +106,7 @@ export class Image {
           }],
         "text": ""
       },
-      "attribute": "align",
+      "attribute": "alignment",
       "reflect": false,
       "defaultValue": "\"center\""
     },

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

@@ -10,16 +10,12 @@ import { useLeaderboard } from "./useLeaderboard";
  */
 export class Leaderboard {
   constructor() {
-    /**
-     * @uiName Rank Heading
-     */
-    this.rankheading = "Rank";
     /**
      * Shows the current user's leaderboard information even if they are not in the top 10
      *
      * @uiName Show viewing user
      */
-    this.showUser = true;
+    this.showUser = false;
     /**
      * @uiName Title displayed for users without names
      */
@@ -63,13 +59,6 @@ export class Leaderboard {
       h("slot", null)));
   }
   static get is() { return "sqm-leaderboard"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["sqm-leaderboard.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sqm-leaderboard.css"]
-  }; }
   static get properties() { return {
     "usersheading": {
       "type": "string",
@@ -129,8 +118,7 @@ export class Leaderboard {
         "text": ""
       },
       "attribute": "rankheading",
-      "reflect": false,
-      "defaultValue": "\"Rank\""
+      "reflect": false
     },
     "showRank": {
       "type": "boolean",
@@ -171,7 +159,7 @@ export class Leaderboard {
       },
       "attribute": "show-user",
       "reflect": false,
-      "defaultValue": "true"
+      "defaultValue": "false"
     },
     "rankType": {
       "type": "string",
@@ -403,18 +391,47 @@ function useLeaderboardDemo(props) {
         anonymousUser: props.anonymousUser
           ? props.anonymousUser
           : "Anonymous User",
+        showRank: props.showRank,
       },
     },
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        {
+          firstName: "MF",
+          lastInitial: "D",
+          value: 73,
+          rank: 2,
+          rowNumber: 2,
+        },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
       ],
-      showUser: false,
+      showUser: props.showUser,
     },
     elements: {
       empty: (h(EmptySlot, { emptyStateImage: "https://i.imgur.com/KPGnPF8.png", emptyStateHeader: "View your rank in the leaderboard", emptyStateText: "Be the first to refer a friend and reach the top of the leaderboard" })),

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

@@ -342,7 +342,7 @@ function LoadingRow() {
       h("sl-skeleton", null))));
 }
 function useReferraltableDemo(props) {
-  return deepmerge({
+  const demoProps = deepmerge({
     states: {
       hasPrev: false,
       hasNext: false,
@@ -371,6 +371,8 @@ function useReferraltableDemo(props) {
       rows: [],
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
+  console.log("PROPS", demoProps);
+  return demoProps;
 }
 function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
   return (h("div", { slot: "empty", style: { display: "contents" } },

package/dist/collection/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.js

@@ -186,6 +186,7 @@ export function RewardExchangeView(props) {
       "& .text": {
         width: "50%",
         maxWidth: "400px",
+        minWidth: "330px",
         "@media (max-width: 799px)": {
           width: "auto",
           margin: "auto",

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { GenericTableView } from "../../tables/GenericTableView";
-import { DateCell, RewardsCellCreditFull, SourceCellReferral, StatusCellAvailable, } from "./RewardsTableCell.stories";
+import { DateCell, RewardsCellCreditCancelled, RewardsCellCreditFull, RewardsCellCreditLong, RewardsCellCreditPartial, RewardsCellCreditRedeemed, SourceCellDeletedUser, SourceCellManual, SourceCellReferral, SourceCellReferred, StatusCellAvailable, StatusCellAvailableExpiry, StatusCellCancelled, StatusCellRedeemed, } from "./RewardsTableCell.stories";
 export default {
   title: "Components/Rewards Table",
 };
@@ -29,6 +29,60 @@ const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } }
           h("sqm-text", { slot: "label" },
             h("h3", null, "View your referral details")),
           h("sqm-text", { slot: "content" }, "Track the status of your referrals and rewards earned by referring friends")))))));
+const rewardsTablePropsEmpty = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "empty",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    emptyElement: emptyElement,
+  },
+};
+const rewardsTablePropsLoading = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "loading",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "Next",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 899,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Rewards", "Status", "Source", "Date received"],
+    rows: [],
+    loadingElement: loadingElement,
+  },
+};
 const rewardsTableProps = {
   states: {
     hasPrev: false,
@@ -40,7 +94,7 @@ const rewardsTableProps = {
     textOverrides: {
       showLabels: true,
       prevLabel: "Prev",
-      moreLabel: "View More",
+      moreLabel: "Next",
     },
     hiddenColumns: "",
     mdBreakpoint: 899,
@@ -59,9 +113,39 @@ const rewardsTableProps = {
         h(SourceCellReferral, null),
         h(DateCell, null),
       ],
+      [
+        h(RewardsCellCreditCancelled, null),
+        h(StatusCellCancelled, null),
+        h(SourceCellDeletedUser, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditRedeemed, null),
+        h(StatusCellRedeemed, null),
+        h(SourceCellManual, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditPartial, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell, null),
+      ],
+      [
+        h(RewardsCellCreditLong, null),
+        h(StatusCellAvailableExpiry, null),
+        h(SourceCellReferred, null),
+        h(DateCell, null),
+      ],
     ],
   },
 };
-export const RewardsTable = () => {
+export const RewardsTableFull = () => {
   return h(GenericTableView, Object.assign({}, rewardsTableProps));
 };
+export const RewardsTableEmpty = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsEmpty));
+};
+export const RewardsTableLoading = () => {
+  return h(GenericTableView, Object.assign({}, rewardsTablePropsLoading));
+};