@saasquatch/mint-components 1.5.0-3 → 1.5.0-33

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

@@ -1,33 +1,55 @@
-import { Component, h, Host, Prop } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
-import { autoColorScaleCss, } from "../sqm-stencilbook/AutoColor";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { Component, h, Host, Prop } from "@stencil/core";
+import { buildFontsCssUrl } from "../../fonts/GoogleFonts";
+import { autoColorScaleCss } from "../sqm-stencilbook/AutoColor";
 /**
  *
- * @uiName Big Stat
- * @slot the description of the component
+ * @uiName Brand Container
+ * @slot Controls the brand color and font of Mint Components wrapped by the container.
  */
 export class BrandComponent {
   constructor() {
-    /**
-     * Controls the primary brand color used in the Mint Components library. Note that this
-     * does not affect vanilla components or other component libraries.
-     *
-     * @uiName Brand Color
-     */
-    this.brandColor = "#0000FF";
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
-    const css = autoColorScaleCss(this.brandColor);
+    var _a, _b;
+    const brandColor = (_a = this.brandColor) !== null && _a !== void 0 ? _a : "inherit";
+    const css = autoColorScaleCss(brandColor);
+    const sanitizedFont = ((_b = this.brandFont) !== null && _b !== void 0 ? _b : "").trim() || undefined;
+    useEffect(() => {
+      if (!sanitizedFont) {
+        // Nothing required in default case.
+        return;
+      }
+      const sheet = document.createElement("link");
+      sheet.setAttribute("href", buildFontsCssUrl(sanitizedFont));
+      sheet.setAttribute("rel", "stylesheet");
+      document.head.appendChild(sheet);
+      return () => document.head.removeChild(sheet);
+    }, [sanitizedFont]);
+    const font = sanitizedFont !== null && sanitizedFont !== void 0 ? sanitizedFont : "inherit";
     return (h(Host, null,
       h("style", null, `
           :host{
             display: contents;
           }
-          /* Selects any element placed inside a slot */
+          /* 
+          Selects any element placed inside a slot
+           - resets css variable inheritence for fonts
+          
+          */
           ::slotted(*) {
+            --sl-font-sans: "${font}", arial;
+            --sl-input-font-family: "${font}", arial;
+            --sl-tooltip-font-family: "${font}", arial;
+            font-family:  "${font}", arial;
+
             ${css}
+            --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+            --sl-input-border-color-focus: var(--sl-color-primary-500);
+            --sl-color-primary-hue: var(--sl-color-primary-500);
           }`),
       h("slot", null)));
   }
@@ -52,8 +74,27 @@ export class BrandComponent {
         "text": "Controls the primary brand color used in the Mint Components library. Note that this\r\ndoes not affect vanilla components or other component libraries."
       },
       "attribute": "brand-color",
-      "reflect": false,
-      "defaultValue": "\"#0000FF\""
+      "reflect": false
+    },
+    "brandFont": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Brand Font",
+            "name": "uiName"
+          }],
+        "text": "The brand font that you want to use"
+      },
+      "attribute": "brand-font",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/components/sqm-card-feed/CardFeed.stories.js

@@ -0,0 +1,100 @@
+import { h } from "@stencil/core";
+import { CardFeedView } from "./sqm-card-feed-view";
+import { TaskCardView } from "../sqm-task-card/sqm-task-card-view";
+export default {
+  title: "Components/Card Feed",
+};
+const props = {
+  width: 347,
+  gap: 24,
+};
+const taskCardProps = {
+  content: {
+    rewardAmount: "20",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Complete a survey",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: false,
+    steps: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 1,
+  },
+  states: { progress: 0, loading: false },
+};
+const coupleActions = {
+  content: {
+    rewardAmount: "40",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Comment on 5 articles",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: true,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    steps: true,
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 5,
+  },
+  states: { progress: 1, loading: false },
+};
+const manyActions = {
+  content: {
+    rewardAmount: "150",
+    rewardUnit: "SaaSquatch Points",
+    cardTitle: "Spend $500 at our Store",
+    description: "Description of action and reward. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget quisque commodo leo.",
+    repeatable: false,
+    showProgressBar: true,
+    steps: false,
+    completedText: "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}",
+    progressBarUnit: "$",
+    buttonText: "Take survey",
+    buttonLink: "https://example.com/",
+    openNewTab: false,
+    showExpiry: false,
+    rewardDuration: null,
+    expiryMessage: "Ends {endDate}",
+    startsOnMessage: "Starts {startDate}",
+    endedMessage: "Ended {endDate}",
+    finite: 0,
+    goal: 500,
+  },
+  states: {
+    progress: 100,
+    loading: false,
+  },
+};
+export const TaskCardGrid = () => {
+  return (h(CardFeedView, Object.assign({}, props),
+    h(TaskCardView, Object.assign({}, taskCardProps)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, taskCardProps)))),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h(TaskCardView, Object.assign({}, coupleActions)),
+    h("div", null,
+      h(TaskCardView, Object.assign({}, coupleActions))),
+    h("div", null,
+      h("div", null,
+        h(TaskCardView, Object.assign({}, taskCardProps)))),
+    h(TaskCardView, Object.assign({}, manyActions))));
+};

