From 0c09059b6fe28dbbc75ee1fcadfd7ead61b1158b Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Mon, 2 Jun 2025 15:19:54 -0700 Subject: [PATCH 001/125] card feed component annotations --- .../src/components/sqm-card-feed/sqm-card-feed.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx index 38ebbda100..334c98d729 100644 --- a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx +++ b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx @@ -6,6 +6,8 @@ import { CardFeedView } from "./sqm-card-feed-view"; /** * @uiName Card Feed * @slots [{"name":"","title":"Cards"}] + * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div"] + * @validChildren ["sqm-task-card"] * @exampleGroup Rewards * @example Task Card Feed - */ From 728c77c4818857b98ad2fa61979f8651de5df8de Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Tue, 3 Jun 2025 14:43:34 -0700 Subject: [PATCH 002/125] Start adding component annotations --- packages/mint-components/package.json | 2 +- .../src/components/sqm-big-stat/sqm-big-stat.tsx | 2 ++ .../src/components/sqm-card-feed/sqm-card-feed.tsx | 2 +- .../src/components/sqm-stat-container/sqm-stat-container.tsx | 2 ++ .../src/components/sqm-task-card/sqm-task-card.tsx | 1 + 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index ba0a99dcec..70b876740d 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.14.0", + "version": "1.15.0-2", "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg", "raisins": "docs/raisins.json", diff --git a/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat.tsx b/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat.tsx index 4ccfa707a7..00e8dde980 100644 --- a/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat.tsx +++ b/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat.tsx @@ -9,6 +9,8 @@ import { DemoData } from "../../global/demo"; /** * * @uiName User Stat + * @validParents ["sqm-stat-container"] + * @validChildren ["p","div","h1","h2","h3","h4","h5","span"] * @slots [{"name":"","title":"Stat Text"}] * @slotEditor richText * @exampleGroup Statistics diff --git a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx index 334c98d729..b1215ba874 100644 --- a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx +++ b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx @@ -6,7 +6,7 @@ import { CardFeedView } from "./sqm-card-feed-view"; /** * @uiName Card Feed * @slots [{"name":"","title":"Cards"}] - * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div"] + * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"] * @validChildren ["sqm-task-card"] * @exampleGroup Rewards * @example Task Card Feed - diff --git a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx index 5ac5514a92..0100b0ec76 100644 --- a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx +++ b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx @@ -6,6 +6,8 @@ import { Spacing } from "../../global/mixins"; /** * @uiName Stat Container + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"] + * @validChildren ["sqm-big-stat"] * @slots [{"name":"", "title":"Stats"}] * @exampleGroup Statistics * @example Container with Three Stats -

Points Balance

Giftcards Earned

