Skip to content

Commit 5cc1b40

Browse files
jayden-chanjayden-chan
committed
Merge branch 'master' into jayden/event-data-in-email-handlebars
2 parents 8a5b7b4 + f9ee12f commit 5cc1b40

File tree

13 files changed

+149
-22
lines changed

13 files changed

+149
-22
lines changed

‎.github/workflows/publish-package.yml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ jobs:
5252
id: setup-node
5353
uses: actions/setup-node@v4
5454
with:
55-
node-version-file: "${{ steps.vars.outputs.dir }}/package.json"
55+
node-version: 24
56+
registry-url: "https://registry.npmjs.org"
5657

5758
# we could add this to devDependencies but we'd have to do it for every package
5859
# so might as well just install it inside the action

‎packages/mint-components/CHANGELOG.md‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,31 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [2.0.8] - 2025-01-06
11+
12+
- \<sqm-payout-status-alert>
13+
14+
- Fix value of status demo data for content editor testing
15+
16+
## [2.0.7] - 2025-12-09
17+
18+
- \<sqm-tax-and-cash-dashboard-view>
19+
20+
- Replaced sl-tooltip with custom sl-dropdown to handle clickable tooltip content
21+
- Added ICU string for text prop indirectTaxTooltipSupport
22+
23+
- \<sqm-tax-and-cash-dashboard>
24+
25+
- Updated text prop indirectTaxTooltipSupport to handle ICU string
26+
27+
## [2.0.6] - 2025-12-05
28+
29+
### Changed
30+
31+
- \<sqm-name-fields>
32+
33+
- Remove `shadow: true` from name fields so that they can be picked up by shoelace form
34+
1035
## [2.0.5] - 2025-12-02
1136

1237
### Changed
@@ -1431,7 +1456,9 @@ This major release represents a significant advancement in the theming capabilit
14311456
- \<sqm-popup-container>
14321457
- \<sqm-stencilbook>
14331458

1434-
[unreleased]: https://github.com/saasquatch/program-tools/compare/[email protected]
1459+
[unreleased]: https://github.com/saasquatch/program-tools/compare/[email protected]
1460+
[2.0.7]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.7
1461+
[2.0.6]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.6
14351462
[2.0.5]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.5
14361463
[2.0.4]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.4
14371464
[2.0.3]: https://github.com/saasquatch/program-tools/releases/tag/%40saasquatch%2Fmint-components%402.0.3

‎packages/mint-components/package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/mint-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@saasquatch/mint-components",
33
"title": "Mint Components",
4-
"version": "2.0.5",
4+
"version": "2.0.8",
55
"description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
66
"icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
77
"raisins": "docs/raisins.json",

‎packages/mint-components/src/components/sqm-name-fields/sqm-name-fields.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { useNameFields } from "./useNameFields";
1414
*/
1515
@Component({
1616
tag: "sqm-name-fields",
17-
shadow: true,
1817
})
1918
export class NameFields {
2019
@State()

‎packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -558,6 +558,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) {
558558
}
559559

560560
const alertDetails = getAlert(states.status);
561+
561562
if (states.status === "DONE" || !alertDetails) {
562563
return <div></div>;
563564
}

