@saasquatch/mint-components 2.1.10-57 → 2.1.10-60

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

@@ -8,9 +8,9 @@ import { c as createStyleSheet } from './JSS-67b5cff8.js';
 import './useReferralCodes-52ca720f.js';
 import './mixins-f750863a.js';
 import { C as CopyTextView } from './copy-text-view-87259b11.js';
-import './sqm-text-span-view-738acfb3.js';
-import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-1a638fae.js';
-import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-2f4936ef.js';
+import './sqm-text-span-view-72f43dff.js';
+import { b as PortalRegisterView, P as PortalForgotPasswordView, a as PortalLoginView, c as PortalVerifyEmailView } from './sqm-portal-verify-email-view-c61536b7.js';
+import { P as PortalRegistrationFormView } from './sqm-portal-registration-form-view-79265df5.js';
 import { G as GenericTableView } from './GenericTableView-8c72ac30.js';
 import './useChildElements-9bccfb72.js';
 import { l as luxon } from './luxon-1be92a8e.js';
@@ -23,14 +23,14 @@ import { L as LeaderboardRankView } from './sqm-leaderboard-rank-view-7a682cc3.j
 import { L as LogoutCurrentUserView } from './sqm-logout-current-user-view-376c1bf6.js';
 import { N as NavigationSidebarView } from './sqm-navigation-sidebar-view-2b66457a.js';
 import { N as NavigationSidebarItemView } from './sqm-navigation-sidebar-item-view-b3beac5a.js';
-import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-426370f1.js';
-import { P as PortalProfileView } from './sqm-portal-profile-view-f015fd6a.js';
+import { P as PortalEmailVerificationView } from './sqm-portal-email-verification-view-04528277.js';
+import { P as PortalProfileView } from './sqm-portal-profile-view-b5ea620f.js';
 import './utilities-77b1e0cc.js';
-import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-cfbc0eb0.js';
+import { P as PortalResetPasswordView } from './sqm-portal-reset-password-view-f84c04cf.js';
 import './ErrorView-74cb3af8.js';
 import { Q as QrCodeView } from './sqm-qr-code-view-ce476721.js';
