@saasquatch/mint-components 1.5.0-68 → 1.5.0-71

package/dist/collection/components/sqm-referral-card/ReferralCard.stories.js

@@ -2,12 +2,12 @@ import { h } from "@stencil/core";
 export default {
   title: "Components/Referral Card",
 };
-const media = (slot) => {
+export const media = (slot) => {
   return (h("sqm-portal-container", { gap: "large", slot: slot },
     "Get rewarded when your friend uses Klip",
     h("sqm-image", { "image-url": "https://i.imgur.com/IqB7GeS.png" })));
 };
-const sharebutton = (slot) => {
+export const sharebutton = (slot) => {
   return (h("sqm-portal-container", { gap: "large", slot: slot },
     h("sqm-text", null, "Choose how you want to share:"),
     h("sqm-text", null,
@@ -26,9 +26,6 @@ const timeline = (slot, count) => {
     count > 2 && (h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
     count > 3 && (h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
 };
-export const ReferralCardDefault = () => {
-  return h("sqm-referral-card", null);
-};
 export const ReferralCardA = () => {
   return (h("sqm-referral-card", null,
     media("left"),
@@ -79,63 +76,3 @@ export const ReferralCardDFlipped = () => {
     timeline("right", 4),
     sharebutton("left")));
 };
-export const TimelineWith1Reward = () => {
-  return (h("div", null,
-    h("sqm-timeline", null,
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" })),
-    h("br", null),
-    " ",
-    h("hr", null),
-    " ",
-    h("br", null),
-    h("sqm-timeline", { icon: "circle" },
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }))));
-};
-export const TimelineWith2Rewards = () => {
-  return (h("div", null,
-    h("sqm-timeline", null,
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" })),
-    h("br", null),
-    " ",
-    h("hr", null),
-    " ",
-    h("br", null),
-    h("sqm-timeline", { icon: "circle" },
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }))));
-};
-export const TimelineWith3Rewards = () => {
-  return (h("div", null,
-    h("sqm-timeline", null,
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
-      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" })),
-    h("br", null),
-    " ",
-    h("hr", null),
-    " ",
-    h("br", null),
-    h("sqm-timeline", { icon: "circle" },
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
-      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }))));
-};
-export const TimelineWith4Rewards = () => {
-  return (h("div", null,
-    h("sqm-timeline", null,
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
-      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
-      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" })),
-    h("br", null),
-    " ",
-    h("hr", null),
-    " ",
-    h("br", null),
-    h("sqm-timeline", { icon: "circle" },
-      h("sqm-timeline-entry", { reward: "75", unit: "points", desc: "Your friends signs up for a free trial" }),
-      h("sqm-timeline-entry", { reward: "$50", unit: "visa giftcard", desc: "Your friends signs up for Klip Personal" }),
-      h("sqm-timeline-entry", { reward: "$200", unit: "visa giftcard", desc: "Your friend qualifies as a good fit for Klip Team" }),
-      h("sqm-timeline-entry", { reward: "$1000", unit: "visa giftcard", desc: "Your friend purchases Klip Team" }))));
-};

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

@@ -25,8 +25,8 @@ export class ReferralCard {
   disconnectedCallback() { }
   render() {
     const slots = {
-      left: h("slot", { name: "left" }, " Hello "),
-      right: h("slot", { name: "right" }, " World "),
+      left: h("slot", { name: "left" }),
+      right: h("slot", { name: "right" }),
     };
     return (h(ReferralCardView, Object.assign({}, getProps(this), { slots: slots }),
       h("slot", null)));
@@ -34,46 +34,6 @@ export class ReferralCard {
   static get is() { return "sqm-referral-card"; }
   static get encapsulation() { return "shadow"; }
   static get properties() { return {
-    "header": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Header Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "header",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Description Text",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    },
     "padding": {
       "type": "string",
       "mutable": false,

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

@@ -23,15 +23,12 @@ const loadingElement = (h("div", { slot: "loading", style: { display: "contents"
 const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
   h("sqm-table-row", null,
     h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-      h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } },
-        h("img", { src: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", style: { width: "100px" } }),
-        h("div", null,
-          h("b", null, "View your referral details")),
-        h("div", { style: {
-            marginTop: "var(--sl-spacing-xx-small)",
-            fontSize: "var(--sl-font-size-small)",
-            color: "var(--sl-color-neutral-500)",
-          } }, "Track the status of your referrals and rewards earned by referring friends"))))));
+      h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+        h("sqm-image", { "image-url": "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", "max-width": "100px" }),
+        h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+          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 baseReward = {
   id: "123",
   type: "CREDIT",
@@ -106,12 +103,7 @@ const simpleUserTableProps = {
     nextPage: () => console.log("Next"),
   },
   elements: {
-    columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "Rewards"),
-    ],
+    columns: ["Customer", "Status", "Date converted", "Rewards"],
     rows: [
       [
         h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
@@ -187,15 +179,15 @@ const longCellTextTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Reward Earnings"),
-      h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -259,15 +251,15 @@ const longColumnTextTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Lorem ipsum dolor sit amet consectetur adipisicing elit."),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Rewarddddddddddd Earningsssssssssssss"),
-      h("div", null, "Status"),
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Rewarddddddddddd Earningsssssssssssss",
+      "Status",
     ],
     rows: [
       [
@@ -331,15 +323,15 @@ const fullUserTableProps = {
   },
   elements: {
     columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "City"),
-      h("div", null, "State/Province"),
-      h("div", null, "Country"),
-      h("div", null, "Referrals"),
-      h("div", null, "Reward Earnings"),
-      h("div", null, "Status"),
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "Status",
     ],
     rows: [
       [
@@ -419,7 +411,7 @@ export const EmptyTable = () => {
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -445,7 +437,7 @@ export const LoadingTable = () => {
       elements: {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        columns: ["Name", "Email", "DOB"],
         rows: [],
       },
     } }));
@@ -472,11 +464,11 @@ export const FullRewardsTable = () => {
         emptyElement: emptyElement,
         loadingElement: loadingElement,
         columns: [
-          h("div", null, "User"),
-          h("div", null, "Rewards"),
-          h("div", null, "Status"),
-          h("div", null, "Date Started"),
-          h("div", null, "Date Converted"),
+          "User",
+          "Rewards",
+          "Status",
+          "Date Started",
+          "Date Converted",
         ],
         rows: [
           [

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

@@ -26,20 +26,21 @@ export class ReferralTable {
     /** @uiName Hide Columns (Mobile View)  */
     this.mdBreakpoint = 899;
     /** @uiName Empty State Image Link  */
-    this.emptyStateImgUrl = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png";
+    this.emptyStateImage = "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png";
     /** @uiName Empty State Title  */
-    this.emptyStateTitle = "View your referral details";
+    this.emptyStateHeader = "View your referral details";
     /** @uiName Empty State Text  */
     this.emptyStateText = "Track the status of your referrals and rewards earned by referring friends";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const empty = (h(EmptySlot, { emptyStateImgUrl: this.emptyStateImgUrl, emptyStateTitle: this.emptyStateTitle, emptyStateText: this.emptyStateText }));
+    const empty = (h(EmptySlot, { emptyStateImage: this.emptyStateImage, emptyStateHeader: this.emptyStateHeader, emptyStateText: this.emptyStateText }));
     const loading = h(LoadingSlot, null);
     const { states, data, callbacks, elements } = isDemo()
       ? useReferraltableDemo(this)
       : useReferralTable(this, empty, loading);
+    console.log("elemente", elements);
     return (h(GenericTableView, { states: states, data: data, callbacks: callbacks, elements: elements }));
   }
   static get is() { return "sqm-referral-table"; }
@@ -233,7 +234,7 @@ export class ReferralTable {
       "reflect": false,
       "defaultValue": "899"
     },
-    "emptyStateImgUrl": {
+    "emptyStateImage": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -250,11 +251,11 @@ export class ReferralTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-img-url",
+      "attribute": "empty-state-image",
       "reflect": false,
       "defaultValue": "\"https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png\""
     },
-    "emptyStateTitle": {
+    "emptyStateHeader": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -271,7 +272,7 @@ export class ReferralTable {
           }],
         "text": ""
       },
-      "attribute": "empty-state-title",
+      "attribute": "empty-state-header",
       "reflect": false,
       "defaultValue": "\"View your referral details\""
     },
@@ -301,7 +302,7 @@ export class ReferralTable {
       "mutable": false,
       "complexType": {
         "original": "DemoData<GenericTableViewProps>",
-        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: VNode[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
+        "resolved": "{ states?: { hasPrev: boolean; hasNext: boolean; show: \"loading\" | \"empty\" | \"rows\"; namespace: string; }; data?: { textOverrides: { showLabels: boolean; prevLabel: string; moreLabel: string; }; hiddenColumns: string; mdBreakpoint: number; smBreakpoint: number; }; elements?: { columns: string[]; rows: VNode[][]; loading?: boolean; emptyElement?: VNode; loadingElement?: VNode; page?: number; }; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -360,7 +361,7 @@ function useReferraltableDemo(props) {
       referralData: [],
     },
     elements: {
-      emptyElement: (h(EmptySlot, { emptyStateImgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", emptyStateTitle: "View your referral details", emptyStateText: "Track the status of your referrals and rewards earned by referring\r\n\t\tfriends" })),
+      emptyElement: (h(EmptySlot, { emptyStateImage: "https://res.cloudinary.com/saasquatch/image/upload/v1642618031/squatch-assets/image_3_1.png", emptyStateHeader: "View your referral details", emptyStateText: "Track the status of your referrals and rewards earned by referring\r\n\t\tfriends" })),
       loadingElement: h(LoadingSlot, null),
       columns: [
         h("div", null, "User"),
@@ -371,17 +372,14 @@ function useReferraltableDemo(props) {
     },
   }, props.demoData || {}, { arrayMerge: (_, a) => a });
 }
-function EmptySlot({ emptyStateImgUrl, emptyStateTitle, emptyStateText, }) {
+function EmptySlot({ emptyStateImage, emptyStateHeader, emptyStateText, }) {
   return (h("div", { slot: "empty", style: { display: "contents" } },
     h("sqm-table-row", null,
       h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } },
-        h("div", { style: { padding: "var(--sl-spacing-xxx-large)" } },
-          h("img", { src: emptyStateImgUrl, style: { width: "100px" } }),
-          h("div", null,
-            h("b", null, emptyStateTitle)),
-          h("div", { style: {
-              marginTop: "var(--sl-spacing-xx-small)",
-              fontSize: "var(--sl-font-size-small)",
-              color: "var(--sl-color-neutral-500)",
-            } }, emptyStateText))))));
+        h("sqm-portal-container", { padding: "xxxx-large", gap: "medium" },
+          h("sqm-image", { "image-url": emptyStateImage, "max-width": "100px" }),
+          h("sqm-titled-section", { "label-margin": "xxx-small", "text-align": "center" },
+            h("sqm-text", { slot: "label" },
+              h("h3", null, emptyStateHeader)),
+            h("sqm-text", { slot: "content" }, emptyStateText)))))));
 }