+
{statusText}
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx
index 6372c80b21..db9b23081c 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx
@@ -1,4 +1,5 @@
import { VNode } from "@stencil/core";
+import { ImpactConnection, Reward } from "../../../saasquatch";
export interface RewardTableColumn {
renderLabel(idx?: number): Promise;
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx
index 32863f2751..f6f6cf416d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx
@@ -1,5 +1,6 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { Reward } from "../../../saasquatch";
import { useRequestRerender } from "../../../tables/re-render";
import { RewardTableColumn } from "./RewardTableColumn";
@@ -7,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn";
* @uiName Reward Table Date Column
* @validParents ["sqm-rewards-table"]
* @exampleGroup Rewards
- * @example Reward Table Date Column -
+ * @example Date Column -
*/
@Component({
tag: "sqm-rewards-table-date-column",
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx
index 9194c7e005..6aca10a21d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx
@@ -1,5 +1,6 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { Reward } from "../../../saasquatch";
import { useRequestRerender } from "../../../tables/re-render";
import { RewardTableColumn } from "./RewardTableColumn";
@@ -7,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn";
* @uiName Reward Table Customer Note Column
* @validParents ["sqm-rewards-table"]
* @exampleGroup Rewards
- * @example Reward Table Customer Note Column -
+ * @example Customer Note Column -
*/
@Component({
tag: "sqm-rewards-table-customer-note-column",
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx
index f61378edff..2a88926a51 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx
@@ -1,12 +1,13 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { Reward } from "../../../saasquatch";
import { useRequestRerender } from "../../../tables/re-render";
import { RewardTableColumn } from "./RewardTableColumn";
/**
* @uiName Rewards Table Reward Column
* @validParents ["sqm-rewards-table"]
* @exampleGroup Rewards
- * @example Rewards Table Reward Column -
+ * @example Reward Column -
*/
@Component({
tag: "sqm-rewards-table-reward-column",
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
index 3d320bcac1..9b43e98426 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx
@@ -1,5 +1,6 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { Reward } from "../../../saasquatch";
import { useRequestRerender } from "../../../tables/re-render";
import { RewardTableColumn } from "./RewardTableColumn";
diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx
index 1efb6f42f7..f4a4a71bab 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx
@@ -1,5 +1,6 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Host, Method, Prop } from "@stencil/core";
+import { ImpactConnection, Reward } from "../../../saasquatch";
import { useRequestRerender } from "../../../tables/re-render";
import { RewardTableColumn } from "./RewardTableColumn";
diff --git a/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts b/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts
index ebd0a7b60b..f39b2911b2 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts
+++ b/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts
@@ -1,4 +1,5 @@
import { DateTime } from "luxon";
+import { Reward } from "../../saasquatch";
export default (count = 4, status = undefined) => {
const data = [...Array(count)].map(() => getMockData(status)) as Reward[];
diff --git a/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts b/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts
index 853c95458e..59afe0ab4d 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts
+++ b/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts
@@ -1,3 +1,5 @@
+import { ImpactConnection } from "../../saasquatch";
+
export default (): ImpactConnection => {
return {
connected: true,
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 820e088495..f8180e4a56 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
@@ -1,6 +1,6 @@
import { isDemo } from "@saasquatch/component-boilerplate";
import { withHooks } from "@saasquatch/stencil-hooks";
-import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks";
+import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks";
import { Component, h, Prop, VNode } from "@stencil/core";
import deepmerge from "deepmerge";
import { DemoData } from "../../global/demo";
@@ -15,10 +15,12 @@ import {
import { useChildElements } from "../../tables/useChildElements";
import mockRewardData from "./mockRewardData";
+import { Referral } from "../../saasquatch";
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 -
diff --git a/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx b/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx
index adfb60b1a6..b000379212 100644
--- a/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx
+++ b/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx
@@ -7,15 +7,14 @@ import {
} from "@saasquatch/component-boilerplate";
import { useEffect, useReducer } from "@saasquatch/universal-hooks";
import { h, VNode } from "@stencil/core";
+import debugFn from "debug";
import { gql } from "graphql-request";
+import { ImpactConnection, Reward } from "../../saasquatch";
+import { GenericTableViewProps } from "../../tables/GenericTableView";
import { useRerenderListener } from "../../tables/re-render";
-import { RewardsTable } from "./sqm-rewards-table";
import { useChildElements } from "../../tables/useChildElements";
import { generateUserError } from "../sqm-referral-table/useReferralTable";
-import { GenericTableViewProps } from "../../tables/GenericTableView";
-import debugFn from "debug";
-import mockRewardData from "./mockRewardData";
-import mockTaxData from "./mockTaxData";
+import { RewardsTable } from "./sqm-rewards-table";
const debug = debugFn("sq:useRewardsTable");
export const CSS_NAMESPACE = "sqm-rewards-table";
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/readme.md b/packages/mint-components/src/components/sqm-scroll/readme.md
index 9a3fba3a7e..5ec8ef920d 100644
--- a/packages/mint-components/src/components/sqm-scroll/readme.md
+++ b/packages/mint-components/src/components/sqm-scroll/readme.md
@@ -5,20 +5,19 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- |
-| `buttonText` | `button-text` | | `string` | `undefined` |
-| `buttonType` | `button-type` | | `"danger" \| "default" \| "neutral" \| "primary" \| "success" \| "text" \| "warning"` | `"default"` |
-| `circle` | `circle` | Draws a circle button. | `boolean` | `undefined` |
-| `iconName` | `icon-name` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` |
-| `iconSlot` | `icon-slot` | | `string` | `undefined` |
-| `mobile` | `mobile` | The button becomes full width if the screen size is smaller than 500px | `boolean` | `undefined` |
-| `outline` | `outline` | Draws an outlined button. | `boolean` | `undefined` |
-| `pill` | `pill` | Draws a pill-style button with rounded edges. | `boolean` | `undefined` |
-| `scrollAnimation` | `scroll-animation` | | `"auto" \| "smooth"` | `"smooth"` |
-| `scrollId` | `scroll-id` | ID applied to the HTML tag you would like to scroll to. E.g tab-1 | `string` | `undefined` |
-| `scrollTagName` | `scroll-tag-name` | The name of the HTML tag you would like to scroll to. E.g referral-table | `string` | `undefined` |
-| `size` | `size` | | `string` | `undefined` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- |
+| `buttonText` | `button-text` | | `string` | `undefined` |
+| `circle` | `circle` | Draws a circle button. | `boolean` | `undefined` |
+| `iconName` | `icon-name` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` |
+| `iconSlot` | `icon-slot` | | `string` | `undefined` |
+| `mobile` | `mobile` | The button becomes full width if the screen size is smaller than 500px | `boolean` | `undefined` |
+| `outline` | `outline` | Draws an outlined button. | `boolean` | `undefined` |
+| `pill` | `pill` | Draws a pill-style button with rounded edges. | `boolean` | `undefined` |
+| `scrollAnimation` | `scroll-animation` | | `"auto" \| "smooth"` | `"smooth"` |
+| `scrollId` | `scroll-id` | ID applied to the HTML tag you would like to scroll to. E.g tab-1 | `string` | `undefined` |
+| `scrollTagName` | `scroll-tag-name` | The name of the HTML tag you would like to scroll to. E.g referral-table | `string` | `undefined` |
+| `size` | `size` | | `string` | `undefined` |
## Dependencies
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..fec745f860 100644
--- a/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx
+++ b/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx
@@ -1,10 +1,10 @@
import { withHooks } from "@saasquatch/stencil-hooks";
import { Component, h, Prop, Host, State } from "@stencil/core";
import { useScroll } from "./useScroll";
-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
*/
@@ -16,22 +16,6 @@ export class Scroll {
@State()
ignored = true;
- /**
- * @uiName Button type
- * @uiType string
- * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"]
- * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"]
-
- */
- @Prop() buttonType:
- | "default"
- | "primary"
- | "success"
- | "neutral"
- | "warning"
- | "danger"
- | "text" = "default";
-
/**
* @uiName Button text
*/
@@ -116,86 +100,42 @@ export class Scroll {
render() {
const { callbacks } = useScroll(this);
- const outlineColor = this.buttonType ?? "primary";
- const style = {
- Button: {
- "& .outline": {
- "&::part(base)": {
- color: "var(--sl-color-" + outlineColor + "-500)",
- borderColor: "var(--sl-color-" + outlineColor + "-500)",
- backgroundColor: "transparent",
- "&:hover": {
- color: "var(--sl-color-primary-text)",
- backgroundColor: "var(--sl-color-" + outlineColor + "-500)",
- },
- },
- },
- "& .neutral": {
- "&::part(base)": {
- color: "var(--sl-color-primary-text)",
- background: "var(--sl-color-neutral-500)",
- "&:hover": {
- opacity: "0.8",
- },
- },
- },
- "& .mobile": {
- "@media (max-width: 499px)": {
- width: "100%",
- },
- },
- },
- };
-
- const sheet = createStyleSheet(style);
- const styleString = sheet.toString();
-
- const vanillaStyle = `
- :host{
- display: contents;
- }
- ${
- this.mobile &&
- `
- @media only screen and (max-width: 499px) {
- :host {
- display: block;
- width: 100%;
- }
- }
- `
+ const vanillaStyleString = `
+ *::part(secondarybutton-base),
+ sl-button[type="secondary"]::part(base) {
+ font-family: var(--sqm-primary-font);
+ background-color: var(--sqm-secondary-button-background);
+ color: var(--sqm-secondary-button-color);
+ border-color: var(--sqm-secondary-button-color-border);
+ border-radius: var(--sqm-secondary-button-radius);
}
- `;
-
- let classStack = "";
- if (this.outline && this.buttonType != "default") classStack += "outline ";
- if (this.buttonType === "neutral") classStack += "neutral ";
- if (this.mobile) classStack += "mobile ";
+ *::part(secondarybutton-base):hover,
+ sl-button[type="secondary"]::part(base):hover {
+ background-color: var(--sqm-secondary-button-background-hover);
+ color: var(--sqm-secondary-button-color-hover);
+ border-color: var(--sqm-secondary-button-border-color-hover);
+ }
+ `;
return (
-
-
-
- {(this.iconSlot || this.iconName) && (
-
- )}
- {this.buttonText}
-
-
-
+
+
+ {(this.iconSlot || this.iconName) && (
+
+ )}
+ {this.buttonText}
+
+
);
}
}
diff --git a/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx b/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx
index cf451b65c8..64ef0bab80 100644
--- a/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx
+++ b/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx
@@ -53,13 +53,15 @@ export const TextStyleWithoutIcon = () => {
return Share;
};
-export const WithCustomColors = () => {
+export const WithCustomColorsAndBranding = () => {
const props = {
medium: "facebook",
type: "text",
backgroundcolor: "red",
textcolor: "yellow",
iconslot: "prefix",
+ border: "2px solid yellow",
+ borderradius: 30,
} as const;
return Facebook;
};
diff --git a/packages/mint-components/src/components/sqm-share-button/readme.md b/packages/mint-components/src/components/sqm-share-button/readme.md
index 2ecd38695c..2e0d6d7ec3 100644
--- a/packages/mint-components/src/components/sqm-share-button/readme.md
+++ b/packages/mint-components/src/components/sqm-share-button/readme.md
@@ -7,26 +7,27 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| `backgroundcolor` | `backgroundcolor` | | `string` | `undefined` |
-| `borderradius` | `borderradius` | Configure border radius with pixel amount | `number` | `undefined` |
-| `demoData` | -- | | `{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: "facebook" \| "twitter" \| "email" \| "direct" \| "linkedin" \| "sms" \| "fbmessenger" \| "whatsapp" \| "linemessenger" \| "pinterest" \| "reminder" \| "unknown"; pill?: boolean; type?: "text" \| "warning" \| "info" \| "success" \| "default" \| "primary" \| "danger"; size?: "small" \| "medium" \| "large"; hideicon?: boolean; hidetext?: boolean; iconslot?: "prefix" \| "suffix"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }` | `undefined` |
-| `disabled` | `disabled` | | `boolean` | `undefined` |
-| `hideicon` | `hideicon` | | `boolean` | `false` |
-| `hidetext` | `hidetext` | | `boolean` | `false` |
-| `icon` | `icon` | Options available at https://shoelace.style/components/icon Icon used in button. Will try to select an icon based on the share medium if left empty. | `string` | `undefined` |
-| `iconslot` | `iconslot` | | `"prefix" \| "suffix"` | `"prefix"` |
-| `medium` | `medium` | The social medium to share on. Share messages and links will be pulled from your program config and tagged for analytics. | `"direct" \| "email" \| "facebook" \| "fbmessenger" \| "linemessenger" \| "linkedin" \| "pinterest" \| "reminder" \| "sms" \| "twitter" \| "unknown" \| "whatsapp"` | `undefined` |
-| `pill` | `pill` | | `boolean` | `undefined` |
-| `programId` | `program-id` | Optional programId, or uses the programId context where this button is rendered. | `string` | `undefined` |
-| `sharetext` | `sharetext` | Text used for native sharing (mobile only) | `string` | `undefined` |
-| `sharetitle` | `sharetitle` | Title used for native sharing (mobile only) | `string` | `undefined` |
-| `size` | `size` | | `"large" \| "medium" \| "small"` | `undefined` |
-| `textcolor` | `textcolor` | | `string` | `undefined` |
-| `type` | `type` | | `"danger" \| "default" \| "info" \| "primary" \| "success" \| "text" \| "warning"` | `"default"` |
-| `undefinedLinkText` | `undefined-link-text` | Alert text shown if the share link is undefined | `string` | `"Error: message link undefined!"` |
-| `unsupportedPlatformText` | `unsupported-platform-text` | Alert text shown if the user's device does not support native sharing | `string` | `"Error: not on a supported device"` |
+| Property | Attribute | Description | Type | Default |
+| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| `backgroundcolor` | `backgroundcolor` | | `string` | `undefined` |
+| `border` | `border` | | `string` | `undefined` |
+| `borderradius` | `borderradius` | Configure border radius with pixel amount | `number` | `undefined` |
+| `demoData` | -- | | `{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: "facebook" \| "twitter" \| "email" \| "direct" \| "linkedin" \| "sms" \| "fbmessenger" \| "whatsapp" \| "linemessenger" \| "pinterest" \| "reminder" \| "unknown"; border?: string; pill?: boolean; type?: "text" \| "primary" \| "secondary" \| "warning" \| "info" \| "success" \| "danger" \| "default"; size?: "small" \| "medium" \| "large"; hideicon?: boolean; hidetext?: boolean; iconslot?: "prefix" \| "suffix"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }` | `undefined` |
+| `disabled` | `disabled` | | `boolean` | `undefined` |
+| `hideicon` | `hideicon` | | `boolean` | `false` |
+| `hidetext` | `hidetext` | | `boolean` | `false` |
+| `icon` | `icon` | Options available at https://shoelace.style/components/icon Icon used in button. Will try to select an icon based on the share medium if left empty. | `string` | `undefined` |
+| `iconslot` | `iconslot` | | `"prefix" \| "suffix"` | `"prefix"` |
+| `medium` | `medium` | The social medium to share on. Share messages and links will be pulled from your program config and tagged for analytics. | `"direct" \| "email" \| "facebook" \| "fbmessenger" \| "linemessenger" \| "linkedin" \| "pinterest" \| "reminder" \| "sms" \| "twitter" \| "unknown" \| "whatsapp"` | `undefined` |
+| `pill` | `pill` | | `boolean` | `undefined` |
+| `programId` | `program-id` | Optional programId, or uses the programId context where this button is rendered. | `string` | `undefined` |
+| `sharetext` | `sharetext` | Text used for native sharing (mobile only) | `string` | `undefined` |
+| `sharetitle` | `sharetitle` | Title used for native sharing (mobile only) | `string` | `undefined` |
+| `size` | `size` | | `"large" \| "medium" \| "small"` | `undefined` |
+| `textcolor` | `textcolor` | | `string` | `undefined` |
+| `type` | `type` | | `"danger" \| "default" \| "info" \| "primary" \| "secondary" \| "success" \| "text" \| "warning"` | `"default"` |
+| `undefinedLinkText` | `undefined-link-text` | Alert text shown if the share link is undefined | `string` | `"Error: message link undefined!"` |
+| `unsupportedPlatformText` | `unsupported-platform-text` | Alert text shown if the user's device does not support native sharing | `string` | `"Error: not on a supported device"` |
## Dependencies
diff --git a/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx b/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx
index ca77f43b8d..0f7e9cd764 100644
--- a/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx
+++ b/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx
@@ -21,6 +21,7 @@ export interface ShareButtonViewProps {
pill?: boolean;
type?:
| "primary"
+ | "secondary"
| "success"
| "info"
| "warning"
@@ -28,7 +29,7 @@ export interface ShareButtonViewProps {
| "default"
| "text";
size?: "small" | "medium" | "large";
-
+ border?: string;
icon?: string;
hideicon?: boolean;
hidetext?: boolean;
@@ -47,7 +48,11 @@ const medium = {
facebook: { color: "#1877f2", text: "#fff", icon: "facebook" },
twitter: { color: "#000000", text: "#fff", icon: "twitter-x" },
email: { color: "#666666", text: "#fff", icon: "envelope" },
- direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" },
+ direct: {
+ color: "var(--sqm-primary-button-background)",
+ text: "var(--sqm-primary-button-color)",
+ icon: "send",
+ },
linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" },
sms: { color: "#34DA50", text: "#fff", icon: "chat" },
fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" },
@@ -71,15 +76,9 @@ const styleString = sheet.toString();
export function ShareButtonView(props: ShareButtonViewProps, children: VNode) {
const vanillaStyle = `
- *::part(base) {
- border: none;
- --sl-focus-ring-color-primary: ${
- props.backgroundcolor
- ? props.backgroundcolor
- : props.medium
- ? medium[props.medium].color
- : ""
- }80!important;
+ sl-button::part(base) {
+ border: ${props.border || "none"};
+ font-family: var(--sqm-primary-font);
background: ${
props.backgroundcolor
@@ -95,28 +94,14 @@ export function ShareButtonView(props: ShareButtonViewProps, children: VNode) {
? medium[props.medium].text
: ""
};
- border-radius: ${props.borderradius ? props.borderradius + "px" : ""};
+ border-radius: ${
+ props.borderradius
+ ? props.borderradius + "px"
+ : "var(--sqm-primary-button-radius)"
+ };
}
- *::part(base):hover {
- border-color: ${
- props.backgroundcolor
- ? props.backgroundcolor
- : props.medium
- ? medium[props.medium].color
- : ""
- }D1!important;
- }
- *::part(base):focus {
- border-color: ${
- props.backgroundcolor
- ? props.backgroundcolor
- : props.medium
- ? medium[props.medium].color
- : ""
- }D1!important;
- }
*::part(label) {
position: relative;
@@ -140,7 +125,7 @@ export function ShareButtonView(props: ShareButtonViewProps, children: VNode) {
type={props.type}
onClick={!props.isPlainLink ? props.onClick : undefined}
href={props.isPlainLink ? props.messageLink : undefined}
- exportparts={`base: ${props.type}sharebutton-base`}
+ exportparts={`base: ${props.type}button-base`}
>
{!props.hideicon && (
Share on Facebook
* @example X Share Button - Share via X
* @example Email Share Button - Share via Email
- * @example Web Share Sheet Share Button - Share
+ * @example Mobile Share Sheet Button - Share
* @example LinkedIn Share Button - Share on LinkedIn
* @example SMS Share Button - Text a friend
- * @example Facebook Messenger Share Button - Share via Messenger
+ * @example Messenger Share Button - Share via Messenger
* @example WhatsApp Share Button - Share via WhatsApp
- * @example Line Messenger Share Button - Share via Line Messenger
+ * @example LINE Share Button - Share via Line Messenger
* @example Pinterest Share Button - Share on Pinterest
*/
@Component({
@@ -68,24 +69,35 @@ export class ShareButton {
/**
* Configure border radius with pixel amount
* @uiName Border radius
+ * @uiGroup Style
*/
@Prop() borderradius?: number;
/**
* @uiName Button background color
* @uiWidget color
* @format color
+ * @uiGroup Style
*/
@Prop() backgroundcolor?: string;
+
+ /**
+ * @uiName Border
+ * @uiGroup Style
+ */
+ @Prop() border?: string;
/**
* @uiName Button text color
* @uiWidget color
* @format color
+ * @uiGroup Style
*/
@Prop() textcolor?: string;
/**
* @uiName Display pill
+ * @uiGroup Style
*/
@Prop() pill?: boolean;
+
/**
* @uiName Disabled
*/
@@ -93,11 +105,12 @@ export class ShareButton {
/**
* @uiType string
* @uiName Button style
- * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ]
- * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
+ * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ]
+ * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"]
*/
@Prop() type?:
| "primary"
+ | "secondary"
| "success"
| "info"
| "warning"
@@ -109,6 +122,7 @@ export class ShareButton {
* @uiType string
* @uiEnum ["small", "medium", "large" ]
* @uiEnumNames ["Small", "Medium", "Large"]
+ * @uiGroup Style
*/
@Prop() size?: "small" | "medium" | "large";
/**
@@ -128,11 +142,13 @@ export class ShareButton {
@Prop() icon?: string;
/**
* @uiName Hide icon
+ * @uiGroup Style
* @default
*/
@Prop() hideicon?: boolean = false;
/**
* @uiName Hide text
+ * @uiGroup Style
* @default
*/
@Prop() hidetext?: boolean = false;
diff --git a/packages/mint-components/src/components/sqm-share-code/readme.md b/packages/mint-components/src/components/sqm-share-code/readme.md
index ea021d3630..28d7e0fdbf 100644
--- a/packages/mint-components/src/components/sqm-share-code/readme.md
+++ b/packages/mint-components/src/components/sqm-share-code/readme.md
@@ -5,15 +5,20 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
-| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` |
-| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` |
-| `demoData` | -- | | `{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }` | `undefined` |
-| `programId` | `program-id` | The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` |
-| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` |
-| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` |
-| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| `backgroundColor` | `background-color` | Background color of share link container | `string` | `undefined` |
+| `borderColor` | `border-color` | Border color of share link container | `string` | `undefined` |
+| `borderRadius` | `border-radius` | The border radius on the share link container (in pixels) | `string` | `undefined` |
+| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` |
+| `buttonType` | `button-type` | The type of the button that is used (primary or secondary). | `"primary" \| "secondary"` | `"primary"` |
+| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` |
+| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }` | `undefined` |
+| `programId` | `program-id` | The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` |
+| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` |
+| `textColor` | `text-color` | Color of the text and copy icon | `string` | `undefined` |
+| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` |
+| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` |
## Dependencies
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..5ce8385938 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", "sqm-titled-section"]
* @exampleGroup Sharing
* @example Share Code -
*/
@@ -49,12 +50,39 @@ export class ShareCode {
* @uiType string
* @uiEnum ["left", "center", "right"]
* @uiEnumNames ["Left", "Center", "Right"]
+ * @uiGroup Style
*/
@Prop({
attribute: "text-align",
})
textAlign: "left" | "center" | "right" = "left";
+ /**
+ * Background color of share link container
+ * @uiName Background color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() backgroundColor?: string;
+
+ /**
+ * Color of the text and copy icon
+ * @uiName Text color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() textColor?: string;
+
+ /**
+ * The border radius on the share link container (in pixels)
+ * @uiName Border Radius
+ * @uiType number
+ * @uiGroup Style
+ */
+ @Prop() borderRadius?: string;
+
/**
* @uiName Copy button label
*/
@@ -70,12 +98,33 @@ export class ShareCode {
* @uiType string
* @uiEnum ["icon", "button-outside", "button-below"]
* @uiEnumNames ["Icon", "Button outside", "Button below"]
+ * @uiGroup Style
*/
@Prop({
attribute: "copy-button-style",
})
buttonStyle?: "icon" | "button-outside" | "button-below" = "icon";
+ /**
+ * The type of the button that is used (primary or secondary).
+ * @uiName Button Type
+ * @uiType string
+ * @uiEnum ["primary", "secondary"]
+ * @uiEnumNames ["Primary", "Secondary"]
+ * @uiGroup Style
+ */
+ @Prop()
+ buttonType?: "primary" | "secondary" = "primary";
+
+ /**
+ * Border color of share link container
+ * @uiName Border color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() borderColor?: string;
+
/**
* @undocumented
* @uiType object
@@ -106,6 +155,11 @@ function useDemoShareCode(props: ShareCode): CopyTextViewProps {
textAlign: props.textAlign,
copyButtonLabel: props.copyButtonLabel,
buttonStyle: props.buttonStyle,
+ backgroundColor: props.backgroundColor,
+ textColor: props.textColor,
+ borderRadius: props.borderRadius,
+ borderColor: props.borderColor,
+ buttonType: props.buttonType,
rewardStatus: "AVAILABLE",
open,
onClick: () => {
diff --git a/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx b/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx
index 9e5cafd1d2..72d3b37844 100644
--- a/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx
+++ b/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx
@@ -77,6 +77,38 @@ export const CopyButtonBelow = () => {
>
);
};
+
+export const CustomStyles = () => {
+ const props = {
+ copyString: "https://noah.example.com",
+ open: false,
+ tooltiptext: "Copied!",
+ backgroundColor: "#1ed760",
+ borderRadius: "30px",
+ textColor: "#121212",
+ buttonType: "primary" as const,
+ };
+ return ;
+};
+
+export const CustomStylesWithDemoHooks = () => {
+ const props = {
+ copyString: "https://noah.example.com",
+ open: false,
+ tooltiptext: "Copied!",
+ backgroundColor: "#1ed760",
+ borderRadius: "30px",
+ textColor: "red",
+ buttonType: "primary" as const,
+ borderColor: "#121212",
+ };
+ return (
+
+ );
+};
export const FullStack = () => {
return ;
};
diff --git a/packages/mint-components/src/components/sqm-share-link/readme.md b/packages/mint-components/src/components/sqm-share-link/readme.md
index 0355dcd0f1..3973b50392 100644
--- a/packages/mint-components/src/components/sqm-share-link/readme.md
+++ b/packages/mint-components/src/components/sqm-share-link/readme.md
@@ -5,15 +5,20 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
-| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` |
-| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Link"` |
-| `demoData` | -- | | `{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }` | `undefined` |
-| `programId` | `program-id` | The ID of the program that should generate the link. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` |
-| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` |
-| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` |
-| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` |
+| Property | Attribute | Description | Type | Default |
+| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
+| `backgroundColor` | `background-color` | Background color of share link container | `string` | `undefined` |
+| `borderColor` | `border-color` | Border color of share link container | `string` | `undefined` |
+| `borderRadius` | `border-radius` | The border radius on the share link container (in pixels) | `string` | `undefined` |
+| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` |
+| `buttonType` | `button-type` | The type of the button that is used (primary or secondary). | `"primary" \| "secondary"` | `"primary"` |
+| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Link"` |
+| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }` | `undefined` |
+| `programId` | `program-id` | The ID of the program that should generate the link. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` |
+| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` |
+| `textColor` | `text-color` | Color of the text and copy icon | `string` | `undefined` |
+| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` |
+| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` |
## Dependencies
diff --git a/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx b/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx
index 7b2940be7b..008b81ad26 100644
--- a/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx
+++ b/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx
@@ -10,6 +10,7 @@ import { useShareLink } from "./useShareLink";
/**
* @uiName Share Link
* @exampleGroup Sharing
+ * @validParents ["sqm-portal-container", "sqm-titled-section", "div","sqm-hero","sqm-referral-card","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"]
* @example Share Link -
*/
@Component({
@@ -52,6 +53,7 @@ export class ShareLink {
* @uiType string
* @uiEnum ["left", "center", "right"]
* @uiEnumNames ["Left", "Center", "Right"]
+ * @uiGroup Style
*/
@Prop({
attribute: "text-align",
@@ -66,13 +68,60 @@ export class ShareLink {
})
copyButtonLabel: string = "Copy Link";
+ /**
+ * Background color of share link container
+ * @uiName Background color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() backgroundColor?: string;
+
+ /**
+ * Border color of share link container
+ * @uiName Border color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() borderColor?: string;
+
+ /**
+ * Color of the text and copy icon
+ * @uiName Text color
+ * @uiWidget color
+ * @format color
+ * @uiGroup Style
+ */
+ @Prop() textColor?: string;
+
+ /**
+ * The border radius on the share link container (in pixels)
+ * @uiName Border Radius
+ * @uiType number
+ * @uiGroup Style
+ */
+ @Prop() borderRadius?: string;
+
+ /**
+ * The type of the button that is used (primary or secondary).
+ * @uiName Button Type
+ * @uiType string
+ * @uiEnum ["primary", "secondary"]
+ * @uiEnumNames ["Primary", "Secondary"]
+ * @uiGroup Style
+ */
+ @Prop()
+ buttonType?: "primary" | "secondary" = "primary";
+
/**
* Set the copy button style and placement
*
- * @uiName Style
+ * @uiName Button style
* @uiType string
* @uiEnum ["icon", "button-outside", "button-below"]
* @uiEnumNames ["Icon", "Button outside", "Button below"]
+ * @uiGroup Style
*/
@Prop({
attribute: "copy-button-style",
@@ -102,13 +151,19 @@ export class ShareLink {
function useDemoShareLink(props: ShareLink): CopyTextViewProps {
const [open, setOpen] = useState(false);
const copyString = "https://www.example.com/sharelink/abc";
+
return deepmerge(
{
copyString: copyString,
tooltiptext: props.tooltiptext,
textAlign: props.textAlign,
buttonStyle: props.buttonStyle,
+ backgroundColor: props.backgroundColor,
+ textColor: props.textColor,
+ borderRadius: props.borderRadius,
+ buttonType: props.buttonType,
copyButtonLabel: props.copyButtonLabel,
+ borderColor: props.borderColor,
rewardStatus: "AVAILABLE",
open,
onClick: () => {
diff --git a/packages/mint-components/src/components/sqm-stat-container/readme.md b/packages/mint-components/src/components/sqm-stat-container/readme.md
index 872d4aa4cd..6c2c90e472 100644
--- a/packages/mint-components/src/components/sqm-stat-container/readme.md
+++ b/packages/mint-components/src/components/sqm-stat-container/readme.md
@@ -7,10 +7,13 @@
## Properties
-| Property | Attribute | Description | Type | Default |
-| --------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
-| `display` | `display` | | `"flex" \| "grid"` | `"grid"` |
-| `space` | `space` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"xxx-large"` |
+| Property | Attribute | Description | Type | Default |
+| ------------ | ------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `alignment` | `alignment` | Controls the alignment of the flexbox | `"center" \| "left" \| "right"` | `"center"` |
+| `display` | `display` | | `"flex" \| "grid"` | `"flex"` |
+| `gap` | `gap` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"x-large"` |
+| `hideBorder` | `hide-border` | Hide the seperating border between stats | `boolean` | `undefined` |
+| `space` | `space` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"xxx-large"` |
## Dependencies
diff --git a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx
index d8d68c10d9..8657ef093c 100644
--- a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx
+++ b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx
@@ -4,6 +4,9 @@ import { createStyleSheet } from "../../styling/JSS";
export interface StatContainerProps {
space: string;
display?: "grid" | "flex";
+ alignment?: "left" | "right" | "center";
+ hideBorder?: boolean;
+ gap?: string;
}
export function StatContainerView(props: StatContainerProps, children: VNode) {
@@ -14,25 +17,40 @@ export function StatContainerView(props: StatContainerProps, children: VNode) {
return `${Math.floor(parseInt(spaceValue) / 2)}rem`;
};
- // Dependent on props, not feasiable to move out
+ // take alignment variable and convert it to CSS flexbox alignment
+ const alignment =
+ props.alignment === "center"
+ ? "center"
+ : props.alignment === "right"
+ ? "flex-end"
+ : "flex-start";
+
+ // Dependent on props, not feasible to move out
const style = {
StatContainer: {
width: "100%",
- display: props.display || "grid",
- "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))",
- gap: divideSpace(),
- // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled
+ display: "flex",
+ flexWrap: "wrap",
+ alignItems: "center",
+ justifyContent: alignment,
+ flexDirection: "row",
+ gap: `var(--sl-spacing-${props.gap})`,
+
+ // Apply border styles conditionally based on the hideBorder prop
"& > *": {
- "border-right": "1px solid #EAEAEA",
+ "border-right": props.hideBorder
+ ? "none"
+ : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
"padding-right": divideSpace(),
},
"& > :last-child": {
"border-right": "none",
},
"& > ::slotted(*)": {
- "border-right": "1px solid #EAEAEA",
+ "border-right": props.hideBorder
+ ? "none"
+ : "var(--sqm-border-thickness) solid var(--sqm-border-color)",
"padding-right": divideSpace(),
- height: "100%",
},
"& > ::slotted(*:last-child)": {
"border-right": "none",
@@ -48,7 +66,7 @@ export function StatContainerView(props: StatContainerProps, children: VNode) {
display: "flex",
},
BorderFix: {
- "border-right": "1px solid transparent",
+ "border-right": "var(--sqm-border-thickness) solid transparent",
width: "0px",
"margin-left": "-1px",
},
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..4081c1235d 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
@@ -27,12 +29,38 @@ export class StatContainer {
@Prop() space: Spacing = "xxx-large";
/**
+ * @undocumented
* @uiName Display
* @uiType string
* @uiEnum ["grid", "flex"]
* @uiEnumNames ["Grid", "Flex"]
*/
- @Prop() display: "grid" | "flex" = "grid";
+ @Prop() display: "grid" | "flex" = "flex";
+
+ /**
+ * Hide the seperating border between stats
+ * @uiName Hide border
+ * @uiType boolean
+ */
+ @Prop() hideBorder?: boolean;
+
+ /**
+ * Controls the alignment of the flexbox
+ *
+ * @uiName Alignment
+ * @uiType string
+ * @uiEnum ["left", "right", "center"]
+ * @uiEnumNames ["Left", "Right", "Center"]
+ */
+ @Prop() alignment?: "left" | "right" | "center" = "center";
+
+ /**
+ * @uiName Gap
+ * @uiType string
+ * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"]
+ * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"]
+ */
+ @Prop() gap: Spacing = "x-large";
constructor() {
withHooks(this);
diff --git a/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx b/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx
new file mode 100644
index 0000000000..01ccac5323
--- /dev/null
+++ b/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx
@@ -0,0 +1,243 @@
+import { Component, h, Host, State } from "@stencil/core";
+import { BrandingConfiguration } from "../../saasquatch";
+import * as Themes from "./Themes";
+
+const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey";
+const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey";
+
+@Component({
+ tag: "sqm-brand-selector",
+ shadow: false,
+})
+export class SqmBrandSelector {
+ @State() selectedBrand: string = "Netflix";
+
+ constructor() {
+ const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+ const initialBrandName = storedBrand;
+
+ this.selectedBrand = initialBrandName;
+
+ // Initialize window.SquatchBrandingConfig based on the loaded brand
+ const initialConfig =
+ Themes[initialBrandName as keyof typeof Themes] || Themes.Netflix;
+
+ window.SquatchBrandingConfig = initialConfig;
+ const event = new CustomEvent("brandingConfigUpdated", {
+ detail: window.SquatchBrandingConfig,
+ });
+ window.dispatchEvent(event);
+ }
+
+ componentDidLoad() {
+ const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY);
+ const initialBrandName = storedBrand;
+
+ this.selectedBrand = initialBrandName;
+ }
+
+ disconnectedCallback() {}
+
+ private brands = [
+ {
+ name: "Netflix",
+ logoUrl:
+ "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803365/netflix_ftjbrr.png",
+ },
+ {
+ name: "Amazon",
+ logoUrl:
+ "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803366/amazon_mc22fr.png",
+ },
+ {
+ name: "Spotify",
+ logoUrl:
+ "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803510/spotify_j5qi1r.png",
+ },
+ {
+ name: "Google",
+ logoUrl:
+ "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png",
+ },
+ ];
+
+ private updateBrand(brandName: string) {
+ this.selectedBrand = brandName;
+ const configToSet: BrandingConfiguration =
+ Themes[brandName as keyof typeof Themes] || Themes.Netflix;
+ const brandConfigString = JSON.stringify(configToSet);
+
+ localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName);
+ localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString);
+
+ window.SquatchBrandingConfig = configToSet;
+ window.location.reload();
+
+ const event = new CustomEvent("brandingConfigUpdated", {
+ detail: window.SquatchBrandingConfig,
+ });
+ window.dispatchEvent(event);
+ }
+
+ render() {
+ return (
+
+
+
+
Select Branding
+
+
+ {this.brands.map((brand) => (
+
this.updateBrand(brand.name)}
+ >
+
{
+ e.target.src =
+ "https://placehold.co/80x40/cccccc/000000?text=Logo";
+ }}
+ />
+
+ ))}
+
+
{t}
))}
-
-
-
-
setCheckerboard(!checkerboard)}
- onChange={() =>
- document.documentElement.style.setProperty(
- "--checker-color-1",
- checkerboard ? "#ebebeb" : "#ffffff00"
- )
- }
- >
-
-
})
-