-import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as useShareLink, K as ProgressBarView, M as ProgressBar$2, O as LeadFormView, Q as LeadDropdownFieldView, U as ShadowViewAddon } from './ShadowViewAddon-47f1e579.js';
-import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-a8c708cd.js';
+import { S as StatContainerView, B as BigStatView, a as ShareButtonView, P as PortalChangePasswordView, b as PoweredByImg$1, c as BaseRegistrationFormView, u as useDemoBigStat, T as TaskCardView, C as CardFeedView, d as CheckboxFieldView, e as CouponCodeView, D as DropdownFieldView, E as EditProfileView, L as LeaderboardView, H as HeroView, I as InputFieldView, N as NameFieldsView, f as ChangeMarktingView, g as PortalFooterView, h as PortalFrameView, R as ReferralIframeView, i as RewardExchangeView, r as rewardExchangeCustomErrorMsg, j as rewardExchangeLongText, k as rewardExchangeSelected, l as chooseAmountFixed, m as chooseAmountFixedNoDescription, n as chooseAmountVariable, o as chooseAmountVariableNoDescription, p as chooseAmountVariableDisabled, q as chooseAmountVariableUnavailable, s as confirmFixed, t as confirmVariable, v as redemptionError, w as queryError, x as success, y as successVariable, z as loading, A as empty$1, F as rewardExchange, G as useShareButton, J as ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-33f1a8f7.js';
+import { P as PortalContainerView, a as PortalSectionView } from './sqm-portal-container-view-200c9df8.js';
 import { I as InvoiceTableView, a as INDIRECT_TAX_SPAIN_REGIONS, b as INDIRECT_TAX_PROVINCES, O as OtherRegionSlotView, U as UserInfoFormView$1 } from './sqm-user-info-form-view-19d81a2b.js';
 import { t as taxTypeToName, L as LoadingView } from './data-12e6aae1.js';
 import { L as LeadInputFieldView } from './sqm-lead-input-field-view-d1b91650.js';
@@ -14051,21 +14051,145 @@ const CustomStyles$1 = () => {
   return h(CopyTextView, Object.assign({}, props));
 };
 const CustomStylesWithDemoHooks = () => {
-  const props = {
-    copyString: "https://noah.example.com",
-    open: false,
-    tooltiptext: "Copied!",
-    backgroundColor: "#1ed760",
-    borderRadius: "30px",
-    textColor: "red",
-    buttonType: "primary",
-    borderColor: "#121212",
-  };
-  return (h("sqm-share-link", { demoData: { ...props }, backgroundColor: "#1ed760" }));
+  return (h("sqm-share-link", { demoData: {
+      copyTextViewProps: {
+        copyString: "https://noah.example.com",
+        open: false,
+        tooltiptext: "Copied!",
+        backgroundColor: "#1ed760",
+        borderRadius: "30px",
+        textColor: "red",
+        buttonType: "primary",
+        borderColor: "#121212",
+      },
+    }, backgroundColor: "#1ed760" }));
 };
 const FullStack = () => {
   return h("sqm-share-link", null);
 };
+// Customize URL stories
+const noopFn = () => { };
+const defaultCustomizeProps = {
+  copyTextViewProps: {
+    copyString: "https://ssqt.co/abc123",
+    open: false,
+    tooltiptext: "Copied!",
+  },
+  allowCustomization: true,
+  customizeLinkLabel: "Customize Link",
+  saveLabelText: "Save",
+  savingLabelText: "Saving...",
+  cancelLabelText: "Cancel",
+  editLabelText: "Edit your link",
+  charactersRemainingText: "{count} characters remaining",
+  validatingLabelText: "Validating...",
+  isEditing: false,
+  editValue: "",
+  domainPrefix: "https://ssqt.co/",
+  editsRemaining: 3,
+  maxEdits: 5,
+  limitReached: false,
+  validationError: null,
+  isValidating: false,
+  isSaving: false,
+  characterLimit: 15,
+  minCharacters: 3,
+  charactersRemaining: 15,
+  editLimitText: "You can edit your link up to 5 times.",
+  editLimitReachedText: "5 edit limit reached. To make more changes, please contact {supportLink}.",
+  supportLinkText: "Support",
+  customizeDisabled: false,
+  customizeDisabledTooltip: "Link customization is not available.",
+  minCharactersText: "Minimum 3 characters",
+  onCustomizeClick: noopFn,
+  onEditValueChange: noopFn,
+  onSave: noopFn,
+  onCancel: noopFn,
+};
+const CustomizeUrlDefault = () => {
+  return h(ShareLinkView, Object.assign({}, defaultCustomizeProps));
+};
+const CustomizeUrlEditing = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+  })));
+};
+const CustomizeUrlCustomized = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+  })));
+};
+const CustomizeUrlLimitReached = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    copyTextViewProps: {
+      ...defaultCustomizeProps.copyTextViewProps,
+      copyString: "https://ssqt.co/bobtesterson",
+    },
+    editsRemaining: 0,
+    limitReached: true,
+  })));
+};
+const CustomizeUrlDisabled = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    customizeDisabled: true,
+  })));
+};
+const CustomizeUrlValidationError = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "EXISTING_CODE_CONFLICT",
+      title: "This link is already taken",
+      description: "Try adding numbers, a dash or underscore to create a unique link.",
+    },
+  })));
+};
+const CustomizeUrlInvalidCharacters = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "INVALID_CHARACTER",
+      title: "Please use only letters, numbers, dashes and underscores",
+      description: "Special characters can break the link when sharing.",
+    },
+  })));
+};
+const CustomizeUrlProfanity = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "nvoiwb18",
+    charactersRemaining: 7,
+    validationError: {
+      code: "BLOCKED_WORD",
+      title: "Please try a different link",
+      description: "This link contains a restricted word.",
+    },
+  })));
+};
+const CustomizeUrlSaving = () => {
+  return (h(ShareLinkView, Object.assign({}, {
+    ...defaultCustomizeProps,
+    isEditing: true,
+    editValue: "bobtesterson",
+    isSaving: true,
+  })));
+};
 
 const ShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -14080,7 +14204,16 @@ const ShareLink = /*#__PURE__*/Object.freeze({
   CopyButtonBelow: CopyButtonBelow$3,
   CustomStyles: CustomStyles$1,
   CustomStylesWithDemoHooks: CustomStylesWithDemoHooks,
-  FullStack: FullStack
+  FullStack: FullStack,
+  CustomizeUrlDefault: CustomizeUrlDefault,
+  CustomizeUrlEditing: CustomizeUrlEditing,
+  CustomizeUrlCustomized: CustomizeUrlCustomized,
+  CustomizeUrlLimitReached: CustomizeUrlLimitReached,
+  CustomizeUrlDisabled: CustomizeUrlDisabled,
+  CustomizeUrlValidationError: CustomizeUrlValidationError,
+  CustomizeUrlInvalidCharacters: CustomizeUrlInvalidCharacters,
+  CustomizeUrlProfanity: CustomizeUrlProfanity,
+  CustomizeUrlSaving: CustomizeUrlSaving
 });
 
 const UseShareLink_stories = {
@@ -14118,11 +14251,11 @@ const BareBonesView$1 = createHookStory(() => {
   return (h("div", null,
     "Sharelink:",
     " ",
-    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyString)));
+    h("code", { style: { borderStyle: "solid", borderWidth: "1px", padding: "2px" } }, res.copyTextViewProps.copyString)));
 });
 const RegularView$2 = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
     tooltiptext: "Copied to clipboard",
     tooltiplifespan: 1000,
