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

package/dist/collection/components/sqm-coupon-code/sqm-coupon-code.js

@@ -7,7 +7,6 @@ import { CouponCodeView } from "./sqm-coupon-code-view";
 import { useCouponCode } from "./useCouponCode";
 /**
  * @uiName Coupon Code
- * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"]
  * @compatibility Built for instant access
  * @exampleGroup Instant Access
  * @example Coupon Code - <sqm-coupon-code tooltip-text="Copied to Clipboard" tooltip-lifespan="1000"></sqm-coupon-code>
@@ -31,7 +30,6 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["left", "center", "right"]
      * @uiEnumNames ["Left", "Center", "Right"]
-     * @uiGroup Style
      */
     this.textAlign = "left";
     /**
@@ -45,7 +43,6 @@ export class CouponCode {
      * @uiType string
      * @uiEnum ["icon", "button-outside", "button-below"]
      * @uiEnumNames ["Icon", "Button outside", "Button below"]
-     * @uiGroup Style
      */
     this.buttonStyle = "icon";
     /**
@@ -92,6 +89,22 @@ export class CouponCode {
      * @uiGroup Coupon code error
      */
     this.pendingErrorText = "Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!";
+    /**
+     * Display this message when the code fails to load before retrying.
+     *
+     * @uiWidget textArea
+     * @uiName Code sync error retry message
+     * @uiGroup Coupon code error
+     */
+    this.codeSyncErrorRetryText = "We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds.";
+    /**
+     * Display this message when the code fails to load after retrying.
+     *
+     * @uiWidget textArea
+     * @uiName Code sync error message
+     * @uiGroup Coupon code error
+     */
+    this.codeSyncErrorText = "We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance.";
     /**
      * Display this message when the code fails to load due to an unspecified error.
      *
@@ -107,15 +120,6 @@ export class CouponCode {
      * @uiGroup Coupon code error
      */
     this.couponCodePlaceholder = "...";
