@saasquatch/mint-components 1.6.2-2 → 1.7.0-1

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

@@ -1,540 +1,540 @@
-import { h } from "@stencil/core";
-import { GenericTableView } from "../../tables/GenericTableView";
-import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
-import scenario from "./referral-table.feature";
-export default {
-  title: "Components/Referral Table",
-  parameters: {
-    scenario,
-  },
-};
-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("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
-const baseReward = {
-  id: "123",
-  type: "CREDIT",
-  value: 19,
-  unit: "POINT",
-  name: "test",
-  dateGiven: 1627427794891,
-  dateScheduledFor: 1628146800000,
-  dateExpires: 1629010800000,
-  dateCancelled: 134400,
-  dateRedeemed: 0,
-  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,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: ["Customer", "Status", "Date converted", "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 singleTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: ["Customer", "Status", "Date converted", "Rewards"],
-    rows: [
-      [
-        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),
-      ],
-    ],
-  },
-};
-const hideLabelProps = {
-  data: {
-    textOverrides: {
-      showLabels: false,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-};
-const customButtonProps = {
-  states: {
-    hasPrev: true,
-    hasNext: true,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "CUSTOM PREVIOUS TEXT",
-      moreLabel: "CUSTOM NEXT TEXT",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-};
-const longCellTextTableProps = {
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: [
-      "Name",
-      "Email",
-      "DOB",
-      "City",
-      "State/Province",
-      "Country",
-      "Referrals",
-      "Reward Earnings",
-      "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,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: "",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: [
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
-      "Email",
-      "DOB",
-      "City",
-      "State/Province",
-      "Country",
-      "Referrals",
-      "Rewarddddddddddd Earningsssssssssssss",
-      "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 = (hidden = false) => ({
-  states: {
-    hasPrev: false,
-    hasNext: true,
-    show: "rows",
-    namespace: "sqm-referral-table",
-  },
-  data: {
-    textOverrides: {
-      showLabels: true,
-      prevLabel: "Prev",
-      moreLabel: "View More",
-    },
-    hiddenColumns: hidden ? "0,1,2,3,4,5,6,7,8" : "-1",
-    mdBreakpoint: 799,
-    smBreakpoint: 599,
-  },
-  callbacks: {
-    prevPage: () => console.log("Prev"),
-    nextPage: () => console.log("Next"),
-  },
-  elements: {
-    columns: [
-      "Name",
-      "Email",
-      "DOB",
-      "City",
-      "State/Province",
-      "Country",
-      "Referrals",
-      "Reward Earnings",
-      "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(GenericTableView, Object.assign({}, simpleUserTableProps));
-};
-export const SingleEntry = () => {
-  return h(GenericTableView, Object.assign({}, singleTableProps));
-};
-export const HiddenLabelsTable = () => {
-  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
-};
-export const CustomButtonTextTable = () => {
-  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
-};
-export const FullUserTable = () => {
-  return h(GenericTableView, Object.assign({}, fullUserTableProps()));
-};
-export const LongCellTextTable = () => {
-  return h(GenericTableView, Object.assign({}, longCellTextTableProps));
-};
-export const LongColumnTextTable = () => {
-  return h(GenericTableView, Object.assign({}, longColumnTextTableProps));
-};
-export const EmptyTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        show: "empty",
-        namespace: "sqm-referral-table",
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        hiddenColumns: "",
-        mdBreakpoint: 799,
-        smBreakpoint: 599,
-      },
-      elements: {
-        emptyElement: emptyElement,
-        loadingElement: loadingElement,
-        columns: ["Name", "Email", "DOB"],
-        rows: [],
-      },
-    } }));
-};
-export const LoadingTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        show: "loading",
-        namespace: "sqm-referral-table",
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        hiddenColumns: "",
-        mdBreakpoint: 799,
-        smBreakpoint: 599,
-      },
-      elements: {
-        emptyElement: emptyElement,
-        loadingElement: loadingElement,
-        columns: ["Name", "Email", "DOB"],
-        rows: [],
-      },
-    } }));
-};
-export const FullRewardsTable = () => {
-  return (h("sqm-referral-table", { demoData: {
-      states: {
-        hasPrev: false,
-        hasNext: false,
-        show: "rows",
-        namespace: "sqm-referral-table",
-      },
-      data: {
-        textOverrides: {
-          showLabels: true,
-          prevLabel: "Prev",
-          moreLabel: "View More",
-        },
-        hiddenColumns: "1",
-        mdBreakpoint: 799,
-        smBreakpoint: 599,
-      },
-      elements: {
-        emptyElement: emptyElement,
-        loadingElement: loadingElement,
-        columns: [
-          "User",
-          "Rewards",
-          "Status",
-          "Date Started",
-          "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 },
-              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-            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 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-            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 },
-              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
-            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 }),
-          ],
-        ],
-      },
-    } }));
-};
-export const ColumnsMobileHidden = () => {
-  return h(GenericTableView, Object.assign({}, fullUserTableProps(true)));
-};
+import { h } from "@stencil/core";
+import { GenericTableView } from "../../tables/GenericTableView";
+import { AvailableNoExpiry, Cancelled, PendingNoUnpend, } from "./ReferralTableRewardsCell.stories";
+import scenario from "./referral-table.feature";
+export default {
+  title: "Components/Referral Table",
+  parameters: {
+    scenario,
+  },
+};
+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("sqm-empty", { "empty-state-image": "https://res.cloudinary.com/saasquatch/image/upload/v1644360953/squatch-assets/empty_referral2.png", "empty-state-header": "View your referral details", "empty-state-text": "Track the status of your referrals and rewards earned by referring friends" }));
+const baseReward = {
+  id: "123",
+  type: "CREDIT",
+  value: 19,
+  unit: "POINT",
+  name: "test",
+  dateGiven: 1627427794891,
+  dateScheduledFor: 1628146800000,
+  dateExpires: 1629010800000,
+  dateCancelled: 134400,
+  dateRedeemed: 0,
+  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,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Customer", "Status", "Date converted", "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 singleTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: ["Customer", "Status", "Date converted", "Rewards"],
+    rows: [
+      [
+        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),
+      ],
+    ],
+  },
+};
+const hideLabelProps = {
+  data: {
+    textOverrides: {
+      showLabels: false,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+};
+const customButtonProps = {
+  states: {
+    hasPrev: true,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "CUSTOM PREVIOUS TEXT",
+      moreLabel: "CUSTOM NEXT TEXT",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+};
+const longCellTextTableProps = {
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: [
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "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,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: "",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: [
+      "Lorem ipsum dolor sit amet consectetur adipisicing elit.",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Rewarddddddddddd Earningsssssssssssss",
+      "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 = (hidden = false) => ({
+  states: {
+    hasPrev: false,
+    hasNext: true,
+    show: "rows",
+    namespace: "sqm-referral-table",
+  },
+  data: {
+    textOverrides: {
+      showLabels: true,
+      prevLabel: "Prev",
+      moreLabel: "View More",
+    },
+    hiddenColumns: hidden ? "0,1,2,3,4,5,6,7,8" : "-1",
+    mdBreakpoint: 799,
+    smBreakpoint: 599,
+  },
+  callbacks: {
+    prevPage: () => console.log("Prev"),
+    nextPage: () => console.log("Next"),
+  },
+  elements: {
+    columns: [
+      "Name",
+      "Email",
+      "DOB",
+      "City",
+      "State/Province",
+      "Country",
+      "Referrals",
+      "Reward Earnings",
+      "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(GenericTableView, Object.assign({}, simpleUserTableProps));
+};
+export const SingleEntry = () => {
+  return h(GenericTableView, Object.assign({}, singleTableProps));
+};
+export const HiddenLabelsTable = () => {
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...hideLabelProps })));
+};
+export const CustomButtonTextTable = () => {
+  return (h(GenericTableView, Object.assign({}, { ...simpleUserTableProps, ...customButtonProps })));
+};
+export const FullUserTable = () => {
+  return h(GenericTableView, Object.assign({}, fullUserTableProps()));
+};
+export const LongCellTextTable = () => {
+  return h(GenericTableView, Object.assign({}, longCellTextTableProps));
+};
+export const LongColumnTextTable = () => {
+  return h(GenericTableView, Object.assign({}, longColumnTextTableProps));
+};
+export const EmptyTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        show: "empty",
+        namespace: "sqm-referral-table",
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        hiddenColumns: "",
+        mdBreakpoint: 799,
+        smBreakpoint: 599,
+      },
+      elements: {
+        emptyElement: emptyElement,
+        loadingElement: loadingElement,
+        columns: ["Name", "Email", "DOB"],
+        rows: [],
+      },
+    } }));
+};
+export const LoadingTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        show: "loading",
+        namespace: "sqm-referral-table",
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        hiddenColumns: "",
+        mdBreakpoint: 799,
+        smBreakpoint: 599,
+      },
+      elements: {
+        emptyElement: emptyElement,
+        loadingElement: loadingElement,
+        columns: ["Name", "Email", "DOB"],
+        rows: [],
+      },
+    } }));
+};
+export const FullRewardsTable = () => {
+  return (h("sqm-referral-table", { demoData: {
+      states: {
+        hasPrev: false,
+        hasNext: false,
+        show: "rows",
+        namespace: "sqm-referral-table",
+      },
+      data: {
+        textOverrides: {
+          showLabels: true,
+          prevLabel: "Prev",
+          moreLabel: "View More",
+        },
+        hiddenColumns: "1",
+        mdBreakpoint: 799,
+        smBreakpoint: 599,
+      },
+      elements: {
+        emptyElement: emptyElement,
+        loadingElement: loadingElement,
+        columns: [
+          "User",
+          "Rewards",
+          "Status",
+          "Date Started",
+          "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 },
+              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+            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 }], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+            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 },
+              ], statusText: "{status, select, AVAILABLE {Available} CANCELLED {Cancelled} PENDING {Pending} EXPIRED {Expired} REDEEMED {Redeemed} other {Not available} }", statusLongText: "{status, select, AVAILABLE {Reward expiring on} CANCELLED {Reward cancelled on} PENDING {Available on} EXPIRED {Reward expired on} REDEEMED {Redeemed} other {Not available} }", fuelTankText: "Your code is", rewardReceivedText: "Reward received on", expiringText: "Expiring in", pendingForText: "{status} for {date}" }),
+            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 }),
+          ],
+        ],
+      },
+    } }));
+};
+export const ColumnsMobileHidden = () => {
+  return h(GenericTableView, Object.assign({}, fullUserTableProps(true)));
+};