‎packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,7 @@ function useDemoPayoutStatusAlert(
254254
{
255255
states: {
256256
error: false,
257-
status: props.demoData.states.status,
257+
status: states.status,
258258
loading: false,
259259
veriffLoading: false,
260260
},

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
| `indirectTaxInfoOtherCountry` | `indirect-tax-info-other-country` | If the participant is registered for indirect tax, display the country they’re registered in. | `string` | `"Registered in {country}"` |
3737
| `indirectTaxInfoSectionHeader` | `indirect-tax-info-section-header` | | `string` | `"Indirect tax"` |
3838
| `indirectTaxInfoSpain` | `indirect-tax-info-spain` | If the participant is registered for indirect tax in Spain, display the region they’re registered in. | `string` | `"Registered in {country}, {subRegion}"` |
39-
| `indirectTaxTooltipSupport` | `indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our Support team."` |
39+
| `indirectTaxTooltipSupport` | `indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our {supportLink}."` |
4040
| `invalidForm` | `invalid-form` | Additional text displayed next to the tax form's status badge. | `string` | `"Make sure your information is correct and submit new form."` |
4141
| `invoiceColumnTitle` | `invoice-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Invoice"` |
4242
| `invoiceDescription` | `invoice-description` | | `string` | `"View and download your invoices to report your earnings and stay tax compliant."` |

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx‎

Lines changed: 105 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,7 @@ const style = {
184184
marginBottom: "var(--sl-spacing-xx-small)",
185185
margin: "0",
186186
display: "flex",
187+
alignItems: "center",
187188
gap: "var(--sl-spacing-x-small)",
188189
"&::part(base)": {
189190
color: "var(--sqm-text)",
@@ -265,6 +266,9 @@ const style = {
265266
display: "flex",
266267
textAlign: "center",
267268
width: "250px",
269+
"&::part(body)": {
270+
pointerEvents: "auto",
271+
},
268272
},
269273
ToolTip: {
270274
top: "6px",
@@ -344,6 +348,43 @@ const style = {
344348
gap: "var(--sl-spacing-medium)",
345349
flexWrap: "wrap",
346350
},
351+
DropdownTooltipContainer: {
352+
top: "-4px",
353+
"&::part(panel)": {
354+
boxShadow: "none",
355+
border: "none",
356+
marginTop: "var(--sl-spacing-x-small)",
357+
},
358+
},
359+
DropdownContent: {
360+
padding: "var(--sl-spacing-xxx-small) var(--sl-spacing-x-small)",
361+
fontSize: "var(--sl-font-size-small)",
362+
fontFamily: "var(--sl-font-sans)",
363+
fontWeight: "var(--sl-font-weight-normal)",
364+
lineHeight: "var(--sl-line-height-dense)",
365+
minWidth: "225px",
366+
backgroundColor: "var(--sl-color-gray-900)",
367+
color: "var(--sl-color-white)",
368+
borderRadius: "var(--sl-border-radius-medium)",
369+
position: "relative",
370+
marginLeft: "5px",
371+
},
372+
DropdownArrow: {
373+
position: "absolute",
374+
left: "-5px",
375+
top: "50%",
376+
transform: "translateY(-50%)",
377+
width: "0",
378+
height: "0",
379+
borderTop: "5px solid transparent",
380+
borderBottom: "5px solid transparent",
381+
borderRight: "5px solid var(--sl-color-gray-900)",
382+
zIndex: "1",
383+
},
384+
DropdownLink: {
385+
color: "var(--sl-color-white)",
386+
textDecoration: "underline",
387+
},
347388
};
348389

349390
const sheet = createStyleSheet(style);
@@ -909,6 +950,39 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
909950

910951
const alertInfo = getAlert(states.payoutStatus);
911952

953+
const dropdownHover = (el) => {
954+
if (!el) return;
955+
956+
const trigger = el.querySelector('[slot="trigger"]');
957+
const panel = el.shadowRoot?.querySelector(".dropdown__panel");
958+
959+
if (!trigger || !panel) return;
960+
961+
let hideTimeout: ReturnType<typeof setTimeout> | undefined;
962+
963+
const show = () => {
964+
clearTimeout(hideTimeout);
965+
el.show();
966+
};
967+
968+
const scheduleHide = () => {
969+
hideTimeout = setTimeout(() => el.hide(), 100);
970+
};
971+
972+
trigger.addEventListener("mouseenter", show);
973+
trigger.addEventListener("mouseleave", scheduleHide);
974+
panel.addEventListener("mouseenter", show);
975+
panel.addEventListener("mouseleave", scheduleHide);
976+
977+
return () => {
978+
trigger.removeEventListener("mouseenter", show);
979+
trigger.removeEventListener("mouseleave", scheduleHide);
980+
panel.removeEventListener("mouseenter", show);
981+
panel.removeEventListener("mouseleave", scheduleHide);
982+
clearTimeout(hideTimeout);
983+
};
984+
};
985+
912986
return (
913987
<div>
914988
<div>
@@ -1108,14 +1182,39 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => {
11081182
<div>
11091183
<h3 class={sheet.classes.IndirectTaxPreviewHeaderContainer}>
11101184
{text.indirectTaxInfoSectionHeader}
1111-
<sl-tooltip
1112-
trigger="hover"
1185+
<sl-dropdown
11131186
placement="right"
1114-
content={text.indirectTaxTooltipSupport}
1115-
class={sheet.classes.TooltipContainer}
1187+
distance={1}
1188+
ref={dropdownHover}
1189+
class={sheet.classes.DropdownTooltipContainer}
11161190
>
1117-
<sl-icon name="info-circle" class={sheet.classes.ToolTip} />
1118-
</sl-tooltip>
1191+
<sl-icon
1192+
slot="trigger"
1193+
name="info-circle"
1194+
class={sheet.classes.ToolTip}
1195+
style={{ cursor: "pointer" }}
1196+
/>
1197+
<div class={sheet.classes.DropdownContent}>
1198+
<div class={sheet.classes.DropdownArrow}></div>
1199+
{intl.formatMessage(
1200+
{
1201+
id: "indirectTaxTooltipSupport",
1202+
defaultMessage: text.indirectTaxTooltipSupport,
1203+
},
1204+
{
1205+
supportLink: (
1206+
<a
1207+
target="_blank"
1208+
href={`mailto:[email protected]`}
1209+
class={sheet.classes.DropdownLink}
1210+
>
1211+
{text.supportLink}
1212+
</a>
1213+
),
1214+
}
1215+
)}
1216+
</div>
1217+
</sl-dropdown>
11191218
</h3>
11201219
<div class={sheet.classes.IndirectTaxPreviewDetails}>
11211220
<span>

‎packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,7 @@ export class TaxAndCashDashboard {
150150
* @uiWidget textArea
151151
*/
152152
@Prop() indirectTaxTooltipSupport: string =
153-
"To make changes to your indirect tax information, please contact our Support team.";
153+
"To make changes to your indirect tax information, please contact our {supportLink}.";
154154
/**
155155
* Displayed to participants who have submitted their indirect tax information.
156156
*

0 commit comments

Comments
 (0)