@saasquatch/mint-components 1.3.3-4 → 1.4.0-0

package/dist/collection/stories/ReferralTable.stories.js

@@ -1,475 +1,475 @@
-import { h } from "@stencil/core";
-import { ReferralTableView } from "../components/sqm-referral-table/sqm-referral-table-view";
-import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
-export default {
-  title: "Referral Table",
-};
-const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null))),
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5 },
-      h("sl-skeleton", null)))));
-const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
-  h("sqm-table-row", null,
-    h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, "No Referrals Yet"))));
-const baseReward = {
-  id: "123",
-  type: "CREDIT",
-  value: 19,
-  unit: "POINT",
-  name: "test",
-  dateGiven: 1627427794891,
-  dateScheduledFor: 1628146800000,
-  dateExpires: 1629010800000,
-  dateCancelled: 134400,
-  fuelTankCode: "ABC",
-  fuelTankType: "Code",
-  currency: "null",
-  prettyValue: "19 Points",
-  statuses: ["AVAILABLE"],
-  globalRewardKey: "Key",
-  rewardRedemptionTransactions: {
-    data: [
-      {
-        exchangedRewards: {
-          data: [
-            {
-              prettyValue: "19 Points",
-              type: "CREDIT",
-              fuelTankCode: "ABC",
-              globalRewardKey: "Key",
-            },
-          ],
-        },
-      },
-    ],
-  },
-};
-// Reward Status Cases
-const pendingReward = {
-  statuses: ["AVAILABLE", "PENDING"],
-};
-const cancelledReward = {
-  statuses: ["PENDING", "CANCELLED"],
-  dateCancelled: 1626850800000,
-};
-const expiredReward = {
-  statuses: ["EXPIRED", "AVAILABLE"],
-  dateExpires: 1626850800000,
-};
-const availableReward = {
-  statuses: ["AVAILABLE"],
-};
-const nullExpiresIn = {
-  dateExpires: null,
-};
-const simpleUserTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    loading: false,
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    referralData: [],
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: [
-      h("div", null, "Name"),
-      h("div", null, "Email"),
-      h("div", null, "DOB"),
-      h("div", null, "Rewards"),
-    ],
-    rows: [
-      [
-        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
-        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
-        h("sqm-referral-table-user-cell", { name: "07/15/1902" }),
-        h(PendingNoUnpend, null),
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
-        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
-        h("sqm-referral-table-user-cell", { name: "09/05/1999" }),
-        h(AvailableNoExpiry, null),
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
-        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
-        h("sqm-referral-table-user-cell", { name: "12/21/1984" }),
-        h(Cancelled, null),
-      ],
-    ],
-  },
-};
-const hideLabelProps = {
-  data: {
-    textOverrides: {
-      showLabels: false,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-  },
-};
-const customButtonProps = {
-  states: {
-    hasPrev: true,
-    hasNext: true,
-    loading: false,
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "CUSTOM PREVIOUS TEXT",
-      moreLabel: "CUSTOM NEXT TEXT",
-    },
-  },
-};
-const longCellTextTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    loading: false,
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    referralData: [],
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  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"),
-    ],
-    rows: [
-      [
-        h("sqm-referral-table-user-cell", { name: "Bartholomew Christopher-Johnston Wallace" }),
-        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: -22089600000 }),
-        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
-        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "14,000,000" }),
-        h("sqm-referral-table-user-cell", { name: "$800,000,000,000" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
-        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 800000000000 }),
-        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
-        h("sqm-referral-table-cell", { innerTemplate: "California" }),
-        h("sqm-referral-table-user-cell", { name: "US" }),
-        h("sqm-referral-table-user-cell", { name: "1" }),
-        h("sqm-referral-table-user-cell", { name: "$5" }),
-        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
-        ,
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
-        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 444703707000 }),
-        h("sqm-referral-table-user-cell", { name: "Toronto" }),
-        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "10" }),
-        h("sqm-referral-table-user-cell", { name: "$71" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-        ,
-      ],
-    ],
-  },
-};
-const longColumnTextTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    loading: false,
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    referralData: [],
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  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"),
-    ],
-    rows: [
-      [
-        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
-        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
-        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
-        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "14" }),
-        h("sqm-referral-table-user-cell", { name: "$88" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
-        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 800000000000 }),
-        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
-        h("sqm-referral-table-cell", { innerTemplate: "California" }),
-        h("sqm-referral-table-user-cell", { name: "US" }),
-        h("sqm-referral-table-user-cell", { name: "1" }),
-        h("sqm-referral-table-user-cell", { name: "$5" }),
-        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
-        ,
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
-        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 444703707000 }),
-        h("sqm-referral-table-user-cell", { name: "Toronto" }),
-        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "10" }),
-        h("sqm-referral-table-user-cell", { name: "$71" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-        ,
-      ],
-    ],
-  },
-};
-const fullUserTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    loading: false,
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    referralData: [],
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  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"),
-    ],
-    rows: [
-      [
-        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
-        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
-        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
-        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "14" }),
-        h("sqm-referral-table-user-cell", { name: "$88" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
-        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 800000000000 }),
-        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
-        h("sqm-referral-table-cell", { innerTemplate: "California" }),
-        h("sqm-referral-table-user-cell", { name: "US" }),
-        h("sqm-referral-table-user-cell", { name: "1" }),
-        h("sqm-referral-table-user-cell", { name: "$5" }),
-        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
-        ,
-      ],
-      [
-        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
-        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
-        h("sqm-referral-table-date-cell", { date: 444703707000 }),
-        h("sqm-referral-table-user-cell", { name: "Toronto" }),
-        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
-        h("sqm-referral-table-user-cell", { name: "Canada" }),
-        h("sqm-referral-table-user-cell", { name: "10" }),
-        h("sqm-referral-table-user-cell", { name: "$71" }),
-        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-        ,
-      ],
-    ],
-  },
-};
-export const SimpleUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, simpleUserTableProps));
-};
-export const HiddenLabelsTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
-};
-export const CustomButtonTextTable = () => {
-  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
-};
-export const FullUserTable = () => {
-  return h(ReferralTableView, Object.assign({}, fullUserTableProps));
-};
-export const LongCellTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longCellTextTableProps));
-};
-export const LongColumnTextTable = () => {
-  return h(ReferralTableView, Object.assign({}, longColumnTextTableProps));
-};
-export const EmptyTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        loading: false,
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        referralData: [],
-      },
-      elements: {
-        emptyElement: emptyElement,
-        loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
-        rows: [],
-      },
-    } }));
-};
-export const LoadingTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        loading: true,
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        referralData: [],
-      },
-      elements: {
-        emptyElement: emptyElement,
-        loadingElement: loadingElement,
-        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
-        rows: [],
-      },
-    } }));
-};
-export const FullRewardsTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        loading: false,
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        referralData: [],
-      },
-      elements: {
-        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"),
-        ],
-        rows: [
-          [
-            h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
-            h("sqm-referral-table-rewards-cell", { rewards: [
-                { ...baseReward, ...availableReward },
-                { ...baseReward, ...pendingReward },
-                { ...baseReward, ...cancelledReward },
-              ] }),
-            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
-            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
-          ],
-          [
-            h("sqm-referral-table-user-cell", { name: "Sarah Williams" }),
-            h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }] }),
-            h("sqm-referral-table-status-cell", { statusText: "Incomplete", converted: false }),
-            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
-            h("sqm-referral-table-date-cell", { date: null }),
-          ],
-          [
-            h("sqm-referral-table-user-cell", { name: "Marvin Smith" }),
-            h("sqm-referral-table-rewards-cell", { rewards: [
-                { ...baseReward, ...nullExpiresIn },
-                { ...baseReward, ...pendingReward },
-              ] }),
-            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
-            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
-            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
-          ],
-        ],
-      },
-    } }));
-};
+import { h } from "@stencil/core";
+import { ReferralTableView } from "../components/sqm-referral-table/sqm-referral-table-view";
+import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
+export default {
+  title: "Referral Table",
+};
+const loadingElement = (h("div", { slot: "loading", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))),
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null)))));
+const emptyElement = (h("div", { slot: "empty", style: { display: "contents" } },
+  h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5, style: { textAlign: "center" } }, "No Referrals Yet"))));
+const baseReward = {
+  id: "123",
+  type: "CREDIT",
+  value: 19,
+  unit: "POINT",
+  name: "test",
+  dateGiven: 1627427794891,
+  dateScheduledFor: 1628146800000,
+  dateExpires: 1629010800000,
+  dateCancelled: 134400,
+  fuelTankCode: "ABC",
+  fuelTankType: "Code",
+  currency: "null",
+  prettyValue: "19 Points",
+  statuses: ["AVAILABLE"],
+  globalRewardKey: "Key",
+  rewardRedemptionTransactions: {
+    data: [
+      {
+        exchangedRewards: {
+          data: [
+            {
+              prettyValue: "19 Points",
+              type: "CREDIT",
+              fuelTankCode: "ABC",
+              globalRewardKey: "Key",
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
+// Reward Status Cases
+const pendingReward = {
+  statuses: ["AVAILABLE", "PENDING"],
+};
+const cancelledReward = {
+  statuses: ["PENDING", "CANCELLED"],
+  dateCancelled: 1626850800000,
+};
+const expiredReward = {
+  statuses: ["EXPIRED", "AVAILABLE"],
+  dateExpires: 1626850800000,
+};
+const availableReward = {
+  statuses: ["AVAILABLE"],
+};
+const nullExpiresIn = {
+  dateExpires: null,
+};
+const simpleUserTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    loading: false,
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    referralData: [],
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: [
+      h("div", null, "Name"),
+      h("div", null, "Email"),
+      h("div", null, "DOB"),
+      h("div", null, "Rewards"),
+    ],
+    rows: [
+      [
+        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
+        h("sqm-referral-table-user-cell", { name: "07/15/1902" }),
+        h(PendingNoUnpend, null),
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
+        h("sqm-referral-table-user-cell", { name: "09/05/1999" }),
+        h(AvailableNoExpiry, null),
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
+        h("sqm-referral-table-user-cell", { name: "12/21/1984" }),
+        h(Cancelled, null),
+      ],
+    ],
+  },
+};
+const hideLabelProps = {
+  data: {
+    textOverrides: {
+      showLabels: false,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+  },
+};
+const customButtonProps = {
+  states: {
+    hasPrev: true,
+    hasNext: true,
+    loading: false,
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "CUSTOM PREVIOUS TEXT",
+      moreLabel: "CUSTOM NEXT TEXT",
+    },
+  },
+};
+const longCellTextTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    loading: false,
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    referralData: [],
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  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"),
+    ],
+    rows: [
+      [
+        h("sqm-referral-table-user-cell", { name: "Bartholomew Christopher-Johnston Wallace" }),
+        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: -22089600000 }),
+        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
+        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "14,000,000" }),
+        h("sqm-referral-table-user-cell", { name: "$800,000,000,000" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 800000000000 }),
+        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
+        h("sqm-referral-table-cell", { innerTemplate: "California" }),
+        h("sqm-referral-table-user-cell", { name: "US" }),
+        h("sqm-referral-table-user-cell", { name: "1" }),
+        h("sqm-referral-table-user-cell", { name: "$5" }),
+        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
+        ,
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 444703707000 }),
+        h("sqm-referral-table-user-cell", { name: "Toronto" }),
+        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "10" }),
+        h("sqm-referral-table-user-cell", { name: "$71" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+        ,
+      ],
+    ],
+  },
+};
+const longColumnTextTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    loading: false,
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    referralData: [],
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  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"),
+    ],
+    rows: [
+      [
+        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
+        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
+        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "14" }),
+        h("sqm-referral-table-user-cell", { name: "$88" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 800000000000 }),
+        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
+        h("sqm-referral-table-cell", { innerTemplate: "California" }),
+        h("sqm-referral-table-user-cell", { name: "US" }),
+        h("sqm-referral-table-user-cell", { name: "1" }),
+        h("sqm-referral-table-user-cell", { name: "$5" }),
+        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
+        ,
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 444703707000 }),
+        h("sqm-referral-table-user-cell", { name: "Toronto" }),
+        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "10" }),
+        h("sqm-referral-table-user-cell", { name: "$71" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+        ,
+      ],
+    ],
+  },
+};
+const fullUserTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    loading: false,
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    referralData: [],
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  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"),
+    ],
+    rows: [
+      [
+        h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+        h("sqm-referral-table-user-cell", { name: "jsmith@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: -2128547493000 }),
+        h("sqm-referral-table-user-cell", { name: "Vancouver" }),
+        h("sqm-referral-table-cell", { innerTemplate: "British Columbia" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "14" }),
+        h("sqm-referral-table-user-cell", { name: "$88" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Bob Williams" }),
+        h("sqm-referral-table-user-cell", { name: "bwill@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 800000000000 }),
+        h("sqm-referral-table-user-cell", { name: "Los Angeles" }),
+        h("sqm-referral-table-cell", { innerTemplate: "California" }),
+        h("sqm-referral-table-user-cell", { name: "US" }),
+        h("sqm-referral-table-user-cell", { name: "1" }),
+        h("sqm-referral-table-user-cell", { name: "$5" }),
+        h("sqm-referral-table-status-cell", { statusText: "In progress", converted: false }),
+        ,
+      ],
+      [
+        h("sqm-referral-table-user-cell", { name: "Sarah Joseph" }),
+        h("sqm-referral-table-user-cell", { name: "sjoseph@gmail.com" }),
+        h("sqm-referral-table-date-cell", { date: 444703707000 }),
+        h("sqm-referral-table-user-cell", { name: "Toronto" }),
+        h("sqm-referral-table-cell", { innerTemplate: "Ontario" }),
+        h("sqm-referral-table-user-cell", { name: "Canada" }),
+        h("sqm-referral-table-user-cell", { name: "10" }),
+        h("sqm-referral-table-user-cell", { name: "$71" }),
+        h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+        ,
+      ],
+    ],
+  },
+};
+export const SimpleUserTable = () => {
+  return h(ReferralTableView, Object.assign({}, simpleUserTableProps));
+};
+export const HiddenLabelsTable = () => {
+  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
+};
+export const CustomButtonTextTable = () => {
+  return (h(ReferralTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
+};
+export const FullUserTable = () => {
+  return h(ReferralTableView, Object.assign({}, fullUserTableProps));
+};
+export const LongCellTextTable = () => {
+  return h(ReferralTableView, Object.assign({}, longCellTextTableProps));
+};
+export const LongColumnTextTable = () => {
+  return h(ReferralTableView, Object.assign({}, longColumnTextTableProps));
+};
+export const EmptyTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        loading: false,
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        referralData: [],
+      },
+      elements: {
+        emptyElement: emptyElement,
+        loadingElement: loadingElement,
+        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        rows: [],
+      },
+    } }));
+};
+export const LoadingTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        loading: true,
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        referralData: [],
+      },
+      elements: {
+        emptyElement: emptyElement,
+        loadingElement: loadingElement,
+        columns: [h("div", null, "Name"), h("div", null, "Email"), h("div", null, "DOB")],
+        rows: [],
+      },
+    } }));
+};
+export const FullRewardsTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        loading: false,
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        referralData: [],
+      },
+      elements: {
+        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"),
+        ],
+        rows: [
+          [
+            h("sqm-referral-table-user-cell", { name: "Joe Smith" }),
+            h("sqm-referral-table-rewards-cell", { rewards: [
+                { ...baseReward, ...availableReward },
+                { ...baseReward, ...pendingReward },
+                { ...baseReward, ...cancelledReward },
+              ] }),
+            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
+            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
+          ],
+          [
+            h("sqm-referral-table-user-cell", { name: "Sarah Williams" }),
+            h("sqm-referral-table-rewards-cell", { rewards: [{ ...baseReward, ...expiredReward }] }),
+            h("sqm-referral-table-status-cell", { statusText: "Incomplete", converted: false }),
+            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
+            h("sqm-referral-table-date-cell", { date: null }),
+          ],
+          [
+            h("sqm-referral-table-user-cell", { name: "Marvin Smith" }),
+            h("sqm-referral-table-rewards-cell", { rewards: [
+                { ...baseReward, ...nullExpiresIn },
+                { ...baseReward, ...pendingReward },
+              ] }),
+            h("sqm-referral-table-status-cell", { statusText: "Complete", converted: true }),
+            h("sqm-referral-table-date-cell", { date: 1626764400000 }),
+            h("sqm-referral-table-date-cell", { date: 1627427794891 }),
+          ],
+        ],
+      },
+    } }));
+};