@saasquatch/mint-components 1.5.0-4 → 1.5.0-43

package/dist/collection/stories/NewPortal.stories.js

@@ -2,8 +2,7 @@ import { h } from "@stencil/core";
 import { BigStatView } from "../components/sqm-big-stat/sqm-big-stat-view";
 import { ShareButtonView } from "../components/sqm-share-button/sqm-share-button-view";
 import { ShareLinkView } from "../components/sqm-share-link/sqm-share-link-view";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../styling/JSS";
 import { NavigationSidebarView } from "../components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemView } from "../components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { PortalSectionView } from "../components/sqm-titled-section/sqm-portal-section-view";
@@ -20,8 +19,7 @@ const style = {
     "text-decoration": "underline",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 const barProps = {
   data: {
@@ -130,10 +128,10 @@ export const Dashboard = () => {
             h("h1", null, "John Smith"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58 }), "Referrals"),
-          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000 }), "Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500 }), "Awaiting Payout"))),
+          h(BigStatView, Object.assign({}, { statvalue: "2,345", value: 234500, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "58", value: 58, loading: false }), "Referrals"),
+          h(BigStatView, Object.assign({}, { statvalue: "$10,540", value: 1054000, loading: false }), "Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$2,305", value: 230500, loading: false }), "Awaiting Payout"))),
       h(PortalContainerView, Object.assign({}, { direction: "column", padding: "xxx-large", gap: "xxx-large" }),
         h(PortalSectionView, Object.assign({}, {
           labelMargin: "x-large",
@@ -257,10 +255,10 @@ export const Commissions = () => {
               "program"))),
         })),
         h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000 }), "Total Earned"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000 }), "Available"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000 }), "Pending"),
-          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000 }), "Redeemed"))))));
+          h(BigStatView, Object.assign({}, { statvalue: "$ 1,000", value: 100000, loading: false }), "Total Earned"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 800", value: 80000, loading: false }), "Available"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 180", value: 18000, loading: false }), "Pending"),
+          h(BigStatView, Object.assign({}, { statvalue: "$ 20", value: 2000, loading: false }), "Redeemed"))))));
 };
 export const Activity = () => {
   return (h("sqm-divided-layout", { direction: "row" },
@@ -287,10 +285,10 @@ export const Activity = () => {
           label: (h("sqm-text", null,
             h("h3", null, "Referral Activity"))),
           content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000 }), "Total Referrals"),
-            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "Converted"),
-            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "Pending"),
-            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20 }), "Disqualified"))),
+            h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 100000, loading: false }), "Total Referrals"),
+            h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "Converted"),
+            h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "Pending"),
+            h(BigStatView, Object.assign({}, { statvalue: "20", value: 20, loading: false }), "Disqualified"))),
         }))),
       h(PortalSectionView, Object.assign({}, {
         labelMargin: "x-large",
@@ -298,8 +296,8 @@ export const Activity = () => {
         label: (h("sqm-text", null,
           h("h3", null, "Traffic Generated"))),
         content: (h(StatContainerView, Object.assign({}, { space: "64px" }),
-          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000 }), "Clicks"),
-          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800 }), "From share link"),
-          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180 }), "From share mediums"))),
+          h(BigStatView, Object.assign({}, { statvalue: "1,000", value: 1000, loading: false }), "Clicks"),
+          h(BigStatView, Object.assign({}, { statvalue: "800", value: 800, loading: false }), "From share link"),
+          h(BigStatView, Object.assign({}, { statvalue: "180", value: 180, loading: false }), "From share mediums"))),
       })))));
 };

package/dist/collection/styling/JSS.js

@@ -0,0 +1,9 @@
+import preset from "jss-preset-default";
+import { create } from "jss";
+export const jss = create(preset());
+export const createStyleSheet = (...args) => jss.createStyleSheet(...args);
+/**
+ * Use this preset instead of creating a new JSS instance everywhere
+ *
+ */
+export default jss;

package/dist/collection/tables/GenericTableView.js

@@ -1,51 +1,106 @@
 import { h } from "@stencil/core";
-import { TextSpanView } from "../components/sqm-text-span/sqm-text-span-view";
-import jss from "jss";
-import preset from "jss-preset-default";
 import { gap } from "../global/mixins";
