@saasquatch/mint-components 2.0.0-60 → 2.0.0-62

package/dist/cjs/sqm-stencilbook.cjs.entry.js

@@ -34,8 +34,8 @@ const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-25e
 const sqmPortalVerifyEmailView = require('./sqm-portal-verify-email-view-1c4e781f.js');
 require('./ErrorView-3f91e5ab.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-4ccf89da.js');
-const ShadowViewAddon = require('./ShadowViewAddon-016bebfd.js');
-const sqmPortalContainerView = require('./sqm-portal-container-view-ca86b9e5.js');
+const ShadowViewAddon = require('./ShadowViewAddon-23b04c91.js');
+const sqmPortalContainerView = require('./sqm-portal-container-view-07e4343f.js');
 const IndirectTaxDetailsView = require('./IndirectTaxDetailsView-e5f70b8b.js');
 const utils = require('./utils-83d125fa.js');
 const sqmLeadInputFieldView = require('./sqm-lead-input-field-view-06ed3632.js');
@@ -6432,6 +6432,20 @@ const InfoAlert = () => {
     index.h("p", { part: "alert-title" }, "This is the title"),
     index.h("p", { part: "alert-description" }, "This is the description")));
 };
+const SuccessAlertTransparent = () => {
+  return (index.h("sqm-form-message", { type: "success", transparent: true },
+    index.h("p", { part: "alert-title" }, "This is the title"),
+    index.h("p", { part: "alert-description" }, "This is the description")));
+};
+const ErrorAlertTransparent = () => (index.h("sqm-form-message", { type: "error", transparent: true },
+  index.h("p", { part: "alert-title" }, "This is the title"),
+  index.h("p", { part: "alert-description" }, "This is the description")));
+const WarningAlertTransparent = () => (index.h("sqm-form-message", { type: "warning", transparent: true },
+  index.h("p", { part: "alert-title" }, "This is the title"),
+  index.h("p", { part: "alert-description" }, "This is the description")));
+const InfoAlertTransparent = () => (index.h("sqm-form-message", { type: "info", transparent: true },
+  index.h("p", { part: "alert-title" }, "This is the title"),
+  index.h("p", { part: "alert-description" }, "This is the description")));
 
 const FormMessage = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -6439,7 +6453,11 @@ const FormMessage = /*#__PURE__*/Object.freeze({
   SuccessAlert: SuccessAlert,
   ErrorAlert: ErrorAlert,
   WarningAlert: WarningAlert,
-  InfoAlert: InfoAlert
+  InfoAlert: InfoAlert,
+  SuccessAlertTransparent: SuccessAlertTransparent,
+  ErrorAlertTransparent: ErrorAlertTransparent,
+  WarningAlertTransparent: WarningAlertTransparent,
+  InfoAlertTransparent: InfoAlertTransparent
 });
 
 const scenario$6 = "@author:kutay\n@owner:kutay\nFeature: Hero Image\n\n\tThe Hero Image component displays media images with a header, description and button using an overlay or a double column layout to offer an attrative widget page.\n\n\tBackground: A user on the portal is viewing the widget\n\t\tGiven a user viewing the Hero Image component\n\n\t@motivating\n\t@ui\n\tScenario: Overlay image displays header, description, and button with brand color\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\tThen they see their image\n\t\tAnd the image has no padding\n\t\tAnd it has a brand colour overlay\n\t\tAnd \"Klip Rewards\" is displayed over top of the image in xxx-large font\n\t\tAnd below \"Refer friends or complete tasks while using Klip to earn rewards\" is displayed over top of the image in x-large font\n\t\tAnd below they see a brand coloured button with text \"Start earning\"\n\t\tAnd the text section has xxx-large padding\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is scaled to fit content\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay image crop can be aligned left, center or right\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"overlay\"                                                          |\n\t\t\t| image-pos   | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tWhen the component is scaled down to 599px\n\t\tThen the image is <alignment> to fit content\n\t\tExamples:\n\t\t\t| value  | alignment     |\n\t\t\t| left   | left aligned  |\n\t\t\t| center | centered      |\n\t\t\t| right  | right aligned |\n\t\t\t| N/A    | centered      |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay padding is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop         | value                                                              |\n\t\t\t| image-url    | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header       | \"Klip Rewards\"                                                     |\n\t\t\t| description  | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text  | \"Start earning\"                                                    |\n\t\t\t| layout       | \"overlay\"                                                          |\n\t\t\t| padding-text | <value>                                                            |\n\t\tThen the image with overlay is displayed\n\t\tAnd <padding> is applied around header, description and button\n\t\tExamples:\n\t\t\t| value      | padding    |\n\t\t\t| none       | no padding |\n\t\t\t| xxx-small  | xxx-small  |\n\t\t\t| xx-small   | xx-small   |\n\t\t\t| x-small    | x-small    |\n\t\t\t| small      | small      |\n\t\t\t| medium     | medium     |\n\t\t\t| large      | large      |\n\t\t\t| x-large    | x-large    |\n\t\t\t| xx-large   | xx-large   |\n\t\t\t| xxx-large  | xxx-large  |\n\t\t\t| xxxx-large | xxxx-large |\n\t\t\t| N/A        | no padding |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Overlay color and background is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop            | value                                                              |\n\t\t\t| image-url       | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000278/squatch-assets/bTwu1Um.png\"                                 |\n\t\t\t| header          | \"Klip Rewards\"                                                     |\n\t\t\t| description     | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text     | \"Start earning\"                                                    |\n\t\t\t| layout          | \"overlay\"                                                          |\n\t\t\t| text-color      | <textColor>                                                        |\n\t\t\t| overlay-color   | <overlayColor>                                                     |\n\t\t\t| overlay-opacity | <overlayOpacity>                                                   |\n\t\tThen the image with overlay is displayed\n\t\tAnd the overlay is <overlayColor>\n\t\tAnd the overlay has <overlayOpacity>\n\t\tAnd the text is <textColor>\n\t\tExamples:\n\t\t\t| textColor | overlayColor | overlayOpacity |\n\t\t\t| #fffc4b   | #ff7f7f      | 0.9            |\n\t\t\t| #1d0314   | #4baa1a      | 0              |\n\t\t\t| #211a27   | #aa481a      | 1              |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout displays an image on one side and on the other side a header, description, and button\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop        | value                                                              |\n\t\t\t| image-url   | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header      | \"Klip Rewards\"                                                     |\n\t\t\t| description | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text | \"Start earning\"                                                    |\n\t\t\t| layout      | \"columns\"                                                          |\n\t\tThen the image is displayed on the left\n\t\tAnd the following elements are displayed on the right\n\t\t\t| elements    |\n\t\t\t| header      |\n\t\t\t| description |\n\t\t\t| button      |\n\t\tWhen the component is scaled down to 599px\n\t\tThen the two-column layout switches to a row layout\n\t\tAnd the image is displayed on top\n\t\tAnd the content is displayed below\n\n\t@motivating\n\t@ui\n\tScenario Outline: Image position is configurable for desktop and mobile\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-pos        | <imagePos>                                                         |\n\t\t\t| image-mobile-pos | <imageMobilePos>                                                   |\n\t\tThen the image is displayed on the <imagePos>\n\t\tWhen the component is scaled down to 599px\n\t\tThen two-column layout switches to a row layout\n\t\tAnd image is displayed on the <imageMobilePos>\n\t\tExamples:\n\t\t\t| imagePos | imageMobilePos |\n\t\t\t| left     | top            |\n\t\t\t| right    | bottom         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Padding is configurable for the image and text of two column layouts\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop          | value                                                              |\n\t\t\t| image-url     | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header        | \"Klip Rewards\"                                                     |\n\t\t\t| description   | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text   | \"Start earning\"                                                    |\n\t\t\t| layout        | \"columns\"                                                          |\n\t\t\t| padding-text  | <paddingText>                                                      |\n\t\t\t| padding-image | <paddingImage>                                                     |\n\t\tThen the two column layout is displayed\n\t\tAnd the image has padding <paddingImage>\n\t\tAnd the text has padding <paddingText>\n\t\tExamples:\n\t\t\t| paddingText | paddingImage |\n\t\t\t| xxx-small   | xxx-small    |\n\t\t\t| xx-small    | xx-small     |\n\t\t\t| x-small     | x-small      |\n\t\t\t| small       | small        |\n\t\t\t| medium      | medium       |\n\t\t\t| large       | large        |\n\t\t\t| x-large     | x-large      |\n\t\t\t| xx-large    | xx-large     |\n\t\t\t| xxx-large   | xxx-large    |\n\t\t\t| xxxx-large  | xxxx-large   |\n\t\t\t| none        | none         |\n\n\t@motivating\n\t@ui\n\tScenario Outline: Two-column layout image division percentage is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000248/squatch-assets/MVgOJn7.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| image-percentage | <percent>                                                          |\n\t\tThen the two column layout is displayed\n\t\tAnd the image takes up <percent> of the two-column layout\n\t\tAnd the text elements take up the remainder of the space\n\t\tExamples:\n\t\t\t| percent |\n\t\t\t| 25%     |\n\t\t\t| 42%     |\n\t\t\t| 66%     |\n\n\t@motivating\n\t@ui\n\tScenario: Two-column layout text and background color is configurable\n\t\tGiven a Hero Image component configured with the following props\n\t\t\t| prop             | value                                                              |\n\t\t\t| image-url        | \"https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png\"                                 |\n\t\t\t| header           | \"Klip Rewards\"                                                     |\n\t\t\t| description      | \"Refer friends or complete tasks while using Klip to earn rewards\" |\n\t\t\t| button-text      | \"Start earning\"                                                    |\n\t\t\t| layout           | \"columns\"                                                          |\n\t\t\t| text-color       | <textColor>                                                        |\n\t\t\t| background-color | <backgroundColor>                                                  |\n\t\tThen the two column layout is displayed\n\t\tAnd the text has color <textColor>\n\t\tAnd the background has color <backgroundColor>\n\t\tExamples:\n\t\t\t| textColor | backgroundColor |\n\t\t\t| #fffc4b   | #ff7f7f         |\n\t\t\t| #1d0314   | #4baa1a         |\n\t\t\t| #211a27   | #aa481a         |";