package/dist/collection/components/sqm-card-feed/sqm-card-feed-view.js

@@ -0,0 +1,26 @@
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function CardFeedView(props, children) {
+  const style = {
+    Container: {
+      columnGap: props.gap + "px",
+      columnWidth: props.width + "px",
+      "& > div": {
+        marginBottom: "24px",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  console.log(props);
+  const vanillaStyle = `
+    :host{
+      display: block;   
+    }
+  `;
+  return (h("div", null,
+    h("style", { type: "text/css" },
+      styleString,
+      vanillaStyle),
+    h("div", { class: sheet.classes.Container }, children)));
+}

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

@@ -0,0 +1,79 @@
+import { withHooks } from "@saasquatch/stencil-hooks";
+import { Component, h, Prop, State } from "@stencil/core";
+import { getProps } from "../../utils/utils";
+import { CardFeedView } from "./sqm-card-feed-view";
+/**
+ * @uiName Card Feed
+ */
+export class CardFeed {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Card Width
+     */
+    this.width = 347;
+    /**
+     * @uiName Column Gap
+     * @uiType number
+     */
+    this.gap = 24;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    return (h(CardFeedView, Object.assign({}, getProps(this)),
+      h("slot", null)));
+  }
+  static get is() { return "sqm-card-feed"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() { return {
+    "width": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Card Width",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "width",
+      "reflect": false,
+      "defaultValue": "347"
+    },
+    "gap": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Column Gap",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "gap",
+      "reflect": false,
+      "defaultValue": "24"
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
@@ -43,8 +42,7 @@ export function DividedLayoutView(props, children) {
     ${hostStyle}
   }
   `;
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   return (h("div", { class: sheet.classes.LayoutContainer },
     h("style", { type: "text/css" },

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

@@ -1,6 +1,5 @@
 import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
+import { createStyleSheet } from "../../styling/JSS";
 import { isMobile, isValidColor } from "../../utilities";
 const paddingList = [
   "var(--sl-spacing-xxx-small)",
@@ -101,8 +100,7 @@ export function HeroView(props) {
       minHeight: "100%",
     },
   };
-  jss.setup(preset());
-  const sheet = jss.createStyleSheet(style);
+  const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
   const vanillaStyle = `
   :host{    

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { EmptySkeleton, LoadingSkeleton } from "../../tables/TableSlots";
 import { LeaderboardView } from "./sqm-leaderboard-view";
 export default {
   title: "Components/Leaderboard",
@@ -11,8 +12,8 @@ const defaultStyles = {
   statsheading: "NEW TITANS",
 };
 const defaultElements = {
-  empty: h("div", null, "Empty"),
-  loadingstate: h("div", null, "Loading"),
+  empty: h(EmptySkeleton, { label: "No Users Yet" }),
+  loadingstate: h(LoadingSkeleton, null),
 };
 export const Empty = () => {
   const props = {
@@ -64,7 +65,13 @@ export const One = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
       ],
     },
     elements: {
@@ -85,11 +92,35 @@ export const Five = () => {
     data: {
       rankType: "rowNumber",
       leaderboard: [
-        { firstName: "Viktor", lastInitial: "V", value: 82, rank: 1 },
-        { firstName: "MF", lastInitial: "D", value: 73, rank: 2 },
-        { firstName: "Freddie", lastInitial: "G", value: 64, rank: 3 },
-        { firstName: "Benny", lastInitial: "B", value: 55, rank: 4 },
-        { firstName: "Mos", lastInitial: "D", value: 46, rank: 5 },
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
       ],
     },
     elements: {
@@ -98,3 +129,175 @@ export const Five = () => {
   };
   return h(LeaderboardView, Object.assign({}, props));
 };
+export const FiveWithRank = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+      ],
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const UserInList = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+      ],
+      showUser: true,
+      userRank: {
+        firstName: "Viktor",
+        lastInitial: "V",
+        value: 82,
+        rowNumber: 1,
+        rank: 1,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};
+export const UserOutside = () => {
+  const props = {
+    states: {
+      loading: false,
+      hasLeaders: true,
+      styles: {
+        rankheading: "Rank",
+        usersheading: "User",
+        statsheading: "Referrals",
+        showRank: true,
+      },
+    },
+    data: {
+      rankType: "rowNumber",
+      leaderboard: [
+        {
+          firstName: "Viktor",
+          lastInitial: "V",
+          value: 82,
+          rank: 1,
+          rowNumber: 1,
+        },
+        { firstName: "MF", lastInitial: "D", value: 73, rank: 2, rowNumber: 2 },
+        {
+          firstName: "Freddie",
+          lastInitial: "G",
+          value: 64,
+          rank: 3,
+          rowNumber: 3,
+        },
+        {
+          firstName: "Benny",
+          lastInitial: "B",
+          value: 55,
+          rank: 4,
+          rowNumber: 4,
+        },
+        {
+          firstName: "Mos",
+          lastInitial: "D",
+          value: 46,
+          rank: 5,
+          rowNumber: 5,
+        },
+      ],
+      showUser: true,
+      userRank: {
+        firstName: "Kutay",
+        lastInitial: "C",
+        value: 7,
+        rowNumber: 6,
+        rank: 9,
+      },
+    },
+    elements: {
+      ...defaultElements,
+    },
+  };
+  return h(LeaderboardView, Object.assign({}, props));
+};

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

@@ -1,22 +1,50 @@
 import { h } from "@stencil/core";
+function empty(styles) {
+  return (h("table", null,
+    h("tr", null,
+      styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
+      h("th", { class: "User" }, styles.usersheading),
+      h("th", { class: "Score" }, styles.statsheading)),
+    h("tr", null,
+      h("td", { colSpan: 100 }, "No Users"))));
+}
+function loading() {
+  return (h("table", null, [...Array(10)].map(() => {
+    return (h("tr", null,
+      h("td", null,
+        h("sl-skeleton", null))));
+  })));
+}
 export function LeaderboardView(props) {
-  var _a;
+  var _a, _b, _c, _d, _e;
   const { states, data, elements } = props;
   const { styles } = states;
-  if (states.loading) {
-    return elements.loadingstate;
-  }
+  console.log(props);
+  let userSeenFlag = false;
+  if (states.loading)
+    return loading();
+  if (!states.hasLeaders)
+    return empty(styles);
   return (h("div", null,
-    !states.hasLeaders && elements.empty,
-    states.hasLeaders && (h("table", null,
+    h("table", null,
       h("tr", null,
         styles.showRank && h("th", { class: "Rank" }, styles.rankheading),
         h("th", { class: "User" }, styles.usersheading),
         h("th", { class: "Score" }, styles.statsheading)), (_a = data.leaderboard) === null || _a === void 0 ? void 0 :
       _a.map((user) => {
-        return (h("tr", { class: "SeparateContent" },
+        var _a, _b;
+        if (user.rowNumber === ((_a = data.userRank) === null || _a === void 0 ? void 0 : _a.rowNumber))
+          userSeenFlag = true;
+        return (h("tr", { class: user.rowNumber === ((_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rowNumber) ? "highlight" : "" },
           styles.showRank && h("td", { class: "Rank" }, user.rank),
           h("td", { class: "User" }, `${user.firstName} ${user.lastInitial} `),
           h("td", { class: "Score" }, user.value)));
-      })))));
+      }),
+      !userSeenFlag && data.showUser && (h("tr", null,
+        h("td", { colSpan: 100, class: "ellipses" },
+          h("sl-icon", { name: "three-dots", style: { verticalAlign: "middle" } })))),
+      !userSeenFlag && data.showUser && (h("tr", { class: "highlight" },
+        styles.showRank && h("td", { class: "Rank" }, (_b = data.userRank) === null || _b === void 0 ? void 0 : _b.rank),
+        h("td", { class: "User" }, `${((_c = data.userRank) === null || _c === void 0 ? void 0 : _c.firstName) || "-"} ${((_d = data.userRank) === null || _d === void 0 ? void 0 : _d.lastInitial) || "-"} `),
+        h("td", { class: "Score" }, ((_e = data.userRank) === null || _e === void 0 ? void 0 : _e.value) || "0"))))));
 }