@@ -14130,19 +14263,29 @@ const RegularView$2 = createHookStory(() => {
 });
 const FastTooltip = createHookStory(() => {
   setupGraphQL$c();
-  return (h(CopyTextView, Object.assign({}, useShareLink({
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
     programId: "klip-referral-program",
-    tooltiptext: "⠀⠀⠀⠀⠀⠀⠀⠀⠀HELLO THERE!!!\n⠀⠀⠀⡯⡯⡾⠝⠘⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢊⠘⡮⣣⠪⠢⡑⡌\n⠀⠀⠀⠟⠝⠈⠀⠀⠀⠡⠀⠠⢈⠠⢐⢠⢂⢔⣐⢄⡂⢔⠀⡁⢉⠸⢨⢑⠕⡌\n⠀⠀⡀⠁⠀⠀⠀⡀⢂⠡⠈⡔⣕⢮⣳⢯⣿⣻⣟⣯⣯⢷⣫⣆⡂⠀⠀⢐⠑⡌\n⢀⠠⠐⠈⠀⢀⢂⠢⡂⠕⡁⣝⢮⣳⢽⡽⣾⣻⣿⣯⡯⣟⣞⢾⢜⢆⠀⡀⠀⠪\n⣬⠂⠀⠀⢀⢂⢪⠨⢂⠥⣺⡪⣗⢗⣽⢽⡯⣿⣽⣷⢿⡽⡾⡽⣝⢎⠀⠀⠀⢡\n⣿⠀⠀⠀⢂⠢⢂⢥⢱⡹⣪⢞⡵⣻⡪⡯⡯⣟⡾⣿⣻⡽⣯⡻⣪⠧⠑⠀⠁⢐\n⣿⠀⠀⠀⠢⢑⠠⠑⠕⡝⡎⡗⡝⡎⣞⢽⡹⣕⢯⢻⠹⡹⢚⠝⡷⡽⡨⠀⠀⢔\n⣿⡯⠀⢈⠈⢄⠂⠂⠐⠀⠌⠠⢑⠱⡱⡱⡑⢔⠁⠀⡀⠐⠐⠐⡡⡹⣪⠀⠀⢘\n⣿⣽⠀⡀⡊⠀⠐⠨⠈⡁⠂⢈⠠⡱⡽⣷⡑⠁⠠⠑⠀⢉⢇⣤⢘⣪⢽⠀⢌⢎\n⣿⢾⠀⢌⠌⠀⡁⠢⠂⠐⡀⠀⢀⢳⢽⣽⡺⣨⢄⣑⢉⢃⢭⡲⣕⡭⣹⠠⢐⢗\n⣿⡗⠀⠢⠡⡱⡸⣔⢵⢱⢸⠈⠀⡪⣳⣳⢹⢜⡵⣱⢱⡱⣳⡹⣵⣻⢔⢅⢬⡷\n⣷⡇⡂⠡⡑⢕⢕⠕⡑⠡⢂⢊⢐⢕⡝⡮⡧⡳⣝⢴⡐⣁⠃⡫⡒⣕⢏⡮⣷⡟\n⣷⣻⣅⠑⢌⠢⠁⢐⠠⠑⡐⠐⠌⡪⠮⡫⠪⡪⡪⣺⢸⠰⠡⠠⠐⢱⠨⡪⡪⡰\n⣯⢷⣟⣇⡂⡂⡌⡀⠀⠁⡂⠅⠂⠀⡑⡄⢇⠇⢝⡨⡠⡁⢐⠠⢀⢪⡐⡜⡪⡊\n⣿⢽⡾⢹⡄⠕⡅⢇⠂⠑⣴⡬⣬⣬⣆⢮⣦⣷⣵⣷⡗⢃⢮⠱⡸⢰⢱⢸⢨⢌\n⣯⢯⣟⠸⣳⡅⠜⠔⡌⡐⠈⠻⠟⣿⢿⣿⣿⠿⡻⣃⠢⣱⡳⡱⡩⢢⠣⡃⠢⠁\n⡯⣟⣞⡇⡿⣽⡪⡘⡰⠨⢐⢀⠢⢢⢄⢤⣰⠼⡾⢕⢕⡵⣝⠎⢌⢪⠪⡘⡌⠀\n⡯⣳⠯⠚⢊⠡⡂⢂⠨⠊⠔⡑⠬⡸⣘⢬⢪⣪⡺⡼⣕⢯⢞⢕⢝⠎⢻⢼⣀⠀\n⠁⡂⠔⡁⡢⠣⢀⠢⠀⠅⠱⡐⡱⡘⡔⡕⡕⣲⡹⣎⡮⡏⡑⢜⢼⡱⢩⣗⣯⣟\n⢀⢂⢑⠀⡂⡃⠅⠊⢄⢑⠠⠑⢕⢕⢝⢮⢺⢕⢟⢮⢊⢢⢱⢄⠃⣇⣞⢞⣞⢾\n⢀⠢⡑⡀⢂⢊⠠⠁⡂⡐⠀⠅⡈⠪⠪⠪⠣⠫⠑⡁⢔⠕⣜⣜⢦⡰⡎⡯⡾⡽",
+    tooltiptext: "Copied to clipboard",
     tooltiplifespan: 500,
   }))));
 });