package/dist/collection/components/sqm-form-message/FormMessage.stories.js

@@ -22,3 +22,17 @@ export const InfoAlert = () => {
     h("p", { part: "alert-title" }, "This is the title"),
     h("p", { part: "alert-description" }, "This is the description")));
 };
+export const SuccessAlertTransparent = () => {
+  return (h("sqm-form-message", { type: "success", transparent: true },
+    h("p", { part: "alert-title" }, "This is the title"),
+    h("p", { part: "alert-description" }, "This is the description")));
+};
+export const ErrorAlertTransparent = () => (h("sqm-form-message", { type: "error", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export const WarningAlertTransparent = () => (h("sqm-form-message", { type: "warning", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));
+export const InfoAlertTransparent = () => (h("sqm-form-message", { type: "info", transparent: true },
+  h("p", { part: "alert-title" }, "This is the title"),
+  h("p", { part: "alert-description" }, "This is the description")));

package/dist/collection/components/sqm-form-message/sqm-form-message.css

@@ -49,6 +49,13 @@ sl-alert::part(base) {
   font-size: 24px;
 }
 
+.Transparent::part(base) {
+  background-color: transparent;
+  border: none;
+  color: var(--sqm-text);
+  margin-left: -20px;
+}
+
 ::slotted(*) {
   margin: 0;
 }

package/dist/collection/components/sqm-form-message/sqm-form-message.js

@@ -7,27 +7,31 @@ import { Component, h, Prop, State } from "@stencil/core";
 export class FormMessage {
   constructor() {
     this.ignored = true;
+    /**
+     * Render the alert with transparent styles
+     */
+    this.transparent = false;
     withHooks(this);
   }
   disconnectedCallback() { }
   render() {
     if (this.type === "error") {
-      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: "Error", type: "danger", open: true },
+      return (h("sl-alert", { exportparts: "base: erroralert-base, icon:erroralert-icon", class: `Error ${this.transparent ? "Transparent" : ""}`, type: "danger", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-octagon"}` }),
         h("slot", null)));
     }
     else if (this.type === "info") {
-      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: "Info", type: "primary", open: true },
+      return (h("sl-alert", { id: "icon", exportparts: "base: infoalert-base, icon:infoalert-icon", class: `Info ${this.transparent ? "Transparent" : ""}`, type: "info", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "info-circle"}` }),
         h("slot", null)));
     }
     else if (this.type === "warning") {
-      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: "Warning", type: "warning", open: true },
+      return (h("sl-alert", { exportparts: "base: warningalert-base, icon:warningalert-icon", class: `Warning ${this.transparent ? "Transparent" : ""}`, type: "warning", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "exclamation-triangle"}` }),
         h("slot", null)));
     }
     else {
-      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: "Success", type: "success", open: true },
+      return (h("sl-alert", { exportparts: "base: successalert-base, icon:successalert-icon", class: `Success ${this.transparent ? "Transparent" : ""}`, type: "success", open: true },
         h("sl-icon", { id: "icon", slot: "icon", name: `${this.icon ? this.icon : "check2-circle"}` }),
         h("slot", null)));
     }
@@ -80,6 +84,24 @@ export class FormMessage {
       },
       "attribute": "icon",
       "reflect": false
+    },
+    "transparent": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Render the alert with transparent styles"
+      },
+      "attribute": "transparent",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {

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

@@ -14,7 +14,7 @@ export function PortalContainerView(props, children) {
       maxWidth: props.maxWidth,
       margin: props.center && "auto",
       justifyContent: props.justifyContent,
-      backgroundColor: props.backgroundColor || "inherit",
+      backgroundColor: props.backgroundColor || "var(--sqm-portal-background)",
     },
   };
   const vanillaStyle = `

package/dist/collection/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.js

@@ -250,7 +250,7 @@ export const TaxAndCashDashboardView = (props) => {
               termsAndConditions: (h("a", { target: "_blank", href: `https://terms.advocate.impact.com/PayoutTermsAndConditions.html` }, text.termsAndConditions)),
             }),
             button: (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", onClick: callbacks.onNewFormClick }, text.w9RequiredButtonText)),
-            alertType: "info",
+            alertType: "warning",
             icon: "info-circle",
             class: sheet.classes.WarningHoldAlertContainer,
           };
