@saasquatch/mint-components 1.6.8 → 1.6.9

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

@@ -5,10 +5,10 @@ export const TabsView = ({ content, placement, }) => {
   const padding = !placement || placement === "top" || placement === "bottom"
     ? "var(--sl-spacing-x-large) 0;"
     : "0 var(--sl-spacing-xx-large);";
-  const vanillaStyle = `
-    sl-tab-panel::part(base) {
-      padding: ${padding};
-    }
+  const vanillaStyle = `
+    sl-tab-panel::part(base) {
+      padding: ${padding};
+    }
   `;
   const host = useHost();
   return (h(Host, null,

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

@@ -36,7 +36,7 @@ export class Tabs {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Tabs Placement",
+            "text": "Tabs placement",
             "name": "uiName"
           }, {
             "text": "string",

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

@@ -48,6 +48,6 @@ export function Details(props) {
     h("span", { class: sheet.classes.Description },
       h("input", { type: "checkbox", id: "details-" + rid }),
       h("label", { class: "details", htmlFor: "details-" + rid },
-        h("sl-icon", { name: "chevron-down" })),
+        h("sl-icon", { exportparts: "base: chevron-icon", name: "chevron-down" })),
       h("span", { class: "summary", "progress-bar": props.progressBar }, props.content.description))));
 }

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

@@ -190,13 +190,14 @@ export function TaskCardView(props) {
   const taskEnded = content.rewardDuration && dateEnd <= dateToday;
   const taskNotStarted = content.rewardDuration && dateToday <= dateStart;
   const taskUnavailable = taskEnded || taskNotStarted;
-  const vanillaStyle = `
-	:host{
-		display: block;
-		margin-bottom: var(--sl-spacing-large);
-	}
+  const vanillaStyle = `
+	:host{
+		display: block;
+		margin-bottom: var(--sl-spacing-large);
+	}
+
   `;
-  return (h("div", { class: sheet.classes.TaskCard },
+  return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
@@ -213,7 +214,7 @@ export function TaskCardView(props) {
       }))),
     !states.loading && taskEnded && (h("div", { class: sheet.classes.Ended },
       h("span", { class: "icon" },
-        h("sl-icon", { name: "exclamation-triangle-fill" })),
+        h("sl-icon", { exportparts: "base: task-card-icon", name: "exclamation-triangle-fill" })),
       intl.formatMessage({
         id: "endedMessage",
         defaultMessage: content.endedMessage,
@@ -222,7 +223,7 @@ export function TaskCardView(props) {
           .setLocale(luxonLocale(states.locale))
           .toLocaleString(DateTime.DATETIME_MED),
       }))),
