@saasquatch/mint-components 1.15.0-98 → 1.16.0-0

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

@@ -6,151 +6,165 @@ import { luxonLocale } from "../../utils/utils";
 import { Details } from "./DetailsView";
 import { ProgressBarView } from "./progress-bar/progress-bar-view";
 import * as SVGs from "./SVGs";
-export function TaskCardView(props) {
-  var _a, _b;
-  const { callbacks, states, content } = props;
-  console.log("buttonType ", content.buttonType);
-  const style = {
-    TaskCard: {
-      display: "inline-block",
-      width: "100%",
-      "& .main": {
-        position: "relative",
-        boxSizing: "border-box",
-        background: content.backgroundColor || "var(--sqm-portal-background)",
-        border: `var(--sqm-border-thickness) solid ${content.borderColor || "var(--sqm-border-color)"}`,
-        borderRadius: "var(--sqm-border-radius-normal)",
-        boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
-        fontSize: "var(--sl-font-size-small)",
-        lineHeight: "var(--sl-line-height-dense)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .main.complete": {
-        opacity: "0.8",
-        borderColor: "var(--sqm-accent-color-border)",
-      },
-      "& .main.expired": {
-        color: content.textColor || "var(--sqm-text)",
-        opacity: "0.8",
-      },
-      "& .title": {
-        fontSize: "var(--sl-font-size-medium)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .container": {
-        margin: "var(--sl-spacing-medium)",
-      },
-      "& .container.subdued": {
-        opacity: "0.45",
-      },
-      "& .container > div": {
-        margin: "var(--sl-spacing-medium) 0",
-      },
-    },
-    NotStarted: {
+const style = {
+  TaskCard: {
+    display: "inline-block",
+    width: "100%",
+    "& .main": {
+      position: "relative",
+      boxSizing: "border-box",
+      background: "var(--sl-color-neutral-0)",
+      border: "1px solid var(--sl-color-neutral-200)",
+      borderRadius: "var(--sl-border-radius-large)",
+      boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)",
       fontSize: "var(--sl-font-size-small)",
-      padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sl-color-primary-600)",
-      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
-      borderBottom: "none",
-      background: content.backgroundColor || "var(--sl-color-primary-50)",
-      fontWeight: "var(--sl-font-weight-semibold)",
       lineHeight: "var(--sl-line-height-dense)",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
+      color: "var(--sl-color-neutral-600)",
     },
-    Ended: {
-      fontSize: "var(--sl-font-size-small)",
-      padding: "var(--sl-spacing-medium)",
-      color: content.textColor || "var(--sl-color-warning-600)",
-      border: `var(--sqm-border-thickness, 1px) solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
-      borderRadius: "var(--sqm-border-radius-normal) var(--sqm-border-radius-normal) 0 0",
-      borderBottom: "none",
-      background: content.backgroundColor || "var(--sl-color-warning-50)",
+    "& .main.complete": {
+      background: "var(--sl-color-primary-50)",
+      borderColor: "var(--sl-color-primary-500)",
+    },
+    "& .main.expired": {
+      color: "var(--sl-color-neutral-600)",
+      background: "var(--sl-color-neutral-50)",
+    },
+    "& .title": {
+      fontSize: "var(--sl-font-size-medium)",
+      color: "var(--sl-color-neutral-950)",
+    },
+    "& .container": {
+      margin: "var(--sl-spacing-medium)",
+    },
+    "& .container.subdued": {
+      opacity: "0.45",
+    },
+    "& .container > div": {
+      margin: "var(--sl-spacing-medium) 0",
+    },
+  },
+  NotStarted: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-primary-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-primary-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
+      color: "var(--sl-color-primary-500)",
+    },
+  },
+  Ended: {
+    fontSize: "var(--sl-font-size-small)",
+    padding: "var(--sl-spacing-medium)",
+    color: "var(--sl-color-warning-600)",
+    border: "1px solid var(--sl-color-neutral-200)",
+    borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+    borderBottom: "none",
+    background: "var(--sl-color-warning-50)",
+    fontWeight: "var(--sl-font-weight-semibold)",
+    lineHeight: "var(--sl-line-height-dense)",
+    "& .icon": {
+      position: "relative",
+      top: "0.1em",
+      marginRight: "var(--sl-spacing-small)",
+      color: "var(--sl-color-warning-500)",
+    },
+  },
+  Header: {
+    display: "flex",
+    "& .icon": {
+      position: "relative",
+      top: "5%",
+      alignSelf: "center",
+      lineHeight: "0",
+      color: "var(--sl-color-primary-400)",
+      fontSize: "var(--sl-font-size-large)",
+      marginRight: "var(--sl-spacing-x-small)",
+    },
+    "& .value": {
+      alignSelf: "center",
+      fontSize: "var(--sl-font-size-x-large)",
       fontWeight: "var(--sl-font-weight-semibold)",
-      lineHeight: "var(--sl-line-height-dense)",
-      "& .icon": {
-        position: "relative",
-        top: "0.1em",
-        marginRight: "var(--sl-spacing-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "100%",
+      marginRight: "var(--sl-spacing-xx-small)",
     },
-    Header: {
-      display: "flex",
-      "& .icon": {
-        position: "relative",
-        top: "5%",
-        alignSelf: "center",
-        lineHeight: "0",
-        color: "var(--sqm-accent-color-icon)",
-        fontSize: "var(--sl-font-size-large)",
-        marginRight: "var(--sl-spacing-x-small)",
-      },
-      "& .value": {
-        alignSelf: "center",
-        fontSize: "var(--sl-font-size-x-large)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        color: content.textColor || "var(--sqm-text)",
-        lineHeight: "100%",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .text": {
-        alignSelf: "end",
-        textTransform: "uppercase",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: content.textColor || "var(--sqm-text)",
-        lineHeight: "var(--sl-font-size-medium)",
-        marginRight: "var(--sl-spacing-xx-small)",
-      },
-      "& .end": {
-        color: content.textColor || "var(--sl-color-warning-500)",
-        fontWeight: "var(--sl-font-weight-semibold)",
-        marginBottom: "var(--sl-spacing-xx-small)",
-      },
-      "& .neutral": {
-        color: content.textColor || "var(--sl-color-neutral-400)",
-      },
+    "& .text": {
+      alignSelf: "end",
+      textTransform: "uppercase",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-950)",
+      lineHeight: "var(--sl-font-size-medium)",
+      marginRight: "var(--sl-spacing-xx-small)",
     },
-    Footer: {
-      "&[data-subdue] .success": {
-        color: content.textColor || "var(--sl-color-primary-300)",
-      },
-      "&[data-subdue] .neutral": {
-        color: content.textColor || "var(--sqm-text)",
-      },
-      display: "flex",
-      "& .icon": {
-        fontSize: "var(--sl-font-size-xx-small)",
-        marginRight: "var(--sl-spacing-xx-small)",
-        verticalAlign: "middle",
-      },
-      "& .text": {
-        marginTop: "auto",
-        verticalAlign: "text-bottom",
-        fontSize: "var(--sl-font-size-x-small)",
-        color: content.textColor || "var(--sqm-text)",
-      },
-      "& .success": {
-        color: content.textColor || "var(--sqm-text)",
-        fontWeight: "var(--sl-font-weight-semibold)",
+    "& .end": {
+      color: "var(--sl-color-warning-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+      marginBottom: "var(--sl-spacing-xx-small)",
+    },
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+  },
+  Footer: {
+    "&[data-subdue] .success": {
+      color: "var(--sl-color-primary-300)",
+    },
+    "&[data-subdue] .neutral": {
+      color: "var(--sl-color-neutral-300)",
+    },
+    display: "flex",
+    "& .icon": {
+      fontSize: "var(--sl-font-size-xx-small)",
+      marginRight: "var(--sl-spacing-xx-small)",
+      verticalAlign: "middle",
+    },
+    "& .text": {
+      marginTop: "auto",
+      verticalAlign: "text-bottom",
+      fontSize: "var(--sl-font-size-x-small)",
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .success": {
+      color: "var(--sl-color-primary-500)",
+      fontWeight: "var(--sl-font-weight-semibold)",
+    },
+    "& .action": {
+      marginTop: "auto",
+      marginLeft: "auto",
+      "&::part(base)": {
+        color: "var(--sl-color-neutral-0)",
       },
-      "& .neutral": {
-        color: content.textColor || "var(--sqm-text)",
+      "&.disabled::part(base)": {
+        border: "1px solid var(--sl-color-primary-400)",
+        background: "var(--sl-color-primary-400)",
       },
-      "& .datetime": {
-        display: "block",
-        marginTop: "var(--sl-spacing-xx-small)",
+      "&.neutral::part(base)": {
+        border: "1px solid var(--sl-color-neutral-400)",
+        background: "var(--sl-color-neutral-400)",
       },
     },
-  };
-  const sheet = createStyleSheet(style);
-  const contentString = sheet.toString();
+    "& .neutral": {
+      color: "var(--sl-color-neutral-400)",
+    },
+    "& .datetime": {
+      display: "block",
+      marginTop: "var(--sl-spacing-xx-small)",
+    },
+  },
+};
+const sheet = createStyleSheet(style);
+const styleString = sheet.toString();
+export function TaskCardView(props) {
+  var _a, _b;
+  const { callbacks, states, content } = props;
   const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -185,7 +199,7 @@ export function TaskCardView(props) {
   `;
   return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      contentString,
+      styleString,
       vanillaStyle),
     !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
@@ -211,7 +225,7 @@ export function TaskCardView(props) {
       }))),
     h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
-          "0 0 var(--sqm-border-radius-normal) var(--sqm-border-radius-normal)",
+          "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
         ? "main expired"
         : taskComplete
@@ -233,7 +247,7 @@ export function TaskCardView(props) {
             opacity: taskComplete || taskUnavailable ? "0.45" : "1",
           } }, content.cardTitle)),
         states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.description && (h(Details, Object.assign({}, props, { opacity: taskComplete || taskUnavailable ? "0.45" : "1" })))),