@@ -319,7 +319,7 @@ export const TaxAndCashDashboardView = (props) => {
           }, {
             supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
           }),
-          alertType: "danger",
+          alertType: "error",
           icon: "exclamation-octagon",
           class: sheet.classes.ErrorHoldAlertContainer,
         };
@@ -462,8 +462,7 @@ export const TaxAndCashDashboardView = (props) => {
         }, {
           supportLink: (h("a", { target: "_blank", href: `mailto:advocate-support@impact.com` }, text.supportLink)),
         }))),
-      alertInfo && (h("sl-alert", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, open: true, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class },
-        h("sl-icon", { slot: "icon", name: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon }),
+      alertInfo && (h("sqm-form-message", { exportparts: "base: alert-base, icon:alert-icon", type: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.alertType, class: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.class, icon: alertInfo === null || alertInfo === void 0 ? void 0 : alertInfo.icon, transparent: true },
         h("strong", null, alertInfo.header),
         h("p", { style: { margin: "0" } }, alertInfo.description),
         alertInfo.buttonText && (h("sl-button", { style: { marginTop: "var(--sl-spacing-x-small)" }, type: "default", loading: states.veriffLoading, onClick: () => callbacks.onVerifyClick() }, alertInfo.buttonText)),

package/dist/esm/{ShadowViewAddon-4cde160a.js → ShadowViewAddon-c0bd62f7.js}

@@ -13,7 +13,7 @@ import { l as luxon } from './luxon-bbf75a9d.js';
 import { T as TextSpanView } from './sqm-text-span-view-4c17b8c9.js';
 import { p as pathToRegexp } from './index-ffa26b43.js';
 import { a as isValidColor, b as isMobile } from './utilities-72c07b09.js';
-import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-16309b22.js';
+import { a as PortalSectionView, P as PortalContainerView } from './sqm-portal-container-view-176e92e3.js';
 
 function BigStatView(props) {
   const { statvalue, flexReverse, alignment, statTextColor, statFontSize, descriptionTextColor, descriptionFontSize, statFontWeight, } = props;