-    /**
-     * 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";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -217,9 +221,6 @@ export class CouponCode {
           }, {
             "text": "[\"Left\", \"Center\", \"Right\"]",
             "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": ""
       },
@@ -271,9 +272,6 @@ export class CouponCode {
           }, {
             "text": "[\"Icon\", \"Button outside\", \"Button below\"]",
             "name": "uiEnumNames"
-          }, {
-            "text": "Style",
-            "name": "uiGroup"
           }],
         "text": "Set the copy button style and placement."
       },
@@ -437,7 +435,7 @@ export class CouponCode {
       "reflect": false,
       "defaultValue": "\"Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!\""
     },
-    "genericErrorText": {
+    "codeSyncErrorRetryText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -452,19 +450,19 @@ export class CouponCode {
             "text": "textArea",
             "name": "uiWidget"
           }, {
-            "text": "Code retrieval error message",
+            "text": "Code sync error retry message",
             "name": "uiName"
           }, {
             "text": "Coupon code error",
             "name": "uiGroup"
           }],
-        "text": "Display this message when the code fails to load due to an unspecified error."
+        "text": "Display this message when the code fails to load before retrying."
       },
-      "attribute": "error-text",
+      "attribute": "code-sync-error-retry-text",
       "reflect": false,
-      "defaultValue": "\"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.\""
+      "defaultValue": "\"We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds.\""
     },
-    "couponCodePlaceholder": {
+    "codeSyncErrorText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -476,48 +474,22 @@ export class CouponCode {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Coupon code placeholder",
+            "text": "textArea",
+            "name": "uiWidget"
+          }, {
+            "text": "Code sync error message",
             "name": "uiName"
           }, {
             "text": "Coupon code error",
             "name": "uiGroup"
           }],
-        "text": "Display this text when the coupon code can\u2019t be retrieved."
+        "text": "Display this message when the code fails to load after retrying."
       },
-      "attribute": "coupon-code-placeholder",
+      "attribute": "code-sync-error-text",
       "reflect": false,
-      "defaultValue": "\"...\""
+      "defaultValue": "\"We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance.\""
     },
-    "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"
-      },
-      "attribute": "border-color",
-      "reflect": false
-    },
-    "textColor": {
+    "genericErrorText": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -526,86 +498,25 @@ export class CouponCode {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
-            "text": "Text color",
-            "name": "uiName"
-          }, {
-            "text": "color",
+            "text": "textArea",
             "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",
+            "text": "Code retrieval error message",
             "name": "uiName"
           }, {
-            "text": "string",
-            "name": "uiType"
-          }, {
-            "text": "[\"primary\", \"secondary\"]",
-            "name": "uiEnum"
-          }, {
-            "text": "[\"Primary\", \"Secondary\"]",
-            "name": "uiEnumNames"
-          }, {
-            "text": "Style",
+            "text": "Coupon code error",
             "name": "uiGroup"
           }],
-        "text": "The type of the button (primary or secondary) that will be used to copy the link."
+        "text": "Display this message when the code fails to load due to an unspecified error."
       },
-      "attribute": "button-type",
+      "attribute": "error-text",
       "reflect": false,
-      "defaultValue": "\"primary\""
+      "defaultValue": "\"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue.\""
     },
-    "backgroundColor": {
+    "couponCodePlaceholder": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -614,32 +525,27 @@ export class CouponCode {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
-            "text": "Background color",
+            "text": "Coupon code placeholder",
             "name": "uiName"
           }, {
-            "text": "color",
-            "name": "uiWidget"
-          }, {
-            "text": "color",
-            "name": "format"
-          }, {
-            "text": "Style",
+            "text": "Coupon code error",
             "name": "uiGroup"
           }],
-        "text": "Background color of share link container"
+        "text": "Display this text when the coupon code can\u2019t be retrieved."
       },
-      "attribute": "background-color",
-      "reflect": false
+      "attribute": "coupon-code-placeholder",
+      "reflect": false,
+      "defaultValue": "\"...\""
     },
     "demoData": {
       "type": "unknown",
       "mutable": false,
       "complexType": {
         "original": "DemoData<CouponCodeViewProps>",
-        "resolved": "{ loading?: boolean; textColor?: string; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: string; buttonType?: \"primary\" | \"secondary\"; 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; borderColor?: string; onClick?: () => void; }",
+        "resolved": "{ loading?: boolean; errorType?: \"error\" | \"warning\" | \"info\" | \"success\"; couponCodeLabel?: 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; onClick?: () => void; }",
         "references": {
           "DemoData": {
             "location": "import",
@@ -678,11 +584,8 @@ function useDemoCouponCode(props) {
     error: false,
     couponCodePlaceholder: props.couponCodePlaceholder,
     couponCodeLabel: props.couponCodeLabel,
-    borderColor: props.borderColor,
-    backgroundColor: props.backgroundColor,
-    textColor: props.textColor,
-    borderRadius: props.borderRadius,
-    buttonType: props.buttonType,
+    codeSyncErrorText: props.codeSyncErrorText,
+    codeSyncErrorRetryText: props.codeSyncErrorRetryText,
     open,
     onClick: () => {
       // Should well supported: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard#browser_compatibility

package/dist/collection/components/sqm-coupon-code/useCouponCode.js

@@ -1,6 +1,7 @@
 import { useEngagementMedium, useMutation, useProgramId, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { useState } from "@saasquatch/universal-hooks";
+import { useEffect, useRef, useState } from "@saasquatch/universal-hooks";
 import { gql } from "graphql-request";
+import { intl } from "../../global/global";
 const FuelTankRewardsQuery = gql `
   query fuelTankRewardsQuery($programId: ID!) {
     user: viewer {
@@ -18,6 +19,7 @@ const FuelTankRewardsQuery = gql `
             dateCancelled
             dateScheduledFor
             datePendingForUnhandledError
+            pendingReasons
           }
           count
           totalCount
@@ -37,16 +39,61 @@ export function useCouponCode(props) {
   const programId = useProgramId();
   const engagementMedium = useEngagementMedium();
   const [sendLoadEvent] = useMutation(WIDGET_ENGAGEMENT_EVENT);
+  const [retried, setRetried] = useState(false);
+  const [countdown, setCountdown] = useState(60);
+  const timerRef = useRef(undefined);
+  const countdownRef = useRef(undefined);
   const { data, loading, refetch, errors } = useQuery(FuelTankRewardsQuery, { programId }, !(user === null || user === void 0 ? void 0 : user.jwt));
+  async function checkReward() {
+    var _a, _b, _c, _d, _e, _f;
+    const data = await refetch();
+    setRetried(true);
+    if (!((_f = (_e = (_d = (_c = (_b = (_a = data) === null || _a === void 0 ? void 0 : _a.user) === null || _b === void 0 ? void 0 : _b.instantAccessRewards) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d[0]) === null || _e === void 0 ? void 0 : _e.pendingReasons) === null || _f === void 0 ? void 0 : _f.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      return clearInterval(timerRef.current);
+    }
+  }
+  const reward = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.instantAccessRewards) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
+  const startTimer = (countdown = 61000) => setInterval(checkReward, countdown);
+  const startCountdown = (countdown) => setInterval(() => setCountdown(countdown), 1000);
+  // Refetch reward status timer
+  useEffect(() => {
+    var _a, _b;
+    if (!timerRef.current && ((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      timerRef.current = startTimer();
+    }
+    return () => {
+      clearInterval(timerRef.current);
+    };
+  }, []);
+  // Countdown timer
+  useEffect(() => {
+    var _a, _b;
+    if (countdown > 0 && ((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      clearInterval(countdownRef.current);
+      countdownRef.current = startCountdown(countdown - 1);
+    }
+    return () => {
+      clearInterval(countdownRef.current);
+    };
+  }, [countdown, reward]);
+  useEffect(() => {
+    var _a, _b;
+    // Retry after a minute if the reward is pending and has an error syncing the fuel tank code
+    if (((_a = reward === null || reward === void 0 ? void 0 : reward.statuses) === null || _a === void 0 ? void 0 : _a.includes("PENDING")) && ((_b = reward === null || reward === void 0 ? void 0 : reward.pendingReasons) === null || _b === void 0 ? void 0 : _b.includes("ERROR_SYNCING_FUEL_TANK_CODE"))) {
+      startTimer();
+    }
+  }, [reward]);
   const getStatus = (reward) => {
     if (!reward || !reward.statuses)
       return "ERROR";
     const state = reward.statuses[reward.statuses.length - 1];
+    if (state === "PENDING" &&
+      reward.pendingReasons.includes("ERROR_SYNCING_FUEL_TANK_CODE"))
+      return "ERROR_SYNCING_FUEL_TANK_CODE";
     if (state === "PENDING" && reward.dateScheduledFor === null)
       return "EMPTY_TANK";
     return state;
   };
-  const reward = (_c = (_b = (_a = data === null || data === void 0 ? void 0 : data.user) === null || _a === void 0 ? void 0 : _a.instantAccessRewards) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c[0];
   const rewardStatus = getStatus(reward);
   const dateAvailable = rewardStatus === "PENDING" && reward.dateScheduledFor
     ? new Date(reward.dateScheduledFor).toLocaleDateString("default", {
@@ -84,6 +131,21 @@ export function useCouponCode(props) {
         return props.expiredErrorText;
       case "EMPTY_TANK":
         return props.fullfillmentErrorText;
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
+        return retried
+          ? intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+          })
+          : intl.formatMessage({
+            id: "codeSyncErrorText",
+            defaultMessage: props.codeSyncErrorRetryText,
+          }, {
+            supportEmail: "advocate-support@impact.com",
+            timeRemaining: countdown,
+          });
       case "PENDING":
         return props.pendingErrorText.replace("{unpendDate}", dateAvailable);
       case "REDEEMED":
@@ -100,6 +162,7 @@ export function useCouponCode(props) {
       case "EMPTY_TANK":
       case "CANCELLED":
       case "ERROR":
+      case "ERROR_SYNCING_FUEL_TANK_CODE":
         return "warning";
       case "PENDING":
         return "info";
@@ -122,6 +185,5 @@ export function useCouponCode(props) {
     dateAvailable,
     loading,
     errorType,
-    buttonType: props.buttonType || "primary",
   };
 }

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout-view.js

@@ -3,23 +3,14 @@ import { createStyleSheet } from "../../styling/JSS";
 export function DividedLayoutView(props, children) {
   const getBorder = () => {
     if (props.direction === "row") {
-      return {
-        "border-right": props.borderless
-          ? "none"
-          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
-      };
+      return { "border-right": props.dividerStyle || "1px solid #EAEAEA" };
     }
     else {
-      return {
-        "border-bottom": props.borderless
-          ? "none"
-          : `var(--sqm-border-thickness) solid ${props.borderColor || "var(--sqm-border-color)"}`,
-      };
+      return { "border-bottom": props.dividerStyle || "1px solid #EAEAEA" };
     }
   };
   const style = {
     LayoutContainer: {
-      background: props.backgroundColor,
       display: "contents",
       // First style applies when shadow DOM is disabled, second applies when shadow DOM is enabled
       "& > :not(:last-child)": {
@@ -35,10 +26,11 @@ export function DividedLayoutView(props, children) {
     flex: 1;
     box-sizing: border-box;
     flex-direction: ${props.direction};
-    background-color: var(--sqm-portal-background);
-    color: var(--sqm-text);
+    background-color: var(--sqm-content-background);
     overflow-x: clip;
-    ${props.direction === "column" ? "width: 100%; max-width: 100%" : ""}
+    ${props.direction === "column"
+    ? "width: 100%; max-width: var(--sqm-portal-main-width);"
+    : ""}
     ${props.contentAreaWidth !== null
     ? `max-width: ${props.contentAreaWidth} !important;`
     : ""}

package/dist/collection/components/sqm-divided-layout/sqm-divided-layout.js

@@ -7,24 +7,15 @@ import { getProps } from "../../utils/utils";
  * Spacing is left up to the child
  *
  * @uiName Divided Layout
- * @validParents ["sqm-brand","sqm-portal-container","div","sqm-popup-container","sqm-hero","sqm-referral-card","sqm-titled-section","sqb-program-section","sqb-conditional-section", "sqm-divided-layout"]
- * @exampleGroup Layout
  * @slots [{"name":"", "title":"Layout Content"}]
  */
 export class DividedLayout {
   constructor() {
     /**
-     * @undocumented
      * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.
      * @uiName Border style
      */
-    this.dividerStyle = "var(--sqm-border-thickness) solid var(--sqm-border-color)";
-    /**
-     * Background color of the divider
-     * @uiName Divider Background Color
-     * @uiWidget color
-     */
-    this.backgroundColor = "#FFFFFF";
+    this.dividerStyle = "1px solid #EAEAEA";
     withHooks(this);
   }
   disconnectedCallback() { }
@@ -99,64 +90,14 @@ export class DividedLayout {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color.",
-            "name": "undocumented"
-          }, {
             "text": "Border style",
             "name": "uiName"
           }],
