@saasquatch/mint-components 2.1.8-23 → 2.1.8-25

package/dist/cjs/sqm-big-stat_45.cjs.entry.js

@@ -27,7 +27,7 @@ const useInstantAccessRegistration = require('./useInstantAccessRegistration-651
 const useLeadFormState = require('./useLeadFormState-76d3b511.js');
 const utilities = require('./utilities-096934ea.js');
 const ErrorView = require('./ErrorView-ee7b0f36.js');
-const ShadowViewAddon = require('./ShadowViewAddon-00d53485.js');
+const ShadowViewAddon = require('./ShadowViewAddon-247ccfa4.js');
 require('./sqm-portal-container-view-70a47420.js');
 const data = require('./data-e83f8a41.js');
 const extractProps = require('./extractProps-e9c55ba8.js');
@@ -6114,29 +6114,29 @@ const ShareLink = class {
      */
     this.buttonStyle = "icon";
     /**
-     * Enable users to customize their referral link
+     * Let advocates customize their share links up to 5 times.
      *
-     * @uiName Customize URL
+     * @uiName Allow customization
      * @uiType boolean
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.customizeUrl = false;
+    this.allowCustomization = false;
     /**
-     * Text shown below the share link input to trigger customization
+     * Displayed below the share link.
      *
-     * @uiName Customize link label
+     * @uiName Customize link button label
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.customizeLinkLabel = "Customize Link";
+    this.customizeLinkButtonLabel = "Customize Link";
     /**
      * Text for the save button in editing mode
      *
      * @uiName Save button label
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.saveLabelText = "Save";
@@ -6145,79 +6145,83 @@ const ShareLink = class {
      *
      * @uiName Cancel button label
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.cancelLabelText = "Cancel";
     /**
-     * Title text shown when the custom link is already taken
+     * Title of the error message shown when the link has already been taken
      *
-     * @uiName Existing code conflict error title
+     * @uiName Link taken error title
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.existingCodeConflictErrorTitle = "This link is already taken";
+    this.linkTakenErrorTitle = "This link is already taken";
     /**
-     * Description text shown when the custom link is already taken
+     * Description text shown when the link has already been taken
      *
-     * @uiName Existing code conflict error description
+     * @uiName Link taken error message
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.existingCodeConflictErrorDescription = "Try adding numbers, a dash or underscore to create a unique link.";
+    this.linkTakenErrorDescription = "Try adding numbers, a dash or underscore to create a unique link.";
     /**
-     * Title text shown when the link contains invalid characters
+     * Title of the error message shown when the link contains invalid special characters.
      *
      * @uiName Invalid characters error title
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.invalidCharactersErrorTitle = "Please use only letters, numbers, dashes and underscores";
     /**
-     * Description text shown when the link contains invalid characters
+     * Description text shown when the link contains invalid special characters.
      *
      * @uiName Invalid characters error description
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.invalidCharactersErrorDescription = "Special characters can break the link when sharing.";
     /**
-     * Title text shown when the link contains profanity
+     * Title of the error message shown when the link contains profanity or brand names.
      *
-     * @uiName Profanity error title
+     * @uiName Restricted words error title
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.profanityErrorTitle = "Please try a different link";
+    this.restrictedWordsErrorTitle = "Please try a different link";
     /**
-     * Description text shown when the link contains profanity
+     * Description text shown when the link contains profanity or brand names.
      *
-     * @uiName Profanity error description
+     * @uiName Restricted words error description
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.profanityErrorDescription = "This link contains a restricted word.";
+    this.restrictedWordsErrorDescription = "This link contains a restricted word.";
     /**
-     * Text describing the edit limit
+     * Subtext shown while the user is customizing their URL.
      *
      * @uiName Edit limit text
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
-    this.editLimitText = "You can edit your link up to 5 times.";
+    this.editLimitText = "You can edit your link up to {editsRemaining} more times.";
     /**
-     * Message shown when the edit limit has been reached. Use {supportLink} as a placeholder for the support link.
+     * Message shown when the URL has been edited 5 times. To display a clickable link, use {supportLink} as a placeholder.
      *
      * @uiName Edit limit reached text
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiWidget textarea
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.editLimitReachedText = "5 edit limit reached. To make more changes, please contact {supportLink}.";
@@ -6226,7 +6230,7 @@ const ShareLink = class {
      *
      * @uiName Support link text
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.supportLinkText = "Support";
@@ -6235,7 +6239,7 @@ const ShareLink = class {
      *
      * @uiName Customize disabled tooltip
      * @uiType string
-     * @uiGroup Customize Vanity Link
+     * @uiGroup Customizable Vanity Link
      * @requiredFlavor impact
      */
     this.customizeDisabledTooltip = "Link customization is not available.";
@@ -6276,8 +6280,8 @@ function useDemoShareLink(props) {
         setTimeout(() => setOpen(false), props.tooltiplifespan);
       },
     },
-    customizeUrl: props.customizeUrl,
-    customizeLinkLabel: props.customizeLinkLabel,
+    allowCustomization: props.allowCustomization,
+    customizeLinkLabel: props.customizeLinkButtonLabel,
     saveLabelText: props.saveLabelText,
     cancelLabelText: props.cancelLabelText,
     isEditing,

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

@@ -33,7 +33,7 @@ require('./utilities-096934ea.js');
 const sqmPortalResetPasswordView = require('./sqm-portal-reset-password-view-6b1acd90.js');
 require('./ErrorView-ee7b0f36.js');
 const sqmQrCodeView = require('./sqm-qr-code-view-1f2daa76.js');
-const ShadowViewAddon = require('./ShadowViewAddon-00d53485.js');
+const ShadowViewAddon = require('./ShadowViewAddon-247ccfa4.js');
 const sqmPortalContainerView = require('./sqm-portal-container-view-70a47420.js');
 const sqmUserInfoFormView = require('./sqm-user-info-form-view-93e996d6.js');
 const data = require('./data-e83f8a41.js');
@@ -14078,7 +14078,7 @@ const defaultCustomizeProps = {
     open: false,
     tooltiptext: "Copied!",
   },
-  customizeUrl: true,
+  allowCustomization: true,
   customizeLinkLabel: "Customize Link",
   saveLabelText: "Save",
   cancelLabelText: "Cancel",
@@ -14273,7 +14273,7 @@ const CustomizeUrlEnabled = createHookStory(() => {
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
-    customizeUrl: true,
+    allowCustomization: true,
   }))));
 });
 

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