-        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.75" : "1", complete: taskComplete, expired: taskUnavailable })))),
+        content.showProgressBar && states.loading ? (h("sl-skeleton", { style: { margin: "var(--sl-spacing-medium) 0" } })) : (content.showProgressBar && (h(ProgressBarView, Object.assign({}, props.content, props.states, { opacity: taskComplete || taskUnavailable ? "0.45" : "1", complete: taskComplete, expired: taskUnavailable })))),
         h("div", { class: sheet.classes.Footer, "data-subdue": taskComplete || taskUnavailable }, states.loading ? (h("sl-skeleton", { style: { width: "25%", marginLeft: "auto" } })) : (h("div", { style: { display: "contents" } },
           h("span", { class: "text" },
             content.repeatable && (h("div", null,
@@ -263,7 +277,11 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonType || "primary"}button-base`, type: "primary", id: "sl-button", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
+              ? "action neutral"
+              : taskComplete
+                ? "action disabled"
+                : "action", type: "primary", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }

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

@@ -10,7 +10,10 @@ import { useTaskCard } from "./useTaskCard";
 /**
  * @uiName Task Card
  * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"]
- * @validParents ["sqm-card-feed"]
+ * @exampleGroup Rewards
+ * @example One Time Task Card - <sqm-task-card reward-amount="1" reward-unit="Free Month" goal="1" card-title="Upgrade Your Plan" description="Receive one free month for being a committed customer when you upgrade your plan." button-text="Upgrade" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" open-new-tab="false" finite="0" starts-on-message="Starts {startDate}"></sqm-task-card>
+ * @example Repeatable Task Card - <sqm-task-card reward-amount="250" goal="500" show-progress-bar card-title="Spend $500" description="Earn 250 points when you spend $500 or more." button-text="See plans" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" progress-bar-unit="$" finite="0" repeatable="" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
+ * @example Event Sending Task Card - <sqm-task-card goal="1" reward-amount="50" card-title="Follow Us on X" description="Earn 50 points when you Follow Us on X!" button-text="Follow" button-link="https://twitter.com/" open-new-tab="true" event-key="socialFollow" completed-text="Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}" ended-message="Ended {endDate}" expiry-message="Ends {endDate}" finite="0" reward-unit="Points" starts-on-message="Starts {startDate}"></sqm-task-card>
  */
 export class TaskCard {
   constructor() {
@@ -120,14 +123,6 @@ export class TaskCard {
      * @uiGroup Button
      */
     this.hideButton = false;
-    /**
-     * @uiName Button Style
-     * @uiType string
-     * @uiEnum ["primary", "secondary"]
-     * @uiEnumNames ["Primary", "Secondary"]
-     * @uiGroup Style
-     */
-    this.buttonType = "primary";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -737,143 +732,6 @@ export class TaskCard {
       "reflect": false,
       "defaultValue": "false"
     },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Card Background color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "background-color",
-      "reflect": false
-    },
-    "textColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Text color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "text-color",
-      "reflect": false
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "border-color",
-      "reflect": false
-    },
-    "borderRadius": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Border radius",
-            "name": "uiName"
-          }, {
-            "text": "number",
-            "name": "uiType"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "border-radius",
-      "reflect": false
-    },
-    "buttonType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"primary\" | \"secondary\"",
-        "resolved": "\"primary\" | \"secondary\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Button Style",
-            "name": "uiName"
-          }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"primary\", \"secondary\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Primary\", \"Secondary\"]",
-            "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
-          }],
-        "text": ""
-      },
-      "attribute": "button-type",
-      "reflect": false,
-      "defaultValue": "\"primary\""
-    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
@@ -915,7 +773,6 @@ export class TaskCard {
 }
 function useTaskCardDemo(props) {
   return deepmerge({
-    content: { ...props },
     states: { loadingEvent: false, locale: "en" },
     callbacks: {
       sendEvent: (event) => console.log(event),

package/dist/collection/components/sqm-task-card/useTaskCard.js

@@ -36,18 +36,8 @@ export function useTaskCard(props) {
   function onClick() {
     props.eventKey ? sendEvent(props.eventKey) : openLink();
   }
-  const styles = {
-    card: {
-      backgroundColor: props.backgroundColor,
-      textColor: props.textColor,
-      borderColor: props.borderColor,
-      borderRadius: props.borderRadius,
-      buttonType: props.buttonType,
-    },
-  };
   return {
     states: { loadingEvent, locale },
-    styles,
     callbacks: { sendEvent, onClick },
   };
 }