@saasquatch/mint-components 2.1.12 → 2.1.14-1

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

@@ -29,7 +29,7 @@ import './utilities-77b1e0cc.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 ShareLinkView, K as useShareLink, M as ProgressBarView, O as ProgressBar$2, Q as LeadFormView, U as LeadDropdownFieldView, V as ShadowViewAddon } from './ShadowViewAddon-cc32bca2.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';
@@ -18840,6 +18840,59 @@ 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: {
+      loading: false,
+      value: "impact.com",
+    } }));
+};
+/*
+ Verifies that an sqm-user-attribute with no valid value
+ collapses completely and does not create extra space
+ (e.g. a double gap) in a flex layout.
+ */
+const InvalidValue = () => {
+  return (h("div", { style: { display: "flex", flexDirection: "column", gap: "16px" } },
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Above"),
+    h("sqm-user-attribute", { demoData: {
+        loading: false,
+        value: null,
+      } }),
+    h("div", { style: { background: "#e0e0e0", padding: "8px" } }, "Below")));
+};
+const Loading$h = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: true,
+      value: "impact.com",
+    } }));
+};
+const WithCustomStyles = () => {
+  return (h("sqm-user-attribute", { demoData: {
+      loading: false,
+      value: "impact.com",
+      fontSize: 24,
+      color: "#4CAF50",
+      fontWeight: 700,
+    } }));
+};
+
+const UserAttribute = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  'default': UserAttribute_stories,
+  Default: Default$x,
+  InvalidValue: InvalidValue,
+  Loading: Loading$h,
+  WithCustomStyles: WithCustomStyles
+});
+
 function deepFreeze(obj) {
     if (obj instanceof Map) {
         obj.clear = obj.delete = obj.set = function () {
@@ -21533,6 +21586,7 @@ const stories = [
   TaxAndCashRewardsTable,
   TaxAndCashReferralTableRewardsCell,
   TaxAndCashReferralTable$1,
+  UserAttribute,
 ];
 const StencilStorybook = class {
   constructor(hostRef) {