@saasquatch/mint-components 1.15.0-3 → 1.15.0-30

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame-view.js

@@ -1,44 +1,49 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
 import { HostBlock } from "../../global/mixins";
-const style = {
-  HostBlock: HostBlock,
-  Frame: {
-    display: "flex",
-    "flex-direction": "column",
-    "box-sizing": "border-box",
-  },
-  FooterWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
-    background: "var(--sqm-footer-background)",
-    display: "flex",
-    "justify-content": "flex-end",
-    "align-items": "center",
-    "box-sizing": "border-box",
-    "margin-top": "auto",
-  },
-  HeaderWrapper: {
-    width: "100%",
-    "max-width": "100%",
-    "box-sizing": "border-box",
-    display: "flex",
-    "justify-content": "space-between",
-    padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
-    "align-items": "center",
-    "background-color": "var(--sqm-header-background)",
-    "@media screen and (max-width: 499px)": {
-      "flex-direction": "row-reverse",
+export function PortalFrameView(props, children) {
+  const { data, notFullScreen, border } = props;
+  const style = {
+    HostBlock: HostBlock,
+    Frame: {
+      display: "flex",
+      "flex-direction": "column",
+      "box-sizing": "border-box",
+      "&:nth-child(2)": {
+        background: props.backgroundColor,
+      },
+    },
+    FooterWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      padding: "var(--sl-spacing-medium) var(--sl-spacing-x-large)",
+      background: props.headerAndFooterBackgroundColor,
+      display: "flex",
       "justify-content": "flex-end",
-      padding: "0",
+      "align-items": "center",
+      "box-sizing": "border-box",
+      borderTop: border,
+      "margin-top": "auto",
     },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
-export function PortalFrameView(props, children) {
-  const { data, notFullScreen } = props;
+    HeaderWrapper: {
+      width: "100%",
+      "max-width": "100%",
+      "box-sizing": "border-box",
+      display: "flex",
+      "justify-content": "space-between",
+      padding: "var(--sl-spacing-small) var(--sl-spacing-large)",
+      "align-items": "center",
+      borderBottom: border,
+      background: props.headerAndFooterBackgroundColor,
+      "@media screen and (max-width: 499px)": {
+        "flex-direction": "row-reverse",
+        "justify-content": "flex-end",
+        padding: "0",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   return (h("div", { style: { minHeight: notFullScreen ? "100%" : "100vh" }, class: sheet.classes.Frame, part: "sqm-base" },
     h("style", { type: "text/css" }, styleString),
     h("div", { class: sheet.classes.HeaderWrapper, part: "sqm-header" },

package/dist/collection/components/sqm-portal-frame/sqm-portal-frame.js

@@ -15,6 +15,26 @@ export class PortalFrame {
      * @undocumented
      */
     this.notFullScreen = false;
+    /**
+     * @uiName Background color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.backgroundColor = "var(--sqm-portal-background, #fff);";
+    // TODO: Replace with border variable later
+    /**
+     * Borders placed to seperate the header and footer from the body content.
+     * @uiName Border
+     * @uiType string
+     */
+    this.border = "1px solid var(--sqm-text, #eaeaea);";
+    /**
+     * Background color for the header and footer.
+     * @uiName Header and Footer Background Color
+     * @uiWidget color
+     * @uiType string
+     */
+    this.headerAndFooterBackgroundColor = "var(--sqm-portal-background, #fff);";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -23,7 +43,7 @@ export class PortalFrame {
     const headerContent = h("slot", { name: "header" });
     const props = isDemo()
       ? usePortalFrameDemo(footerContent, headerContent, this)
-      : usePortalFrame(footerContent, headerContent);
+      : usePortalFrame(footerContent, headerContent, this);
     return (h(PortalFrameView, Object.assign({}, props),
       h("slot", null)));
   }
@@ -51,12 +71,90 @@ export class PortalFrame {
       "reflect": false,
       "defaultValue": "false"
     },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": ""
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
+    "border": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Border",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Borders placed to seperate the header and footer from the body content."
+      },
+      "attribute": "border",
+      "reflect": false,
+      "defaultValue": "\"1px solid var(--sqm-text, #eaeaea);\""
+    },
+    "headerAndFooterBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Header and Footer Background Color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }],
+        "text": "Background color for the header and footer."
+      },
+      "attribute": "header-and-footer-background-color",
+      "reflect": false,
+      "defaultValue": "\"var(--sqm-portal-background, #fff);\""
+    },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<PortalFrameViewProps>",
-        "resolved": "{ data?: { footer: VNode; header: VNode; }; notFullScreen?: boolean; }",
+        "resolved": "{ data?: { footer: VNode; header: VNode; }; backgroundColor?: string; notFullScreen?: boolean; border?: string; headerAndFooterBackgroundColor?: string; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -89,6 +187,9 @@ export class PortalFrame {
 function usePortalFrameDemo(footerContent, headerContent, props) {
   return deepmerge({
     notFullScreen: true,
+    backgroundColor: props.backgroundColor,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
+    border: props.border,
     data: {
       footer: footerContent ? (footerContent) : (h("span", null, "example@example.com")),
       header: headerContent ? (headerContent) : (h("div", { style: { display: "flex", flexDirection: "column" } },

package/dist/collection/components/sqm-portal-frame/usePortalFrame.js

@@ -1,5 +1,5 @@
 import { useTick } from "@saasquatch/component-boilerplate";
-export function usePortalFrame(footerContent, headerContent) {
+export function usePortalFrame(footerContent, headerContent, props) {
   const [, rerender] = useTick();
   return {
     data: {
@@ -9,5 +9,8 @@ export function usePortalFrame(footerContent, headerContent) {
     callbacks: {
       rerender,
     },
+    backgroundColor: props.backgroundColor,
+    border: props.border,
+    headerAndFooterBackgroundColor: props.headerAndFooterBackgroundColor,
   };
 }

package/dist/collection/components/sqm-portal-profile/sqm-portal-profile-view.js

@@ -76,7 +76,7 @@ export function PortalProfileView(props) {
             ? errors === null || errors === void 0 ? void 0 : errors.lastName.message : undefined }))),
       h("sl-input", { label: text.emailtext, value: (_e = states.user) === null || _e === void 0 ? void 0 : _e.email, exportparts: "label: input-label, base: input-base", disabled: true }),
       states.showCountry && (h("sl-input", { label: text.countrytext, value: country, exportparts: "label: input-label, base: input-base", disabled: true })),
-      h("sl-button", { type: "primary", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
+      h("sl-button", { type: "primary", exportparts: "base: primarybutton-base", loading: states.loading, disabled: states.submitDisabled, onClick: (e) => {
           callbacks.onSubmit(e);
         }, submit: true }, text.submitChangeButtonText))));
 }

package/dist/collection/components/sqm-program-explainer/sqm-program-explainer-view.js

@@ -3,7 +3,7 @@ import { createStyleSheet } from "../../styling/JSS";
 export function ProgramExplainerView(props, children) {
   const style = {
     Container: {
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "",
     },
     Header: {

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step-view.js

@@ -8,7 +8,10 @@ export function ProgramExplainerStepView(props) {
       width: "100%",
       padding: "var(--sl-spacing-x-large)",
       lineHeight: "var(--sl-line-height-dense)",
-      color: props.textColor || "var(--sl-color-neutral-900)",
+      borderRadius: props.borderRadius
+        ? `${props.borderRadius}px`
+        : "var(--sl-border-radius-large)",
+      color: props.textColor || "var(--sqm-text)",
       background: props.backgroundColor || "var(--sl-color-primary-50)",
       "@media (max-width: 499px)": {
         flexDirection: "row",
@@ -22,6 +25,7 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Header: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-large)",
       fontWeight: "var(--sl-font-weight-bold)",
       marginTop: "var(--sl-spacing-x-large)",
@@ -30,6 +34,7 @@ export function ProgramExplainerStepView(props) {
       },
     },
     Description: {
+      color: props.textColor || "var(--sqm-text)",
       fontSize: "var(--sl-font-size-medium)",
       marginTop: "var(--sl-spacing-small)",
       "@media (max-width: 499px)": {
@@ -42,11 +47,14 @@ export function ProgramExplainerStepView(props) {
       borderRadius: "100%",
       objectFit: "cover",
       userSelect: "none",
-      background: "#FFF",
-      color: "var(--sl-color-primary-300)",
+      background: props.iconBackgroundColor || "var(--sl-color-white)",
+      color: props.iconColor || "var(--sl-color-primary-500)",
       fontSize: "26px",
       textAlign: "center",
       lineHeight: "72px",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
     },
   };
   const sheet = createStyleSheet(style);

package/dist/collection/components/sqm-program-explainer-step/sqm-program-explainer-step.js

@@ -71,7 +71,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Text color",
@@ -97,7 +97,7 @@ export class ProgramExplainerStep {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "text": "Background color",
@@ -114,6 +114,81 @@ export class ProgramExplainerStep {
       "attribute": "background-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": "type"
+          }],
+        "text": "Amount in pixels"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
+    "iconBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon Background color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-background-color",
+      "reflect": false
+    },
+    "iconColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Icon color",
+            "name": "uiName"
+          }, {
+            "text": "color",
+            "name": "uiWidget"
+          }, {
+            "text": "color",
+            "name": "format"
+          }],
+        "text": ""
+      },
+      "attribute": "icon-color",
+      "reflect": false
+    },
     "imageUrl": {
       "type": "string",
       "mutable": false,

package/dist/collection/components/sqm-qr-code/sqm-qr-code-view.js

@@ -38,11 +38,6 @@ const style = {
     height: "100%",
     maxWidth: "335px",
   },
-  TextButton: {
-    "&::part(base)": {
-      color: "var(--sl-color-gray-600)",
-    },
-  },
   LoadingSkeleton: {
     "&::part(indicator)": {
       borderRadius: "0px !important",
@@ -93,6 +88,6 @@ export function QrCodeView({ error, qrLink, titleText, downloadCodeText, printCo
       !hideTitle && h("span", { part: "sqm-title" }, titleText),
       codeContent,
       h("div", { class: sheet.classes.ButtonContainer },
-        h("sl-button", { size: "small", exportparts: "base: defaultbutton-base", type: "default", onClick: createDownloadable }, downloadCodeText),
-        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable, class: sheet.classes.TextButton }, printCodeText)))));
+        h("sl-button", { size: "small", exportparts: "base: primarybutton-base", type: "primary", onClick: createDownloadable }, downloadCodeText),
+        h("sl-button", { size: "small", exportparts: "base: textbutton-base", type: "text", onClick: createPrintable }, printCodeText)))));
 }

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

@@ -1,43 +1,44 @@
 import { h } from "@stencil/core";
 import { createStyleSheet } from "../../styling/JSS";
-const style = {
-  Container: {
-    borderRadius: "var(--sl-border-radius-large)",
-    color: "var(--sl-color-neutral-900)",
-    background: "var(--sl-color-neutral-0)",
-    display: "flex",
-    flexDirection: "column",
-    rowGap: "var(--sl-spacing-large)",
-  },
-  EndContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  ColumnContainer: {
-    "& p": { margin: "0" },
-    display: "grid",
-    gridAutoColumns: "minmax(0, 1fr)",
-    gridAutoFlow: "column",
-    gap: "calc(2 * var(--sl-spacing-medium))",
-    "@media (max-width: 499px)": {
-      gridAutoFlow: "unset",
-      gridAutoColumns: "unset",
-      gridTemplateColumns: "1fr",
-      border: "none",
-    },
-  },
-};
-const sheet = createStyleSheet(style);
-const styleString = sheet.toString();
 const vanillaStyle = `
     :host{
       display: block;   
     }
   `;
 export function ReferralCardView(props) {
+  const style = {
+    Container: {
+      borderRadius: props.borderRadius || "var(--sl-border-radius-large)",
+      color: props.textColor || "var(--sqm-text)",
+      background: props.backgroundColor || "var(--sl-color-neutral-0)",
+      display: "flex",
+      flexDirection: "column",
+      rowGap: "var(--sl-spacing-large)",
+    },
+    EndContainer: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+    ColumnContainer: {
+      "& p": { margin: "0" },
+      display: "grid",
+      gridAutoColumns: "minmax(0, 1fr)",
+      gridAutoFlow: "column",
+      gap: "calc(2 * var(--sl-spacing-medium))",
+      "@media (max-width: 499px)": {
+        gridAutoFlow: "unset",
+        gridAutoColumns: "unset",
+        gridTemplateColumns: "1fr",
+        border: "none",
+      },
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  const borderColor = props.borderColor || "var(--sl-color-neutral-300)";
   return (h("div", { part: "sqm-base", class: sheet.classes.Container, style: {
-      border: `${props.hideBorder ? "none" : "1px solid var(--sl-color-neutral-300)"}`,
+      border: `${props.hideBorder ? "none" : "1px solid " + borderColor}`,
       "padding-top": `var(--sl-spacing-${props.paddingTop})`,
       "padding-right": `var(--sl-spacing-${props.paddingRight})`,
       "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`,

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

@@ -285,6 +285,81 @@ export class ReferralCard {
       "reflect": false,
       "defaultValue": "\"#ffffff\""
     },
+    "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": "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": "Color of the text and copy icon"
+      },
+      "attribute": "text-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": "The border radius on the share link container (in pixels)"
+      },
+      "attribute": "border-radius",
+      "reflect": false
+    },
     "limitWidth": {
       "type": "boolean",
       "mutable": false,

package/dist/collection/components/sqm-referral-code/ReferralCode.stories.js

@@ -13,6 +13,9 @@ export const ReferralCode = () => {
 export const ShowNotificationText = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before" }));
 };
+export const ShowNotificationTextRed = () => {
+  return (h("sqm-referral-code", { textColor: "red", showNotificationText: true, notificationText: "You've copied this code before" }));
+};
 export const ShowNotificationTextWithButton = () => {
   return (h("sqm-referral-code", { showNotificationText: true, notificationText: "You've copied this code before", buttonStyle: "button-outside" }));
 };