@saasquatch/mint-components 1.15.0-1 → 1.15.0-11

package/dist/collection/components/sqm-share-link/sqm-share-link.js

@@ -31,19 +31,30 @@ export class ShareLink {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
+     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
      * @uiName Copy button label
      */
     this.copyButtonLabel = "Copy Link";
+    /**
+     * The type of the button (primary or secondary) that will be used to copy the link.
+     * @uiName Button Type
+     * @uiType string
+     * @uiEnum ["primary", "secondary"]
+     * @uiEnumNames ["Primary", "Secondary"]
+     * @uiGroup Style
+     */
+    this.buttonType = "primary";
     /**
      * Set the copy button style and placement
      *
-     * @uiName Style
+     * @uiName Button style
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
+     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     withHooks(this);
@@ -147,6 +158,9 @@ export class ShareLink {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Change the text alignment"
       },
@@ -175,6 +189,152 @@ export class ShareLink {
       "reflect": false,
       "defaultValue": "\"Copy Link\""
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Background color of share link container"
+      },
+      "attribute": "background-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": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Border color of share link container (default is set to 1px solid transparent)"
+      },
+      "attribute": "border-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": "color",
+            "name": "format"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "Color of the text and copy icon"
+      },
+      "attribute": "text-color",
+      "reflect": false
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Border Radius",
+            "name": "uiName"
+          }, {
+            "text": "number",
+            "name": "uiType"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The border radius on the share link container (in pixels)"
+      },
+      "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 Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"primary\", \"secondary\"]",
+            "name": "uiEnum"
+          }, {
+            "text": "[\"Primary\", \"Secondary\"]",
+            "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
+          }],
+        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+      },
+      "attribute": "button-type",
+      "reflect": false,
+      "defaultValue": "\"primary\""
+    },
     "buttonStyle": {
       "type": "string",
       "mutable": false,
@@ -187,7 +347,7 @@ export class ShareLink {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "Style",
+            "text": "Button style",
             "name": "uiName"
           }, {
             "text": "string",
@@ -198,6 +358,9 @@ export class ShareLink {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
+          }, {
+            "text": "Style",
+            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement"
       },
@@ -210,7 +373,7 @@ export class ShareLink {
       "mutable": false,
       "complexType": {
         "original": "DemoData<CopyTextViewProps>",
-        "resolved": "{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; textColor?: string; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: \"left\" | \"right\" | \"center\"; buttonStyle?: \"icon\" | \"button-outside\" | \"button-below\"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; buttonType?: \"primary\" | \"secondary\"; borderColor?: string; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -245,7 +408,12 @@ function useDemoShareLink(props) {
     tooltiptext: props.tooltiptext,
     textAlign: props.textAlign,
     buttonStyle: props.buttonStyle,
+    backgroundColor: props.backgroundColor,
+    textColor: props.textColor,
+    borderRadius: props.borderRadius,
+    buttonType: props.buttonType,
     copyButtonLabel: props.copyButtonLabel,
+    borderColor: props.borderColor,
     rewardStatus: "AVAILABLE",
     open,
     onClick: () => {

package/dist/collection/components/sqm-stat-container/sqm-stat-container.js

@@ -4,7 +4,7 @@ import { StatContainerView } from "./sqm-stat-container-view";
 import { getProps } from "../../utils/utils";
 /**
  * @uiName Stat Container
- * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero"]
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"]
  * @validChildren ["sqm-big-stat"]
  * @slots [{"name":"", "title":"Stats"}]
  * @exampleGroup Statistics

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

@@ -97,6 +97,7 @@ import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistration
 import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories";
 import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories";
 import * as QRCode from "../sqm-qr-code/QRCode.stories";
+import * as Text from "../sqm-text/Text.stories";
 import * as Themes from "./Themes";
 import { CucumberAddon } from "./CucumberAddon";
 import { HookStoryAddon } from "./HookStoryAddon";
@@ -199,6 +200,7 @@ const stories = [
   PayoutButtonScroll,
   PayoutStatusAlert,
   QRCode,
+  Text,
 ];
 /**
  * For internal documentation

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

@@ -5,6 +5,8 @@ import { TabsView } from "./sqm-tabs-view";
 import { useTabs } from "./useTabs";
 /**
  * @uiName Tab Group
+ * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"]
+ * @validChildren ["sqm-tab"]
  * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}]
  * @exampleGroup Layout
  * @canvasRenderer always-replace

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

@@ -12,7 +12,7 @@ export const style = {
       position: "absolute",
       top: "var(--sl-spacing-medium)",
       right: "var(--sl-spacing-medium)",
-      color: "var(--sl-color-neutral-700)",
+      color: "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       "& :hover": {
         color: "var(--sl-color-primary-700)",

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

@@ -6,165 +6,151 @@ import { luxonLocale } from "../../utils/utils";
 import { Details } from "./DetailsView";
 import { ProgressBarView } from "./progress-bar/progress-bar-view";
 import * as SVGs from "./SVGs";
-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)",
-      lineHeight: "var(--sl-line-height-dense)",
-      color: "var(--sl-color-neutral-600)",
-    },
-    "& .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)",
-      color: "var(--sl-color-neutral-950)",
-      lineHeight: "100%",
-      marginRight: "var(--sl-spacing-xx-small)",
-    },
-    "& .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)",
+export function TaskCardView(props) {
+  var _a, _b;
+  const { callbacks, states, content } = props;
+  console.log("text color from the view ", content.textColor);
+  const style = {
+    TaskCard: {
+      display: "inline-block",
+      width: "100%",
+      "& .main": {
+        position: "relative",
+        boxSizing: "border-sizing",
+        background: content.backgroundColor || "var(--sl-color-neutral-0)",
+        border: `1px solid ${content.borderColor || "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)",
+        lineHeight: "var(--sl-line-height-dense)",
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .main.complete": {
+        background: content.backgroundColor || "var(--sl-color-primary-50)",
+        borderColor: content.borderColor || "var(--sl-color-primary-500)",
+      },
+      "& .main.expired": {
+        color: content.textColor || "var(--sqm-text)",
+        background: content.backgroundColor || "var(--sl-color-neutral-50)",
+      },
+      "& .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",
+      },
     },
-    "& .end": {
-      color: "var(--sl-color-warning-500)",
+    NotStarted: {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "var(--sl-spacing-medium)",
+      color: content.textColor || "var(--sl-color-primary-600)",
+      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      borderBottom: "none",
+      background: content.backgroundColor || "var(--sl-color-primary-50)",
       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)",
+      lineHeight: "var(--sl-line-height-dense)",
+      "& .icon": {
+        position: "relative",
+        top: "0.1em",
+        marginRight: "var(--sl-spacing-small)",
+        color: content.textColor || "var(--sqm-text)",
+      },
     },
-    "& .success": {
-      color: "var(--sl-color-primary-500)",
+    Ended: {
+      fontSize: "var(--sl-font-size-small)",
+      padding: "var(--sl-spacing-medium)",
+      color: content.textColor || "var(--sl-color-warning-600)",
+      border: `1px solid ${content.borderColor || "var(--sl-color-neutral-200)"}`,
+      borderRadius: "var(--sl-border-radius-large) var(--sl-border-radius-large) 0 0",
+      borderBottom: "none",
+      background: content.backgroundColor || "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: content.textColor || "var(--sqm-text)",
+      },
     },
-    "& .action": {
-      marginTop: "auto",
-      marginLeft: "auto",
-      "&::part(base)": {
-        color: "var(--sl-color-neutral-0)",
+    Header: {
+      display: "flex",
+      "& .icon": {
+        position: "relative",
+        top: "5%",
+        alignSelf: "center",
+        lineHeight: "0",
+        color: content.textColor || "var(--sqm-text)",
+        fontSize: "var(--sl-font-size-large)",
+        marginRight: "var(--sl-spacing-x-small)",
       },
-      "&.disabled::part(base)": {
-        border: "1px solid var(--sl-color-primary-400)",
-        background: "var(--sl-color-primary-400)",
+      "& .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)",
       },
-      "&.neutral::part(base)": {
-        border: "1px solid var(--sl-color-neutral-400)",
-        background: "var(--sl-color-neutral-400)",
+      "& .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)",
       },
     },
-    "& .neutral": {
-      color: "var(--sl-color-neutral-400)",
-    },
-    "& .datetime": {
-      display: "block",
-      marginTop: "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)",
+      },
+      "& .neutral": {
+        color: content.textColor || "var(--sqm-text)",
+      },
+      "& .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 sheet = createStyleSheet(style);
+  const contenttring = sheet.toString();
   const dateStart = content.rewardDuration &&
     DateTime.fromISO(content.rewardDuration.split("/")[0]);
   const dateEnd = content.rewardDuration &&
@@ -199,7 +185,7 @@ export function TaskCardView(props) {
   `;
   return (h("div", { class: sheet.classes.TaskCard, part: "sqm-base" },
     h("style", { type: "text/css" },
-      styleString,
+      contenttring,
       vanillaStyle),
     !states.loading && taskNotStarted && (h("div", { class: sheet.classes.NotStarted },
       h("span", { class: "icon" },
@@ -277,11 +263,9 @@ export function TaskCardView(props) {
                 .setLocale(luxonLocale(states.locale))
                 .toLocaleString(DateTime.DATETIME_MED),
             })))),
-          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: {
+          content.hideButton ? ("") : (h("sl-button", { exportparts: `base: ${content.buttonStyle === "primary"
+              ? "primary"
+              : "secondary"}button-base`, id: "sl-button", type: content.buttonStyle === "primary" ? "primary" : "default", size: "small", onClick: callbacks.onClick, loading: states.loadingEvent, disabled: taskComplete || taskUnavailable, style: {
               opacity: taskComplete || taskUnavailable ? "0.45" : "1",
             } }, content.buttonText)))))))));
 }