-const style = {
-  THead: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-    "text-align": "left",
-  },
-  TCell: {
-    padding: "var(--sl-spacing-small) var(--sl-spacing-medium) var(--sl-spacing-small) 0",
-  },
-  TRow: {
-    "border-top": "1px solid #EAEAEA",
-  },
-  Table: {
-    "border-collapse": "collapse",
-    width: "100%",
-  },
-  ButtonContainer: {
-    display: "flex",
-    "justify-content": "flex-end",
-    "margin-top": "var(--sl-spacing-small)",
-    ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
-  },
-};
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
+import { createStyleSheet } from "../styling/JSS";
 export function GenericTableView(props) {
   const { states, data, callbacks, elements } = props;
   const { columns, rows } = elements;
   const { show } = states;
+  console.log(props);
+  const hiddenCols = data.hiddenColumns.split(",").map(Number);
+  const mobile = "@media (max-width: " + data.mdBreakpoint + "px)";
+  const tablet = "@media (min-width: " +
+    data.smBreakpoint +
+    "px) and (max-width: " +
+    data.mdBreakpoint +
+    "px)";
+  const style = {
+    Table: {
+      borderCollapse: "collapse",
+      tableLayout: "fixed",
+      width: "100%",
+      "& th": {
+        paddingBottom: "var(--sl-spacing-small)",
+        textAlign: "left",
+        fontWeight: "var(--sl-font-weight-semibold)",
+        overflowWrap: "anywhere",
+      },
+      "& tr": {},
+      "& td": {
+        borderTop: "1px solid var(--sl-color-neutral-200)",
+        padding: "var(--sl-spacing-small)",
+        paddingLeft: "0",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+      [mobile]: {
+        "& thead": {
+          display: "none",
+        },
+        "& tr": {
+          display: "block",
+          background: "#FFFFFF",
+          border: "1px solid var(--sl-color-neutral-200)",
+          boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+          borderRadius: "var(--sl-border-radius-medium)",
+          padding: "var(--sl-spacing-medium)",
+          fontSize: "var(--sl-font-size-small)",
+          marginBottom: "var(--sl-spacing-large)",
+        },
+        "& td": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          borderTop: "none",
+          padding: "0",
+          marginBottom: "var(--sl-spacing-medium)",
+          "&:first-child": {
+            textAlign: "left",
+          },
+          "&:before": {
+            content: "attr(data-label)",
+            whiteSpace: "nowrap",
+          },
+          "&:last-child": {
+            marginBottom: "0",
+          },
+          "&.hidden:before": {
+            content: "none",
+          },
+        },
+      },
+      [tablet]: {
+        "& tbody": {
+          display: "grid",
+          gridTemplateColumns: "0.5fr 0.5fr",
+          gap: "25px",
+        },
+      },
+    },
+    ButtonContainer: {
+      display: "flex",
+      "justify-content": "flex-end",
+      "margin-top": "var(--sl-spacing-small)",
+      ...gap({ direction: "row", size: "var(--sl-spacing-small)" }),
+    },
+    ButtonDisabled: {
+      "&::part(base)": {
+        opacity: "0.25",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", null,
     h("style", { type: "text/css" }, styleString),
     h("table", { class: sheet.classes.Table },
       data.textOverrides.showLabels && (h("thead", null,
-        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", { class: sheet.classes.THead },
-          h(TextSpanView, { type: "h3" }, column))))))),
+        h("tr", null, columns === null || columns === void 0 ? void 0 : columns.map((column) => (h("th", null, column)))))),
       h("tbody", null,
         show === "loading" && elements.loadingElement,
         show === "empty" && elements.emptyElement,
-        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { class: sheet.classes.TRow, style: {
+        show === "rows" && (rows === null || rows === void 0 ? void 0 : rows.map((row, i) => (h("tr", { style: {
             borderTop: `${!data.textOverrides.showLabels && i === 0 ? "none" : ""}`,
-          }, part: "table-row" }, row.map((cell) => (h("td", { class: sheet.classes.TCell },
-          h(TextSpanView, { type: "p" }, cell)))))))))),
+          }, part: "table-row" }, row.map((cell, j) => (h("td", { class: hiddenCols.includes(j) ? "hidden" : "", "data-label": columns[j] + ":" }, cell))))))))),
     h("div", { class: sheet.classes.ButtonContainer, part: states.namespace + "-button-wrapper" },
-      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.prevLabel),
-      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base" }, data.textOverrides.moreLabel))));
+      h("sl-button", { size: "small", disabled: !states.hasPrev, loading: show === "loading", onClick: callbacks.prevPage, exportparts: "base: defaultbutton-base", class: !states.hasPrev ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.prevLabel),
+      h("sl-button", { size: "small", loading: show === "loading", disabled: !states.hasNext, onClick: callbacks.nextPage, exportparts: "base: defaultbutton-base", class: !states.hasNext ? sheet.classes.ButtonDisabled : "" }, data.textOverrides.moreLabel))));
 }

package/dist/collection/tables/TableSlots.js

@@ -1,7 +1,15 @@
 import { h } from "@stencil/core";
 export function LoadingSlot() {
   return (h("slot", { name: "loading" },
-    h(LoadingSkeleton, null)));
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null),
+    h(LoadingRow, null)));
+}
+export function LoadingRow() {
+  return (h("sqm-table-row", null,
+    h("sqm-table-cell", { colspan: 5 },
+      h("sl-skeleton", null))));
 }
 export function LoadingSkeleton() {
   return (h("div", { style: { width: "100%" } },

package/dist/collection/utils/RequiredPropsError.js

@@ -1,8 +1,7 @@
 import { useHost } from "@saasquatch/component-boilerplate";
 import { useState } from "@saasquatch/universal-hooks";
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../styling/JSS";
 const style = {
   IconStyle: {
     display: "block",
@@ -22,8 +21,7 @@ const style = {
     margin: "30px",
   },
 };
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
+const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
 export function RequiredPropsError({ missingProps }) {
   if (!missingProps)

package/dist/collection/utils/utils.js

@@ -31,3 +31,11 @@ export function getMissingProps(props) {
   const missingProps = props.filter((prop) => !prop.value);
   return missingProps.length ? missingProps : false;
 }
+export function luxonLocale(locale) {
+  const splitLocale = locale === null || locale === void 0 ? void 0 : locale.split("_");
+  if (!splitLocale || splitLocale.length === 1)
+    return locale;
+  const language = splitLocale[0];
+  const country = splitLocale[1];
+  return `${language}-${country.toUpperCase()}`;
+}