Referrals

 diff --git a/packages/mint-components/src/components/sqm-task-card/sqm-task-card.tsx b/packages/mint-components/src/components/sqm-task-card/sqm-task-card.tsx index db7579e169..0338f90657 100644 --- a/packages/mint-components/src/components/sqm-task-card/sqm-task-card.tsx +++ b/packages/mint-components/src/components/sqm-task-card/sqm-task-card.tsx @@ -13,6 +13,7 @@ import { useTaskCard } from "./useTaskCard"; /** * @uiName Task Card * @uiOrder ["reward-amount", "reward-unit", "card-title", "description", "repeatable", "finite", "show-progress-bar", "stat-type", "progress-source", "goal", "steps", "progress-bar-unit", "show-expiry", "reward-duration", "button-text", "button-link", "open-new-tab", "ended-message", "expiry-message", "starts-on-message", "event-key", "*"] + * @validParents ["sqm-card-feed"] * @exampleGroup Rewards * @example One Time Task Card - * @example Repeatable Task Card - From 6d5d59d13d361763aa460ab19de2336ceb603104 Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Tue, 3 Jun 2025 14:44:08 -0700 Subject: [PATCH 003/125] Fix typo --- .../src/components/sqm-card-feed/sqm-card-feed.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx index b1215ba874..9d2c787bb1 100644 --- a/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx +++ b/packages/mint-components/src/components/sqm-card-feed/sqm-card-feed.tsx @@ -6,7 +6,7 @@ import { CardFeedView } from "./sqm-card-feed-view"; /** * @uiName Card Feed * @slots [{"name":"","title":"Cards"}] - * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container-sqm-hero", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"] + * @validParents ["sqm-brand","sqm-portal-container", "sqm-popup-container", "sqm-titled-section", "div", "sqm-divided-layout", "template", "sqb-program-section", "sqb-conditional-section"] * @validChildren ["sqm-task-card"] * @exampleGroup Rewards * @example Task Card Feed - From 90e41d0dc91c58632c6d0393bafbeccfc570925a Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Tue, 3 Jun 2025 19:28:28 -0700 Subject: [PATCH 004/125] Finish most of the component annotations --- .../src/components/sqm-coupon-code/sqm-coupon-code.tsx | 1 + .../src/components/sqm-divided-layout/sqm-divided-layout.tsx | 2 ++ .../src/components/sqm-header-logo/sqm-header-logo.tsx | 1 + .../src/components/sqm-hero-image/sqm-hero-image.tsx | 1 + .../mint-components/src/components/sqm-hero/sqm-hero.tsx | 1 + .../mint-components/src/components/sqm-image/sqm-image.tsx | 1 + .../sqm-instant-access-registration.tsx | 1 + .../src/components/sqm-leaderboard/sqm-leaderboard.tsx | 1 + .../components/sqm-navigation-menu/sqm-navigation-menu.tsx | 1 + .../sqm-navigation-sidebar/sqm-navigation-sidebar.tsx | 2 ++ .../sqm-portal-change-password.tsx | 1 + .../src/components/sqm-portal-footer/sqm-portal-footer.tsx | 1 + .../src/components/sqm-portal-login/sqm-portal-login.tsx | 1 + .../src/components/sqm-portal-logout/sqm-portal-logout.tsx | 1 + .../src/components/sqm-portal-profile/sqm-portal-profile.tsx | 1 + .../sqm-portal-protected-route.tsx | 1 + .../sqm-program-explainer/sqm-program-explainer.tsx | 2 ++ .../src/components/sqm-program-menu/sqm-program-menu.tsx | 1 + .../src/components/sqm-qr-code/sqm-qr-code.tsx | 1 + .../src/components/sqm-referral-card/sqm-referral-card.tsx | 5 ++++- .../src/components/sqm-referral-code/sqm-referral-code.tsx | 1 + .../src/components/sqm-referral-codes/sqm-referral-codes.tsx | 1 + .../src/components/sqm-referral-table/sqm-referral-table.tsx | 2 ++ .../sqm-referred-registration/sqm-referred-registration.tsx | 1 + .../sqm-reward-exchange-list/sqm-reward-exchange-list.tsx | 2 ++ .../src/components/sqm-rewards-table/sqm-rewards-table.tsx | 1 + 26 files changed, 34 insertions(+), 1 deletion(-) diff --git a/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code.tsx b/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code.tsx index 4abc594baf..74a161531f 100644 --- a/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code.tsx +++ b/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code.tsx @@ -9,6 +9,7 @@ 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 - diff --git a/packages/mint-components/src/components/sqm-divided-layout/sqm-divided-layout.tsx b/packages/mint-components/src/components/sqm-divided-layout/sqm-divided-layout.tsx index f988a2cfee..fb921eb521 100644 --- a/packages/mint-components/src/components/sqm-divided-layout/sqm-divided-layout.tsx +++ b/packages/mint-components/src/components/sqm-divided-layout/sqm-divided-layout.tsx @@ -8,6 +8,8 @@ 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"] + * @exampleGroup Layout * @slots [{"name":"", "title":"Layout Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx b/packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx index baab13f91b..203f7727f2 100644 --- a/packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx +++ b/packages/mint-components/src/components/sqm-header-logo/sqm-header-logo.tsx @@ -3,6 +3,7 @@ import { Component, h, Host, Prop } from "@stencil/core"; /** * @uiName Header Logo + * @validParents ["sqm-portal-frame","div","sqm-brand"] */ @Component({ tag: "sqm-header-logo", diff --git a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image.tsx b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image.tsx index 9f4b787a38..0eb75663b6 100644 --- a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image.tsx +++ b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image.tsx @@ -6,6 +6,7 @@ import { HeroImageView } from "./sqm-hero-image-view"; /** * @uiName Hero Image + * @validParents ["sqm-portal-container","sqm-brand", "div"] * @exampleGroup Common Components * @example Two Column Hero Image - * @example Overlay Hero Image - diff --git a/packages/mint-components/src/components/sqm-hero/sqm-hero.tsx b/packages/mint-components/src/components/sqm-hero/sqm-hero.tsx index b55794f6bb..0960ff9b3f 100644 --- a/packages/mint-components/src/components/sqm-hero/sqm-hero.tsx +++ b/packages/mint-components/src/components/sqm-hero/sqm-hero.tsx @@ -5,6 +5,7 @@ import { getProps } from "../../utils/utils"; /** * @uiName Hero Layout + * @validParents ["sqm-portal-container","sqm-brand","div"] * @slots [{"name":"","title":"Primary Column Content"},{"name":"secondary-column","title":"Secondary Column Content"}] * @example Two Column Hero Layout -

Primary Column Content

Secondary Column Content

 * @exampleGroup Layout diff --git a/packages/mint-components/src/components/sqm-image/sqm-image.tsx b/packages/mint-components/src/components/sqm-image/sqm-image.tsx index caba15cc24..21d709548b 100644 --- a/packages/mint-components/src/components/sqm-image/sqm-image.tsx +++ b/packages/mint-components/src/components/sqm-image/sqm-image.tsx @@ -5,6 +5,7 @@ import { ImageView } from "./sqm-image-view"; /** * @uiName Image + * @validParents ["sqm-brand","div","sqm-portal-container","sqm-divided-layout","sqm-titled-section", "sqb-program-section", "sqb-conditional-section"] * @exampleGroup Common Components * @example Image - */ diff --git a/packages/mint-components/src/components/sqm-instant-access-registration/sqm-instant-access-registration.tsx b/packages/mint-components/src/components/sqm-instant-access-registration/sqm-instant-access-registration.tsx index 034f1d7e95..f50665259b 100644 --- a/packages/mint-components/src/components/sqm-instant-access-registration/sqm-instant-access-registration.tsx +++ b/packages/mint-components/src/components/sqm-instant-access-registration/sqm-instant-access-registration.tsx @@ -11,6 +11,7 @@ import { useInstantAccessRegistration } from "./useInstantAccessRegistration"; /** * @uiName Instant Access Registration + * @validParents ["sqm-portal-container","div","sqm-hero","template", "sqb-program-section", "sqb-conditional-section"] * @compatibility Built for instant access * @exampleGroup Instant Access * @example Instant Access Registration - diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard.tsx index 03a3eb5f14..441e35c74b 100644 --- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard.tsx +++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard.tsx @@ -9,6 +9,7 @@ import { LeaderboardProps, useLeaderboard } from "./useLeaderboard"; /** * @uiName Leaderboard + * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"] * @slots [{"name":"empty", "title":"Empty State"}] * @requiredFeatures ["LEADERBOARDS"] * @exampleGroup Leaderboard diff --git a/packages/mint-components/src/components/sqm-navigation-menu/sqm-navigation-menu.tsx b/packages/mint-components/src/components/sqm-navigation-menu/sqm-navigation-menu.tsx index 094b62be4b..4347346009 100644 --- a/packages/mint-components/src/components/sqm-navigation-menu/sqm-navigation-menu.tsx +++ b/packages/mint-components/src/components/sqm-navigation-menu/sqm-navigation-menu.tsx @@ -12,6 +12,7 @@ import deepmerge from "deepmerge"; /** * @uiName Navigation Menu + * @validParents ["sqm-portal-container","div","sqm-brand","sqm-divided-layout"] */ @Component({ tag: "sqm-navigation-menu", diff --git a/packages/mint-components/src/components/sqm-navigation-sidebar/sqm-navigation-sidebar.tsx b/packages/mint-components/src/components/sqm-navigation-sidebar/sqm-navigation-sidebar.tsx index 72b183d280..6875f20f20 100644 --- a/packages/mint-components/src/components/sqm-navigation-sidebar/sqm-navigation-sidebar.tsx +++ b/packages/mint-components/src/components/sqm-navigation-sidebar/sqm-navigation-sidebar.tsx @@ -9,6 +9,8 @@ import { NavigationSidebarView } from "./sqm-navigation-sidebar-view"; /** * @uiName Microsite Sidebar + * @validParents ["div","sqm-divided-layout","template","sqm-portal-container","sqm-brand"] + * @validChildren ["sqm-navigation-sidebar-item"] * @slots [{"name":"", "title":"Sidebar Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password.tsx b/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password.tsx index 8678596d10..1cbe02afc7 100644 --- a/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password.tsx +++ b/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password.tsx @@ -12,6 +12,7 @@ import { useState } from "@saasquatch/universal-hooks"; /** * @uiName Microsite Password Change + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand"] */ @Component({ tag: "sqm-portal-change-password", diff --git a/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer.tsx b/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer.tsx index 663af12490..3db9aff801 100644 --- a/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer.tsx +++ b/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer.tsx @@ -5,6 +5,7 @@ import { PortalFooterView } from "./sqm-portal-footer-view"; /** * @uiName Footer + * @validParents ["div","sqm-brand","sqm-portal-container"] */ @Component({ tag: "sqm-portal-footer", diff --git a/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx b/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx index 18c2e02782..32c121ada3 100644 --- a/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx +++ b/packages/mint-components/src/components/sqm-portal-login/sqm-portal-login.tsx @@ -9,6 +9,7 @@ import { createStyleSheet } from "../../styling/JSS"; /** * @uiName Microsite Login + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "template"] */ @Component({ tag: "sqm-portal-login", diff --git a/packages/mint-components/src/components/sqm-portal-logout/sqm-portal-logout.tsx b/packages/mint-components/src/components/sqm-portal-logout/sqm-portal-logout.tsx index c43a05e3b3..49e1ab65c1 100644 --- a/packages/mint-components/src/components/sqm-portal-logout/sqm-portal-logout.tsx +++ b/packages/mint-components/src/components/sqm-portal-logout/sqm-portal-logout.tsx @@ -5,6 +5,7 @@ import { usePortalLogout } from "./usePortalLogout"; /** * @uiName Microsite Logout + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"] * @compatibility Built for instant access */ @Component({ diff --git a/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile.tsx b/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile.tsx index b0f2e8606d..fc89461965 100644 --- a/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile.tsx +++ b/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile.tsx @@ -12,6 +12,7 @@ import deepmerge from "deepmerge"; /** * @uiName Microsite Participant Profile + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"] */ @Component({ tag: "sqm-portal-profile", diff --git a/packages/mint-components/src/components/sqm-portal-protected-route/sqm-portal-protected-route.tsx b/packages/mint-components/src/components/sqm-portal-protected-route/sqm-portal-protected-route.tsx index 6f8bf68b3a..97836955e3 100644 --- a/packages/mint-components/src/components/sqm-portal-protected-route/sqm-portal-protected-route.tsx +++ b/packages/mint-components/src/components/sqm-portal-protected-route/sqm-portal-protected-route.tsx @@ -5,6 +5,7 @@ import { usePortalProtectedRoute } from "./usePortalProtectedRoute"; /** * @uiName Microsite Protected Route + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template", "sqb-program-section", "sqb-conditional-section"] * @slots [{"name":"","title":"Route Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer.tsx b/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer.tsx index 8b29c1885c..bbfb1243f5 100644 --- a/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer.tsx +++ b/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer.tsx @@ -5,6 +5,8 @@ import { ProgramExplainerView } from "./sqm-program-explainer-view"; /** * @uiName Program Explainer + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"] + * @validChildren ["sqm-program-explainer-step"] * @exampleGroup Common Components * @slots [{"name":"", "title":"Explainer", "validChildren":["sqm-program-explainer-step"]}] * @example Program Explainer - diff --git a/packages/mint-components/src/components/sqm-program-menu/sqm-program-menu.tsx b/packages/mint-components/src/components/sqm-program-menu/sqm-program-menu.tsx index 221685273a..143ee53920 100644 --- a/packages/mint-components/src/components/sqm-program-menu/sqm-program-menu.tsx +++ b/packages/mint-components/src/components/sqm-program-menu/sqm-program-menu.tsx @@ -5,6 +5,7 @@ import { getProps } from "../../utils/utils"; /** * @uiName Microsite Program Menu + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template"] * @slots [{"name":"","title":"Menu Content"}] * @canvasRenderer always-replace */ diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx index 71d6572d43..29407217b4 100644 --- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx +++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code.tsx @@ -9,6 +9,7 @@ import { useQRCode } from "./useQRCode"; /** * @uiName QR Code + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand", "sqb-program-section", "sqb-conditional-section"] * @exampleGroup Sharing * @example QR Code - */ diff --git a/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card.tsx b/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card.tsx index 35fde1aa2c..2c448a3adf 100644 --- a/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card.tsx +++ b/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card.tsx @@ -7,10 +7,13 @@ import { useChildElements } from "../../tables/useChildElements"; /** * @uiName Referral Card + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"] + * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-pagination","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"] * @exampleGroup Referrals * @slots [{"name":"left", "title":"Left Content"},{"name":"right", "title":"Right Content"},{"name":"header", "title":"Header Content"},{"name":"footer", "title":"Footer Content"}] * @example Referral Card - They’ll get a $50 credit towards a new account and you’ll get: Choose how you want to share: Your unique referral link: Share via email Share on LinkedIn Share on Twitter - */ + * */ + @Component({ tag: "sqm-referral-card", shadow: true, diff --git a/packages/mint-components/src/components/sqm-referral-code/sqm-referral-code.tsx b/packages/mint-components/src/components/sqm-referral-code/sqm-referral-code.tsx index 36143507aa..e1f52a83d4 100644 --- a/packages/mint-components/src/components/sqm-referral-code/sqm-referral-code.tsx +++ b/packages/mint-components/src/components/sqm-referral-code/sqm-referral-code.tsx @@ -9,6 +9,7 @@ import { useReferralCode } from "./useReferralCode"; /** * @uiName Referral Code + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span"] * @exampleGroup Sharing * @example Referral Code - */ diff --git a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx index 1dd261896e..2c109960ce 100644 --- a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx +++ b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes.tsx @@ -12,6 +12,7 @@ import { useReferralCodes } from "./useReferralCodes"; /** * @uiName Promo Codes + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqb-program-section","sqb-conditional-section"] * @slots [{"name":"", "title":"Promo Codes Content"}] * @exampleGroup Sharing * @example Promo Codes - Share via emailShare on FacebookShare on WhatsApp diff --git a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx index 7cccc2cbb5..2ad7f57c1e 100644 --- a/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/sqm-referral-table.tsx @@ -18,6 +18,8 @@ import { tryMethod, useReferralTable } from "./useReferralTable"; /** * @uiName Referral Table + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-referral-card","span","sqm-tab","sqb-program-section","sqb-conditional-section"] + * @validChildren ["sqm-referral-table-column","sqm-referral-table-date-column","sqm-referral-table-rewards-column","sqm-referral-table-status-column","sqm-referral-table-user-column","sqm-empty"] * @exampleGroup Referrals * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}] * @example Referral Table - diff --git a/packages/mint-components/src/components/sqm-referred-registration/sqm-referred-registration.tsx b/packages/mint-components/src/components/sqm-referred-registration/sqm-referred-registration.tsx index e7e9a18973..b71beaa2a1 100644 --- a/packages/mint-components/src/components/sqm-referred-registration/sqm-referred-registration.tsx +++ b/packages/mint-components/src/components/sqm-referred-registration/sqm-referred-registration.tsx @@ -11,6 +11,7 @@ import { /** * @uiName Instant Access Friend Registration + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"] * @compatibility Built for instant access * @exampleGroup Instant Access * @example Instant Access Friend Registration - diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list.tsx index 4e5a54a7ad..a8ba2c7428 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list.tsx +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list.tsx @@ -19,6 +19,8 @@ import { demoRewardExchange, rewardExchange } from "./RewardExchangeListData"; /** * @uiName Reward Exchange + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"] + * @validChildren ["sqm-empty"] * @slots [{"name":"empty", "title":"Empty State"}] * @exampleGroup Rewards * @example Reward Exchange - diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx index 001701bb36..3f1ec95267 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx @@ -19,6 +19,7 @@ import { tryMethod, useRewardsTable } from "./useRewardsTable"; /** * @uiName Reward Table + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"] * @exampleGroup Rewards * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}] * @example Reward Table - From 527a9d12d35ab49619cfa6cefc54b524fee15c7e Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Tue, 3 Jun 2025 19:44:04 -0700 Subject: [PATCH 005/125] Finish first pass on component annotations --- .../mint-components/src/components/sqm-route/sqm-route.tsx | 1 + .../mint-components/src/components/sqm-router/sqm-router.tsx | 2 ++ .../mint-components/src/components/sqm-scroll/sqm-scroll.tsx | 1 + .../src/components/sqm-share-button/sqm-share-button.tsx | 1 + .../src/components/sqm-share-code/sqm-share-code.tsx | 1 + .../mint-components/src/components/sqm-tabs/sqm-tabs.tsx | 2 ++ .../src/components/sqm-text-span/sqm-text-span.tsx | 1 + .../mint-components/src/components/sqm-text/sqm-text.tsx | 1 + .../src/components/sqm-timeline/sqm-timeline.tsx | 5 +++-- .../src/components/sqm-titled-section/sqm-titled-section.tsx | 2 ++ 10 files changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/mint-components/src/components/sqm-route/sqm-route.tsx b/packages/mint-components/src/components/sqm-route/sqm-route.tsx index b2408cc4d6..b8f5d3ec4e 100644 --- a/packages/mint-components/src/components/sqm-route/sqm-route.tsx +++ b/packages/mint-components/src/components/sqm-route/sqm-route.tsx @@ -5,6 +5,7 @@ export interface RouteProps { /** * @uiName Route + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"] * @slots [{"name":"","title":"Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-router/sqm-router.tsx b/packages/mint-components/src/components/sqm-router/sqm-router.tsx index d180528112..6df2e86c51 100644 --- a/packages/mint-components/src/components/sqm-router/sqm-router.tsx +++ b/packages/mint-components/src/components/sqm-router/sqm-router.tsx @@ -4,6 +4,8 @@ import { useRouter } from "./useRouter"; /** * @uiName Router + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"] + * @validChildren ["sqm-route"] * @slots [{"name":"","title":"Routes"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx b/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx index f683ce85be..304ed1d371 100644 --- a/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx +++ b/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx @@ -5,6 +5,7 @@ import { createStyleSheet } from "../../styling/JSS"; /** * @uiName Scroll Button + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"] * @slots [{"name":"", "title":"Button Content"}] * @slotEditor richText */ diff --git a/packages/mint-components/src/components/sqm-share-button/sqm-share-button.tsx b/packages/mint-components/src/components/sqm-share-button/sqm-share-button.tsx index 862b2fe920..6ce733dd2e 100644 --- a/packages/mint-components/src/components/sqm-share-button/sqm-share-button.tsx +++ b/packages/mint-components/src/components/sqm-share-button/sqm-share-button.tsx @@ -9,6 +9,7 @@ import deepmerge from "deepmerge"; /** * @uiName Share Button + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqb-program-section","sqb-conditional-section"] * @slots [{"name":"", "title":"Button Content"}] * @slotEditor richText * @uiOrder ["medium", "program-id", "*", "pill", "disabled", "hideicon"] diff --git a/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx b/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx index c1920d1872..8f95f8e938 100644 --- a/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx +++ b/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx @@ -9,6 +9,7 @@ import { useShareCode } from "./useShareCode"; /** * @uiName Share Code + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"] * @exampleGroup Sharing * @example Share Code - */ diff --git a/packages/mint-components/src/components/sqm-tabs/sqm-tabs.tsx b/packages/mint-components/src/components/sqm-tabs/sqm-tabs.tsx index 70db185fde..b159d75b78 100644 --- a/packages/mint-components/src/components/sqm-tabs/sqm-tabs.tsx +++ b/packages/mint-components/src/components/sqm-tabs/sqm-tabs.tsx @@ -6,6 +6,8 @@ import { useTabs } from "./useTabs"; /** * @uiName Tab Group + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section"] + * @validChildren ["sqm-tab"] * @slots [{"name":"", "title":"Tabs","validChildren":["sqm-tab"]}] * @exampleGroup Layout * @canvasRenderer always-replace diff --git a/packages/mint-components/src/components/sqm-text-span/sqm-text-span.tsx b/packages/mint-components/src/components/sqm-text-span/sqm-text-span.tsx index 19ccff2959..26367e8225 100644 --- a/packages/mint-components/src/components/sqm-text-span/sqm-text-span.tsx +++ b/packages/mint-components/src/components/sqm-text-span/sqm-text-span.tsx @@ -4,6 +4,7 @@ import { TextSpanView } from "./sqm-text-span-view"; /** * @uiName Text Span + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"] * @canvasRenderer always-replace */ @Component({ diff --git a/packages/mint-components/src/components/sqm-text/sqm-text.tsx b/packages/mint-components/src/components/sqm-text/sqm-text.tsx index b1b3628b6e..d597703c89 100644 --- a/packages/mint-components/src/components/sqm-text/sqm-text.tsx +++ b/packages/mint-components/src/components/sqm-text/sqm-text.tsx @@ -51,6 +51,7 @@ const vanillaStyle = ` /** * @uiName Text + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-big-stat","span","sqm-text-span","sqb-program-section","sqb-conditional-section"] * @slots [{"name":"", "title":"Text"}] * @slotEditor richText * @canvasRenderer always-replace diff --git a/packages/mint-components/src/components/sqm-timeline/sqm-timeline.tsx b/packages/mint-components/src/components/sqm-timeline/sqm-timeline.tsx index c69ce0f693..6286a56a2f 100644 --- a/packages/mint-components/src/components/sqm-timeline/sqm-timeline.tsx +++ b/packages/mint-components/src/components/sqm-timeline/sqm-timeline.tsx @@ -5,10 +5,12 @@ import { TimelineReward } from "./sqm-timeline-entry"; /** * @uiName Program Timeline + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"] + * @validChildren ["sqm-timeline-entry"] * @slots [{"name":"","title":"Timeline","validChildren":["sqm-timeline-entry"]}] * @exampleGroup Common Components * @example Program Timeline - -*/ + */ @Component({ tag: "sqm-timeline", shadow: true, @@ -31,7 +33,6 @@ export class Timeline { disconnectedCallback() {} render() { - const rewards = useChildElements(); rewards.forEach((reward) => { diff --git a/packages/mint-components/src/components/sqm-titled-section/sqm-titled-section.tsx b/packages/mint-components/src/components/sqm-titled-section/sqm-titled-section.tsx index 8bbcbd9021..20bcb5e283 100644 --- a/packages/mint-components/src/components/sqm-titled-section/sqm-titled-section.tsx +++ b/packages/mint-components/src/components/sqm-titled-section/sqm-titled-section.tsx @@ -6,6 +6,8 @@ import { PortalSectionView } from "./sqm-portal-section-view"; /** * @uiName Titled Section + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"] + * @validChildren ["div","sqm-portal-container","p","sqm-timeline","h1","h2","h3","h5","h4","sqm-qr-code","sqm-referral-code","sqm-referral-codes","sqm-share-code","sqm-share-link","sqm-text","span"] * @slots [{"name":"label", "title":"Label"},{"name":"content", "title":"Content"}] * @exampleGroup Layout * @example Titled Section -

Section Label

Add your section content here!

 From 881a16f7c24606934cca4ca02cbd50aeab0d61fb Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Tue, 3 Jun 2025 19:47:55 -0700 Subject: [PATCH 006/125] version bump --- packages/mint-components/package-lock.json | 4 ++-- packages/mint-components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mint-components/package-lock.json b/packages/mint-components/package-lock.json index 935fbc5299..82d18d4e32 100644 --- a/packages/mint-components/package-lock.json +++ b/packages/mint-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@saasquatch/mint-components", - "version": "1.14.0", + "version": "1.15.0-3", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/mint-components", - "version": "1.14.0", + "version": "1.15.0-3", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index 70b876740d..3011b1ae21 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.15.0-2", + "version": "1.15.0-3", "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg", "raisins": "docs/raisins.json", From 19b163b7fc0d4fc29dff07ac1033e3c377d0fe45 Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Wed, 4 Jun 2025 16:59:52 -0700 Subject: [PATCH 007/125] Update text colors --- .../end-user-testing/src/widgetTemplate.html | 622 ++++++++++++++---- .../sqm-big-stat/sqm-big-stat-view.tsx | 3 +- .../sqm-coupon-code/sqm-coupon-code-view.tsx | 2 +- .../components/sqm-empty/sqm-empty-view.tsx | 6 +- .../sqm-hero-image/sqm-hero-image-view.tsx | 4 +- .../sqm-leaderboard/sqm-leaderboard-view.tsx | 4 +- .../sqm-program-explainer-step-view.tsx | 4 +- .../sqm-program-explainer-view.tsx | 2 +- .../sqm-referral-card-view.tsx | 2 +- .../sqm-referral-codes-view.tsx | 2 +- .../sqm-task-card/sqm-task-card-view.tsx | 22 +- .../src/components/sqm-text/sqm-text.tsx | 13 +- .../sqm-timeline/sqm-timeline-entry-view.tsx | 2 +- packages/mint-components/src/global/styles.ts | 7 +- packages/mint-components/src/index.html | 53 +- 15 files changed, 567 insertions(+), 181 deletions(-) diff --git a/packages/end-user-testing/src/widgetTemplate.html b/packages/end-user-testing/src/widgetTemplate.html index e31ba53965..c93b4c822e 100644 --- a/packages/end-user-testing/src/widgetTemplate.html +++ b/packages/end-user-testing/src/widgetTemplate.html @@ -1,170 +1,528 @@ - - - - - - - - - - +

This is a test paragraph, what color is it ? 

+ +

Referrals

Points Balance

Points Balance

Giftcards Earned

Giftcards Earned

Points Balance

 + + + + + + + + + + + + + + + Share via emailShare on FacebookShare on WhatsApp +
-
-

How it works

-
-
-

- Give your friends $20.00 off their first order when they purchase - using your link. You'll receive a $10.00 - giftcard—it’s a win-win. +

+ +

Top Performers

+

+ The leaderboard highlights the top performers in real-time. Stay + motivated, stay competitive!

-
- -

Referrals

- - -

Rewards Earned

- - - +
+ +
-

Your share link

-

Share $50 with friends

+

+ They’ll get a $50 credit towards a new account and + you’ll get up to $1200 +

- -

+ They’ll get a $50 credit towards a new account and + you’ll get: +

+

Choose how you want to share:

+

Your unique referral link:

+ Share via emailShare on LinkedInPost about us - Share - Share on LinkedInShare via Messenger - Share via Email - - - - - -

Referral History

- - - - - - - - - - - - - -

Earn more rewards

+

+ Get points while using our product. Use those points to redeem + rewards like one free month of Enterprise or two plane tickets to + anywhere in North America +

- - - + > diff --git a/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat-view.tsx b/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat-view.tsx index b699842bdc..8f2f9dca86 100644 --- a/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat-view.tsx +++ b/packages/mint-components/src/components/sqm-big-stat/sqm-big-stat-view.tsx @@ -35,8 +35,7 @@ export function BigStatView(props: BigStatViewProps) { Description: { "font-size": "var(--sl-font-size-small)", "font-weight": "var(--sl-font-weight-normal)", - color: "var(--sl-color-gray-600)", - "text-transform": "uppercase", + color: "var(--sqm-text-subdued)", "text-align": alignment, }, }; diff --git a/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code-view.tsx b/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code-view.tsx index 56035cc650..66d3646a6e 100644 --- a/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code-view.tsx +++ b/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code-view.tsx @@ -12,7 +12,7 @@ const style = { HostBlock: HostBlock, couponCodeLabel: { margin: "var(--sl-spacing-x-small) 0", - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-small)", }, }; diff --git a/packages/mint-components/src/components/sqm-empty/sqm-empty-view.tsx b/packages/mint-components/src/components/sqm-empty/sqm-empty-view.tsx index 590b136ec1..a2587a6715 100644 --- a/packages/mint-components/src/components/sqm-empty/sqm-empty-view.tsx +++ b/packages/mint-components/src/components/sqm-empty/sqm-empty-view.tsx @@ -30,11 +30,7 @@ export function EmptyStateView(props: EmptyStateViewProps) {

{emptyStateHeader}

-

+

{intl.formatMessage( { id: "emptyStateText", diff --git a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx index e0880663ac..05c7c13d7e 100644 --- a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx +++ b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx @@ -62,7 +62,7 @@ export function HeroImageView(props: HeroImageViewProps, children: VNode) { props.paddingImage + "))", textAlign: "center", - color: props.textColor || "var(--sl-color-neutral-0)", + color: props.textColor || "var(--sqm-text)", lineHeight: "var(--sl-line-height-dense)", "@media (max-width: 599px)": { padding: "var(--sl-spacing-" + props.paddingText + ")", @@ -73,7 +73,7 @@ export function HeroImageView(props: HeroImageViewProps, children: VNode) { background: props.backgroundColor || "", flexDirection: props.imagePos === "right" ? "row-reverse" : "row", lineHeight: "var(--sl-line-height-dense)", - color: props.textColor || "var(--sl-color-neutral-900)", + color: props.textColor || "var(--sqm-text)", "& .image-area": { width: props.imagePercentage ? props.imagePercentage + "%" : "50%", padding: "var(--sl-spacing-" + props.paddingImage + ")", diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx index 57aacdb2f2..77bd74f2c6 100644 --- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx +++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx @@ -65,14 +65,14 @@ const style = { "& .ellipses": { textAlign: "left", padding: "0", - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text)", paddingLeft: "25%", }, "& .highlight": { background: "var(--sl-color-primary-50)", }, "& td, th": { - color: "var(--sl-color-gray-800)", + color: "var(--sqm-text)", padding: "var(--sl-spacing-medium)", }, "& .User": { diff --git a/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step-view.tsx b/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step-view.tsx index b4055b8f87..bde0773950 100644 --- a/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step-view.tsx +++ b/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step-view.tsx @@ -18,7 +18,7 @@ export function ProgramExplainerStepView(props: ProgramExplainerStepViewProps) { width: "100%", padding: "var(--sl-spacing-x-large)", lineHeight: "var(--sl-line-height-dense)", - color: props.textColor || "var(--sl-color-neutral-900)", + color: props.textColor || "var(--sqm-text)", background: props.backgroundColor || "var(--sl-color-primary-50)", "@media (max-width: 499px)": { flexDirection: "row", @@ -32,6 +32,7 @@ export function ProgramExplainerStepView(props: ProgramExplainerStepViewProps) { }, }, Header: { + color: props.textColor || "var(--sqm-text)", fontSize: "var(--sl-font-size-large)", fontWeight: "var(--sl-font-weight-bold)", marginTop: "var(--sl-spacing-x-large)", @@ -40,6 +41,7 @@ export function ProgramExplainerStepView(props: ProgramExplainerStepViewProps) { }, }, Description: { + color: props.textColor || "var(--sqm-text)", fontSize: "var(--sl-font-size-medium)", marginTop: "var(--sl-spacing-small)", "@media (max-width: 499px)": { diff --git a/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer-view.tsx b/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer-view.tsx index 3404c62054..1e20054255 100644 --- a/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer-view.tsx +++ b/packages/mint-components/src/components/sqm-program-explainer/sqm-program-explainer-view.tsx @@ -13,7 +13,7 @@ export function ProgramExplainerView( ) { const style = { Container: { - color: props.textColor || "var(--sl-color-neutral-900)", + color: props.textColor || "var(--sqm-text)", background: props.backgroundColor || "", }, Header: { diff --git a/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card-view.tsx b/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card-view.tsx index 03d4b85c57..6444b127fc 100644 --- a/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card-view.tsx +++ b/packages/mint-components/src/components/sqm-referral-card/sqm-referral-card-view.tsx @@ -22,7 +22,7 @@ export interface ReferralCardViewProps { const style = { Container: { borderRadius: "var(--sl-border-radius-large)", - color: "var(--sl-color-neutral-900)", + color: "var(--sqm-text)", background: "var(--sl-color-neutral-0)", display: "flex", flexDirection: "column", diff --git a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes-view.tsx b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes-view.tsx index 18ad82da40..975ee88f01 100644 --- a/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes-view.tsx +++ b/packages/mint-components/src/components/sqm-referral-codes/sqm-referral-codes-view.tsx @@ -48,7 +48,7 @@ const style = { }, TitleText: { - color: "var(--sl-color-neutral-700)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-large)", margin: "0", }, diff --git a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx index d9844fb4e2..9000820180 100644 --- a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx +++ b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx @@ -55,19 +55,19 @@ const style = { boxShadow: "1px 2px 4px rgba(211, 211, 211, 0.2)", fontSize: "var(--sl-font-size-small)", lineHeight: "var(--sl-line-height-dense)", - color: "var(--sl-color-neutral-600)", + color: "var(--sqm-text)", }, "& .main.complete": { background: "var(--sl-color-primary-50)", borderColor: "var(--sl-color-primary-500)", }, "& .main.expired": { - color: "var(--sl-color-neutral-600)", + color: "var(--sqm-text)", background: "var(--sl-color-neutral-50)", }, "& .title": { fontSize: "var(--sl-font-size-medium)", - color: "var(--sl-color-neutral-950)", + color: "var(--sqm-text)", }, "& .container": { margin: "var(--sl-spacing-medium)", @@ -130,7 +130,7 @@ const style = { alignSelf: "center", fontSize: "var(--sl-font-size-x-large)", fontWeight: "var(--sl-font-weight-semibold)", - color: "var(--sl-color-neutral-950)", + color: "var(--sqm-text)", lineHeight: "100%", marginRight: "var(--sl-spacing-xx-small)", }, @@ -139,7 +139,7 @@ const style = { alignSelf: "end", textTransform: "uppercase", fontSize: "var(--sl-font-size-x-small)", - color: "var(--sl-color-neutral-950)", + color: "var(--sqm-text)", lineHeight: "var(--sl-font-size-medium)", marginRight: "var(--sl-spacing-xx-small)", }, @@ -157,7 +157,7 @@ const style = { color: "var(--sl-color-primary-300)", }, "&[data-subdue] .neutral": { - color: "var(--sl-color-neutral-300)", + color: "var(--sqm-text)", }, display: "flex", "& .icon": { @@ -169,7 +169,7 @@ const style = { marginTop: "auto", verticalAlign: "text-bottom", fontSize: "var(--sl-font-size-x-small)", - color: "var(--sl-color-neutral-400)", + color: "var(--sqm-text)", }, "& .success": { color: "var(--sl-color-primary-500)", @@ -179,19 +179,19 @@ const style = { marginTop: "auto", marginLeft: "auto", "&::part(base)": { - color: "var(--sl-color-neutral-0)", + color: "var(--sqm-text)", }, "&.disabled::part(base)": { border: "1px solid var(--sl-color-primary-400)", background: "var(--sl-color-primary-400)", }, "&.neutral::part(base)": { - border: "1px solid var(--sl-color-neutral-400)", - background: "var(--sl-color-neutral-400)", + border: "1px solid var(--sqm-text)", + background: "var(--sqm-text)", }, }, "& .neutral": { - color: "var(--sl-color-neutral-400)", + color: "var(--sqm-text)", }, "& .datetime": { display: "block", diff --git a/packages/mint-components/src/components/sqm-text/sqm-text.tsx b/packages/mint-components/src/components/sqm-text/sqm-text.tsx index d597703c89..5abe966941 100644 --- a/packages/mint-components/src/components/sqm-text/sqm-text.tsx +++ b/packages/mint-components/src/components/sqm-text/sqm-text.tsx @@ -4,47 +4,48 @@ import { withHooks } from "@saasquatch/stencil-hooks"; const vanillaStyle = ` sqm-text { display: block; + color: var(--sqm-text); } sqm-text h1 { font-size: var(--sl-font-size-xxx-large); font-weight: var(--sl-font-weight-semibold); - color: var(--sl-color-neutral-800); + color: var(--sqm-text); margin: 0; } sqm-text h2 { font-size: var(--sl-font-size-xx-large); font-weight: var(--sl-font-weight-semibold); - color: var(--sl-color-neutral-800); + color: var(--sqm-text); margin: 0; } sqm-text h3 { font-size: var(--sl-font-size-x-large); font-weight: var(--sl-font-weight-semibold); - color: var(--sl-color-neutral-800); + color: var(--sqm-text); margin: 0; } sqm-text h4 { font-size: var(--sl-font-size-large); font-weight: var(--sl-font-weight-bold); - color: var(--sl-color-neutral-800); + color: var(--sqm-text); margin: 0; } sqm-text p { font-size: var(--sl-font-size-medium); font-weight: var(--sl-font-weight-normal); - color: var(--sl-color-neutral-800); + color: var(--sqm-text); margin: 0; } sqm-text sub { font-size: var(--sl-font-size-small); font-weight: var(--sl-font-weight-normal); - color: var(--sl-color-neutral-400); + color: var(--sqm-text); margin: 0; } `; diff --git a/packages/mint-components/src/components/sqm-timeline/sqm-timeline-entry-view.tsx b/packages/mint-components/src/components/sqm-timeline/sqm-timeline-entry-view.tsx index 35d83804d2..b348af2f01 100644 --- a/packages/mint-components/src/components/sqm-timeline/sqm-timeline-entry-view.tsx +++ b/packages/mint-components/src/components/sqm-timeline/sqm-timeline-entry-view.tsx @@ -12,7 +12,7 @@ export interface TimelineEntryProps { const style = { TimelineReward: { - color: "var(--sl-color-neutral-900)", + color: "var(--sqm-text)", lineHeight: "var(--sl-line-height-dense)", "& .container": { display: "flex", diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts index 69db9a9180..7e97b75bb8 100644 --- a/packages/mint-components/src/global/styles.ts +++ b/packages/mint-components/src/global/styles.ts @@ -585,6 +585,8 @@ html { --widget-background-color: var(--sl-color-white); --sqm-portal-main-width: 900px; --sqm-max-width: 100%; + --sqm-text: var(--sl-color-neutral-800); + --sqm-text-subdued: var(--sl-color-neutral-500); } body { @@ -592,7 +594,7 @@ body { font-size: var(--sl-font-size-medium); font-weight: var(--sl-font-weight-normal); letter-spacing: var(--sl-letter-spacing-small); - color: var(--sl-color-gray-800); + color: var(--sqm-text); line-height: var(--sl-line-height-normal); margin: 0; background-color: var(--sqm-portal-background); @@ -624,7 +626,6 @@ h2, .Title { } .P { font-size: var(--sl-font-size-small); - color: var(--sl-color-gray-800); margin-top: 0px; } @@ -635,7 +636,7 @@ h2, .Title { .Subtitle { text-align: center; margin-bottom: 0px; - color: var(--sl-color-gray-500); + color: var(--sqm-text-subdued); } .SupportText{ margin-top: var(--sl-spacing-small); diff --git a/packages/mint-components/src/index.html b/packages/mint-components/src/index.html index 1a3a0b9066..6a43d072c0 100644 --- a/packages/mint-components/src/index.html +++ b/packages/mint-components/src/index.html @@ -1,16 +1,45 @@ + + + + Mint Components Stencilbook + + - - - - Mint Components Stencilbook - - - + + + - - - - - \ No newline at end of file + + + + + From 47f1fb529f7c1cf0f5b5d022cf0c10d2038d1569 Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Wed, 4 Jun 2025 17:03:38 -0700 Subject: [PATCH 008/125] new pre release --- packages/mint-components/package-lock.json | 4 ++-- packages/mint-components/package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mint-components/package-lock.json b/packages/mint-components/package-lock.json index 82d18d4e32..d6155f1f80 100644 --- a/packages/mint-components/package-lock.json +++ b/packages/mint-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@saasquatch/mint-components", - "version": "1.15.0-3", + "version": "1.15.0-4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/mint-components", - "version": "1.15.0-3", + "version": "1.15.0-4", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index 3011b1ae21..0af5ec43d0 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.15.0-3", + "version": "1.15.0-4", "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg", "raisins": "docs/raisins.json", From 0786a89c8eb325af40e48641288fcb4de327c981 Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Thu, 5 Jun 2025 15:37:15 -0700 Subject: [PATCH 009/125] Update buttons and text color --- .../end-user-testing/src/widgetTemplate.html | 11 +++- .../sqm-edit-profile-view.tsx | 2 +- .../sqm-form-message/FormMessage.stories.tsx | 4 +- .../sqm-hero-image/sqm-hero-image-view.tsx | 1 + .../sqm-qr-code/sqm-qr-code-view.tsx | 11 +--- .../cells/sqm-referral-table-rewards-cell.tsx | 2 - .../cells/sqm-rewards-table-reward-cell.tsx | 4 +- .../sqm-task-card/sqm-task-card-view.tsx | 2 +- .../sqm-text-span/sqm-text-span-view.tsx | 12 ++-- .../sqm-banking-info-form-view.tsx | 13 +--- .../sqm-docusign-form-view.tsx | 15 ----- .../sqm-indirect-tax-form-view.tsx | 11 ---- .../sqm-user-info-form-view.tsx | 3 +- .../mint-components/src/global/mixins.scss | 4 +- packages/mint-components/src/global/mixins.ts | 4 +- packages/mint-components/src/global/styles.ts | 63 ++++++++++++++++--- .../src/tables/GenericTableView.tsx | 4 +- 17 files changed, 86 insertions(+), 80 deletions(-) diff --git a/packages/end-user-testing/src/widgetTemplate.html b/packages/end-user-testing/src/widgetTemplate.html index c93b4c822e..3c4a658027 100644 --- a/packages/end-user-testing/src/widgetTemplate.html +++ b/packages/end-user-testing/src/widgetTemplate.html @@ -1,4 +1,11 @@ - + :host { + --sqm-primary-button-background: tomato; + --sqm-text: slateblue; + } + + + { onClick={() => { callbacks.setShowEdit(false); }} - exportparts="base: defaultbutton-base" + exportparts="base: secondarybutton-base" > {text.canceltext} diff --git a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx index 7874042371..4dba2f969a 100644 --- a/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx +++ b/packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx @@ -43,8 +43,8 @@ export const FullStackSuccess = () => {

Title
Body text.
{ console.log("click"); }} diff --git a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx index 05c7c13d7e..db4964e45b 100644 --- a/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx +++ b/packages/mint-components/src/components/sqm-hero-image/sqm-hero-image-view.tsx @@ -162,6 +162,7 @@ export function HeroImageView(props: HeroImageViewProps, children: VNode) { props.buttonNewTab ? window.open(props.buttonLink) diff --git a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx index 536d698673..1eb5b3acad 100644 --- a/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx +++ b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx @@ -54,11 +54,7 @@ const style = { height: "100%", maxWidth: "335px", }, - TextButton: { - "&::part(base)": { - color: "var(--sl-color-gray-600)", - }, - }, + LoadingSkeleton: { "&::part(indicator)": { borderRadius: "0px !important", @@ -150,8 +146,8 @@ export function QrCodeView({
{downloadCodeText} @@ -161,7 +157,6 @@ export function QrCodeView({ exportparts="base: textbutton-base" type="text" onClick={createPrintable} - class={sheet.classes.TextButton} > {printCodeText} diff --git a/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.tsx b/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.tsx index 2c6c5c04f3..14e5833691 100644 --- a/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-rewards-cell.tsx @@ -40,9 +40,7 @@ export class ReferralTableRewardsCell { }, Details: { - "padding-bottom": "var(--sl-spacing-small)", "max-width": "500px", - // "padding-right": "var(--sl-spacing-x-small)", "&::part(header)": { padding: "var(--sl-spacing-x-small)", cursor: `${this.hideDetails ? "default" : "pointer"}`, diff --git a/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.tsx b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.tsx index 1d8c6de9ec..332522f4ae 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-reward-cell.tsx @@ -201,11 +201,11 @@ export class RewardTableRewardsCell { }, Text: { fontSize: "var(--sl-font-size-medium)", - color: "var(--sl-color-gray-800)", + color: "var(--sqm-text)", }, Subtext: { fontSize: "var(--sl-font-size-small)", - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", }, }; const sheet = createStyleSheet(style); diff --git a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx index 9000820180..4fefb0ebd5 100644 --- a/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx +++ b/packages/mint-components/src/components/sqm-task-card/sqm-task-card-view.tsx @@ -452,7 +452,7 @@ export function TaskCardView(props: TaskCardViewProps): VNode { "" ) : ( { {!states.hideBackButton && ( diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.tsx index a449f5d213..a5f4abf3aa 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-docusign-form/sqm-docusign-form-view.tsx @@ -99,15 +99,6 @@ const style = { BoldText: { fontWeight: "bold", }, - SecondaryBtn: { - "&::part(base)": { - color: "var(--sl-color-gray-800) !important", - }, - "&::part(label)": { - padding: "0px", - margin: "0px", - }, - }, ErrorAlertContainer: { "&::part(base)": { backgroundColor: "var(--sl-color-red-100)", @@ -188,12 +179,6 @@ const vanillaStyle = ` box-sizing: border-box; } - p { - line-height: 18px; - color: var(--sl-color-gray-800); - font-size: var(--sl-font-size-small); - } - a { cursor: pointer; } diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx index bc270e47db..52e51e3cdb 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/sqm-indirect-tax-form-view.tsx @@ -111,11 +111,6 @@ const style = { DescriptionText: { color: "var(--sl-color-neutral-500)", }, - SecondaryBtn: { - "&::part(base)": { - color: "var(--sl-color-gray-800) !important", - }, - }, AlertContainer: { "&::part(base)": { backgroundColor: "var(--sl-color-red-100)", @@ -180,11 +175,6 @@ const vanillaStyle = ` box-sizing: border-box; } - p { - line-height: 18px; - color: var(--sl-color-gray-800); - font-size: var(--sl-font-size-small); - } `; export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => { @@ -399,7 +389,6 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => { {text.continueButton} {data.textOverrides.prevLabel} @@ -202,7 +202,7 @@ export function GenericTableView(props: GenericTableViewProps) { loading={show === "loading"} disabled={!states.hasNext} onClick={callbacks.nextPage} - exportparts="base: defaultbutton-base" + exportparts="base: secondarybutton-base" class={!states.hasNext ? sheet.classes.ButtonDisabled : ""} > {data.textOverrides.moreLabel} From d366e3268e3dc9cb9a63a3836623a76d373f6bb3 Mon Sep 17 00:00:00 2001 From: Zach Harrison Date: Thu, 5 Jun 2025 16:07:55 -0700 Subject: [PATCH 010/125] update leaderboard props and publish new pre release --- packages/mint-components/package.json | 2 +- packages/mint-components/src/components.d.ts | 10 ++ .../src/components/sqm-leaderboard/readme.md | 37 +++--- .../sqm-leaderboard/sqm-leaderboard-view.tsx | 110 +++++++++--------- .../sqm-leaderboard/sqm-leaderboard.tsx | 7 ++ packages/mint-components/src/global/styles.ts | 2 +- 6 files changed, 94 insertions(+), 74 deletions(-) diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index 0af5ec43d0..5fb3305bbb 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.15.0-4", + "version": "1.15.0-5", "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg", "raisins": "docs/raisins.json", diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts index 5980e60afa..4a1fc7fb7f 100644 --- a/packages/mint-components/src/components.d.ts +++ b/packages/mint-components/src/components.d.ts @@ -1513,6 +1513,11 @@ export namespace Components { * @uiName User column heading */ "usersheading": string; + /** + * @uiWidget color + * @uiName Viewing user highlight color + */ + "viewingUserHighlightColor": string; /** * @uiName Viewing user text */ @@ -8252,6 +8257,11 @@ declare namespace LocalJSX { * @uiName User column heading */ "usersheading"?: string; + /** + * @uiWidget color + * @uiName Viewing user highlight color + */ + "viewingUserHighlightColor"?: string; /** * @uiName Viewing user text */ diff --git a/packages/mint-components/src/components/sqm-leaderboard/readme.md b/packages/mint-components/src/components/sqm-leaderboard/readme.md index 0281480cd9..11341857be 100644 --- a/packages/mint-components/src/components/sqm-leaderboard/readme.md +++ b/packages/mint-components/src/components/sqm-leaderboard/readme.md @@ -7,24 +7,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `anonymousUser` | `anonymous-user` | Title displayed for users without names | `string` | `"Anonymous User"` | -| `demoData` | -- | | `{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }` | `undefined` | -| `hideNames` | `hide-names` | Hide the Names of users to protect personal identifiable information | `boolean` | `false` | -| `hideViewer` | `hide-viewer` | Hide the viewer's leaderboard row if not in the top results. | `boolean` | `false` | -| `interval` | `interval` | | `string` | `undefined` | -| `leaderboardType` | `leaderboard-type` | | `"topConvertedReferrers" \| "topPointEarners" \| "topStartedReferrers"` | `undefined` | -| `maxRows` | `max-rows` | Control the maximum amount of rows displayed on the leaderboard. | `number` | `10` | -| `programId` | `program-id` | Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is. If no program ID is set or provided by context, then a global leaderboard is shown. | `string` | `undefined` | -| `rankSuffix` | `rank-suffix` | A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., "st" for 1st, "nd" for 2nd, "rd" for 3rd, and "th" for all others). | `string` | `undefined` | -| `rankType` | `rank-type` | | `"denseRank" \| "rank" \| "rowNumber"` | `undefined` | -| `rankheading` | `rankheading` | | `string` | `undefined` | -| `showRank` | `show-rank` | | `boolean` | `undefined` | -| `statsheading` | `statsheading` | | `string` | `undefined` | -| `usersheading` | `usersheading` | | `string` | `undefined` | -| `viewingUserText` | `viewing-user-text` | | `string` | `"You"` | -| `width` | `width` | Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.) | `string` | `"100%"` | +| Property | Attribute | Description | Type | Default | +| --------------------------- | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | +| `anonymousUser` | `anonymous-user` | Title displayed for users without names | `string` | `"Anonymous User"` | +| `demoData` | -- | | `{ states?: { loading: boolean; hasLeaders: boolean; isEssentials?: boolean; styles: { usersheading: string; statsheading: string; rankheading?: string; showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; viewingUserhighlightColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; width?: string; }; }; data?: { rankType: string; leaderboard: { textValue: string; rank: number; firstName: string; lastInitial: string; rowNumber: number; }[]; viewerRank?: { textValue: string; rank: number; firstName?: string; lastInitial?: string; rowNumber: number; }; }; elements?: { empty: VNode; }; }` | `undefined` | +| `hideNames` | `hide-names` | Hide the Names of users to protect personal identifiable information | `boolean` | `false` | +| `hideViewer` | `hide-viewer` | Hide the viewer's leaderboard row if not in the top results. | `boolean` | `false` | +| `interval` | `interval` | | `string` | `undefined` | +| `leaderboardType` | `leaderboard-type` | | `"topConvertedReferrers" \| "topPointEarners" \| "topStartedReferrers"` | `undefined` | +| `maxRows` | `max-rows` | Control the maximum amount of rows displayed on the leaderboard. | `number` | `10` | +| `programId` | `program-id` | Filters leaderboard to show only data from this program. Defaults to the program context where this leaderboard is. If no program ID is set or provided by context, then a global leaderboard is shown. | `string` | `undefined` | +| `rankSuffix` | `rank-suffix` | A JSONata string that formats the rank with the appropriate ordinal suffix (e.g., "st" for 1st, "nd" for 2nd, "rd" for 3rd, and "th" for all others). | `string` | `undefined` | +| `rankType` | `rank-type` | | `"denseRank" \| "rank" \| "rowNumber"` | `undefined` | +| `rankheading` | `rankheading` | | `string` | `undefined` | +| `showRank` | `show-rank` | | `boolean` | `undefined` | +| `statsheading` | `statsheading` | | `string` | `undefined` | +| `usersheading` | `usersheading` | | `string` | `undefined` | +| `viewingUserHighlightColor` | `viewing-user-highlight-color` | | `string` | `undefined` | +| `viewingUserText` | `viewing-user-text` | | `string` | `"You"` | +| `width` | `width` | Restrict the width of the leaderboard (Can be a pixel value or a percentage i.e. "500px", "33%", etc.) | `string` | `"100%"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx index 77bd74f2c6..104155cf66 100644 --- a/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx +++ b/packages/mint-components/src/components/sqm-leaderboard/sqm-leaderboard-view.tsx @@ -14,6 +14,7 @@ export interface LeaderboardViewProps { showRank?: boolean; hideViewer?: boolean; viewingUserText?: string; + viewingUserhighlightColor?: string; hideNames?: boolean; anonymousUser?: string; rankSuffix?: string; @@ -42,69 +43,70 @@ export interface LeaderboardViewProps { }; } -const style = { - Leaderboard: { - "& table": { - width: "100%", - borderCollapse: "collapse", - }, - "& th": { - textAlign: "left", - padding: "var(--sl-spacing-medium)", - paddingTop: "0", - fontSize: "var(--sl-font-size-medium)", - fontWeight: "var(--sl-font-weight-semibold)", - }, - "& tr:not(:first-child)": { - borderTop: "1px solid var(--sl-color-neutral-200)", - }, - "& td": { - fontSize: "var(--sl-font-size-medium)", - fontWeight: "var(--sl-font-weight-normal)", - }, - "& .ellipses": { - textAlign: "left", - padding: "0", - color: "var(--sqm-text)", - paddingLeft: "25%", - }, - "& .highlight": { - background: "var(--sl-color-primary-50)", - }, - "& td, th": { - color: "var(--sqm-text)", - padding: "var(--sl-spacing-medium)", - }, - "& .User": { - width: "100%", - }, - "& .Score": { - width: "auto", - whiteSpace: "nowrap", - }, +export function LeaderboardView(props: LeaderboardViewProps) { + const { states, data, elements } = props; + const { styles } = states; - "& .Rank": { - whiteSpace: "nowrap", - }, - "& .fullWidth": { - width: "100%", + const style = { + Leaderboard: { + "& table": { + width: "100%", + borderCollapse: "collapse", + }, + "& th": { + textAlign: "left", + padding: "var(--sl-spacing-medium)", + paddingTop: "0", + fontSize: "var(--sl-font-size-medium)", + fontWeight: "var(--sl-font-weight-semibold)", + }, + "& tr:not(:first-child)": { + borderTop: "1px solid var(--sl-color-neutral-200)", + }, + "& td": { + fontSize: "var(--sl-font-size-medium)", + fontWeight: "var(--sl-font-weight-normal)", + }, + "& .ellipses": { + textAlign: "left", + padding: "0", + color: "var(--sqm-text)", + paddingLeft: "25%", + }, + "& .highlight": { + background: + styles.viewingUserhighlightColor || "var(--sl-color-primary-100)", + }, + "& td, th": { + color: "var(--sqm-text)", + padding: "var(--sl-spacing-medium)", + }, + "& .User": { + width: "100%", + }, + "& .Score": { + width: "auto", + whiteSpace: "nowrap", + }, + + "& .Rank": { + whiteSpace: "nowrap", + }, + "& .fullWidth": { + width: "100%", + }, }, - }, -}; + }; -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); -const vanillaStyle = ` + const vanillaStyle = ` :host{ display: block; } `; -export function LeaderboardView(props: LeaderboardViewProps) { - const { states, data, elements } = props; - const { styles } = states; - if (states.isEssentials) { return ( Date: Fri, 6 Jun 2025 18:23:46 -0700 Subject: [PATCH 011/125] Add new style props to task cards --- .../end-user-testing/src/widgetTemplate.html | 36 +- packages/mint-components/src/components.d.ts | 64 ++++ .../src/components/sqm-task-card/readme.md | 57 +-- .../sqm-task-card/sqm-task-card-view.tsx | 327 ++++++++++-------- .../sqm-task-card/sqm-task-card.tsx | 42 +++ .../components/sqm-task-card/useTaskCard.ts | 11 + packages/mint-components/src/global/styles.ts | 8 +- packages/mint-components/src/index.html | 13 +- 8 files changed, 361 insertions(+), 197 deletions(-) diff --git a/packages/end-user-testing/src/widgetTemplate.html b/packages/end-user-testing/src/widgetTemplate.html index 3c4a658027..61852be2f2 100644 --- a/packages/end-user-testing/src/widgetTemplate.html +++ b/packages/end-user-testing/src/widgetTemplate.html @@ -1,40 +1,47 @@ - + Top Performers rankheading="Rank" show-rank="true" slot + viewing-user-highlight-color="rgba(30, 215, 96, 1)" >