@@ -102,7 +102,7 @@ const defaultCustomizeProps = {
     open: false,
     tooltiptext: "Copied!",
   },
-  customizeUrl: true,
+  allowCustomization: true,
   customizeLinkLabel: "Customize Link",
   saveLabelText: "Save",
   cancelLabelText: "Cancel",

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

@@ -63,6 +63,6 @@ export const CustomizeUrlEnabled = createHookStory(() => {
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
-    customizeUrl: true,
+    allowCustomization: true,
   }))));
 });

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

@@ -9,7 +9,7 @@ const vanillaStyle = `
   }
 `;
 export function ShareLinkView(props) {
-  const { copyTextViewProps, customizeUrl, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
+  const { copyTextViewProps, allowCustomization, customizeLinkLabel, saveLabelText, cancelLabelText, isEditing, editValue, domainPrefix, editsRemaining, maxEdits, limitReached, validationError, isValidating, isSaving, characterLimit, minCharacters, charactersRemaining, editLimitText, editLimitReachedText, supportLinkText, customizeDisabled, customizeDisabledTooltip, onCustomizeClick, onEditValueChange, onSave, onCancel, } = props;
   const style = {
     Container: {
       display: "flex",
@@ -97,6 +97,32 @@ export function ShareLinkView(props) {
       gap: "var(--sl-spacing-medium)",
       alignItems: "center",
     },
+    SaveButton: {
+      cursor: "pointer",
+      fontFamily: "var(--sl-font-sans)",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)",
+      borderRadius: "var(--sqm-border-radius-normal, 4px)",
+      border: "1px solid var(--sl-color-neutral-900)",
+      background: "var(--sl-color-neutral-900)",
+      color: "#fff",
+      "&:disabled": {
+        opacity: "0.5",
+        cursor: "default",
+      },
+    },
+    CancelButton: {
+      margin: "0",
+      fontSize: "var(--sl-font-size-small)",
+      fontWeight: "600",
+      cursor: "pointer",
+      background: "none",
+      border: "none",
+      padding: "0",
+      fontFamily: "var(--sl-font-sans)",
+      color: "var(--sl-color-neutral-500)",
+    },
     LimitReachedContainer: {
       display: "flex",
       alignItems: "center",
@@ -107,6 +133,11 @@ export function ShareLinkView(props) {
   const styleString = sheet.toString();
   const errorMessageType = (validationError === null || validationError === void 0 ? void 0 : validationError.code) === "EXISTING_CODE_CONFLICT" ? "info" : "warning";
   const showCharactersRemaining = charactersRemaining <= 14;
+  const editLimitMessage = intl.formatMessage({
+    id: "editLimitText",
+    defaultMessage: editLimitText,
+  }, { editsRemaining });
+  console.log(domainPrefix, "domain prefix");
   // Editing state
   if (isEditing) {
     return (h("div", { class: sheet.classes.Container },
@@ -121,7 +152,7 @@ export function ShareLinkView(props) {
               e.preventDefault();
           }, disabled: isSaving, maxLength: characterLimit })),
       h("p", { class: sheet.classes.HelperText },
-        editLimitText,
+        editLimitMessage,
         showCharactersRemaining &&
           ` Characters remaining: ${charactersRemaining}`),
       validationError && (h("sqm-form-message", { type: errorMessageType, style: { paddingBottom: "var(--sl-spacing-xx-small)" } },
@@ -129,12 +160,12 @@ export function ShareLinkView(props) {
         validationError.description)),
       isValidating && h("p", { class: sheet.classes.HelperText }, "Validating..."),
       h("div", { class: sheet.classes.ActionRow },
-        h("sl-button", { type: "primary", onClick: onSave, disabled: isSaving ||
+        h("button", { class: sheet.classes.SaveButton, onClick: onSave, disabled: isSaving ||
             isValidating ||
             !!validationError ||
             !editValue ||
             editValue.length < minCharacters }, isSaving ? "Saving..." : saveLabelText),
-        h("sl-button", { type: "text", onClick: onCancel, disabled: isSaving }, cancelLabelText))));
+        h("button", { class: sheet.classes.CancelButton, onClick: onCancel, disabled: isSaving }, cancelLabelText))));
   }
   // Default / Customized / Limit reached states
   return (h("div", { class: sheet.classes.Container },
@@ -142,13 +173,13 @@ export function ShareLinkView(props) {
       styleString,
       vanillaStyle),
     h(CopyTextView, Object.assign({}, copyTextViewProps)),
-    customizeUrl &&
+    allowCustomization &&
       (customizeDisabled ? (h("sl-tooltip", { content: customizeDisabledTooltip, placement: "top", style: { display: "inline-block", width: "fit-content" } },
         h("p", { class: sheet.classes.CustomizeLinkDisabled }, customizeLinkLabel))) : (h("div", { class: sheet.classes.LimitReachedContainer },
         h("p", { class: limitReached
             ? sheet.classes.CustomizeLinkDisabled
             : sheet.classes.CustomizeLinkText, onClick: limitReached ? undefined : onCustomizeClick }, customizeLinkLabel),
-        customizeUrl && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
+        allowCustomization && limitReached && (h("p", { class: sheet.classes.HelperText }, intl.formatMessage({
           id: "editLimitReached",
           defaultMessage: editLimitReachedText,
         }, {