-        "text": ""
+        "text": "Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color."
       },
       "attribute": "divider-style",
       "reflect": false,
-      "defaultValue": "\"var(--sqm-border-thickness) solid var(--sqm-border-color)\""
-    },
-    "backgroundColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Divider Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": "Background color of the divider"
-      },
-      "attribute": "background-color",
-      "reflect": false,
-      "defaultValue": "\"#FFFFFF\""
-    },
-    "borderColor": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Divider Background Color",
-            "name": "uiName"
-          }, {
-            "text": "color",
-            "name": "uiWidget"
-          }],
-        "text": "Color of the divider (defaults to default text color if none is set)"
-      },
-      "attribute": "border-color",
-      "reflect": false
+      "defaultValue": "\"1px solid #EAEAEA\""
     }
   }; }
 }

package/dist/collection/components/sqm-dropdown-field/sqm-dropdown-field-view.js

@@ -15,7 +15,7 @@ const style = {
     fontSize: "var(--sl-input-help-text-font-size-medium)",
   },
   FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
+    "margin-bottom": "var(--sl-spacing-medium)",
   },
 };
 const vanillaStyle = `

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

@@ -32,7 +32,7 @@ const EditProfileView = (props) => {
             }, submit: true, exportparts: "base: primarybutton-base" }, text.updatetext),
           h("sl-button", { onClick: () => {
               callbacks.setShowEdit(false);
-            }, type: "secondary", exportparts: "base: secondarybutton-base" }, text.canceltext)))));
+            }, exportparts: "base: defaultbutton-base" }, text.canceltext)))));
   }
   return (h("div", { class: `CardWrapper FormWrapper ${!states.showEdit && "ShowEdit"}`, part: "sqm-base" },
     h("div", { class: "FormSection" },

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

@@ -8,7 +8,7 @@ export function EmptyStateView(props) {
       h("sqm-text", { slot: "label" },
         h("p", { part: "header-text" }, emptyStateHeader)),
       h("sqm-text", { slot: "content" },
-        h("p", { part: "description-text" }, intl.formatMessage({
+        h("p", { part: "description-text", innerHTML: "", style: { color: "var(--sl-color-gray-500)" } }, intl.formatMessage({
           id: "emptyStateText",
           defaultMessage: emptyStateText,
         }, {

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

@@ -4,21 +4,29 @@ export default {
 };
 export const SuccessAlert = () => {
   return (h("sqm-form-message", { type: "success" },
-    h("p", { part: "alert-title" }, "This is the title"),
-    h("p", { part: "alert-description" }, "This is the description")));
+    h("div", null, "This is a success message.")));
 };
 export const ErrorAlert = () => {
   return (h("sqm-form-message", { type: "error" },
-    h("p", { part: "alert-title" }, "This is the title"),
-    h("p", { part: "alert-description" }, "This is the description")));
+    h("div", null, "This is an error message")));
 };
 export const WarningAlert = () => {
   return (h("sqm-form-message", { type: "warning" },
-    h("p", { part: "alert-title" }, "This is the title"),
-    h("p", { part: "alert-description" }, "This is the description")));
+    h("div", null, "This is an error message")));
 };
 export const InfoAlert = () => {
   return (h("sqm-form-message", { type: "info" },
-    h("p", { part: "alert-title" }, "This is the title"),
-    h("p", { part: "alert-description" }, "This is the description")));
+    h("div", null, "This is an info message")));
+};
+export const FullStackSuccess = () => {
+  return (h("sqm-form-message", { type: "success", exportparts: "successalert-icon" },
+    h("div", { class: "AlertContent" },
+      h("div", { part: "successalert-text" }, "Title"),
+      h("div", { part: "successalert-subtext" }, "Body text."),
+      h("sl-button", { type: "default", exportparts: "base: defaultbutton-base", onClick: () => {
+          console.log("click");
+        } }, "Primary Action"),
+      h("sl-button", { class: "SecondaryTextButton", type: "text", onClick: () => {
+          console.log("click");
+        } }, "Secondary Action"))));
 };