diff --git a/packages/bedrock-components/package-lock.json b/packages/bedrock-components/package-lock.json index da523f13ee..23ce1b9a52 100644 --- a/packages/bedrock-components/package-lock.json +++ b/packages/bedrock-components/package-lock.json @@ -1,12 +1,12 @@ { "name": "@saasquatch/bedrock-components", - "version": "1.4.10", + "version": "1.4.11-0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/bedrock-components", - "version": "1.4.10", + "version": "1.4.11-0", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/bedrock-components/package.json b/packages/bedrock-components/package.json index e002a2c43a..0a29fd1023 100644 --- a/packages/bedrock-components/package.json +++ b/packages/bedrock-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/bedrock-components", "title": "Bedrock Components", - "version": "1.4.10", + "version": "1.4.11-1", "description": "Component library that adds advanced logic to your widgets and pages. Built and maintained by Saasquatch.", "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Bedrock.svg", "main": "dist/index.cjs.js", diff --git a/packages/bedrock-components/src/components/sqb-conditional-section/sqb-conditional-section.tsx b/packages/bedrock-components/src/components/sqb-conditional-section/sqb-conditional-section.tsx index 33248dad5d..0a99a8a402 100644 --- a/packages/bedrock-components/src/components/sqb-conditional-section/sqb-conditional-section.tsx +++ b/packages/bedrock-components/src/components/sqb-conditional-section/sqb-conditional-section.tsx @@ -9,8 +9,8 @@ import { useConditionalSection, UseConditionalSection } from './useConditonalSec * @uiName Conditional Section * @exampleGroup Advanced * @slots [{"name":"","title":"Section Content"}] - * @example Conditional Section On Segment -

Add your conditional content here!

 - * @example Conditional Section On Custom Field -

Add your conditional content here!

 + * @example Conditional Area / Segment -

Add your conditional content here!

 + * @example Conditional Area / Field -

Add your conditional content here!

 */ @Component({ tag: 'sqb-conditional-section', diff --git a/packages/end-user-testing/src/widgetTemplate.html b/packages/end-user-testing/src/widgetTemplate.html index e31ba53965..743ddc9d28 100644 --- a/packages/end-user-testing/src/widgetTemplate.html +++ b/packages/end-user-testing/src/widgetTemplate.html @@ -1,170 +1,9 @@ - - - - - - - - - - -
-

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. -

-
- -

Referrals

- - -

Rewards Earned

- - - - -

Your share link

- - - - Share - Share on LinkedInShare via Messenger - Share via Email - - - - - -

Referral History

- - - - - - - - - - - - - - - - - + + + diff --git a/packages/mint-components/package-lock.json b/packages/mint-components/package-lock.json index 935fbc5299..c285f511b3 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-40", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/mint-components", - "version": "1.14.0", + "version": "1.15.0-40", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index ba0a99dcec..dad5e2782c 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-46", "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..8abefb9531 100644 --- a/packages/mint-components/src/components.d.ts +++ b/packages/mint-components/src/components.d.ts @@ -6,7 +6,6 @@ */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; import { DemoData } from "./global/demo"; -import { AssetCardViewProps } from "./components/sqm-asset-card/sqm-asset-card-view"; import { BankingInfoFormViewProps } from "./components/tax-and-cash/sqm-banking-info-form/sqm-banking-info-form-view"; import { BigStatViewProps } from "./components/sqm-big-stat/sqm-big-stat-view"; import { CheckboxFieldViewProps } from "./components/sqm-checkbox-field/sqm-checkbox-field-view"; @@ -27,6 +26,7 @@ import { LeaderboardRankViewProps } from "./components/sqm-leaderboard-rank/sqm- import { CopyTextViewProps } from "./components/views/copy-text-view"; import { NameFieldsViewProps } from "./components/sqm-name-fields/sqm-name-fields-view"; import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-navigation-menu-view"; +import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view"; import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view"; import { UsePagination } from "./components/sqm-pagination/usePagination"; import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/sqm-password-field"; @@ -59,21 +59,6 @@ export namespace Components { "renderCell": () => Promise; "renderLabel": (idx: any) => Promise; } - interface SqmAssetCard { - /** - * @undocumented - * @uiType object - */ - "demoData"?: DemoData; - /** - * @uiName Banner image - */ - "imgUrl": string; - /** - * @uiName Banner title - */ - "titleText": string; - } interface SqmBankingInfoForm { /** * @uiName Agency code field label @@ -340,6 +325,7 @@ export namespace Components { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Style */ "alignment"?: "left" | "right" | "center"; /** @@ -347,10 +333,26 @@ export namespace Components { * @uiType object */ "demoData"?: DemoData; + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Style + */ + "descriptionFontSize"?: number; + /** + * Color of the description text + * @uiName Description text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + "descriptionTextColor"?: string; /** * Controls the order of the stat value & description column * @uiName Flex reverse - * @default + * @default + * @uiGroup Style */ "flexReverse"?: boolean; /** @@ -359,6 +361,30 @@ export namespace Components { * @uiWidget programSelector */ "programId"?: string; + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Style + */ + "statFontSize"?: number; + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Style + * @uiEnum [100, 200, 300, 400, 500, 600, 700, 800, 900] + * @uiEnumNames ["Thin", "Extra Light", "Light", "Normal", "Medium", "Semi Bold", "Bold", "Extra Bold", "Heavy"] + */ + "statFontWeight"?: number; + /** + * Color of the stat text + * @uiName Stat text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + "statTextColor"?: string; /** * Select what type of stat to display. Manual paths are also supported. * @uiWidget statTypeSelectWidget @@ -383,6 +409,8 @@ export namespace Components { */ "brandFont": string; } + interface SqmBrandSelector { + } interface SqmCardFeed { /** * @uiName Column gap @@ -489,14 +517,47 @@ export namespace Components { "contextName": string; } interface SqmCouponCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement. * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button (primary or secondary) that will be used to copy the link. + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * Display this message when the coupon code has been cancelled. * @uiWidget textArea @@ -569,8 +630,17 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -583,6 +653,18 @@ export namespace Components { "tooltiptext": string; } interface SqmDividedLayout { + /** + * Background color of the divider + * @uiName Divider Background Color + * @uiWidget color + */ + "backgroundColor"?: string; + /** + * Color of the divider (defaults to default text color if none is set) + * @uiName Divider Background Color + * @uiWidget color + */ + "borderColor"?: string; /** * Overrides max-width of content area * @uiName Content Area Width @@ -597,7 +679,7 @@ export namespace Components { */ "direction": "row" | "column"; /** - * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color. + * @undocumented Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color. * @uiName Border style */ "dividerStyle": string; @@ -936,6 +1018,7 @@ export namespace Components { * @uiName Background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundColor"?: string; /** @@ -951,6 +1034,15 @@ export namespace Components { * @uiName Button text */ "buttonText"?: string; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Description * @uiWidget textArea @@ -965,11 +1057,13 @@ export namespace Components { * @uiType string * @uiEnum ["top", "bottom"] * @uiEnumNames ["Top", "Bottom"] + * @uiGroup Style */ "imageMobilePos": "top" | "bottom"; /** * @uiName Image percentage * @uiType number + * @uiGroup Style */ "imagePercentage": number; /** @@ -977,6 +1071,7 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "imagePos": "left" | "center" | "right"; /** @@ -990,16 +1085,19 @@ export namespace Components { * @uiType string * @uiEnum ["overlay", "columns"] * @uiEnumNames ["Overlay", "Two-column"] + * @uiGroup Style */ "layout": "overlay" | "columns"; /** * @uiName Overlay color * @uiWidget color * @format color + * @uiGroup Style */ "overlayColor"?: string; /** * @uiName Overlay opacity + * @uiGroup Style */ "overlayOpacity": string; /** @@ -1007,6 +1105,7 @@ export namespace Components { * @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"] + * @uiGroup Style */ "paddingImage": Spacing; /** @@ -1014,12 +1113,14 @@ export namespace Components { * @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"] + * @uiGroup Style */ "paddingText": Spacing; /** * @uiName Text color * @uiWidget color * @format color + * @uiGroup Style */ "textColor"?: string; } @@ -1441,6 +1542,26 @@ export namespace Components { * @uiName Unknown user text */ "anonymousUser": string; + /** + * Changes the background color of the leaderboard. + * @uiName Background Color + * @uiWidget color + * @uiGroup Style + */ + "background"?: string; + /** + * Changes the border color of the table rows. + * @uiName Border Color + * @uiWidget color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * Leaderboard border radius in pixels. + * @uiName Border Radius + * @uiGroup Style + */ + "borderRadius"?: number; /** * @undocumented * @uiType object @@ -1509,10 +1630,31 @@ export namespace Components { * @uiName Stats column heading */ "statsheading": string; + /** + * Text color of the leaderboard. + * @uiName Text Color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; /** * @uiName User column heading */ "usersheading": string; + /** + * Changes the background color of the viewing user row in the leaderboard. + * @uiName Viewing User Highlight Color + * @uiWidget color + * @uiGroup Style + */ + "viewingUserHighlightColor"?: string; + /** + * Changes the text color of the viewing user row in the leaderboard. + * @uiName Viewing User Text Color + * @uiWidget color + * @uiGroup Style + */ + "viewingUserHighlightTextColor"?: string; /** * @uiName Viewing user text */ @@ -1655,8 +1797,47 @@ export namespace Components { "menuLabel": string; } interface SqmNavigationSidebar { + /** + * @undocumented + * @uiType object + */ + "demoData"?: DemoData; + /** + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "mobileMenuColor"?: string; } interface SqmNavigationSidebarItem { + /** + * Background color of the nav item + * @uiName Background Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Background color of the nav item when focused + * @uiName Background Focused Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundFocusedColor"?: string; + /** + * Background color of the nav item when hovered + * @uiName Background Hover Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundHoverColor"?: string; + /** + * Border radius (in number of pixels) + * @uiName Border Radius + * @uiGroup Style + */ + "borderRadius"?: number; /** * @undocumented * @uiType object @@ -1665,19 +1846,57 @@ export namespace Components { /** * Options available at https://shoelace.style/components/icon * @uiName Icon + * @uiGroup Style */ "icon": string; /** * @uiName Label */ "label": string; + /** + * @uiName Padding + * @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"] + */ + "padding"?: Spacing; /** * @uiName Navigation path * @uiWidget pageSelect */ "path": string; + /** + * Text color of the nav item + * @uiName Text Color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; + /** + * Text color of the nav item when items is focused + * @uiName Text Focused Color + * @uiWidget color + * @uiGroup Style + */ + "textFocusedColor"?: string; + /** + * Text color of the nav item when hovered + * @uiName Text Hover Color + * @uiWidget color + * @uiGroup Style + */ + "textHoverColor"?: string; } interface SqmPagination { + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @undocumented * @uiType object @@ -2180,6 +2399,21 @@ export namespace Components { "termsText"?: string; } interface SqmPortalForgotPassword { + /** + * @uiName Background color + * @uiWidget color + */ + "backgroundColor": string; + /** + * @uiName Border style + * @uiWidget textArea + */ + "border": string; + /** + * @uiName Border radius + * @uiWidget number + */ + "borderRadius": string; /** * @undocumented * @uiType object @@ -2224,11 +2458,30 @@ export namespace Components { "successAlertText": string; } interface SqmPortalFrame { + /** + * @uiName Background color + * @uiWidget color + * @uiType string + */ + "backgroundColor": string; + /** + * Borders placed to seperate the header and footer from the body content. + * @uiName Border + * @uiType string + */ + "border": string; /** * @undocumented * @uiType object */ "demoData"?: DemoData; + /** + * Background color for the header and footer. + * @uiName Header and Footer Background Color + * @uiWidget color + * @uiType string + */ + "headerAndFooterBackgroundColor": string; /** * @undocumented */ @@ -2961,7 +3214,13 @@ export namespace Components { * @uiWidget color * @format color */ - "backgroundColor": string; + "backgroundColor"?: string; + /** + * Amount in pixels + * @uiName Border radius + * @type number + */ + "borderRadius"?: number; /** * @uiName Description * @uiWidget textArea @@ -2976,6 +3235,18 @@ export namespace Components { * @uiName Icon */ "icon"?: string; + /** + * @uiName Icon Background color + * @uiWidget color + * @format color + */ + "iconBackgroundColor"?: string; + /** + * @uiName Icon color + * @uiWidget color + * @format color + */ + "iconColor"?: string; /** * Displayed in place of an icon * @uiName Image URL @@ -2988,7 +3259,7 @@ export namespace Components { * @uiWidget color * @format color */ - "textColor": string; + "textColor"?: string; } interface SqmProgramMenu { } @@ -3040,7 +3311,20 @@ export namespace Components { * @uiWidget color * @uiType string */ - "backgroundColor": string; + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + */ + "borderRadius"?: number; /** * @uiName Hide border * @uiType boolean @@ -3079,6 +3363,13 @@ export namespace Components { * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"] */ "paddingTop": string; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Vertical alignment * @uiType string @@ -3088,14 +3379,47 @@ export namespace Components { "verticalAlignment": "start" | "center" | "end"; } interface SqmReferralCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -3127,8 +3451,17 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign": "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -3163,6 +3496,12 @@ export namespace Components { * @uiWidget programSelector */ "programId"?: string; + /** + * @uiName Text Color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; /** * @uiName Title Text */ @@ -3964,11 +4303,18 @@ export namespace Components { * @uiName Button background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundcolor"?: string; + /** + * @uiName Border + * @uiGroup Style + */ + "border"?: string; /** * Configure border radius with pixel amount * @uiName Border radius + * @uiGroup Style */ "borderradius"?: number; /** @@ -3982,11 +4328,13 @@ export namespace Components { "disabled"?: boolean; /** * @uiName Hide icon + * @uiGroup Style * @default */ "hideicon"?: boolean; /** * @uiName Hide text + * @uiGroup Style * @default */ "hidetext"?: boolean; @@ -4024,6 +4372,7 @@ export namespace Components { | "unknown"; /** * @uiName Display pill + * @uiGroup Style */ "pill"?: boolean; /** @@ -4047,21 +4396,24 @@ export namespace Components { * @uiType string * @uiEnum ["small", "medium", "large" ] * @uiEnumNames ["Small", "Medium", "Large"] + * @uiGroup Style */ "size"?: "small" | "medium" | "large"; /** * @uiName Button text color * @uiWidget color * @format color + * @uiGroup Style */ "textcolor"?: string; /** * @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"] */ "type"?: | "primary" + | "secondary" | "success" | "info" | "warning" @@ -4080,14 +4432,47 @@ export namespace Components { "unsupportedPlatformText"?: string; } interface SqmShareCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -4109,8 +4494,17 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign": "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -4123,14 +4517,47 @@ export namespace Components { "tooltiptext": string; } interface SqmShareLink { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * 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 */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -4152,8 +4579,17 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -4167,12 +4603,34 @@ export namespace Components { } interface SqmStatContainer { /** + * Controls the alignment of the flexbox + * @uiName Alignment + * @uiType string + * @uiEnum ["left", "right", "center"] + * @uiEnumNames ["Left", "Right", "Center"] + */ + "alignment"?: "left" | "right" | "center"; + /** + * @undocumented * @uiName Display * @uiType string * @uiEnum ["grid", "flex"] * @uiEnumNames ["Grid", "Flex"] */ "display": "grid" | "flex"; + /** + * @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"] + */ + "gap": Spacing; + /** + * Hide the seperating border between stats + * @uiName Hide border + * @uiType boolean + */ + "hideBorder"?: boolean; /** * @uiName Space between stats * @uiType string @@ -4214,8 +4672,33 @@ export namespace Components { * @uiEnumNames ["Left", "Right", "Bottom", "Top"] */ "placement"?: "left" | "right" | "bottom" | "top"; + /** + * Tab text color + * @uiName Text color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; } interface SqmTaskCard { + /** + * @uiName Card Background color + * @uiWidget color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * @uiName Border color + * @uiWidget color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * @uiName Border radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: number; /** * @uiName Button link * @uiGroup Button @@ -4226,6 +4709,14 @@ export namespace Components { * @uiGroup Button */ "buttonText": string; + /** + * @uiName Button Style + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Title * @uiGroup Task @@ -4363,6 +4854,12 @@ export namespace Components { * @default */ "steps": boolean; + /** + * @uiName Text color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; } interface SqmTaxAndCash { /** @@ -5596,12 +6093,36 @@ export namespace Components { "verificationReviewInternalHeader": string; } interface SqmText { + /** + * Font size in pixels + * @uiName Font Size + * @uiType number + */ + "fontSize"?: number; + /** + * @uiName Text Color + * @uiWidget color + * @format color + */ + "textColor"?: string; } interface SqmTextSpan { + /** + * Font size in pixels + * @uiName Font Size + * @uiType number + */ + "fontSize"?: number; /** * @uiName Text */ "text": string; + /** + * @uiName Text Color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Type * @uiType string @@ -5631,11 +6152,25 @@ export namespace Components { * @uiEnumNames ["Gift", "Circle"] */ "icon": "gift" | "circle"; + /** + * Color of timeline + * @uiName Line color + * @uiWidget color + * @format color + */ + "lineColor"?: string; /** * @uiName Reward amount */ "reward": string; "setIcon": (value: "gift" | "circle") => Promise; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Reward unit */ @@ -5942,12 +6477,6 @@ declare global { prototype: HTMLRaisinsPlopTargetElement; new (): HTMLRaisinsPlopTargetElement; }; - interface HTMLSqmAssetCardElement extends Components.SqmAssetCard, HTMLStencilElement { - } - var HTMLSqmAssetCardElement: { - prototype: HTMLSqmAssetCardElement; - new (): HTMLSqmAssetCardElement; - }; interface HTMLSqmBankingInfoFormElement extends Components.SqmBankingInfoForm, HTMLStencilElement { } var HTMLSqmBankingInfoFormElement: { @@ -5966,6 +6495,12 @@ declare global { prototype: HTMLSqmBrandElement; new (): HTMLSqmBrandElement; }; + interface HTMLSqmBrandSelectorElement extends Components.SqmBrandSelector, HTMLStencilElement { + } + var HTMLSqmBrandSelectorElement: { + prototype: HTMLSqmBrandSelectorElement; + new (): HTMLSqmBrandSelectorElement; + }; interface HTMLSqmCardFeedElement extends Components.SqmCardFeed, HTMLStencilElement { } var HTMLSqmCardFeedElement: { @@ -6676,10 +7211,10 @@ declare global { }; interface HTMLElementTagNameMap { "raisins-plop-target": HTMLRaisinsPlopTargetElement; - "sqm-asset-card": HTMLSqmAssetCardElement; "sqm-banking-info-form": HTMLSqmBankingInfoFormElement; "sqm-big-stat": HTMLSqmBigStatElement; "sqm-brand": HTMLSqmBrandElement; + "sqm-brand-selector": HTMLSqmBrandSelectorElement; "sqm-card-feed": HTMLSqmCardFeedElement; "sqm-checkbox-field": HTMLSqmCheckboxFieldElement; "sqm-close-button": HTMLSqmCloseButtonElement; @@ -6803,21 +7338,6 @@ declare global { declare namespace LocalJSX { interface RaisinsPlopTarget { } - interface SqmAssetCard { - /** - * @undocumented - * @uiType object - */ - "demoData"?: DemoData; - /** - * @uiName Banner image - */ - "imgUrl"?: string; - /** - * @uiName Banner title - */ - "titleText"?: string; - } interface SqmBankingInfoForm { /** * @uiName Agency code field label @@ -7084,6 +7604,7 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Style */ "alignment"?: "left" | "right" | "center"; /** @@ -7091,10 +7612,26 @@ declare namespace LocalJSX { * @uiType object */ "demoData"?: DemoData; + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Style + */ + "descriptionFontSize"?: number; + /** + * Color of the description text + * @uiName Description text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + "descriptionTextColor"?: string; /** * Controls the order of the stat value & description column * @uiName Flex reverse - * @default + * @default + * @uiGroup Style */ "flexReverse"?: boolean; /** @@ -7103,6 +7640,30 @@ declare namespace LocalJSX { * @uiWidget programSelector */ "programId"?: string; + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Style + */ + "statFontSize"?: number; + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Style + * @uiEnum [100, 200, 300, 400, 500, 600, 700, 800, 900] + * @uiEnumNames ["Thin", "Extra Light", "Light", "Normal", "Medium", "Semi Bold", "Bold", "Extra Bold", "Heavy"] + */ + "statFontWeight"?: number; + /** + * Color of the stat text + * @uiName Stat text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + "statTextColor"?: string; /** * Select what type of stat to display. Manual paths are also supported. * @uiWidget statTypeSelectWidget @@ -7127,6 +7688,8 @@ declare namespace LocalJSX { */ "brandFont"?: string; } + interface SqmBrandSelector { + } interface SqmCardFeed { /** * @uiName Column gap @@ -7233,14 +7796,47 @@ declare namespace LocalJSX { "contextName"?: string; } interface SqmCouponCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement. * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button (primary or secondary) that will be used to copy the link. + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * Display this message when the coupon code has been cancelled. * @uiWidget textArea @@ -7313,8 +7909,17 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -7327,6 +7932,18 @@ declare namespace LocalJSX { "tooltiptext"?: string; } interface SqmDividedLayout { + /** + * Background color of the divider + * @uiName Divider Background Color + * @uiWidget color + */ + "backgroundColor"?: string; + /** + * Color of the divider (defaults to default text color if none is set) + * @uiName Divider Background Color + * @uiWidget color + */ + "borderColor"?: string; /** * Overrides max-width of content area * @uiName Content Area Width @@ -7341,7 +7958,7 @@ declare namespace LocalJSX { */ "direction"?: "row" | "column"; /** - * Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color. + * @undocumented Uses Shorthand CSS border syntax allowing specification of thickness, fill style and color. * @uiName Border style */ "dividerStyle"?: string; @@ -7681,6 +8298,7 @@ declare namespace LocalJSX { * @uiName Background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundColor"?: string; /** @@ -7696,6 +8314,15 @@ declare namespace LocalJSX { * @uiName Button text */ "buttonText"?: string; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Description * @uiWidget textArea @@ -7710,11 +8337,13 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["top", "bottom"] * @uiEnumNames ["Top", "Bottom"] + * @uiGroup Style */ "imageMobilePos"?: "top" | "bottom"; /** * @uiName Image percentage * @uiType number + * @uiGroup Style */ "imagePercentage"?: number; /** @@ -7722,6 +8351,7 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "imagePos"?: "left" | "center" | "right"; /** @@ -7735,16 +8365,19 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["overlay", "columns"] * @uiEnumNames ["Overlay", "Two-column"] + * @uiGroup Style */ "layout"?: "overlay" | "columns"; /** * @uiName Overlay color * @uiWidget color * @format color + * @uiGroup Style */ "overlayColor"?: string; /** * @uiName Overlay opacity + * @uiGroup Style */ "overlayOpacity"?: string; /** @@ -7752,6 +8385,7 @@ declare namespace LocalJSX { * @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"] + * @uiGroup Style */ "paddingImage"?: Spacing; /** @@ -7759,12 +8393,14 @@ declare namespace LocalJSX { * @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"] + * @uiGroup Style */ "paddingText"?: Spacing; /** * @uiName Text color * @uiWidget color * @format color + * @uiGroup Style */ "textColor"?: string; } @@ -8176,10 +8812,30 @@ declare namespace LocalJSX { } interface SqmLeaderboard { /** - * Title displayed for users without names - * @uiName Unknown user text + * Title displayed for users without names + * @uiName Unknown user text + */ + "anonymousUser"?: string; + /** + * Changes the background color of the leaderboard. + * @uiName Background Color + * @uiWidget color + * @uiGroup Style + */ + "background"?: string; + /** + * Changes the border color of the table rows. + * @uiName Border Color + * @uiWidget color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * Leaderboard border radius in pixels. + * @uiName Border Radius + * @uiGroup Style */ - "anonymousUser"?: string; + "borderRadius"?: number; /** * @undocumented * @uiType object @@ -8248,10 +8904,31 @@ declare namespace LocalJSX { * @uiName Stats column heading */ "statsheading"?: string; + /** + * Text color of the leaderboard. + * @uiName Text Color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; /** * @uiName User column heading */ "usersheading"?: string; + /** + * Changes the background color of the viewing user row in the leaderboard. + * @uiName Viewing User Highlight Color + * @uiWidget color + * @uiGroup Style + */ + "viewingUserHighlightColor"?: string; + /** + * Changes the text color of the viewing user row in the leaderboard. + * @uiName Viewing User Text Color + * @uiWidget color + * @uiGroup Style + */ + "viewingUserHighlightTextColor"?: string; /** * @uiName Viewing user text */ @@ -8394,8 +9071,47 @@ declare namespace LocalJSX { "menuLabel"?: string; } interface SqmNavigationSidebar { + /** + * @undocumented + * @uiType object + */ + "demoData"?: DemoData; + /** + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "mobileMenuColor"?: string; } interface SqmNavigationSidebarItem { + /** + * Background color of the nav item + * @uiName Background Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Background color of the nav item when focused + * @uiName Background Focused Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundFocusedColor"?: string; + /** + * Background color of the nav item when hovered + * @uiName Background Hover Color + * @uiWidget color + * @uiGroup Style + */ + "backgroundHoverColor"?: string; + /** + * Border radius (in number of pixels) + * @uiName Border Radius + * @uiGroup Style + */ + "borderRadius"?: number; /** * @undocumented * @uiType object @@ -8404,19 +9120,57 @@ declare namespace LocalJSX { /** * Options available at https://shoelace.style/components/icon * @uiName Icon + * @uiGroup Style */ "icon"?: string; /** * @uiName Label */ "label"?: string; + /** + * @uiName Padding + * @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"] + */ + "padding"?: Spacing; /** * @uiName Navigation path * @uiWidget pageSelect */ "path"?: string; + /** + * Text color of the nav item + * @uiName Text Color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; + /** + * Text color of the nav item when items is focused + * @uiName Text Focused Color + * @uiWidget color + * @uiGroup Style + */ + "textFocusedColor"?: string; + /** + * Text color of the nav item when hovered + * @uiName Text Hover Color + * @uiWidget color + * @uiGroup Style + */ + "textHoverColor"?: string; } interface SqmPagination { + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @undocumented * @uiType object @@ -8919,6 +9673,21 @@ declare namespace LocalJSX { "termsText"?: string; } interface SqmPortalForgotPassword { + /** + * @uiName Background color + * @uiWidget color + */ + "backgroundColor"?: string; + /** + * @uiName Border style + * @uiWidget textArea + */ + "border"?: string; + /** + * @uiName Border radius + * @uiWidget number + */ + "borderRadius"?: string; /** * @undocumented * @uiType object @@ -8963,11 +9732,30 @@ declare namespace LocalJSX { "successAlertText"?: string; } interface SqmPortalFrame { + /** + * @uiName Background color + * @uiWidget color + * @uiType string + */ + "backgroundColor"?: string; + /** + * Borders placed to seperate the header and footer from the body content. + * @uiName Border + * @uiType string + */ + "border"?: string; /** * @undocumented * @uiType object */ "demoData"?: DemoData; + /** + * Background color for the header and footer. + * @uiName Header and Footer Background Color + * @uiWidget color + * @uiType string + */ + "headerAndFooterBackgroundColor"?: string; /** * @undocumented */ @@ -9701,6 +10489,12 @@ declare namespace LocalJSX { * @format color */ "backgroundColor"?: string; + /** + * Amount in pixels + * @uiName Border radius + * @type number + */ + "borderRadius"?: number; /** * @uiName Description * @uiWidget textArea @@ -9715,6 +10509,18 @@ declare namespace LocalJSX { * @uiName Icon */ "icon"?: string; + /** + * @uiName Icon Background color + * @uiWidget color + * @format color + */ + "iconBackgroundColor"?: string; + /** + * @uiName Icon color + * @uiWidget color + * @format color + */ + "iconColor"?: string; /** * Displayed in place of an icon * @uiName Image URL @@ -9780,6 +10586,19 @@ declare namespace LocalJSX { * @uiType string */ "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + */ + "borderRadius"?: number; /** * @uiName Hide border * @uiType boolean @@ -9818,6 +10637,13 @@ declare namespace LocalJSX { * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"] */ "paddingTop"?: string; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Vertical alignment * @uiType string @@ -9827,14 +10653,47 @@ declare namespace LocalJSX { "verticalAlignment"?: "start" | "center" | "end"; } interface SqmReferralCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -9866,8 +10725,17 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -9902,6 +10770,12 @@ declare namespace LocalJSX { * @uiWidget programSelector */ "programId"?: string; + /** + * @uiName Text Color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; /** * @uiName Title Text */ @@ -10679,11 +11553,18 @@ declare namespace LocalJSX { * @uiName Button background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundcolor"?: string; + /** + * @uiName Border + * @uiGroup Style + */ + "border"?: string; /** * Configure border radius with pixel amount * @uiName Border radius + * @uiGroup Style */ "borderradius"?: number; /** @@ -10697,11 +11578,13 @@ declare namespace LocalJSX { "disabled"?: boolean; /** * @uiName Hide icon + * @uiGroup Style * @default */ "hideicon"?: boolean; /** * @uiName Hide text + * @uiGroup Style * @default */ "hidetext"?: boolean; @@ -10739,6 +11622,7 @@ declare namespace LocalJSX { | "unknown"; /** * @uiName Display pill + * @uiGroup Style */ "pill"?: boolean; /** @@ -10762,21 +11646,24 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["small", "medium", "large" ] * @uiEnumNames ["Small", "Medium", "Large"] + * @uiGroup Style */ "size"?: "small" | "medium" | "large"; /** * @uiName Button text color * @uiWidget color * @format color + * @uiGroup Style */ "textcolor"?: string; /** * @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"] */ "type"?: | "primary" + | "secondary" | "success" | "info" | "warning" @@ -10795,14 +11682,47 @@ declare namespace LocalJSX { "unsupportedPlatformText"?: string; } interface SqmShareCode { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * Set the copy button style and placement * @uiName Style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -10824,8 +11744,17 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -10838,14 +11767,47 @@ declare namespace LocalJSX { "tooltiptext"?: string; } interface SqmShareLink { + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: string; /** * 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 */ "buttonStyle"?: "icon" | "button-outside" | "button-below"; + /** + * The type of the button that is used (primary, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Copy button label */ @@ -10867,8 +11829,17 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "textAlign"?: "left" | "center" | "right"; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + "textColor"?: string; /** * The number of milliseconds that the tooltip appears for * @uiName Tooltip lifespan @@ -10882,12 +11853,34 @@ declare namespace LocalJSX { } interface SqmStatContainer { /** + * Controls the alignment of the flexbox + * @uiName Alignment + * @uiType string + * @uiEnum ["left", "right", "center"] + * @uiEnumNames ["Left", "Right", "Center"] + */ + "alignment"?: "left" | "right" | "center"; + /** + * @undocumented * @uiName Display * @uiType string * @uiEnum ["grid", "flex"] * @uiEnumNames ["Grid", "Flex"] */ "display"?: "grid" | "flex"; + /** + * @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"] + */ + "gap"?: Spacing; + /** + * Hide the seperating border between stats + * @uiName Hide border + * @uiType boolean + */ + "hideBorder"?: boolean; /** * @uiName Space between stats * @uiType string @@ -10929,8 +11922,33 @@ declare namespace LocalJSX { * @uiEnumNames ["Left", "Right", "Bottom", "Top"] */ "placement"?: "left" | "right" | "bottom" | "top"; + /** + * Tab text color + * @uiName Text color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; } interface SqmTaskCard { + /** + * @uiName Card Background color + * @uiWidget color + * @uiGroup Style + */ + "backgroundColor"?: string; + /** + * @uiName Border color + * @uiWidget color + * @uiGroup Style + */ + "borderColor"?: string; + /** + * @uiName Border radius + * @uiType number + * @uiGroup Style + */ + "borderRadius"?: number; /** * @uiName Button link * @uiGroup Button @@ -10941,6 +11959,14 @@ declare namespace LocalJSX { * @uiGroup Button */ "buttonText"?: string; + /** + * @uiName Button Style + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary" | "tertiary"; /** * @uiName Title * @uiGroup Task @@ -11078,6 +12104,12 @@ declare namespace LocalJSX { * @default */ "steps"?: boolean; + /** + * @uiName Text color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; } interface SqmTaxAndCash { /** @@ -12311,12 +13343,36 @@ declare namespace LocalJSX { "verificationReviewInternalHeader"?: string; } interface SqmText { + /** + * Font size in pixels + * @uiName Font Size + * @uiType number + */ + "fontSize"?: number; + /** + * @uiName Text Color + * @uiWidget color + * @format color + */ + "textColor"?: string; } interface SqmTextSpan { + /** + * Font size in pixels + * @uiName Font Size + * @uiType number + */ + "fontSize"?: number; /** * @uiName Text */ "text"?: string; + /** + * @uiName Text Color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Type * @uiType string @@ -12346,10 +13402,24 @@ declare namespace LocalJSX { * @uiEnumNames ["Gift", "Circle"] */ "icon"?: "gift" | "circle"; + /** + * Color of timeline + * @uiName Line color + * @uiWidget color + * @format color + */ + "lineColor"?: string; /** * @uiName Reward amount */ "reward"?: string; + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + */ + "textColor"?: string; /** * @uiName Reward unit */ @@ -12650,10 +13720,10 @@ declare namespace LocalJSX { } interface IntrinsicElements { "raisins-plop-target": RaisinsPlopTarget; - "sqm-asset-card": SqmAssetCard; "sqm-banking-info-form": SqmBankingInfoForm; "sqm-big-stat": SqmBigStat; "sqm-brand": SqmBrand; + "sqm-brand-selector": SqmBrandSelector; "sqm-card-feed": SqmCardFeed; "sqm-checkbox-field": SqmCheckboxField; "sqm-close-button": SqmCloseButton; @@ -12779,10 +13849,10 @@ declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "raisins-plop-target": LocalJSX.RaisinsPlopTarget & JSXBase.HTMLAttributes; - "sqm-asset-card": LocalJSX.SqmAssetCard & JSXBase.HTMLAttributes; "sqm-banking-info-form": LocalJSX.SqmBankingInfoForm & JSXBase.HTMLAttributes; "sqm-big-stat": LocalJSX.SqmBigStat & JSXBase.HTMLAttributes; "sqm-brand": LocalJSX.SqmBrand & JSXBase.HTMLAttributes; + "sqm-brand-selector": LocalJSX.SqmBrandSelector & JSXBase.HTMLAttributes; "sqm-card-feed": LocalJSX.SqmCardFeed & JSXBase.HTMLAttributes; "sqm-checkbox-field": LocalJSX.SqmCheckboxField & JSXBase.HTMLAttributes; "sqm-close-button": LocalJSX.SqmCloseButton & JSXBase.HTMLAttributes; diff --git a/packages/mint-components/src/components/sqm-asset-card/AssetCard.stories.tsx b/packages/mint-components/src/components/sqm-asset-card/AssetCard.stories.tsx deleted file mode 100644 index 822d7e5d12..0000000000 --- a/packages/mint-components/src/components/sqm-asset-card/AssetCard.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { h } from "@stencil/core"; -import { AssetCardView } from "./sqm-asset-card-view"; - -export default { - title: "Components/Asset Card", -}; - -export const Default = () => { - const props = { - text: { titleText: "Marketing Banner" }, - imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png", - callbacks: {}, - }; - return ; -}; - -export const CardWithLongText = () => { - const props = { - text: { titleText: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, sunt dolores? Dolore temporibus autem officia blanditiis minus in voluptatem molestiae!" }, - imgUrl: "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png", - callbacks: {}, - }; - return ; -}; - -export const CardWithNoImg = () => { - const props = { - text: { titleText: "Marketing Banner" }, - imgUrl: "", - callbacks: {}, - }; - return ; -}; \ No newline at end of file diff --git a/packages/mint-components/src/components/sqm-asset-card/readme.md b/packages/mint-components/src/components/sqm-asset-card/readme.md deleted file mode 100644 index bae1dd3ddb..0000000000 --- a/packages/mint-components/src/components/sqm-asset-card/readme.md +++ /dev/null @@ -1,19 +0,0 @@ -# sqm-asset-card - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ----------- | ---------------------- | ----------- | -| `demoData` | -- | | `{ imgUrl?: string; }` | `undefined` | -| `imgUrl` | `img-url` | | `string` | `undefined` | -| `titleText` | `title-text` | | `string` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card-view.tsx b/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card-view.tsx deleted file mode 100644 index e1d7ded5b4..0000000000 --- a/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card-view.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import { getAssetPath, h } from "@stencil/core"; -import { createStyleSheet } from "../../styling/JSS"; - -export interface AssetCardViewProps { - text: { - titleText: string; - }; - imgUrl: string; - callbacks: {}; -} - -const style = { - CardContainer: { - "box-sizing": "border-box", - width: "100%", - "max-width": "260px", - border: "1px solid #EAEAEA", - padding: "0px 16px 16px 16px", - "border-radius": "8px", - }, - - TextContainer: { - display: "flex", - "justify-content": "space-between", - "align-items": "center", - }, - - Title: { - "font-weight": 600, - color: "var(--sl-color-gray-800)", - "max-width": "85%", - "overflow-wrap": "break-word", - }, - - CardImg: { - width: "100%", - height: "228px", - "border-radius": "4px", - }, - - Icon: { - "&:hover": { - cursor: "pointer", - }, - }, -}; - -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); - -export const AssetCardView = (props: AssetCardViewProps) => { - const { - text: { titleText }, - imgUrl, - } = props; - - return ( -
- -
-

- {titleText} -

- - - - -
- -
- ); -}; diff --git a/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card.tsx b/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card.tsx deleted file mode 100644 index f1b3ece317..0000000000 --- a/packages/mint-components/src/components/sqm-asset-card/sqm-asset-card.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { isDemo } from "@saasquatch/component-boilerplate"; -import { withHooks } from "@saasquatch/stencil-hooks"; -import { Component, Prop, h, State } from "@stencil/core"; -import { DemoData } from "../../global/demo"; -import { AssetCardView, AssetCardViewProps } from "./sqm-asset-card-view"; -import { useAssetCard } from "./useAssetCard"; -import deepmerge from "deepmerge"; - -/** - * @uiName Asset Card - */ -@Component({ - tag: "sqm-asset-card", - assetsDirs: ["../../assets"], - shadow: true, -}) -export class AssetCard { - /** - * @uiName Banner title - */ - @Prop() titleText: string; - - /** - * @uiName Banner image - */ - @Prop() imgUrl: string; - - /** - * @undocumented - * @uiType object - */ - @Prop() demoData?: DemoData; - - @State() - ignored = true; - - constructor() { - withHooks(this); - } - - disconnectedCallback() {} - - render() { - const props = isDemo() ? useAssetCardDemo(this) : useAssetCard(this); - return ; - } -} - -function useAssetCardDemo(props: AssetCard): AssetCardViewProps { - return deepmerge( - { - text: { - titleText: "Marketing Banner", - }, - imgUrl: - "https://res.cloudinary.com/saasquatch/image/upload/v1634255445/squatch-assets/Copy_of_saasquatch-logo-tree-large-horizontal.png", - callbacks: {}, - }, - props.demoData || {}, - { arrayMerge: (_, a) => a } - ); -} diff --git a/packages/mint-components/src/components/sqm-asset-card/useAssetCard.tsx b/packages/mint-components/src/components/sqm-asset-card/useAssetCard.tsx deleted file mode 100644 index c29ab2c6bf..0000000000 --- a/packages/mint-components/src/components/sqm-asset-card/useAssetCard.tsx +++ /dev/null @@ -1,9 +0,0 @@ -export const useAssetCard = (_props) => { - return { - text: { - titleText: "Marketing Banner", - }, - imgUrl: null, - callbacks: {}, - }; -}; diff --git a/packages/mint-components/src/components/sqm-big-stat/BigStat.stories.tsx b/packages/mint-components/src/components/sqm-big-stat/BigStat.stories.tsx index b54e1f93c5..41237921b6 100644 --- a/packages/mint-components/src/components/sqm-big-stat/BigStat.stories.tsx +++ b/packages/mint-components/src/components/sqm-big-stat/BigStat.stories.tsx @@ -84,6 +84,23 @@ export const InvalidStatValue = () => { return Big stat; }; +export const CustomStyles = () => { + return ( + +

Giftcards Earned

+ + ); +}; + export const MultipleStats = () => { return ( @@ -115,5 +132,53 @@ export const MultipleStats = () => { - ) -} + ); +}; + +export const MultipleStatsWithCustomBranding = () => { + return ( + + +

Giftcards Earned

+ + +

Referrals

+ + +

Points balance

+ + + ); +}; diff --git a/packages/mint-components/src/components/sqm-big-stat/readme.md b/packages/mint-components/src/components/sqm-big-stat/readme.md index 452c413eec..5909d6401e 100644 --- a/packages/mint-components/src/components/sqm-big-stat/readme.md +++ b/packages/mint-components/src/components/sqm-big-stat/readme.md @@ -7,13 +7,18 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------- | -------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `alignment` | `alignment` | Controls the alignment of the flexbox | `"center" \| "left" \| "right"` | `undefined` | -| `demoData` | -- | | `{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: "left" \| "right" \| "center"; labelSlot?: VNode; }` | `undefined` | -| `flexReverse` | `flex-reverse` | Controls the order of the stat value & description column | `boolean` | `false` | -| `programId` | `program-id` | The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified. | `string` | `undefined` | -| `statType` | `stat-type` | Select what type of stat to display. Manual paths are also supported. | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ---------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | +| `alignment` | `alignment` | Controls the alignment of the flexbox | `"center" \| "left" \| "right"` | `"center"` | +| `demoData` | -- | | `{ loading?: boolean; value?: number; statvalue?: string; flexReverse?: boolean; alignment?: "left" \| "right" \| "center"; labelSlot?: VNode; statTextColor?: string; statFontSize?: number; descriptionTextColor?: string; descriptionFontSize?: number; statFontWeight?: number; }` | `undefined` | +| `descriptionFontSize` | `description-font-size` | Font size of the description text in pixels | `number` | `undefined` | +| `descriptionTextColor` | `description-text-color` | Color of the description text | `string` | `undefined` | +| `flexReverse` | `flex-reverse` | Controls the order of the stat value & description column | `boolean` | `false` | +| `programId` | `program-id` | The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified. | `string` | `undefined` | +| `statFontSize` | `stat-font-size` | Font size of the stat text in pixels | `number` | `undefined` | +| `statFontWeight` | `stat-font-weight` | Font weight of the stat text | `number` | `undefined` | +| `statTextColor` | `stat-text-color` | Color of the stat text | `string` | `undefined` | +| `statType` | `stat-type` | Select what type of stat to display. Manual paths are also supported. | `string` | `undefined` | ## Dependencies 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..340b72adfd 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 @@ -8,17 +8,31 @@ export interface BigStatViewProps { flexReverse?: boolean; alignment?: "left" | "right" | "center"; labelSlot?: VNode; + statTextColor?: string; + statFontSize?: number; + descriptionTextColor?: string; + descriptionFontSize?: number; + statFontWeight?: number; } export function BigStatView(props: BigStatViewProps) { - const { statvalue, flexReverse, alignment } = props; + const { + statvalue, + flexReverse, + alignment, + statTextColor, + statFontSize, + descriptionTextColor, + descriptionFontSize, + statFontWeight, + } = props; - // Dependent on props, not feasiable to move out + // Dependent on props, not feasible to move out const style = { Container: { display: "flex", - height: "inherit", - "justify-content": "space-between", + // height: "inherit", + // "justify-content": "space-between", "flex-direction": `${flexReverse ? "column-reverse" : "column"}`, "align-items": `${ alignment === "left" @@ -29,15 +43,22 @@ export function BigStatView(props: BigStatViewProps) { }`, }, Stat: { - "font-size": "var(--sl-font-size-x-large)", + "font-size": statFontSize + ? `${statFontSize}px` + : "var(--sl-font-size-xx-large)", "text-align": alignment, + color: statTextColor || "var(--sqm-text)", + lineHeight: "35px", + fontWeight: statFontWeight || "var(--sl-font-weight-normal)", }, Description: { - "font-size": "var(--sl-font-size-small)", + "font-size": descriptionFontSize + ? `${descriptionFontSize}px` + : "var(--sl-font-size-small)", "font-weight": "var(--sl-font-weight-normal)", - color: "var(--sl-color-gray-600)", - "text-transform": "uppercase", + color: descriptionTextColor || "var(--sqm-text)", "text-align": alignment, + lineHeight: "20px", }, }; 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..a00942b70a 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 @@ -36,6 +38,7 @@ export class BigStat { * * @uiName Flex reverse * @default + * @uiGroup Style */ @Prop() flexReverse?: boolean = false; /** @@ -45,8 +48,9 @@ export class BigStat { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Style */ - @Prop() alignment?: "left" | "right" | "center"; + @Prop() alignment?: "left" | "right" | "center" = "center"; /** * The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified. @@ -56,6 +60,50 @@ export class BigStat { */ @Prop() programId?: string; + /** + * Color of the stat text + * @uiName Stat text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + @Prop() statTextColor?: string; + + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Style + */ + @Prop() statFontSize?: number; + + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Style + * @uiEnum [100, 200, 300, 400, 500, 600, 700, 800, 900] + * @uiEnumNames ["Thin", "Extra Light", "Light", "Normal", "Medium", "Semi Bold", "Bold", "Extra Bold", "Heavy"] + */ + @Prop() statFontWeight?: number; + + /** + * Color of the description text + * @uiName Description text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Style + */ + @Prop() descriptionTextColor?: string; + + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Style + */ + @Prop() descriptionFontSize?: number; + /** * @undocumented * @uiType object diff --git a/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx b/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx index 7a2dbb54d2..863a2103ca 100644 --- a/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx +++ b/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx @@ -1108,6 +1108,11 @@ export function useBigStat(props: BigStat): BigStatHook { flexReverse, alignment, loading: false, + statTextColor: props.statTextColor, + statFontSize: props.statFontSize, + descriptionTextColor: props.descriptionTextColor, + descriptionFontSize: props.descriptionFontSize, + statFontWeight: props.statFontWeight, }, label: "BAD PROP TYPE", }; @@ -1147,6 +1152,11 @@ export function useBigStat(props: BigStat): BigStatHook { loading: stat?.loading, flexReverse, alignment, + statTextColor: props.statTextColor, + statFontSize: props.statFontSize, + descriptionTextColor: props.descriptionTextColor, + descriptionFontSize: props.descriptionFontSize, + statFontWeight: props.statFontWeight, }, label, }; diff --git a/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts b/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts index c97ccf553a..3ce630360d 100644 --- a/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts +++ b/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts @@ -19,8 +19,12 @@ export function useDemoBigStat(props: BigStat): BigStatHook { value: 0, statvalue: "!!!", loading: false, - flexReverse: false, - alignment: "center" as const, + flexReverse: props.flexReverse, + alignment: props.alignment, + statTextColor: props.statTextColor, + statFontSize: props.statFontSize, + descriptionTextColor: props.descriptionTextColor, + descriptionFontSize: props.descriptionFontSize, }, label: "BAD PROP TYPE", }; @@ -35,8 +39,13 @@ export function useDemoBigStat(props: BigStat): BigStatHook { { statvalue: "12345", value: 0, - flexReverse: false, - alignment: "center" as const, + flexReverse: props.flexReverse, + alignment: props.alignment, + statTextColor: props.statTextColor, + statFontSize: props.statFontSize, + descriptionTextColor: props.descriptionTextColor, + descriptionFontSize: props.descriptionFontSize, + statFontWeight: props.statFontWeight, }, props.demoData || {}, { arrayMerge: (_, a) => a } 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..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,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-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-checkbox-field/sqm-checkbox-field.tsx b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx index 18eafa4b52..e01dc143cc 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx +++ b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field.tsx @@ -19,6 +19,7 @@ import { useCheckboxField } from "./useCheckboxField"; */ @Component({ tag: "sqm-checkbox-field", + shadow: true, }) export class CheckboxField { @State() diff --git a/packages/mint-components/src/components/sqm-coupon-code/CouponCode.stories.tsx b/packages/mint-components/src/components/sqm-coupon-code/CouponCode.stories.tsx index 49595eb950..e02ac9a987 100644 --- a/packages/mint-components/src/components/sqm-coupon-code/CouponCode.stories.tsx +++ b/packages/mint-components/src/components/sqm-coupon-code/CouponCode.stories.tsx @@ -17,11 +17,30 @@ const defaultProps: CouponCodeViewProps = { inputPlaceholderText: "CODE ERROR", couponCodeLabel: "Your coupon code:", error: false, + buttonType: "primary", }; export const CouponCode = () => { return ; }; +export const CouponCodeWithSecondaryButtonType = () => { + return ( + + ); +}; +export const CouponCodeWithTertiaryButtonType = () => { + return ( + + ); +}; export const CustomTooltipText = () => { return ; }; diff --git a/packages/mint-components/src/components/sqm-coupon-code/readme.md b/packages/mint-components/src/components/sqm-coupon-code/readme.md index e7027460d6..400a4cb3ea 100644 --- a/packages/mint-components/src/components/sqm-coupon-code/readme.md +++ b/packages/mint-components/src/components/sqm-coupon-code/readme.md @@ -7,23 +7,28 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------------- | ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | -| `buttonStyle` | `copy-button-style` | Set the copy button style and placement. | `"button-below" \| "button-outside" \| "icon"` | `"icon"` | -| `cancelledErrorText` | `cancelled-error-text` | Display this message when the coupon code has been cancelled. | `string` | `"This code has been cancelled. Please reach out to the Support team for help resolving this issue."` | -| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Coupon"` | -| `couponCodeLabel` | `coupon-code-label` | | `string` | `"Your coupon code:"` | -| `couponCodePlaceholder` | `coupon-code-placeholder` | Display this text when the coupon code can’t be retrieved. | `string` | `"..."` | -| `demoData` | -- | | `{ loading?: boolean; errorType?: "error" \| "warning" \| "info" \| "success"; couponCodeLabel?: string; 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` | -| `expiredErrorText` | `expired-error-text` | Display this message when the coupon code has expired. | `string` | `"Looks like this code has expired. Please reach out to the Support team for help resolving this issue."` | -| `fullfillmentErrorText` | `fullfilled-error-text` | Display this message when the code fails to load due to a fulfillment error. | `string` | `"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue."` | -| `genericErrorText` | `error-text` | Display this message when the code fails to load due to an unspecified error. | `string` | `"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue."` | -| `pendingErrorText` | `pending-error-text` | Display this message when the coupon code not available yet. Use the ICU message, {unpendDate}, to show the date the code will be available. | `string` | `"Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!"` | -| `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` | -| `redeemedErrorText` | `redeemed-error-text` | Display this message when the coupon code has already been redeemed. | `string` | `"Looks like you’ve already redeemed this code."` | -| `textAlign` | `text-align` | | `"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 (default is set to 1px solid transparent) | `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 (primary or secondary) that will be used to copy the link. | `"primary" \| "secondary" \| "tertiary"` | `"primary"` | +| `cancelledErrorText` | `cancelled-error-text` | Display this message when the coupon code has been cancelled. | `string` | `"This code has been cancelled. Please reach out to the Support team for help resolving this issue."` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Coupon"` | +| `couponCodeLabel` | `coupon-code-label` | | `string` | `"Your coupon code:"` | +| `couponCodePlaceholder` | `coupon-code-placeholder` | Display this text when the coupon code can’t be retrieved. | `string` | `"..."` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; errorType?: "error" \| "warning" \| "info" \| "success"; couponCodeLabel?: string; buttonType?: "primary" \| "secondary" \| "tertiary"; 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` | +| `expiredErrorText` | `expired-error-text` | Display this message when the coupon code has expired. | `string` | `"Looks like this code has expired. Please reach out to the Support team for help resolving this issue."` | +| `fullfillmentErrorText` | `fullfilled-error-text` | Display this message when the code fails to load due to a fulfillment error. | `string` | `"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue."` | +| `genericErrorText` | `error-text` | Display this message when the code fails to load due to an unspecified error. | `string` | `"We couldn't fetch your code. Please try again later or reach out to the Support team for help resolving this issue."` | +| `pendingErrorText` | `pending-error-text` | Display this message when the coupon code not available yet. Use the ICU message, {unpendDate}, to show the date the code will be available. | `string` | `"Your code will be available on {unpendDate}. Mark your calendar and come back then to redeem your reward!"` | +| `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` | +| `redeemedErrorText` | `redeemed-error-text` | Display this message when the coupon code has already been redeemed. | `string` | `"Looks like you’ve already redeemed this code."` | +| `textAlign` | `text-align` | | `"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-coupon-code/sqm-coupon-code-view.tsx b/packages/mint-components/src/components/sqm-coupon-code/sqm-coupon-code-view.tsx index 56035cc650..70d372b54a 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 @@ -6,29 +6,31 @@ import { CopyTextView, CopyTextViewProps } from "../views/copy-text-view"; export interface CouponCodeViewProps extends CopyTextViewProps { errorType?: "error" | "warning" | "info" | "success"; couponCodeLabel?: string; + textColor?: string; + buttonType: "primary" | "secondary" | "tertiary"; } -const style = { - HostBlock: HostBlock, - couponCodeLabel: { - margin: "var(--sl-spacing-x-small) 0", - color: "var(--sl-color-gray-500)", - fontSize: "var(--sl-font-size-small)", - }, -}; +export function CouponCodeView(props: CouponCodeViewProps) { + const error = !props.loading && props.error; + + const style = { + HostBlock: HostBlock, + couponCodeLabel: { + margin: "var(--sl-spacing-x-small) 0", + color: props.textColor || "var(--sqm-text-subdued)", + fontSize: "var(--sl-font-size-small)", + }, + }; -const vanillaStyle = ` + const vanillaStyle = ` :host{ display: block; width: 100%; } `; -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); - -export function CouponCodeView(props: CouponCodeViewProps) { - const error = !props.loading && props.error; + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); return (
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..aaafdd5341 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 @@ -1,14 +1,22 @@ import { + isDemo, useCurrentPage, useProgramId, } from "@saasquatch/component-boilerplate"; import { withHooks } from "@saasquatch/stencil-hooks"; import { useEffect, useState } from "@saasquatch/universal-hooks"; -import { Component, h, State } from "@stencil/core"; -import { NavigationSidebarView } from "./sqm-navigation-sidebar-view"; +import { Component, h, Prop, State } from "@stencil/core"; +import { + NavigationSidebarView, + NavigationSidebarViewProps, +} from "./sqm-navigation-sidebar-view"; +import deepmerge from "deepmerge"; +import { DemoData } from "../../global/demo"; /** * @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({ @@ -19,13 +27,29 @@ export class NavigationSidebar { @State() ignored = true; + /** + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() mobileMenuColor?: string = "var(--sqm-text, #444445)"; + + /** + * @undocumented + * @uiType object + */ + @Prop() demoData?: DemoData; + constructor() { withHooks(this); } disconnectedCallback() {} render() { - const props = useNavigationSidebar(); + const props = isDemo() + ? useDemoNavigationSidebar(this) + : useNavigationSidebar(this); return ( @@ -35,7 +59,9 @@ export class NavigationSidebar { } } -function useNavigationSidebar() { +function useNavigationSidebar( + props: NavigationSidebar +): NavigationSidebarViewProps { const location = useCurrentPage(); const programId = useProgramId(); @@ -51,7 +77,20 @@ function useNavigationSidebar() { } return { + mobileMenuColor: props.mobileMenuColor, checked, onClick, }; } + +function useDemoNavigationSidebar( + props: NavigationSidebar +): NavigationSidebarViewProps { + return deepmerge( + { + mobileMenuColor: props.mobileMenuColor, + }, + props.demoData || {}, + { arrayMerge: (_, a) => a } + ); +} diff --git a/packages/mint-components/src/components/sqm-pagination/readme.md b/packages/mint-components/src/components/sqm-pagination/readme.md index 2ce7fcec51..13c6a56429 100644 --- a/packages/mint-components/src/components/sqm-pagination/readme.md +++ b/packages/mint-components/src/components/sqm-pagination/readme.md @@ -7,10 +7,11 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ---------------- | ----------------- | ----------- | -------- | --------------------------------- | -| `demoData` | -- | | `{}` | `undefined` | -| `paginationText` | `pagination-text` | | `string` | `"{currentPage} of {totalPages}"` | +| Property | Attribute | Description | Type | Default | +| ---------------- | ----------------- | ---------------------------------------------------------------------- | ---------------------------------------- | --------------------------------- | +| `buttonType` | `button-type` | The type of the button that is used (primary, secondary, or tertiary). | `"primary" \| "secondary" \| "tertiary"` | `"secondary"` | +| `demoData` | -- | | `{}` | `undefined` | +| `paginationText` | `pagination-text` | | `string` | `"{currentPage} of {totalPages}"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-pagination/sqm-pagination-view.tsx b/packages/mint-components/src/components/sqm-pagination/sqm-pagination-view.tsx index c212ed8793..ec594ec8ab 100644 --- a/packages/mint-components/src/components/sqm-pagination/sqm-pagination-view.tsx +++ b/packages/mint-components/src/components/sqm-pagination/sqm-pagination-view.tsx @@ -14,6 +14,7 @@ export interface PaginationViewProps { onNext: (e: Event) => void; onPrev: (e: Event) => void; }; + buttonType?: "primary" | "secondary" | "tertiary"; } const style = { @@ -35,7 +36,7 @@ const sheet = createStyleSheet(style); const styleString = sheet.toString(); export function PaginationView(props: PaginationViewProps) { - const { states, callbacks, text } = props; + const { states, callbacks, text, buttonType } = props; const { onNext, onPrev } = callbacks; const { currentPage, totalPages, loading } = states; @@ -47,6 +48,7 @@ export function PaginationView(props: PaginationViewProps) { {!loading && ( )} setCurrentPage(currentPage + 1), onPrev: () => setCurrentPage(currentPage - 1), diff --git a/packages/mint-components/src/components/sqm-portal-change-password/readme.md b/packages/mint-components/src/components/sqm-portal-change-password/readme.md index 4e5fc4288c..b19c246fb2 100644 --- a/packages/mint-components/src/components/sqm-portal-change-password/readme.md +++ b/packages/mint-components/src/components/sqm-portal-change-password/readme.md @@ -7,25 +7,25 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------------------- | ------------------------------------ | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | -| `cancelText` | `cancel-text` | Found in modal | `string` | `"Cancel"` | -| `changePasswordButtonText` | `change-password-button-text` | Found in modal | `string` | `"Change Password"` | -| `confirmPasswordFieldLabel` | `confirm-password-field-label` | Found in modal | `string` | `"Confirm New Password"` | -| `demoData` | -- | | `{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; }` | `undefined` | -| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `"Password must meet the following requirements:"` | -| `hasErrorText` | `has-error-text` | | `string` | `"contain at least 1 number or symbol"` | -| `invalidSessionErrorText` | `invalid-session-error-text` | | `string` | `"Please log in again to change your password."` | -| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `"contain at least 1 lowercase character"` | -| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `"Password has met all requirements"` | -| `minErrorText` | `min-error-text` | | `string` | `"be a minimum of 8 characters"` | -| `modalChangePasswordHeader` | `modal-change-password-header` | | `string` | `"Change Password"` | -| `nonMatchingPasswordErrorText` | `non-matching-password-error-text` | | `string` | `"contain at least 1 lowercase character"` | -| `passwordFieldLabel` | `password-field-label` | Found in modal | `string` | `"New Password"` | -| `portalChangePasswordButtonText` | `portal-change-password-button-text` | | `string` | `"Change your password..."` | -| `portalChangePasswordHeader` | `portal-change-password-header` | Portal change password section header | `string` | `"Password"` | -| `successMessage` | `success-message` | Successful password change message | `string` | `"Your password has been updated."` | -| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `"contain at least 1 uppercase character"` | +| Property | Attribute | Description | Type | Default | +| -------------------------------- | ------------------------------------ | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | +| `cancelText` | `cancel-text` | Found in modal | `string` | `"Cancel"` | +| `changePasswordButtonText` | `change-password-button-text` | Found in modal | `string` | `"Change Password"` | +| `confirmPasswordFieldLabel` | `confirm-password-field-label` | Found in modal | `string` | `"Confirm New Password"` | +| `demoData` | -- | | `{ states?: { open: boolean; error: string; loading: boolean; success: boolean; content: { modalChangePasswordHeader: string; cancelText: string; changePasswordButtonText: string; passwordFieldLabel: string; confirmPasswordFieldLabel: string; successMessage: string; portalChangePasswordHeader: string; portalChangePasswordButtonText: string; meetsRequirementsText?: string; doesNotMeetRequirementsText?: string; minErrorText?: string; uppercaseErrorText?: string; lowercaseErrorText?: string; hasErrorText?: string; }; }; borderRadius?: string; background?: string; }` | `undefined` | +| `doesNotMeetRequirementsText` | `does-not-meet-requirements-text` | | `string` | `"Password must meet the following requirements:"` | +| `hasErrorText` | `has-error-text` | | `string` | `"contain at least 1 number or symbol"` | +| `invalidSessionErrorText` | `invalid-session-error-text` | | `string` | `"Please log in again to change your password."` | +| `lowercaseErrorText` | `lowercase-error-text` | | `string` | `"contain at least 1 lowercase character"` | +| `meetsRequirementsText` | `meets-requirements-text` | | `string` | `"Password has met all requirements"` | +| `minErrorText` | `min-error-text` | | `string` | `"be a minimum of 8 characters"` | +| `modalChangePasswordHeader` | `modal-change-password-header` | | `string` | `"Change Password"` | +| `nonMatchingPasswordErrorText` | `non-matching-password-error-text` | | `string` | `"contain at least 1 lowercase character"` | +| `passwordFieldLabel` | `password-field-label` | Found in modal | `string` | `"New Password"` | +| `portalChangePasswordButtonText` | `portal-change-password-button-text` | | `string` | `"Change your password..."` | +| `portalChangePasswordHeader` | `portal-change-password-header` | Portal change password section header | `string` | `"Password"` | +| `successMessage` | `success-message` | Successful password change message | `string` | `"Your password has been updated."` | +| `uppercaseErrorText` | `uppercase-error-text` | | `string` | `"contain at least 1 uppercase character"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password-view.tsx b/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password-view.tsx index 8c10a78bf4..0ddcb5313e 100644 --- a/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password-view.tsx +++ b/packages/mint-components/src/components/sqm-portal-change-password/sqm-portal-change-password-view.tsx @@ -31,6 +31,8 @@ export interface PortalChangePasswordViewProps { setOpen: (open: boolean) => void; submit: (event: MouseEvent) => void; }; + borderRadius?: string; + background?: string; } export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { @@ -38,6 +40,11 @@ export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { const style = { Dialog: { padding: "0", + "&::part(panel)": { + background: "var(--sqm-portal-background)", + borderRadius: + "var(--sqm-border-radius-normal, var(--sl-border-radius-medium))", + }, "&::part(close-button)": { "margin-top": "var(--sl-spacing-medium)", }, @@ -67,8 +74,8 @@ export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { }, CancelButton: { - width: "25%", margin: "var(--sl-spacing-large) auto", + width: "100%", }, PasswordField: { marginBottom: "var(--sl-spacing-large) !important", @@ -157,6 +164,7 @@ export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { @@ -164,7 +172,8 @@ export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { callbacks.setOpen(false)} > {states.content.cancelText} @@ -186,7 +195,11 @@ export function PortalChangePasswordView(props: PortalChangePasswordViewProps) { ), content: ( - callbacks.setOpen(true)}> + callbacks.setOpen(true)} + > {states.content.portalChangePasswordButtonText} ), 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-view.tsx b/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer-view.tsx index f53e9780fc..0ff0866b35 100644 --- a/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer-view.tsx +++ b/packages/mint-components/src/components/sqm-portal-footer/sqm-portal-footer-view.tsx @@ -10,8 +10,8 @@ const vanillaStyle = ` } a{ cursor:pointer; - color: inherit; - text-decoration: none; + color: var(--sqm-text-subdued); + text-decoration: none ; } `; type PortalFooterViewProps = { @@ -42,14 +42,14 @@ export function PortalFooterView(props: PortalFooterViewProps) { "flex-direction": "column", "align-items": "center", "font-size": "var(--sl-font-size-small)", - color: "var(--sl-color-gray-600)", + color: "var(--sqm-text-subdued)", "padding-top": `var(--sl-spacing-${props.paddingTop})`, "padding-right": `var(--sl-spacing-${props.paddingRight})`, "padding-bottom": `var(--sl-spacing-${props.paddingBottom})`, "padding-left": `var(--sl-spacing-${props.paddingLeft})`, "row-gap": `var(--sl-spacing-small)`, "& a:hover": { - color: "var(--sl-color-gray-900)", + color: "var(--sqm-text)", }, }, @@ -59,7 +59,7 @@ export function PortalFooterView(props: PortalFooterViewProps) { }, PoweredByLink: { - color: "var(--sl-color-gray-400)", + color: "var(--sqm-text-subdued)", "font-size": "var(--sl-font-size-small)", display: "flex", alignItems: "center", @@ -68,7 +68,7 @@ export function PortalFooterView(props: PortalFooterViewProps) { shapeRendering: "geometricprecision", }, "&:hover, &:hover *": { - color: "var(--sl-color-gray-900)", + color: "var(--sqm-text)", }, }, }; 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-forgot-password/PortalForgotPassword.stories.tsx b/packages/mint-components/src/components/sqm-portal-forgot-password/PortalForgotPassword.stories.tsx index e7bedc9b76..891f6334c2 100644 --- a/packages/mint-components/src/components/sqm-portal-forgot-password/PortalForgotPassword.stories.tsx +++ b/packages/mint-components/src/components/sqm-portal-forgot-password/PortalForgotPassword.stories.tsx @@ -23,7 +23,7 @@ const defaultProps: PortalForgotPasswordViewProps = { submit: async (e) => await e, }, content: { - secondaryButton: "Cancel", + loginText: "Login", messageSlot: "Enter your email below to receive a password reset link.", }, }; @@ -39,8 +39,8 @@ const errorProps: PortalForgotPasswordViewProps = { submit: async (e) => await e, }, content: { - secondaryButton: "Cancel", messageSlot: "Enter your email below to receive a password reset link.", + loginText: "Login", }, }; @@ -55,7 +55,7 @@ const loadingProps: PortalForgotPasswordViewProps = { submit: async (e) => await e, }, content: { - secondaryButton: "Cancel", + loginText: "Login", messageSlot: "Enter your email below to receive a password reset link.", }, }; @@ -71,7 +71,7 @@ const successProps: PortalForgotPasswordViewProps = { submit: async (e) => await e, }, content: { - secondaryButton: "Cancel", + loginText: "Login", messageSlot: "Enter your email below to receive a password reset link.", }, }; diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md index 11b3f34d9d..e25458e82a 100644 --- a/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md +++ b/packages/mint-components/src/components/sqm-portal-forgot-password/readme.md @@ -7,17 +7,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | -| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; }; }` | `undefined` | -| `emailLabel` | `email-label` | | `string` | `"Email"` | -| `headerText` | `header-text` | | `string` | `"Enter your email below to receive a password reset link."` | -| `loginPath` | `login-path` | | `string` | `"/login"` | -| `loginText` | `login-text` | | `string` | `"Sign In"` | -| `networkErrorMessage` | `network-error-message` | Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while loading this page. Please refresh the page."` | -| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `"/resetPassword"` | -| `submitLabel` | `submit-label` | | `string` | `"Request Password Reset"` | -| `successAlertText` | `success-alert-text` | | `string` | `"If an account with that email exists, a password reset email will be sent."` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | +| `backgroundColor` | `background-color` | | `string` | `"var(--sqm-portal-background, #ffffff)"` | +| `border` | `border` | | `string` | `"1px solid var(--sqm-border-color, #eaeaea)"` | +| `borderRadius` | `border-radius` | | `string` | `"var(--sqm-border-radius-normal, 8px)"` | +| `demoData` | -- | | `{ states?: { error: string; loading: boolean; success: boolean; loginPath: string; }; content?: { messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; loginText?: string; backgroundColor?: string; borderRadius?: string; border?: string; textColor?: string; }; }` | `undefined` | +| `emailLabel` | `email-label` | | `string` | `"Email"` | +| `headerText` | `header-text` | | `string` | `"Enter your email below to receive a password reset link."` | +| `loginPath` | `login-path` | | `string` | `"/login"` | +| `loginText` | `login-text` | | `string` | `"Sign In"` | +| `networkErrorMessage` | `network-error-message` | Displayed when the forgot password action fails due to a network error. The participant can try refreshing the page. | `string` | `"An error occurred while loading this page. Please refresh the page."` | +| `redirectPath` | `redirect-path` | Redirect participants to this page after they verify their email. | `string` | `"/resetPassword"` | +| `submitLabel` | `submit-label` | | `string` | `"Request Password Reset"` | +| `successAlertText` | `success-alert-text` | | `string` | `"If an account with that email exists, a password reset email will be sent."` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.tsx b/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.tsx index 45b4cb8d54..1c833a449b 100644 --- a/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.tsx +++ b/packages/mint-components/src/components/sqm-portal-forgot-password/sqm-portal-forgot-password-view.tsx @@ -6,6 +6,7 @@ import { } from "../../global/mixins"; import { createStyleSheet } from "../../styling/JSS"; import { TextSpanView } from "../sqm-text-span/sqm-text-span-view"; +import { navigation } from "@saasquatch/component-boilerplate"; export interface PortalForgotPasswordViewProps { states: { @@ -18,25 +19,24 @@ export interface PortalForgotPasswordViewProps { submit: (event: any) => Promise; }; content: { - secondaryButton: any; messageSlot: any; emailLabel?: string; submitLabel?: string; successAlertText?: string; + loginText?: string; + backgroundColor?: string; + borderRadius?: string; + border?: string; + textColor?: string; }; + // styles?: { + // backgroundColor?: string; + // borderRadius?: string; + // border?: string; + // textColor?: string; + // }; } -const style = { - Wrapper: AuthWrapper, - Column: { ...AuthColumn }, - ButtonsContainer: AuthButtonsContainer, - - SecondaryButton: { - cursor: "pointer", - width: "25%", - }, -}; - const vanillaStyle = ` :host { display: block; @@ -46,13 +46,32 @@ const vanillaStyle = ` } `; -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); - export function PortalForgotPasswordView(props: PortalForgotPasswordViewProps) { const { states, callbacks, content } = props; + + const style = { + FormWrapper: { + ...AuthWrapper, + background: content.backgroundColor || "var(--sqm-portal-background)", + borderRadius: content.borderRadius || "var(--sqm-border-radius-normal)", + border: + content.border || + "var(--sqm-border-thickness) solid var(--sqm-border-color)", + }, + Column: { ...AuthColumn }, + ButtonsContainer: AuthButtonsContainer, + + SecondaryButton: { + margin: "auto", + display: "block", + cursor: "pointer", + }, + }; + + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); return ( -
+
navigation.push(states.registerPath)} 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-view.tsx b/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile-view.tsx index b78e8c9b6f..627cf42029 100644 --- a/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile-view.tsx +++ b/packages/mint-components/src/components/sqm-portal-profile/sqm-portal-profile-view.tsx @@ -184,6 +184,7 @@ export function PortalProfileView(props: PortalProfileViewProps) { )} { 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-portal-register/sqm-portal-register.tsx b/packages/mint-components/src/components/sqm-portal-register/sqm-portal-register.tsx index c35fe54d23..8e0fccbad2 100644 --- a/packages/mint-components/src/components/sqm-portal-register/sqm-portal-register.tsx +++ b/packages/mint-components/src/components/sqm-portal-register/sqm-portal-register.tsx @@ -15,11 +15,11 @@ import { usePortalRegister } from "./usePortalRegister"; */ @Component({ tag: "sqm-portal-register", - shadow: true, + shadow: false, }) export class PortalRegister { @State() - ignored = true; + ignored = false; /** * Redirect participants to this page from their verification email diff --git a/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx b/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx index 8c45aaa66e..062f7a2fa8 100644 --- a/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx +++ b/packages/mint-components/src/components/sqm-portal-registration-form/PortalRegistrationForm.stories.tsx @@ -8,6 +8,8 @@ export default { title: "Components/Microsite Portal Register", }; +// TODO: Figure out if we can delete this component and it's stories since we have a duplicate + const defaultProps: PortalRegistrationFormViewProps = { states: { error: "", diff --git a/packages/mint-components/src/components/sqm-program-explainer-step/readme.md b/packages/mint-components/src/components/sqm-program-explainer-step/readme.md index c086858156..76f9ad1f9c 100644 --- a/packages/mint-components/src/components/sqm-program-explainer-step/readme.md +++ b/packages/mint-components/src/components/sqm-program-explainer-step/readme.md @@ -5,14 +5,17 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | -| `backgroundColor` | `background-color` | | `string` | `undefined` | -| `description` | `description` | | `string` | `undefined` | -| `header` | `header` | | `string` | `undefined` | -| `icon` | `icon` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` | -| `imageUrl` | `image-url` | Displayed in place of an icon | `string` | `undefined` | -| `textColor` | `text-color` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| --------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | +| `backgroundColor` | `background-color` | | `string` | `undefined` | +| `borderRadius` | `border-radius` | Amount in pixels | `number` | `undefined` | +| `description` | `description` | | `string` | `undefined` | +| `header` | `header` | | `string` | `undefined` | +| `icon` | `icon` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` | +| `iconBackgroundColor` | `icon-background-color` | | `string` | `undefined` | +| `iconColor` | `icon-color` | | `string` | `undefined` | +| `imageUrl` | `image-url` | Displayed in place of an icon | `string` | `undefined` | +| `textColor` | `text-color` | | `string` | `undefined` | ## Dependencies 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..ee3fd4e8d8 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 @@ -6,6 +6,9 @@ export interface ProgramExplainerStepViewProps { description: string; textColor?: string; backgroundColor?: string; + borderRadius?: number; + iconBackgroundColor?: string; + iconColor?: string; imageUrl?: string; icon?: string; } @@ -18,8 +21,11 @@ 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)", - background: props.backgroundColor || "var(--sl-color-primary-50)", + borderRadius: props.borderRadius + ? `${props.borderRadius}px` + : "var(--sqm-border-radius-normal)", + color: props.textColor || "var(--sqm-text)", + background: props.backgroundColor || "var(--sqm-accent-color-background)", "@media (max-width: 499px)": { flexDirection: "row", width: "auto", @@ -32,6 +38,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 +47,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)": { @@ -52,11 +60,14 @@ export function ProgramExplainerStepView(props: ProgramExplainerStepViewProps) { borderRadius: "100%", objectFit: "cover", userSelect: "none", - background: "#FFF", - color: "var(--sl-color-primary-300)", + background: props.iconBackgroundColor || "var(--sl-color-white)", + color: props.iconColor || "var(--sqm-accent-color-icon)", fontSize: "26px", textAlign: "center", lineHeight: "72px", + display: "flex", + alignItems: "center", + justifyContent: "center", }, }; diff --git a/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step.tsx b/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step.tsx index fac97c5806..6dec2e32ac 100644 --- a/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step.tsx +++ b/packages/mint-components/src/components/sqm-program-explainer-step/sqm-program-explainer-step.tsx @@ -30,14 +30,35 @@ export class ProgramExplainerStep { * @uiWidget color * @format color */ - @Prop() textColor: string; + @Prop() textColor?: string; /** * @uiName Background color * @uiWidget color * @format color */ - @Prop() backgroundColor: string; + @Prop() backgroundColor?: string; + + /** + * Amount in pixels + * @uiName Border radius + * @type number + */ + @Prop() borderRadius?: number; + + /** + * @uiName Icon Background color + * @uiWidget color + * @format color + */ + @Prop() iconBackgroundColor?: string; + + /** + * @uiName Icon color + * @uiWidget color + * @format color + */ + @Prop() iconColor?: string; /** * Displayed in place of an icon 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-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-view.tsx b/packages/mint-components/src/components/sqm-qr-code/sqm-qr-code-view.tsx index 536d698673..da6226ecbb 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,18 +146,17 @@ export function QrCodeView({
{downloadCodeText} {printCodeText} 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/readme.md b/packages/mint-components/src/components/sqm-referral-card/readme.md index f07a56c4f3..0ccc0498c0 100644 --- a/packages/mint-components/src/components/sqm-referral-card/readme.md +++ b/packages/mint-components/src/components/sqm-referral-card/readme.md @@ -7,16 +7,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | ----------- | ------------------------------ | ----------- | -| `backgroundColor` | `background-color` | | `string` | `"#ffffff"` | -| `hideBorder` | `hide-border` | | `boolean` | `false` | -| `limitWidth` | `limit-width` | | `boolean` | `false` | -| `paddingBottom` | `padding-bottom` | | `string` | `"large"` | -| `paddingLeft` | `padding-left` | | `string` | `"large"` | -| `paddingRight` | `padding-right` | | `string` | `"large"` | -| `paddingTop` | `padding-top` | | `string` | `"large"` | -| `verticalAlignment` | `vertical-alignment` | | `"center" \| "end" \| "start"` | `"start"` | +| Property | Attribute | Description | Type | Default | +| ------------------- | -------------------- | ------------------------------------------------------------------------------ | ------------------------------ | ----------- | +| `backgroundColor` | `background-color` | | `string` | `undefined` | +| `borderColor` | `border-color` | Border color of share link container (default is set to 1px solid transparent) | `string` | `undefined` | +| `borderRadius` | `border-radius` | The border radius on the share link container (in pixels) | `number` | `undefined` | +| `hideBorder` | `hide-border` | | `boolean` | `false` | +| `limitWidth` | `limit-width` | | `boolean` | `false` | +| `paddingBottom` | `padding-bottom` | | `string` | `"large"` | +| `paddingLeft` | `padding-left` | | `string` | `"large"` | +| `paddingRight` | `padding-right` | | `string` | `"large"` | +| `paddingTop` | `padding-top` | | `string` | `"large"` | +| `textColor` | `text-color` | Color of the text and copy icon | `string` | `undefined` | +| `verticalAlignment` | `vertical-alignment` | | `"center" \| "end" \| "start"` | `"start"` | ## Dependencies 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..f7067f4cfb 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 @@ -4,7 +4,10 @@ import { createStyleSheet } from "../../styling/JSS"; export interface ReferralCardViewProps { verticalAlignment: "start" | "center" | "end"; hideBorder?: boolean; - backgroundColor: string; + borderColor?: string; + borderRadius?: number; + textColor?: string; + backgroundColor?: string; slots: { left: VNode; right: VNode; @@ -15,42 +18,10 @@ export interface ReferralCardViewProps { paddingRight?: string; paddingBottom?: string; paddingLeft?: string; - limitWidth: boolean; + limitWidth?: boolean; hasHeader: boolean; hasFooter: boolean; } -const style = { - Container: { - borderRadius: "var(--sl-border-radius-large)", - color: "var(--sl-color-neutral-900)", - background: "var(--sl-color-neutral-0)", - display: "flex", - flexDirection: "column", - rowGap: "var(--sl-spacing-large)", - }, - EndContainer: { - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - ColumnContainer: { - "& p": { margin: "0" }, - display: "grid", - gridAutoColumns: "minmax(0, 1fr)", - gridAutoFlow: "column", - gap: "calc(2 * var(--sl-spacing-medium))", - - "@media (max-width: 499px)": { - gridAutoFlow: "unset", - gridAutoColumns: "unset", - gridTemplateColumns: "1fr", - border: "none", - }, - }, -}; - -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); const vanillaStyle = ` :host{ @@ -59,14 +30,46 @@ const vanillaStyle = ` `; export function ReferralCardView(props: ReferralCardViewProps) { + const style = { + Container: { + borderRadius: props.borderRadius || "var(--sqm-border-radius-normal)", + color: props.textColor || "var(--sqm-text)", + background: props.backgroundColor || "var(--sqm-portal-background)", + display: "flex", + flexDirection: "column", + rowGap: "var(--sl-spacing-large)", + }, + EndContainer: { + display: "flex", + flexDirection: "column", + alignItems: "center", + }, + ColumnContainer: { + "& p": { margin: "0" }, + display: "grid", + gridAutoColumns: "minmax(0, 1fr)", + gridAutoFlow: "column", + gap: "calc(2 * var(--sl-spacing-medium))", + + "@media (max-width: 499px)": { + gridAutoFlow: "unset", + gridAutoColumns: "unset", + gridTemplateColumns: "1fr", + border: "none", + }, + }, + }; + + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); + + const borderColor = props.borderColor || "var(--sqm-border-color)"; return (
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, @@ -67,7 +70,30 @@ export class ReferralCard { * @uiWidget color * @uiType string */ - @Prop() backgroundColor: string = "#ffffff"; + @Prop() backgroundColor?: string; + + /** + * Border color of share link container (default is set to 1px solid transparent) + * @uiName Border color + * @uiWidget color + * @format color + */ + @Prop() borderColor?: string; + + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + */ + @Prop() textColor?: string; + + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + */ + @Prop() borderRadius?: number; /** * @uiName Limit width diff --git a/packages/mint-components/src/components/sqm-referral-code/ReferralCode.stories.tsx b/packages/mint-components/src/components/sqm-referral-code/ReferralCode.stories.tsx index 7d2f2513fa..e9dc0d218a 100644 --- a/packages/mint-components/src/components/sqm-referral-code/ReferralCode.stories.tsx +++ b/packages/mint-components/src/components/sqm-referral-code/ReferralCode.stories.tsx @@ -22,6 +22,16 @@ export const ShowNotificationText = () => { > ); }; + +export const ShowNotificationTextRed = () => { + return ( + + ); +}; export const ShowNotificationTextWithButton = () => { return ( void; }` | `undefined` | -| `notificationText` | `notification-text` | Shown underneath single-use promo codes when the user has already copied the code | `string` | `"You've copied this code before"` | -| `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` | -| `showNotificationText` | `show-notification-text` | Boolean used to show notification text below input | `boolean` | `false` | -| `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 (default is set to 1px solid transparent) | `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, secondary, or tertiary). | `"primary" \| "secondary" \| "tertiary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary" \| "tertiary"; 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` | +| `notificationText` | `notification-text` | Shown underneath single-use promo codes when the user has already copied the code | `string` | `"You've copied this code before"` | +| `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` | +| `showNotificationText` | `show-notification-text` | Boolean used to show notification text below input | `boolean` | `false` | +| `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-referral-code/sqm-referral-code.tsx b/packages/mint-components/src/components/sqm-referral-code/sqm-referral-code.tsx index 36143507aa..8eb40f6f05 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 - */ @@ -67,6 +68,7 @@ export class ReferralCode { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ @Prop({ attribute: "text-align", @@ -88,12 +90,59 @@ export class ReferralCode { * @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"; + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() backgroundColor?: string; + + /** + * Border color of share link container (default is set to 1px solid transparent) + * @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, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" | "tertiary" = "primary"; + /** * @undocumented * @uiType object @@ -127,6 +176,11 @@ function useDemoReferralCode(props: ReferralCode): CopyTextViewProps { notificationText: props.notificationText, showNotificationText: props.showNotificationText, isCopied: props.showNotificationText, + borderColor: props.borderColor, + backgroundColor: props.backgroundColor, + textColor: props.textColor, + borderRadius: props.borderRadius, + buttonType: props.buttonType, isUsed: false, rewardStatus: "AVAILABLE", open, diff --git a/packages/mint-components/src/components/sqm-referral-codes/ReferralCodes.stories.tsx b/packages/mint-components/src/components/sqm-referral-codes/ReferralCodes.stories.tsx index 91f4945da4..950817f710 100644 --- a/packages/mint-components/src/components/sqm-referral-codes/ReferralCodes.stories.tsx +++ b/packages/mint-components/src/components/sqm-referral-codes/ReferralCodes.stories.tsx @@ -69,6 +69,16 @@ export const WithPreviouslyCopiedCode = () => { ); }; +export const WithPreviouslyCopiedCodeAndCustomColor = () => { + return ( + + {pagination("pagination")} + {shareCodeWithPreviouslyCopied("shareCodes")} + {shareButtons("shareButtons")} + + ); +}; + export const Empty = () => { return ( { if (states.noCodes) { 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..d145823002 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 @@ -26,6 +27,13 @@ export class ReferralCodes { */ @Prop() titleText?: string = "Start sharing"; + /** + * @uiName Text Color + * @uiType string + * @uiWidget color + */ + @Prop() textColor?: string; + /** * @uiName Empty State Header Text */ @@ -130,6 +138,7 @@ function useDemoReferralCodes(props: ReferralCodes) { return deepmerge( { titleText: props.titleText, + textColor: props.textColor, states: { noCodes: false, loading: false, 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..b6e74845cc 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"}`, @@ -51,6 +49,7 @@ export class ReferralTableRewardsCell { padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)", }, "&::part(base)": { + border: "1px solid var(--sqm-border-color)", opacity: "1", }, "&::part(summary-icon)": { @@ -59,7 +58,6 @@ export class ReferralTableRewardsCell { "&::part(summary-icon[open])": { transform: "rotate(-90deg)", - background: "red", }, }, @@ -72,24 +70,76 @@ export class ReferralTableRewardsCell { BoldText: { "font-weight": "var(--sl-font-weight-semibold)", }, - StatusBadge: { + RedeemBadge: { paddingLeft: "var(--sl-spacing-xxx-small)", "&::part(base)": { textAlign: "center", maxWidth: "170px", whiteSpace: "pre-line", + background: "var(--sqm-informative-color-icon)", + color: "var(--sqm-informative-color-text)", }, }, - RedeemBadge: { + DangerBadge: { + paddingLeft: "var(--sl-spacing-xxx-small)", + "&::part(base)": { + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-danger-color-icon)", + color: "var(--sqm-danger-color-text)", + }, + }, + WarningBadge: { + paddingLeft: "var(--sl-spacing-xxx-small)", + "&::part(base)": { + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-warning-color-icon)", + color: "var(--sqm-warning-color-text)", + }, + }, + SuccessBadge: { paddingLeft: "var(--sl-spacing-xxx-small)", "&::part(base)": { - background: "var(--sl-color-blue-600)", + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-success-color-icon)", + color: "var(--sqm-success-color-text)", }, }, }; const sheet = createStyleSheet(style); const styleString = sheet.toString(); + type ShoeLaceBadgeType = + | "primary" + | "danger" + | "warning" + | "success" + | "info"; + + const getBadgeCSSClass = (badgeType: ShoeLaceBadgeType): string => { + switch (badgeType) { + case "primary": + return sheet.classes.RedeemBadge; + + case "danger": + return sheet.classes.DangerBadge; + + case "success": + return sheet.classes.SuccessBadge; + + case "warning": + case "info": + return sheet.classes.WarningBadge; + + default: + return sheet.classes.WarningBadge; + } + }; const getState = ( reward: Reward, @@ -153,7 +203,7 @@ export class ReferralTableRewardsCell { ); }; - const getSLBadgeType = (state: string): string => { + const getSLBadgeType = (state: string): ShoeLaceBadgeType => { switch (state) { case "REDEEMED": case "PAYOUT_APPROVED": @@ -220,11 +270,7 @@ export class ReferralTableRewardsCell {
{state === "PENDING" && reward.dateScheduledFor ? ( @@ -241,11 +287,7 @@ export class ReferralTableRewardsCell { ) : ( @@ -254,11 +296,7 @@ export class ReferralTableRewardsCell { )} {reward.dateExpires && state === "AVAILABLE" && ( diff --git a/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-status-cell.tsx b/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-status-cell.tsx index b65b85a464..62ead6409b 100644 --- a/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-status-cell.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/cells/sqm-referral-table-status-cell.tsx @@ -2,17 +2,54 @@ import { Component, h, Prop } from "@stencil/core"; import { createStyleSheet } from "../../../styling/JSS"; const style = { - Badge: { + SubText: { + fontSize: "var(--sl-font-size-small)", + color: "var(--sqm-text-subdued)", + margin: "0", + }, + RedeemBadge: { "&::part(base)": { fontSize: "var(--sl-font-size-small)", padding: "4px 8px", + textAlign: "center", + maxWidth: "170px", whiteSpace: "pre-line", + background: "var(--sqm-informative-color-icon)", + color: "var(--sqm-informative-color-text)", }, }, - SubText: { - fontSize: "var(--sl-font-size-small)", - color: "var(--sl-color-neutral-500)", - margin: "0", + DangerBadge: { + "&::part(base)": { + fontSize: "var(--sl-font-size-small)", + padding: "4px 8px", + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-danger-color-icon)", + color: "var(--sqm-danger-color-text)", + }, + }, + WarningBadge: { + "&::part(base)": { + fontSize: "var(--sl-font-size-small)", + padding: "4px 8px", + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-warning-color-icon)", + color: "var(--sqm-warning-color-text)", + }, + }, + SuccessBadge: { + "&::part(base)": { + fontSize: "var(--sl-font-size-small)", + padding: "4px 8px", + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-success-color-icon)", + color: "var(--sqm-success-color-text)", + }, }, }; @@ -30,6 +67,9 @@ export class ReferralTableStatusCell { @Prop() statusSubText: string; render() { + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); + const getBadgeType = (fraudStatus) => { if (fraudStatus === "PENDING") return "warning"; if (fraudStatus === "DENIED") return "danger"; @@ -38,13 +78,40 @@ export class ReferralTableStatusCell { return "warning"; }; + type ShoeLaceBadgeType = + | "primary" + | "danger" + | "warning" + | "success" + | "info"; + + const getBadgeCSSClass = (badgeType: ShoeLaceBadgeType): string => { + switch (badgeType) { + case "primary": + return sheet.classes.RedeemBadge; + + case "danger": + return sheet.classes.DangerBadge; + + case "success": + return sheet.classes.SuccessBadge; + + case "warning": + case "info": + return sheet.classes.WarningBadge; + + default: + return sheet.classes.WarningBadge; + } + }; + return (
{this.statusText} 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..4c478ad91c 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,9 +11,10 @@ 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 - + * @example Friend Registration - * @slots [{"name":"top","title":"Top Content"},{"name":"bottom","title":"Bottom Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx index 2fd10a5a0f..96cb5823fe 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/sqm-reward-exchange-list-view.tsx @@ -708,7 +708,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { exportparts="base: secondarybutton-base" class="cancel" size="large" - type="text" + type="secondary" onClick={() => callbacks.resetState()} > {states.content.text.cancelText} 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/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..4037f8c624 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 @@ -181,11 +181,11 @@ export class RewardTableRewardsCell { height: "3px", width: "100%", margin: "var(--sl-spacing-xx-small) 0", - background: "var(--sl-color-neutral-200)", + background: "var(--sqm-border-color)", "&:after": { content: '""', display: "block", - background: "var(--sl-color-primary-300)", + background: "var(--sqm-accent-color-icon)", borderRadius: "100px", width: `${progress}%`, height: "100%", @@ -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-rewards-table/cells/sqm-rewards-table-source-cell.tsx b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.tsx index 2becc5365f..f203cde24e 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-source-cell.tsx @@ -42,7 +42,7 @@ export class RewardTableSourceCell { {this.rewardExchangeText} @@ -89,7 +89,7 @@ export class RewardTableSourceCell { this.reward.referral === null ? (

{this.deletedReferralText} @@ -99,7 +99,7 @@ export class RewardTableSourceCell {

{intl.formatMessage( diff --git a/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.tsx b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.tsx index 4b9adfad5a..984d4206f6 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/cells/sqm-rewards-table-status-cell.tsx @@ -15,15 +15,48 @@ const style = { }, RedeemBadge: { "&::part(base)": { + padding: "4px 8px", fontSize: "var(--sl-font-size-small)", + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-informative-color-icon)", + color: "var(--sqm-informative-color-text)", + }, + }, + DangerBadge: { + "&::part(base)": { padding: "4px 8px", - background: "var(--sl-color-blue-600)", + fontSize: "var(--sl-font-size-small)", + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-danger-color-icon)", + color: "var(--sqm-danger-color-text)", + }, + }, + WarningBadge: { + "&::part(base)": { + padding: "4px 8px", + fontSize: "var(--sl-font-size-small)", + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-warning-color-icon)", + color: "var(--sqm-warning-color-text)", + }, + }, + SuccessBadge: { + "&::part(base)": { + padding: "4px 8px", + fontSize: "var(--sl-font-size-small)", + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-success-color-icon)", + color: "var(--sqm-success-color-text)", }, }, Date: { fontSize: "var(--sl-font-size-small)", - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", margin: "0", }, }; @@ -208,18 +241,36 @@ export class RewardTableStatusCell { ? this.deniedText : null; + type ShoeLaceBadgeType = + | "primary" + | "danger" + | "warning" + | "success" + | "info"; + + // AL: badgeType arg? TODO + const getBadgeCSSClass = (rewardStatus: string): string => { + // const getBadgeCSSClass = (badgeType: ShoeLaceBadgeType): string => { + switch (rewardStatus) { + case "AVAILABLE": + return sheet.classes.SuccessBadge; + case "REDEEMED": + case "PAYOUT_APPROVED": + return sheet.classes.RedeemBadge; + case "PENDING": + case "PENDING_REVIEW": + return sheet.classes.WarningBadge; + default: + return sheet.classes.DangerBadge; + } + }; + + const badgeCSSClass = getBadgeCSSClass(badgeType); + return (
- + {statusText}

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..ce447c1150 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 @@ -7,7 +7,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..86bcb78226 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 @@ -4,10 +4,10 @@ import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; /** - * @uiName Reward Table Customer Note Column + * @uiName Rewards 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..6be53440c7 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 @@ -6,7 +6,7 @@ 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 d1e01c11ac..ffce816572 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 @@ -4,10 +4,10 @@ import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; /** - * @uiName Reward Table Source Column + * @uiName Rewards Table Source Column * @validParents ["sqm-rewards-table"] * @exampleGroup Rewards - * @example Reward Table Source Column - + * @example Source Column - */ @Component({ tag: "sqm-rewards-table-source-column", 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 69938c06f8..9f6636ee70 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 @@ -7,7 +7,7 @@ import { RewardTableColumn } from "./RewardTableColumn"; * @uiName Reward Table Status Column * @validParents ["sqm-rewards-table"] * @exampleGroup Rewards - * @example Reward Table Status Column - + * @example Status Column - */ @Component({ tag: "sqm-rewards-table-status-column", 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 - 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/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..843e30b5e8 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" \| "default" \| "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" \| "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..b4813e2f9f 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; @@ -69,17 +70,32 @@ const style = { const sheet = createStyleSheet(style); const styleString = sheet.toString(); +// TODO: Figure out hover and active states +// *::part(base):hover { +// border-color: ${ +// props.backgroundcolor +// ? props.backgroundcolor +// : props.medium +// ? medium[props.medium].color +// : "" +// }!important; +// } + +// *::part(base):focus { +// border-color: ${ +// props.backgroundcolor +// ? props.backgroundcolor +// : props.medium +// ? medium[props.medium].color +// : "" +// }!important; +// } + 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"}; + background: ${ props.backgroundcolor @@ -98,25 +114,7 @@ export function ShareButtonView(props: ShareButtonViewProps, children: VNode) { border-radius: ${props.borderradius ? props.borderradius + "px" : ""}; } - *::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 +138,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..025b23d5f7 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 (default is set to 1px solid transparent) | `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, secondary, or tertiary). | `"primary" \| "secondary" \| "tertiary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary" \| "tertiary"; 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..4bf9ad909c 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 - */ @@ -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, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" | "tertiary" = "primary"; + + /** + * Border color of share link container (default is set to 1px solid transparent) + * @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..8dc3933b6d 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,19 @@ 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 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..74159b07f1 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 (default is set to 1px solid transparent) | `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, secondary, or tertiary). | `"primary" \| "secondary" \| "tertiary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Link"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary" \| "tertiary"; 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..e7cb1fc6c2 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 @@ -52,6 +52,7 @@ export class ShareLink { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ @Prop({ attribute: "text-align", @@ -66,13 +67,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 (default is set to 1px solid transparent) + * @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, secondary, or tertiary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary", "tertiary"] + * @uiEnumNames ["Primary", "Secondary", "Tertiary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" | "tertiary" = "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", @@ -108,7 +156,12 @@ function useDemoShareLink(props: ShareLink): CopyTextViewProps { 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..e98685aff6 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" + : "1px solid var(--sqm-text-subdued)", "padding-right": divideSpace(), }, "& > :last-child": { "border-right": "none", }, "& > ::slotted(*)": { - "border-right": "1px solid #EAEAEA", + "border-right": props.hideBorder + ? "none" + : "1px solid var(--sqm-text-subdued)", "padding-right": divideSpace(), - height: "100%", }, "& > ::slotted(*:last-child)": { "border-right": "none", 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..87f8dc9a4e --- /dev/null +++ b/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx @@ -0,0 +1,242 @@ +import { Component, State, h, Host } from "@stencil/core"; +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: BrandingConfig = + 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"; + }} + /> +
+ ))} +
+
+ + ); + } +} diff --git a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx index 90d0a70eb7..e17666f5ea 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx +++ b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx @@ -13,39 +13,323 @@ import { autoColorScaleCss } from "./AutoColor"; // -export const Default = ` - // No CSS -`; +export const Default = null; -export const Orangey = ` -:root{ - ${autoColorScaleCss("orange")} -} -`; +export const Netflix: BrandingConfig = { + font: { + font: "Netflix Sans, Arial, sans-serif", + textColor: "white", + secondaryTextColor: "#B3B3B3", + }, + border: { + color: "#333333", + radius: "4px", + thickness: "1px", + }, + color: { + primaryColor: "#E50914", + background: "#101010", + accentColorShades: { + text: "#E50914", + icon: "#E50914", + border: "#E50914", + background: "#300609", + iconAndBadge: "#E50914", + }, + success: { + text: "#66BB6A", + icon: "#4CAF50", + border: "#4CAF50", + background: "#1B5E20", + iconAndBadge: "#4CAF50", + }, + warning: { + text: "#FFCA28", + icon: "#FFA726", + border: "#FFA726", + background: "#F57C00", + iconAndBadge: "#FFA726", + }, + critical: { + text: "#EF9A9A", + icon: "#E50914", + border: "#E50914", + background: "#B71C1C", + iconAndBadge: "#E50914", + }, + informative: { + text: "#64B5F6", + icon: "#42A5F5", + border: "#42A5F5", + background: "#1976D2", + iconAndBadge: "#42A5F5", + }, + neutral: { + text: "white", + icon: "#B3B3B3", + border: "#333333", + background: "#222222", + iconAndBadge: "#B3B3B3", + }, + }, + primaryButton: { + buttonColor: "#E50914", + buttonTextColor: "#FFFFFF", + borderRadius: "4px", + buttonBorderColor: "transparent", + hoverColor: "#CC0000", + hoverTextColor: "#FFFFFF", + }, + secondaryButton: { + buttonColor: "transparent", + buttonTextColor: "#FFFFFF", + buttonBorderColor: "#B3B3B3", + borderRadius: "4px", + hoverColor: "#333333", + hoverTextColor: "#FFFFFF", + }, + tertiaryButton: { + buttonColor: "transparent", + buttonTextColor: "#FFFFFF", + borderRadius: "4px", + }, + inputs: { + background: "#222222", + borderColor: "#B3B3B3", + borderRadius: "4px", + textColor: "white", + labelColor: "#B3B3B3", + borderThickness: "1px", + disabledBackground: "#333333", + disabledTextColor: "#777777", + labelFontSize: "14px", + focusBorderColor: "#E50914", + hoverBorderColor: "#777777", + }, +}; -export const Netflix = ` -:root{ - ${autoColorScaleCss("#e50914")} -} -`; +export const Amazon: BrandingConfig = { + font: { + font: "Amazon Ember, Arial, sans-serif", + textColor: "#2f2f2f", + secondaryTextColor: "#565959", + }, + border: { + color: "#d5d9d9", + radius: "4px", + thickness: "1px", + }, + color: { + primaryColor: "#FF9900", + background: "#ffffff", + accentColorShades: { + text: "#FF9900", + icon: "#FF9900", + border: "#FFBF66", + background: "#FFF4DD", + iconAndBadge: "#FF9900", + }, + success: { + text: "#198754", + icon: "#28A745", + border: "#BCE8B2", + background: "#D4EDDA", + iconAndBadge: "#28A745", + }, + warning: { + text: "#856404", + icon: "#FFC107", + border: "#FFEBA2", + background: "#FFF3CD", + iconAndBadge: "#FFC107", + }, + critical: { + text: "#721C24", + icon: "#DC3545", + border: "#F5C6CB", + background: "#F8D7DA", + iconAndBadge: "#DC3545", + }, + informative: { + text: "#004085", + icon: "#007BFF", + border: "#B8DAFF", + background: "#CCE5FF", + iconAndBadge: "#007BFF", + }, + neutral: { + text: "#232F3E", + icon: "#565959", + border: "#D5D9D9", + background: "#F0F2F2", + iconAndBadge: "#565959", + }, + }, + primaryButton: { + buttonColor: "#FF9900", + buttonTextColor: "#FFFFFF", + borderRadius: "7px", + buttonBorderColor: "transparent", + hoverColor: "#EB9100", + hoverTextColor: "#FFFFFF", + }, + secondaryButton: { + buttonColor: "#FFFFFF", + buttonTextColor: "#232F3E", + buttonBorderColor: "#888C8C", + borderRadius: "7px", + hoverColor: "#F0F2F2", + hoverTextColor: "#232F3E", + }, + tertiaryButton: { + buttonColor: "transparent", + buttonTextColor: "#007185", + borderRadius: "7px", + }, + inputs: { + background: "#FFFFFF", + borderColor: "#D5D9D9", + borderRadius: "3px", + textColor: "#2f2f2f", + labelColor: "#565959", + borderThickness: "1px", + disabledBackground: "#EAEDED", + disabledTextColor: "#888C8C", + labelFontSize: "14px", + focusBorderColor: "#007185", + hoverBorderColor: "#A2A2A2", + }, + // widgetSize would need specific values based on context, so keeping as default if not provided + // widgetSize: { + // embeddedWidgets: {}, + // popupWidgets: {}, + // }, +}; -export const SaaSquatchCorporate = ` -:root{ - ${autoColorScaleCss("#65bd60")} - --sl-font-sans: Arial; -} -`; +export const Spotify: BrandingConfig = { + font: { + textColor: "white", + }, + color: { + background: "#121212", + accentColorShades: { + iconAndBadge: "#1ed760", + }, + }, + primaryButton: { + buttonColor: "#1ed760", + buttonTextColor: "#121212", + borderRadius: "30px", + buttonBorderColor: "transparent", + hoverColor: "#1DB954", + hoverTextColor: "#121212", + }, + secondaryButton: { + buttonColor: "#191414", + buttonTextColor: "#FFFFFF", + buttonBorderColor: "#FFFFFF", + borderRadius: "30px", + hoverColor: "#282828", + hoverTextColor: "#121212", + }, + inputs: { + background: "#121212", + borderColor: "#7c7c7c", + borderThickness: "1px", + borderRadius: "30px", + textColor: "#fff", + focusBorderColor: "white", + labelColor: "white", + hoverBorderColor: "white", + labelFontSize: "18px", + disabledTextColor: "white", + disabledBackground: "#303030", + }, +}; -export const NYTimes = ` -:root{ - ${autoColorScaleCss("black")} - --sl-font-sans: Georgia, 'Times New Roman', serif; -} -`; - -export const Klip = ` -:root{ - ${autoColorScaleCss("#4225C4")}; -} - -`; +export const Google: BrandingConfig = { + color: { + primaryColor: "#4285F4", + background: "#FFFFFF", + accentColorShades: { + text: "#1A73E8", + border: "#8AB4F8", + background: "#E8F0FE", + iconAndBadge: "#4285F4", + }, + success: { + text: "#044e1d", + border: "#A8DCD7", + background: "#E6F4EA", + iconAndBadge: "#34A853", + }, + warning: { + text: "#996a3d", + border: "#FCD667", + background: "#FFF7EE", + iconAndBadge: "#FBBC04", + }, + critical: { + text: "#760b09", + border: "#F28B82", + background: "#FCE8E6", + iconAndBadge: "#EA4335", + }, + informative: { + text: "#01368c", + border: "#A8DCD7", + background: "#E8F0FE", + iconAndBadge: "#4285F4", + }, + neutral: { + text: "#202124", + border: "#DADCE0", + background: "#F8F9FA", + iconAndBadge: "#5F6368", + }, + }, + border: { + color: "#DADCE0", + radius: "8px", + thickness: "1px", + }, + font: { + font: "Roboto, Arial, sans-serif", + textColor: "#212124", + secondaryTextColor: "#5F6368", + }, + primaryButton: { + buttonColor: "#4285F4", + buttonTextColor: "#FFFFFF", + borderRadius: "4px", + buttonBorderColor: "transparent", + hoverColor: "#3C7CD1", + hoverTextColor: "#FFFFFF", + }, + secondaryButton: { + buttonColor: "#FFFFFF", + buttonTextColor: "#4285F4", + buttonBorderColor: "#DADCE0", + borderRadius: "4px", + hoverColor: "#E8F0FE", + hoverTextColor: "#4285F4", + }, + tertiaryButton: { + buttonColor: "transparent", + buttonTextColor: "#4285F4", + borderRadius: "4px", + }, + inputs: { + background: "#FFFFFF", + borderColor: "#DADCE0", + borderThickness: "1px", + borderRadius: "8px", + textColor: "#202124", + focusBorderColor: "#4285F4", + labelColor: "#5F6368", + hoverBorderColor: "#9AA0A6", + labelFontSize: "12px", + disabledTextColor: "#9AA0A6", + disabledBackground: "#F1F3F4", + }, +}; diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md index 739f10e3ee..803ce9d21a 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/readme.md +++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md @@ -9,12 +9,13 @@ ### Depends on +- [sqm-brand-selector](.) - [sqm-share-button](../sqm-share-button) - [sqm-empty](../sqm-empty) - [sqm-pagination](../sqm-pagination) - [sqm-share-link](../sqm-share-link) -- [sqm-stat-container](../sqm-stat-container) - [sqm-big-stat](../sqm-big-stat) +- [sqm-stat-container](../sqm-stat-container) - [sqm-text](../sqm-text) - [sqm-image](../sqm-image) - [sqm-leaderboard](../sqm-leaderboard) @@ -101,12 +102,13 @@ ### Graph ```mermaid graph TD; + sqm-stencilbook --> sqm-brand-selector sqm-stencilbook --> sqm-share-button sqm-stencilbook --> sqm-empty sqm-stencilbook --> sqm-pagination sqm-stencilbook --> sqm-share-link - sqm-stencilbook --> sqm-stat-container sqm-stencilbook --> sqm-big-stat + sqm-stencilbook --> sqm-stat-container sqm-stencilbook --> sqm-text sqm-stencilbook --> sqm-image sqm-stencilbook --> sqm-leaderboard diff --git a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx index 26e12c6f9d..652d781313 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx +++ b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx @@ -32,7 +32,6 @@ import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgo import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories"; import * as PortalResetPassword from "../sqm-portal-reset-password/PortalResetPassword.stories"; import * as PortalVerifyEmail from "../sqm-portal-verify-email/PortalVerifyEmail.stories"; -import * as AssetCard from "../sqm-asset-card/AssetCard.stories"; import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories"; import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories"; import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories"; @@ -95,9 +94,9 @@ import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScr import * as PayoutStatusAlert from "../tax-and-cash/sqm-payout-status-alert/PayoutStatusAlert.stories"; import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories"; import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories"; -import * as PortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories"; import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories"; import * as QRCode from "../sqm-qr-code/QRCode.stories"; +import * as Text from "../sqm-text/Text.stories"; import * as Themes from "./Themes"; import { CucumberAddon } from "./CucumberAddon"; @@ -137,7 +136,6 @@ const stories = [ PortalEmailVerification, PortalResetPassword, PortalVerifyEmail, - AssetCard, DividedLayout, ChangePassword, PortalProfile, @@ -195,13 +193,13 @@ const stories = [ NewPortalRegistrationForm, ChangeMarketing, BaseRegistrationForm, - PortalRegistrationForm, PortalGoogleRegistrationFormStories, WidgetEmailVerification, WidgetCodeVerification, PayoutButtonScroll, PayoutStatusAlert, QRCode, + Text, ]; /** @@ -233,7 +231,7 @@ export class StencilStorybook { const theme = Themes[selectedTheme]; return ( -
{t} ))} -
-
-
- -
- setCheckerboard(!checkerboard)} - onChange={() => - document.documentElement.style.setProperty( - "--checker-color-1", - checkerboard ? "#ebebeb" : "#ffffff00" - ) - } - > - -
- - +
*/} + + {/* */} + {/* */} {children} @@ -291,7 +273,7 @@ function ColorToken({ type = "primary" }: { type?: string }) { return ( ( >
); +export const CustomColor = () => ( +
+ This is the general tab + This is the custom tab + This is the advanced tab + + `} + >
+); + export const ManyTabs = () => (
= ({ content, placement, + textColor = "var(--sqm-text)", }) => { // Vertical padding for top & bottom placement, horizontal for left & right. const padding = @@ -22,6 +24,18 @@ export const TabsView: FunctionalComponent = ({ sl-tab-panel::part(base) { padding: ${padding}; } + + sl-tab::part(base) { + color: ${textColor}; + } + + sl-tab-group { + --sl-color-primary-500: var(--sqm-accent-color-icon); + } + + sl-tab-group::part(tabs) { + border-bottom: 2px solid var(--sqm-border-color); + } `; return ( @@ -43,6 +57,7 @@ export const TabsView: FunctionalComponent = ({ {tab.getAttribute("header")} 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..5ea41cb8fe 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 @@ -26,6 +28,15 @@ export class Tabs { */ @Prop() placement?: "left" | "right" | "bottom" | "top"; + /** + * Tab text color + * + * @uiName Text color + * @uiType string + * @uiWidget color + */ + @Prop() textColor?: string; + constructor() { withHooks(this); } @@ -34,10 +45,10 @@ export class Tabs { render() { const { content } = useTabs(); - const { placement } = getProps(this); + const { placement, textColor } = getProps(this); return ( - + ); diff --git a/packages/mint-components/src/components/sqm-task-card/DetailsView.tsx b/packages/mint-components/src/components/sqm-task-card/DetailsView.tsx index 71a5a16330..31cbbd7c2e 100644 --- a/packages/mint-components/src/components/sqm-task-card/DetailsView.tsx +++ b/packages/mint-components/src/components/sqm-task-card/DetailsView.tsx @@ -3,6 +3,13 @@ import { createStyleSheet } from "../../styling/JSS"; export const style = { Description: { + "& .icon": { + color: "var(--sqm-text)", + + "&:hover": { + color: "var(--sqm-accent-color-icon)", + }, + }, "& input[type=checkbox]": { display: "none", }, @@ -13,7 +20,7 @@ export const style = { position: "absolute", top: "var(--sl-spacing-medium)", right: "var(--sl-spacing-medium)", - color: "var(--sl-color-neutral-700)", + color: "var(--sqm-text)", fontSize: "var(--sl-font-size-large)", "& :hover": { color: "var(--sl-color-primary-700)", @@ -54,6 +61,7 @@ export function Details(props): VNode {