+const CustomizeUrlEnabled = createHookStory(() => {
+  setupGraphQL$c();
+  return (h(ShareLinkView, Object.assign({}, useShareLink({
+    programId: "klip-referral-program",
+    tooltiptext: "Copied to clipboard",
+    tooltiplifespan: 1000,
+    allowCustomization: true,
+  }))));
+});
 
 const UseShareLink = /*#__PURE__*/Object.freeze({
   __proto__: null,
   'default': UseShareLink_stories,
   BareBonesView: BareBonesView$1,
   RegularView: RegularView$2,
-  FastTooltip: FastTooltip
+  FastTooltip: FastTooltip,
+  CustomizeUrlEnabled: CustomizeUrlEnabled
 });
 
 const scenario$C = "@author:Zach\n@owner:Zach\nFeature: Tabs\n\n  The Tabs takes in the Tab component as children and maps through to display their header and content.\n\n  Background: A user on the portal is viewing the widget\n    Given a user viewing the Tabs component\n\n  @motivating\n  Scenario: Content inside the active tab is shown\n    Given the header is set to <tabHeader>\n    And the content inside is <tabContent>\n    And the user has clicked <tabHeader>\n    Then the <tabContent> is shown\n    Examples:\n      | tabHeader | tabContent               |\n      | Settings  | This is the settings tab |\n      | General   | This is the general tab  |\n      | History   | This is the history tab  |\n\n  @motivating\n  @ui\n  Scenario: The placement of the tabs is configurable\n    Given The placement prop has been passed a valid <placement>\n    Then tabs are placed on the <placementResult>\n    Examples:\n      | placement | placementResult                |\n      |           | top of the content             |\n      | left      | left hand side of the content  |\n      | right     | right hand side of the content |\n      | bottom    | bottom of the content          |\n\n\n  @minutia\n  @ui\n  Scenario Outline: Tabs are setup to use the brand color\n    Given the brand color is set to darkblue\n    Then the text inside the active tab is darkblue\n    And the underline of the active tab is darkblue\n\n  @ui\n  Scenario: Tabs are responsive\n    Given the user is on a mobile device\n    When there are more tabs than the horizontal space allows for\n    Then clickable arrows appear on the left and right of the tabs\n    And the tabs are scrollable\n\n  @landmine\n  Scenario: Program section cannot be used inside of tabs\n    Given a tabs component\n    And tab containing a program section with program-id \"test123\"\n    And the program section wraps a component using program context\n    When the tabs component is rendered\n    Then the \"sq:program-id\" event listener for the program section is removed\n    And the component does not use program-id \"test123\" to source its data\n    And falls back to the global program id";