-    h("div", { style: {
+    h("div", { part: "sqm-style-container", style: {
         borderRadius: taskUnavailable &&
           "0 0 var(--sl-border-radius-large) var(--sl-border-radius-large)",
       }, class: taskUnavailable
@@ -230,12 +231,12 @@ export function TaskCardView(props) {
         : taskComplete
           ? "main complete"
           : "main" },
-      h("div", { class: "container", "data-subdue": taskComplete || taskUnavailable },
+      h("div", { class: "container", part: "sqm-card-container", "data-subdue": taskComplete || taskUnavailable },
         h("div", { class: sheet.classes.Header, style: { opacity: taskComplete || taskUnavailable ? "0.45" : "1" } }, states.loading ? (h("sl-skeleton", { style: { width: "22%", margin: "0" } })) : (h("div", null,
           showComplete && (h("span", { class: taskUnavailable ? "icon neutral" : "icon" }, taskComplete ? checkmark_filled : checkmark_circle)),
-          h("span", { class: "value" }, content.rewardAmount),
-          h("span", { class: "text" }, content.rewardUnit)))),
-        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", style: {
+          h("span", { part: "sqm-value", class: "value" }, content.rewardAmount),
+          h("span", { part: "sqm-unit", class: "text" }, content.rewardUnit)))),
+        states.loading ? (h("sl-skeleton", { style: { width: "42%", margin: "var(--sl-spacing-medium) 0" } })) : (h("div", { class: "title", part: "sqm-title", style: {
             marginBottom: !content.description
               ? content.steps
                 ? "var(--sl-spacing-x-large)"
@@ -276,7 +277,7 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          h("sl-button", { class: taskUnavailable
+          h("sl-button", { exportparts: "base: button", id: "sl-button", class: taskUnavailable
               ? "action neutral"
               : taskComplete
                 ? "action disabled"

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

@@ -19,12 +19,12 @@ export class TaskCard {
   constructor() {
     this.ignored = true;
     /**
-     * @uiName Reward Amount
+     * @uiName Reward amount
      * @uiGroup Reward
      */
     this.rewardAmount = "0";
     /**
-     * @uiName Reward Unit
+     * @uiName Reward unit
      * @uiGroup Reward
      */
     this.rewardUnit = "Points";
@@ -39,7 +39,7 @@ export class TaskCard {
      */
     this.description = "";
     /**
-     * @uiName Goal Repeatable
+     * @uiName Goal repeatable
      * @uiGroup Goal
      * @default
      */
@@ -47,12 +47,12 @@ export class TaskCard {
     /**
      * The number of times a task can be completed when repeatable.  Use zero for no limit (the default).
      *
-     * @uiName Repeat Amount
+     * @uiName Repeat amount
      * @uiGroup Reward
      */
     this.finite = 0;
     /**
-     * @uiName Show Progress Bar
+     * @uiName Show progress bar
      * @uiGroup Goal
      * @default
      */
@@ -60,12 +60,12 @@ export class TaskCard {
     /**
      * Sets the goal for users progress to know when a task has been completed. If repeatable is checked, repeatable goals is an increment of this.
      *
-     * @uiName Goal Completion Number
+     * @uiName Goal completion number
      * @uiGroup Goal
      */
     this.goal = 1;
     /**
-     * @uiName Progress Bar Steps
+     * @uiName Progress bar steps
      * @uiGroup Goal
      * @default
      */
@@ -73,47 +73,47 @@ export class TaskCard {
     /**
      * The unit displayed to the right of steps and progress numbers on the progress bar. Ex: $ for dollars
      *
-     * @uiName Progress Bar Unit
+     * @uiName Progress bar unit
      * @uiGroup Goal
      */
     this.progressBarUnit = "";
     /**
      * Displayed when a user views a task card after the reward duration interval.
      *
-     * @uiName Expiry Date Message
+     * @uiName Expiry date message
      * @uiGroup Task
      */
     this.expiryMessage = "Ends {endDate}";
     /**
      * Shown to users before the start of the task duration.
      *
-     * @uiName Start Date Message
+     * @uiName Start date message
      * @uiGroup Task
      */
     this.startsOnMessage = "Starts {startDate}";
     /**
      * Shown to users after the end of the task duration.
      *
-     * @uiName Ended Date Message
+     * @uiName Ended date message
      * @uiGroup Task
      */
     this.endedMessage = "Ended {endDate}";
     /**
      * Displays the amount of times that a user has completed a repeatable task.
      *
-     * @uiName Completed Count Text
+     * @uiName Completed count text
      * @uiGroup Task
      * @uiWidget textArea
      */
     this.completedText = "Completed {finite, select, 0 {{count, plural, =1 {{count} time} other {{count} times}}} other {{count}/{finite} times}}";
     /**
-     * @uiName Button Text
+     * @uiName Button text
      * @uiGroup Button
      */
     this.buttonText = "Complete Action";
     /**
-     * Button Link Opens in New Tab
-     * @uiName Open In New Tab
+     * Button link opens in new tab
+     * @uiName Open in new tab
      * @uiGroup Button
      * @default
      */
@@ -151,7 +151,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Amount",
+            "text": "Reward amount",
             "name": "uiName"
           }, {
             "text": "Reward",
@@ -175,7 +175,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Unit",
+            "text": "Reward unit",
             "name": "uiName"
           }, {
             "text": "Reward",
@@ -247,7 +247,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Goal Repeatable",
+            "text": "Goal repeatable",
             "name": "uiName"
           }, {
             "text": "Goal",
@@ -274,7 +274,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Repeat Amount",
+            "text": "Repeat amount",
             "name": "uiName"
           }, {
             "text": "Reward",
@@ -298,7 +298,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Show Progress Bar",
+            "text": "Show progress bar",
             "name": "uiName"
           }, {
             "text": "Goal",
@@ -325,7 +325,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Goal Completion Number",
+            "text": "Goal completion number",
             "name": "uiName"
           }, {
             "text": "Goal",
@@ -349,7 +349,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Progress Bar Steps",
+            "text": "Progress bar steps",
             "name": "uiName"
           }, {
             "text": "Goal",
@@ -376,7 +376,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Progress Bar Unit",
+            "text": "Progress bar unit",
             "name": "uiName"
           }, {
             "text": "Goal",
@@ -400,7 +400,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Expiry Date Message",
+            "text": "Expiry date message",
             "name": "uiName"
           }, {
             "text": "Task",
@@ -424,7 +424,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Duration",
+            "text": "Reward duration",
             "name": "uiName"
           }, {
             "text": "dateRange",
@@ -453,7 +453,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Start Date Message",
+            "text": "Start date message",
             "name": "uiName"
           }, {
             "text": "Task",
@@ -477,7 +477,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Display Duration",
+            "text": "Display duration",
             "name": "uiName"
           }, {
             "text": "dateRange",
@@ -506,7 +506,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Ended Date Message",
+            "text": "Ended date message",
             "name": "uiName"
           }, {
             "text": "Task",
@@ -530,7 +530,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Completed Count Text",
+            "text": "Completed count text",
             "name": "uiName"
           }, {
             "text": "Task",
@@ -557,7 +557,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Button Text",
+            "text": "Button text",
             "name": "uiName"
           }, {
             "text": "Button",
@@ -581,7 +581,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Button Link",
+            "text": "Button link",
             "name": "uiName"
           }, {
             "text": "Button",
@@ -604,7 +604,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Open In New Tab",
+            "text": "Open in new tab",
             "name": "uiName"
           }, {
             "text": "Button",
@@ -613,7 +613,7 @@ export class TaskCard {
             "text": undefined,
             "name": "default"
           }],
-        "text": "Button Link Opens in New Tab"
+        "text": "Button link opens in new tab"
       },
       "attribute": "open-new-tab",
       "reflect": false,
@@ -631,7 +631,7 @@ export class TaskCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Goal Progress Source",
+            "text": "Goal progress source",
             "name": "uiName"
           }, {
             "text": undefined,
@@ -666,7 +666,7 @@ export class TaskCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Task Card Button Event Key",
+            "text": "Task card button event key",
             "name": "uiName"
           }, {
             "text": "Button",
@@ -689,7 +689,7 @@ export class TaskCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Program ID Override",
+            "text": "Program ID override",
             "name": "uiName"
           }, {
             "text": "programSelector",

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

@@ -1,12 +1,12 @@
 import { useMutation, useUserIdentity, useRefreshDispatcher, useLocale, } from "@saasquatch/component-boilerplate";
 import { useEffect } from "@saasquatch/stencil-hooks";
 import { gql } from "graphql-request";
-const SEND_EVENT = gql `
-  mutation taskCardEvent($userEventInput: UserEventInput!) {
-    logUserEvent(userEventInput: $userEventInput) {
-      userId
-    }
-  }
+const SEND_EVENT = gql `
+  mutation taskCardEvent($userEventInput: UserEventInput!) {
+    logUserEvent(userEventInput: $userEventInput) {
+      userId
+    }
+  }
 `;
 export function useTaskCard(props) {
   const user = useUserIdentity();

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

@@ -1,51 +1,51 @@
 import { Component, h, State } from "@stencil/core";
 import { withHooks } from "@saasquatch/stencil-hooks";
-const vanillaStyle = `
-  sqm-text {
-    display: block;
-  }
-
-  sqm-text h1 {
-    font-size: var(--sl-font-size-xxx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h2 {
-    font-size: var(--sl-font-size-xx-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h3 {
-    font-size: var(--sl-font-size-x-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text h4 {
-    font-size: var(--sl-font-size-large);
-    font-weight: var(--sl-font-weight-semibold);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text p {
-    font-size: var(--sl-font-size-medium);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-800);
-    margin: 0;
-  }
-
-  sqm-text sub {
-    font-size: var(--sl-font-size-small);
-    font-weight: var(--sl-font-weight-normal);
-    color: var(--sl-color-neutral-400);
-    margin: 0;
-  }
+const vanillaStyle = `
+  sqm-text {
+    display: block;
+  }
+
+  sqm-text h1 {
+    font-size: var(--sl-font-size-xxx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h2 {
+    font-size: var(--sl-font-size-xx-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h3 {
+    font-size: var(--sl-font-size-x-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text h4 {
+    font-size: var(--sl-font-size-large);
+    font-weight: var(--sl-font-weight-semibold);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text p {
+    font-size: var(--sl-font-size-medium);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-800);
+    margin: 0;
+  }
+
+  sqm-text sub {
+    font-size: var(--sl-font-size-small);
+    font-weight: var(--sl-font-weight-normal);
+    color: var(--sl-color-neutral-400);
+    margin: 0;
+  }
 `;
 /**
  * @uiName Text

package/dist/collection/components/sqm-text-span/sqm-text-span-view.js

@@ -40,16 +40,16 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const vanillaStyle = `
-    :host {
-      word-wrap: break-word;
-    }
-    sqm-text-span {
-      display: inline;
-    }
+const vanillaStyle = `
+    :host {
+      word-wrap: break-word;
+    }
+    sqm-text-span {
+      display: inline;
+    }
   `;
 export function TextSpanView(props, children) {
-  return (h("span", { class: sheet.classes[props.type] },
+  return (h("span", { class: sheet.classes[props.type], part: "sqm-base" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/collection/components/sqm-timeline/sqm-timeline-entry-view.js

@@ -46,23 +46,23 @@ const style = {
 };
 const sheet = createStyleSheet(style);
 const styleString = sheet.toString();
-const vanillaStyle = `
-	:host{
-		display: block; 
-	}
-
-	:host(:not(:last-of-type)) .line {
-		display: block; 
-	}
+const vanillaStyle = `
+	:host{
+		display: block; 
+	}
+
+	:host(:not(:last-of-type)) .line {
+		display: block; 
+	}
 	`;
 export function TimelineEntryView(props) {
   var _a;
   const timeline_icon = (_a = props.icon) !== null && _a !== void 0 ? _a : props.iconState;
-  return (h("div", { class: sheet.classes.TimelineReward },
+  return (h("div", { class: sheet.classes.TimelineReward, part: "sqm-base" },
     h("style", { type: "text/css" },
       styleString,
       vanillaStyle),
-    h("div", { class: "container" },
+    h("div", { class: "container", part: "sqm-entry-container" },
       h("div", { class: "line" }, "/"),
       h("div", { class: "step" },
         timeline_icon === "gift" && (h("div", { class: "icon" },
@@ -71,7 +71,7 @@ export function TimelineEntryView(props) {
           h(Circle, null))),
         h("div", null,
           h("div", null,
-            h("span", { class: "reward" }, props.reward),
-            h("span", { class: "unit" }, props.unit)),
-          h("div", { class: "description" }, props.desc))))));
+            h("span", { class: "reward", part: "sqm-reward" }, props.reward),
+            h("span", { class: "unit", part: "sqm-unit" }, props.unit)),
+          h("div", { class: "description", part: "sqm-description" }, props.desc))))));
 }

package/dist/collection/components/sqm-timeline/sqm-timeline-entry.js

@@ -38,7 +38,7 @@ export class TimelineReward {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Amount",
+            "text": "Reward amount",
             "name": "uiName"
           }],
         "text": ""
@@ -58,7 +58,7 @@ export class TimelineReward {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Reward Unit",
+            "text": "Reward unit",
             "name": "uiName"
           }],
         "text": ""

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

@@ -30,14 +30,14 @@ export class Timeline {
         // incase child is not sqm-timeline-entry
       }
     });
-    const vanillaStyle = `
-		:host{
-			display: block;   
-		}
-
-		::slotted(*:not(:only-child):not(:last-child)) {
-			margin-bottom: var(--sl-spacing-xx-large);
-		}
+    const vanillaStyle = `
+		:host{
+			display: block;   
+		}
+
+		::slotted(*:not(:only-child):not(:last-child)) {
+			margin-bottom: var(--sl-spacing-xx-large);
+		}
 	`;
     return (h("div", null,
       h("style", { type: "text/css" }, vanillaStyle),

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js

@@ -15,8 +15,8 @@ export function PortalSectionView(props) {
   };
   const sheet = createStyleSheet(style);
   const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.SectionContainer },
+  return (h("div", { class: sheet.classes.SectionContainer, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.LabelContainer }, props.label),
+    h("div", { class: sheet.classes.LabelContainer, part: "sqm-label" }, props.label),
     props.content));
 }