@@ -18697,8 +18840,13 @@ const UserInfoFormView = /*#__PURE__*/Object.freeze({
   DisabledForm: DisabledForm
 });
 
+const scenario$G = "@owner:zach @author:zach\nFeature: User Attribute\n  Displays a user's custom field value.\n\n  Background: A user exists\n    Given a user is logged in\n    And the user has custom fields\n\n  @motivating\n  Scenario: A custom field value is displayed\n    Given the component has prop \"value\" with value \"firstName\"\n    And the user has a custom field \"firstName\" with value \"John\"\n    When the component is rendered\n    Then the text \"John\" is displayed\n\n  @landmine\n  Scenario: Nothing is rendered when the custom field does not exist\n    Given the component has prop \"value\" with value \"nonExistentField\"\n    And the user does not have a custom field \"nonExistentField\"\n    Then component is not rendered\n    And nothing is displayed\n\n  @motivating\n  Scenario: A loading skeleton is shown while data is loading\n    Given the component is loading user data\n    When the component is rendered\n    Then a loading skeleton is displayed\n\n  @motivating\n  Scenario Outline: Optional styling props can be applied to customize the text appearance\n    Given the component has prop <prop> with value <value>\n    When the component is rendered\n    Then the text is displayed with <cssProperty> set to <value>\n\n    Examples:\n      | prop         | value       | cssProperty |\n      | fontSize     | 24          | font-size   |\n      | color        | #E91E63   | color       |\n      | fontWeight   | 700         | font-weight |\n\n  @minutia\n  Scenario: Style props are optional and default to no custom styling\n    Given the component has no style props set\n    When the component is rendered\n    Then the text is displayed with default browser styles\n";
+
 const UserAttribute_stories = {
   title: "Components/User Attribute",
+  parameters: {
+    scenario: scenario$G,
+  },
 };
 const Default$x = () => {
   return (h("sqm-user-attribute", { demoData: {

package/dist/esm/{sqm-text-span-view-738acfb3.js → sqm-text-span-view-72f43dff.js}

@@ -51,7 +51,7 @@ function TextSpanView(props, children) {
       display: inline;
     }
   `;
-  return (h("span", { class: sheet.classes[type], part: "sqm-base" },
+  return (h("span", { class: sheet.classes[type], part: "sqm-text-span" },
     h("style", { type: "text/css" },
       vanillaStyle,
       styleString),

package/dist/esm/sqm-text-span.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h as h$1 } from './index-38ad4957.js';
 import { n as h } from './dom-context-hooks.module-50442785.js';
 import './JSS-67b5cff8.js';
-import { T as TextSpanView } from './sqm-text-span-view-738acfb3.js';
+import { T as TextSpanView } from './sqm-text-span-view-72f43dff.js';
 
 const TextSpan = class {
   constructor(hostRef) {