diff --git a/packages/bedrock-components/.prettierrc.json b/packages/bedrock-components/.prettierrc.json index 7ca3a28a9c..26921ea0f2 100644 --- a/packages/bedrock-components/.prettierrc.json +++ b/packages/bedrock-components/.prettierrc.json @@ -6,7 +6,7 @@ "quoteProps": "consistent", "printWidth": 180, "semi": true, - "singleQuote": true, + "singleQuote": false, "tabWidth": 2, "trailingComma": "all", "useTabs": false diff --git a/packages/bedrock-components/package-lock.json b/packages/bedrock-components/package-lock.json index da523f13ee..67ab4222f8 100644 --- a/packages/bedrock-components/package-lock.json +++ b/packages/bedrock-components/package-lock.json @@ -1,16 +1,16 @@ { "name": "@saasquatch/bedrock-components", - "version": "1.4.10", + "version": "1.4.12-8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/bedrock-components", - "version": "1.4.10", + "version": "1.4.12-8", "hasInstallScript": true, "license": "MIT", "dependencies": { - "@raisins/stencil-docs-target": "^1.1.0", + "@raisins/stencil-docs-target": "^1.2.0-1", "@saasquatch/component-boilerplate": "^1.6.9", "@saasquatch/dom-context-hooks": "^1.0.5", "@saasquatch/stencil-hooks": "^2.0.2", @@ -2540,9 +2540,9 @@ "integrity": "sha512-2iJ55xu+h+GluW86YJB+kuOIOESk90sEHOR9UuzKSguWGntxtoFEUeWjca2oUZKjv5VB2l13GoRV47AQXrKhJQ==" }, "node_modules/@raisins/stencil-docs-target": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.1.0.tgz", - "integrity": "sha512-R+r3iKKSgsytHmCFzVQbqx+UKBQj82yxQzForGtWi3F2L4m6IRNYG027paXGnhZnHh2iCFlX0s0kCAQjbYFK4A==", + "version": "1.2.0-1", + "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.2.0-1.tgz", + "integrity": "sha512-0jLwYw4iByASwqzJrYRRZVcwB62kHxBSRw4wFBxKdBtqTBUxGGYObu5+ZCkFSkHtXcmjUFq6pbVMFknOR2ZkIQ==", "dependencies": { "@raisins/schema": "^1.1.0" }, @@ -13950,9 +13950,9 @@ "integrity": "sha512-2iJ55xu+h+GluW86YJB+kuOIOESk90sEHOR9UuzKSguWGntxtoFEUeWjca2oUZKjv5VB2l13GoRV47AQXrKhJQ==" }, "@raisins/stencil-docs-target": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.1.0.tgz", - "integrity": "sha512-R+r3iKKSgsytHmCFzVQbqx+UKBQj82yxQzForGtWi3F2L4m6IRNYG027paXGnhZnHh2iCFlX0s0kCAQjbYFK4A==", + "version": "1.2.0-1", + "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.2.0-1.tgz", + "integrity": "sha512-0jLwYw4iByASwqzJrYRRZVcwB62kHxBSRw4wFBxKdBtqTBUxGGYObu5+ZCkFSkHtXcmjUFq6pbVMFknOR2ZkIQ==", "requires": { "@raisins/schema": "^1.1.0" } diff --git a/packages/bedrock-components/package.json b/packages/bedrock-components/package.json index e002a2c43a..704eb7ef9e 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.12-8", "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", @@ -35,7 +35,7 @@ "postinstall": "patch-package" }, "dependencies": { - "@raisins/stencil-docs-target": "^1.1.0", + "@raisins/stencil-docs-target": "^1.2.0-1", "@saasquatch/component-boilerplate": "^1.6.9", "@saasquatch/dom-context-hooks": "^1.0.5", "@saasquatch/stencil-hooks": "^2.0.2", diff --git a/packages/bedrock-components/src/components.d.ts b/packages/bedrock-components/src/components.d.ts index 147267bd6c..7d421c866c 100644 --- a/packages/bedrock-components/src/components.d.ts +++ b/packages/bedrock-components/src/components.d.ts @@ -9,6 +9,11 @@ import { FunctionalComponent } from "@stencil/core"; import { DemoData } from "./global/demo"; export namespace Components { interface SqbAuthTemplateSwitch { + /** + * @componentState { "title": "Sign up form", "slot": "logged-out", "props": { "overrideToken": false } } + * @componentState { "title": "Referral & Reward info", "slot": "logged-in", "props": { "overrideToken": true } } + */ + "stateController": string; } interface SqbConditionalSection { /** @@ -127,6 +132,11 @@ declare global { } declare namespace LocalJSX { interface SqbAuthTemplateSwitch { + /** + * @componentState { "title": "Sign up form", "slot": "logged-out", "props": { "overrideToken": false } } + * @componentState { "title": "Referral & Reward info", "slot": "logged-in", "props": { "overrideToken": true } } + */ + "stateController"?: string; } interface SqbConditionalSection { /** diff --git a/packages/bedrock-components/src/components/sqb-auth-template-switch/readme.md b/packages/bedrock-components/src/components/sqb-auth-template-switch/readme.md index 94211fa6e4..8d0a8d6e97 100644 --- a/packages/bedrock-components/src/components/sqb-auth-template-switch/readme.md +++ b/packages/bedrock-components/src/components/sqb-auth-template-switch/readme.md @@ -5,6 +5,13 @@ +## Properties + +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | ----------- | -------- | ------- | +| `stateController` | `state-controller` | | `string` | `"{}"` | + + ## Dependencies ### Used by diff --git a/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.feature b/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.feature index 04d689660d..e230cb01fd 100644 --- a/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.feature +++ b/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.feature @@ -74,3 +74,18 @@ Feature: Switch Templates based on Authentication status | isOrIsNot | templateType | | is | "logged-in" | | is not | "logged-out" | + + + @motivating + Scenario: sqb-auth-template-switch editor states + Given html is loaded into a raisins editor + And the html includes "" + When "sqb-auth-template-switch" is selected in the editor + Then the following states are displayed + | state | + | Logged in | + | Logged out | + When "Logged in" is selected + Then "sqb-auth-template-switch" displays whatever is slotted in the template slot "logged-in" + When "Logged out" is selected + Then "sqb-auth-template-switch" displays whatever is slotted in the template slot "logged-out" diff --git a/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.tsx b/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.tsx index baa4f89fea..db51593061 100644 --- a/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.tsx +++ b/packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.tsx @@ -1,18 +1,24 @@ -import { withHooks } from '@saasquatch/stencil-hooks'; -import { Component, h, Host } from '@stencil/core'; -import { useAuthTemplateSwitch } from './useAuthTemplateSwitch'; +import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, h, Host, Prop } from "@stencil/core"; +import { useAuthTemplateSwitch } from "./useAuthTemplateSwitch"; /** * Displays "logged-out" content if no valid user is set, otherwise displays "logged-in" content * * @uiName Auth Template Switcher - * @slots [{"name":"logged-out","title":"Logged out template"}, {"name": "logged-in", "title": "Logged in template"}] + * @slots [{"name":"logged-out","title":"Logged out template"},{"name":"logged-in","title":"Logged in template"}] * @canvasRenderer always-replace */ @Component({ - tag: 'sqb-auth-template-switch', + tag: "sqb-auth-template-switch", }) export class SqbAuthTemplateSwitch { + /** + * @componentState { "title": "Sign up form", "slot": "logged-out", "props": { "overrideToken": false } } + * @componentState { "title": "Referral & Reward info", "slot": "logged-in", "props": { "overrideToken": true } } + */ + @Prop() stateController: string = "{}"; + constructor() { withHooks(this); } @@ -20,11 +26,12 @@ export class SqbAuthTemplateSwitch { disconnectedCallback() {} render() { - const { setContainer, setSlot } = useAuthTemplateSwitch(); + const stateProps = JSON.parse(this.stateController)["sqb-auth-template-switch"]; + const { setContainer, setSlot } = useAuthTemplateSwitch(stateProps?.overrideToken); return ( -
+
diff --git a/packages/bedrock-components/src/components/sqb-auth-template-switch/useAuthTemplateSwitch.ts b/packages/bedrock-components/src/components/sqb-auth-template-switch/useAuthTemplateSwitch.ts index c1a7b443fa..b8eb4e724f 100644 --- a/packages/bedrock-components/src/components/sqb-auth-template-switch/useAuthTemplateSwitch.ts +++ b/packages/bedrock-components/src/components/sqb-auth-template-switch/useAuthTemplateSwitch.ts @@ -1,21 +1,21 @@ -import { useToken } from '@saasquatch/component-boilerplate'; -import { useCallback, useEffect, useState } from '@saasquatch/universal-hooks'; -import debugFn from 'debug'; -import { useTemplateChildren } from '../../utils/useTemplateChildren'; -const debug = debugFn('sq:useAuthTemplateSwitch'); +import { isDemo, useToken } from "@saasquatch/component-boilerplate"; +import { useCallback, useEffect, useState } from "@saasquatch/universal-hooks"; +import debugFn from "debug"; +import { useTemplateChildren } from "../../utils/useTemplateChildren"; +const debug = debugFn("sq:useAuthTemplateSwitch"); -export function useAuthTemplateSwitch() { - const authToken = useToken(); +export function useAuthTemplateSwitch(overrideToken?: boolean) { + const authToken = useToken() || (isDemo() && overrideToken); const [container, setContainer] = useState(undefined); const [slot, setSlot] = useState(undefined); - if (!authToken) debug('No user identity available'); + if (!authToken) debug("No user identity available"); const updateTemplates = useCallback(() => { const isAuth = !!authToken; const templates = slot.querySelectorAll(`template`); - const template = Array.from(templates).find(t => t.slot === (isAuth ? 'logged-in' : 'logged-out')); + const template = Array.from(templates).find(t => t.slot === (isAuth ? "logged-in" : "logged-out")); if (template) { // use outerHTML if template's innerHTML is unset (only happens in Stencilbook) @@ -29,51 +29,51 @@ export function useAuthTemplateSwitch() { } } - const plopTargets = Array.from(slot.children).filter(el => el.tagName === 'RAISINS-PLOP-TARGET'); + const plopTargets = Array.from(slot.children).filter(el => el.tagName === "RAISINS-PLOP-TARGET"); // if editing in raisins if (plopTargets.length) { - const loggedInPlopTargets = plopTargets.filter(el => el.slot === 'logged-in'); + const loggedInPlopTargets = plopTargets.filter(el => el.slot === "logged-in"); - const loggedOutPlopTargets = plopTargets.filter(el => el.slot === 'logged-out'); + const loggedOutPlopTargets = plopTargets.filter(el => el.slot === "logged-out"); loggedOutPlopTargets.forEach((target: HTMLElement, i) => { if (isAuth) { - target.style.display = 'none'; + target.style.display = "none"; return; } // Place last plop target at the bottom of the parent if (i === loggedOutPlopTargets.length - 1) { - target.style.bottom = '0px'; - target.style.left = '0px'; - target.style.right = '0px'; - target.style.position = 'absolute'; + target.style.bottom = "0px"; + target.style.left = "0px"; + target.style.right = "0px"; + target.style.position = "absolute"; } - target.style.height = '25px'; + target.style.height = "25px"; }); loggedInPlopTargets.forEach((target: HTMLElement, i) => { if (!isAuth) { - target.style.display = 'none'; + target.style.display = "none"; return; } // Place last plop target at the bottom of the parent if (i === loggedInPlopTargets.length - 1) { - target.style.bottom = '0px'; - target.style.left = '0px'; - target.style.right = '0px'; - target.style.position = 'absolute'; + target.style.bottom = "0px"; + target.style.left = "0px"; + target.style.right = "0px"; + target.style.position = "absolute"; } - target.style.height = '25px'; + target.style.height = "25px"; }); } }, [container, slot, authToken]); useEffect(() => { if (!container || !slot) { - debug('DOM not ready:'); + debug("DOM not ready:"); return; } 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..a398b98be9 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 @@ -1,7 +1,7 @@ -import { isDemo } from '@saasquatch/component-boilerplate'; -import { withHooks } from '@saasquatch/stencil-hooks'; -import { Component, Host, h, Prop } from '@stencil/core'; -import { useConditionalSection, UseConditionalSection } from './useConditonalSection'; +import { isDemo } from "@saasquatch/component-boilerplate"; +import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, Host, h, Prop } from "@stencil/core"; +import { useConditionalSection, UseConditionalSection } from "./useConditonalSection"; /** * Only displayed for certain users. Hides content if not available. @@ -9,11 +9,12 @@ 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!

 + * @validParents ["sqm-portal-container","div","template","sqm-instant-access-registration","sqb-program-section"] + * @example Conditional Area / Segment -

Add your conditional content here!

 + * @example Conditional Area / Field -

Add your conditional content here!

 */ @Component({ - tag: 'sqb-conditional-section', + tag: "sqb-conditional-section", shadow: true, }) export class SqbConditionalSection { @@ -34,7 +35,7 @@ export class SqbConditionalSection { render() { const props = isDemo() ? useDemoHook() : useConditionalSection({ expression: this.condition }); - const display = props.shouldDisplay ? 'contents' : 'none'; + const display = props.shouldDisplay ? "contents" : "none"; return ( diff --git a/packages/bedrock-components/src/components/sqb-program-section/sqb-program-section.tsx b/packages/bedrock-components/src/components/sqb-program-section/sqb-program-section.tsx index 4bfef1cbc0..9ecc84f6bc 100644 --- a/packages/bedrock-components/src/components/sqb-program-section/sqb-program-section.tsx +++ b/packages/bedrock-components/src/components/sqb-program-section/sqb-program-section.tsx @@ -1,14 +1,14 @@ -import { withHooks } from '@saasquatch/stencil-hooks'; -import { Component, Host, h, Prop, State, Element } from '@stencil/core'; -import { ContextProvider } from 'dom-context'; -import { useEffect } from '@saasquatch/universal-hooks'; -import { isDemo } from '@saasquatch/component-boilerplate'; -import { useProgramSection } from './useProgramSection'; +import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, Host, h, Prop, State, Element } from "@stencil/core"; +import { ContextProvider } from "dom-context"; +import { useEffect } from "@saasquatch/universal-hooks"; +import { isDemo } from "@saasquatch/component-boilerplate"; +import { useProgramSection } from "./useProgramSection"; /** * Matches @saasquatch/component-environment */ -const PROGRAM_CONTEXT = 'sq:program-id'; +const PROGRAM_CONTEXT = "sq:program-id"; /** * Use this with other components like share buttons, referral lists @@ -16,10 +16,11 @@ const PROGRAM_CONTEXT = 'sq:program-id'; * @uiName Program Section * @exampleGroup Advanced * @slots [{"name":"","title":"Section Content"}] + * @validParents ["sqm-portal-container","div","template","sqm-instant-access-registration","sqb-program-section", "sqm-portal-frame"] * @example Program Section - Add your program specific content here! */ @Component({ - tag: 'sqb-program-section', + tag: "sqb-program-section", shadow: true, }) export class SqbProgramSection { @@ -44,7 +45,7 @@ export class SqbProgramSection { initialState: this.programId, }); this.provider.start(); - this.el.addEventListener('sq:update-program-id', (e: CustomEvent) => (this.provider.context = e.detail)); + this.el.addEventListener("sq:update-program-id", (e: CustomEvent) => (this.provider.context = e.detail)); withHooks(this); } @@ -61,7 +62,7 @@ export class SqbProgramSection { }, [programId]); return ( - + ); 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 48f4c135c7..9fd712c7ef 100644 --- a/packages/mint-components/package-lock.json +++ b/packages/mint-components/package-lock.json @@ -1,16 +1,16 @@ { "name": "@saasquatch/mint-components", - "version": "1.15.3", + "version": "2.0.0-62", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@saasquatch/mint-components", - "version": "1.15.3", + "version": "2.0.0-62", "hasInstallScript": true, "license": "MIT", "dependencies": { - "@raisins/stencil-docs-target": "^1.1.1", + "@raisins/stencil-docs-target": "^1.2.0-2", "@saasquatch/component-boilerplate": "^1.6.9", "@saasquatch/dom-context-hooks": "^1.0.5", "@saasquatch/shoelace": "^1.0.0", @@ -55,6 +55,7 @@ "clipboard": "^1.7.1", "cross-env": "^7.0.2", "docx": "^5.4.1", + "http-server": "^14.1.1", "jest": "^26.6.3", "jest-cli": "^26.6.3", "jest-config": "^26.6.3", @@ -2878,11 +2879,12 @@ "integrity": "sha512-CETDvvyfKS9sDUax9Pkc/hEzc2Dc9w1EpGHWB69CYQAB4QDsNe7NNjk35NB4ADgz1Hz2yenq30J6YNu9P8BKPw==" }, "node_modules/@raisins/stencil-docs-target": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.1.1.tgz", - "integrity": "sha512-54Vi59qCzsN4lKuQ4ZIZqTa5KDu5PwfJgELa3oBnn7hsFfRWEbrgB3mko6G4REqwI09Huzebe/5Zi9uMBNz5BQ==", + "version": "1.2.0-2", + "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.2.0-2.tgz", + "integrity": "sha512-x52+azcjAWHBiCNbS4RwH2X91bt+dqKQ4O47JEveDigRh7kwxVH25rir0K64Th2m9H94RvOjXuv/YogWBEHfow==", + "license": "MIT", "dependencies": { - "@raisins/schema": "^1.1.1" + "@raisins/schema": "^1.1.0" }, "engines": { "node": ">=10" @@ -3683,6 +3685,12 @@ "node": ">=4" } }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "dev": true + }, "node_modules/asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -4183,6 +4191,18 @@ } ] }, + "node_modules/basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dev": true, + "dependencies": { + "safe-buffer": "5.1.2" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/basic-ftp": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz", @@ -4355,6 +4375,34 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "dev": true, + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caller-callsite": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", @@ -4776,6 +4824,15 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "node_modules/corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", + "dev": true, + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/cosmiconfig": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", @@ -5613,6 +5670,19 @@ "node": ">=8" } }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/duplexer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", @@ -5712,6 +5782,33 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/es-to-primitive": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", @@ -6334,6 +6431,26 @@ "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz", "integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==" }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -6412,9 +6529,12 @@ } }, "node_modules/function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } }, "node_modules/generic-names": { "version": "2.0.1", @@ -6442,13 +6562,23 @@ } }, "node_modules/get-intrinsic": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", - "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", "dependencies": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1" + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -6469,6 +6599,18 @@ "node": ">=8.0.0" } }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -6616,6 +6758,17 @@ "delegate": "^3.1.2" } }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/graceful-fs": { "version": "4.2.6", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", @@ -6715,9 +6868,9 @@ } }, "node_modules/has-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", - "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", "engines": { "node": ">= 0.4" }, @@ -6788,6 +6941,17 @@ "node": ">=0.10.0" } }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, "node_modules/haunted": { "version": "4.8.2", "resolved": "https://registry.npmjs.org/haunted/-/haunted-4.8.2.tgz", @@ -6797,6 +6961,15 @@ "lit-html": "^1.0.0" } }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true, + "bin": { + "he": "bin/he" + } + }, "node_modules/hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -6844,6 +7017,20 @@ "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", "dev": true }, + "node_modules/http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dev": true, + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/http-proxy-agent": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", @@ -6858,6 +7045,139 @@ "node": ">= 6" } }, + "node_modules/http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "dev": true, + "dependencies": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + }, + "bin": { + "http-server": "bin/http-server" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/http-server/node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/http-server/node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/http-server/node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/http-server/node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/http-server/node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/http-server/node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "dev": true, + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/http-server/node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/http-server/node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/http-server/node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "dev": true, + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/https-proxy-agent": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", @@ -9988,6 +10308,14 @@ "node": ">= 12" } }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "engines": { + "node": ">= 0.4" + } + }, "node_modules/maxmin": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz", @@ -10174,6 +10502,18 @@ "node": ">=8.6" } }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true, + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, "node_modules/mime-db": { "version": "1.48.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz", @@ -10574,9 +10914,12 @@ } }, "node_modules/object-inspect": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz", - "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==", + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -10701,6 +11044,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "dev": true, + "bin": { + "opener": "bin/opener-bin.js" + } + }, "node_modules/os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", @@ -11249,6 +11601,42 @@ "node": ">=8" } }, + "node_modules/portfinder": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.37.tgz", + "integrity": "sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==", + "dev": true, + "dependencies": { + "async": "^3.2.6", + "debug": "^4.3.6" + }, + "engines": { + "node": ">= 10.12" + } + }, + "node_modules/portfinder/node_modules/debug": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", + "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "dev": true, + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/portfinder/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + }, "node_modules/posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -13177,8 +13565,23 @@ "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=", "engines": { - "node": ">=0.6.0", - "teleport": ">=0.2.0" + "node": ">=0.6.0", + "teleport": ">=0.2.0" + } + }, + "node_modules/qs": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", + "dev": true, + "dependencies": { + "side-channel": "^1.1.0" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/queue-microtask": { @@ -13398,6 +13801,12 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true + }, "node_modules/resolve": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", @@ -14059,6 +14468,12 @@ "node": ">=10" } }, + "node_modules/secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==", + "dev": true + }, "node_modules/select": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", @@ -14166,6 +14581,78 @@ "integrity": "sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==", "dev": true }, + "node_modules/side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "dev": true, + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "dev": true, + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "dev": true, + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -15296,6 +15783,18 @@ "node": ">=4" } }, + "node_modules/union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dev": true, + "dependencies": { + "qs": "^6.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, "node_modules/union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", @@ -15389,6 +15888,12 @@ "deprecated": "Please see https://github.com/lydell/urix#deprecated", "dev": true }, + "node_modules/url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", + "dev": true + }, "node_modules/urlpattern-polyfill": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz", @@ -18030,11 +18535,11 @@ "integrity": "sha512-CETDvvyfKS9sDUax9Pkc/hEzc2Dc9w1EpGHWB69CYQAB4QDsNe7NNjk35NB4ADgz1Hz2yenq30J6YNu9P8BKPw==" }, "@raisins/stencil-docs-target": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.1.1.tgz", - "integrity": "sha512-54Vi59qCzsN4lKuQ4ZIZqTa5KDu5PwfJgELa3oBnn7hsFfRWEbrgB3mko6G4REqwI09Huzebe/5Zi9uMBNz5BQ==", + "version": "1.2.0-2", + "resolved": "https://registry.npmjs.org/@raisins/stencil-docs-target/-/stencil-docs-target-1.2.0-2.tgz", + "integrity": "sha512-x52+azcjAWHBiCNbS4RwH2X91bt+dqKQ4O47JEveDigRh7kwxVH25rir0K64Th2m9H94RvOjXuv/YogWBEHfow==", "requires": { - "@raisins/schema": "^1.1.1" + "@raisins/schema": "^1.1.0" } }, "@rollup/plugin-alias": { @@ -18696,6 +19201,12 @@ "tslib": "^2.0.1" } }, + "async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "dev": true + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -19093,6 +19604,15 @@ "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", "dev": true }, + "basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dev": true, + "requires": { + "safe-buffer": "5.1.2" + } + }, "basic-ftp": { "version": "5.0.5", "resolved": "https://registry.npmjs.org/basic-ftp/-/basic-ftp-5.0.5.tgz", @@ -19214,6 +19734,25 @@ "get-intrinsic": "^1.0.2" } }, + "call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "requires": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + } + }, + "call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "dev": true, + "requires": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + } + }, "caller-callsite": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz", @@ -19560,6 +20099,12 @@ "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "dev": true }, + "corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", + "dev": true + }, "cosmiconfig": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", @@ -20201,6 +20746,16 @@ "is-obj": "^2.0.0" } }, + "dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "requires": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + } + }, "duplexer": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz", @@ -20279,6 +20834,24 @@ "unbox-primitive": "^1.0.1" } }, + "es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==" + }, + "es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==" + }, + "es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "requires": { + "es-errors": "^1.3.0" + } + }, "es-to-primitive": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", @@ -20762,6 +21335,12 @@ "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-0.6.8.tgz", "integrity": "sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==" }, + "follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "dev": true + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -20814,9 +21393,9 @@ "optional": true }, "function-bind": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", - "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==" }, "generic-names": { "version": "2.0.1", @@ -20838,13 +21417,20 @@ "dev": true }, "get-intrinsic": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", - "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", "requires": { - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1" + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" } }, "get-own-enumerable-property-symbols": { @@ -20859,6 +21445,15 @@ "integrity": "sha512-pjzuKtY64GYfWizNAJ0fr9VqttZkNiK2iS430LtIHzjBEr6bX8Am2zm4sW4Ro5wjWW5cAlRL1qAMTcXbjNAO2Q==", "dev": true }, + "get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "requires": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + } + }, "get-stream": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", @@ -20972,6 +21567,11 @@ "delegate": "^3.1.2" } }, + "gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==" + }, "graceful-fs": { "version": "4.2.6", "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz", @@ -21046,9 +21646,9 @@ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz", - "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==" }, "has-value": { "version": "1.0.0", @@ -21102,6 +21702,14 @@ } } }, + "hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "requires": { + "function-bind": "^1.1.2" + } + }, "haunted": { "version": "4.8.2", "resolved": "https://registry.npmjs.org/haunted/-/haunted-4.8.2.tgz", @@ -21111,6 +21719,12 @@ "lit-html": "^1.0.0" } }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, "hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -21152,6 +21766,17 @@ "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==", "dev": true }, + "http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dev": true, + "requires": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + } + }, "http-proxy-agent": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz", @@ -21163,6 +21788,105 @@ "debug": "4" } }, + "http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "dev": true, + "requires": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "requires": { + "color-convert": "^2.0.1" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true + }, + "html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "dev": true, + "requires": { + "whatwg-encoding": "^2.0.0" + } + }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dev": true, + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "dev": true, + "requires": { + "iconv-lite": "0.6.3" + } + } + } + }, "https-proxy-agent": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", @@ -23570,6 +24294,11 @@ "integrity": "sha512-jBo8AOayNaEcvBhNobg6/BLhdsK3NvnKWJg33MAAPbvTWiG4QBn9gpW1+7RssrKu4K1dKlN+0goVQwV41xEfOA==", "dev": true }, + "math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==" + }, "maxmin": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/maxmin/-/maxmin-2.1.0.tgz", @@ -23723,6 +24452,12 @@ "picomatch": "^2.2.3" } }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "dev": true + }, "mime-db": { "version": "1.48.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.48.0.tgz", @@ -24037,9 +24772,9 @@ } }, "object-inspect": { - "version": "1.10.3", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.10.3.tgz", - "integrity": "sha512-e5mCJlSH7poANfC8z8S9s9S2IN5/4Zb3aZ33f5s8YqoazCFzNLloLU8r5VCG+G7WoqLvAAZoVMcy3tp/3X0Plw==" + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==" }, "object-keys": { "version": "1.1.1", @@ -24122,6 +24857,12 @@ "is-wsl": "^2.1.1" } }, + "opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "dev": true + }, "os-tmpdir": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", @@ -24518,6 +25259,33 @@ "find-up": "^4.0.0" } }, + "portfinder": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.37.tgz", + "integrity": "sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==", + "dev": true, + "requires": { + "async": "^3.2.6", + "debug": "^4.3.6" + }, + "dependencies": { + "debug": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", + "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "dev": true, + "requires": { + "ms": "^2.1.3" + } + }, + "ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "dev": true + } + } + }, "posix-character-classes": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz", @@ -25916,6 +26684,15 @@ "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz", "integrity": "sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=" }, + "qs": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", + "dev": true, + "requires": { + "side-channel": "^1.1.0" + } + }, "queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -26087,6 +26864,12 @@ "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==", "dev": true }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "dev": true + }, "resolve": { "version": "1.20.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", @@ -26610,6 +27393,12 @@ "xmlchars": "^2.2.0" } }, + "secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==", + "dev": true + }, "select": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz", @@ -26703,6 +27492,54 @@ } } }, + "side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "dev": true, + "requires": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + } + }, + "side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "dev": true, + "requires": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + } + }, + "side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "dev": true, + "requires": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + } + }, + "side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "dev": true, + "requires": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + } + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -27611,6 +28448,15 @@ "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz", "integrity": "sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==" }, + "union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dev": true, + "requires": { + "qs": "^6.4.0" + } + }, "union-value": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz", @@ -27689,6 +28535,12 @@ "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=", "dev": true }, + "url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", + "dev": true + }, "urlpattern-polyfill": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/urlpattern-polyfill/-/urlpattern-polyfill-10.0.0.tgz", diff --git a/packages/mint-components/package.json b/packages/mint-components/package.json index a4d3dc0765..6f4281866b 100644 --- a/packages/mint-components/package.json +++ b/packages/mint-components/package.json @@ -1,7 +1,7 @@ { "name": "@saasquatch/mint-components", "title": "Mint Components", - "version": "1.15.3", + "version": "2.0.0-65", "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", @@ -55,6 +55,7 @@ "clipboard": "^1.7.1", "cross-env": "^7.0.2", "docx": "^5.4.1", + "http-server": "^14.1.1", "jest": "^26.6.3", "jest-cli": "^26.6.3", "jest-config": "^26.6.3", @@ -70,7 +71,7 @@ "workbox-build": "4.3.1" }, "dependencies": { - "@raisins/stencil-docs-target": "^1.1.1", + "@raisins/stencil-docs-target": "^1.2.0-2", "@saasquatch/component-boilerplate": "^1.6.9", "@saasquatch/dom-context-hooks": "^1.0.5", "@saasquatch/shoelace": "^1.0.0", diff --git a/packages/mint-components/src/components.d.ts b/packages/mint-components/src/components.d.ts index f334e2b03f..de9b34ff41 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"; @@ -22,6 +21,7 @@ import { UseIndirectTaxFormResult } from "./components/tax-and-cash/sqm-indirect import { InputFieldViewProps } from "./components/sqm-input-field/sqm-input-field-view"; import { EmailRegistrationViewProps } from "./components/views/email-registration-view"; import { GenericTableViewProps } from "./tables/GenericTableView"; +import { FraudStatus, ImpactConnection, Invoice, Referral, Referrer, Reward } from "./saasquatch"; import { LeadCheckboxFieldViewProps } from "./components/sqm-lead-form/sqm-lead-checkbox-field-view"; import { DropdownFieldViewProps as DropdownFieldViewProps1 } from "./components/sqm-lead-form/sqm-lead-dropdown-field-view"; import { LeadFormViewProps } from "./components/sqm-lead-form/sqm-lead-form-view"; @@ -31,6 +31,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"; @@ -54,7 +55,6 @@ import { ReferralDates } from "./components/sqm-referral-table/useReferralTable" import { RewardExchangeViewProps } from "./components/sqm-reward-exchange-list/sqm-reward-exchange-list-view"; import { ShareButtonViewProps } from "./components/sqm-share-button/sqm-share-button-view"; import { TaskCardViewProps } from "./components/sqm-task-card/sqm-task-card-view"; -import { UseTaxAndCashResultType } from "./components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash"; import { UseTaxAndCashDashboardResult } from "./components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard"; import { UseUserInfoFormResult } from "./components/tax-and-cash/sqm-user-info-form/useUserInfoForm"; import { UserNameViewProps } from "./components/sqm-user-name/sqm-user-name-view"; @@ -63,21 +63,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 @@ -360,6 +345,7 @@ export namespace Components { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Additional Settings */ "alignment"?: "left" | "right" | "center"; /** @@ -367,18 +353,59 @@ export namespace Components { * @uiType object */ "demoData"?: DemoData; + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Additional Settings + */ + "descriptionFontSize"?: number; + /** + * Color of the description text + * @uiName Description text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Additional Settings + */ + "descriptionTextColor"?: string; /** * Controls the order of the stat value & description column * @uiName Flex reverse - * @default + * @default + * @uiGroup Additional Settings */ "flexReverse"?: boolean; /** * The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified. * @uiName Program ID * @uiWidget programSelector + * @uiGroup Additional Settings */ "programId"?: string; + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Additional Settings + */ + "statFontSize"?: number; + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Additional Settings + * @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 Additional Settings + */ + "statTextColor"?: string; /** * Select what type of stat to display. Manual paths are also supported. * @uiWidget statTypeSelectWidget @@ -403,6 +430,8 @@ export namespace Components { */ "brandFont": string; } + interface SqmBrandSelector { + } interface SqmCardFeed { /** * @uiName Column gap @@ -509,14 +538,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 + * @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"; /** * Display this message when the coupon code has been cancelled. * @uiWidget textArea @@ -603,8 +665,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 @@ -617,6 +688,18 @@ export namespace Components { "tooltiptext": string; } interface SqmDividedLayout { + /** + * Background color of the divider + * @uiName Background Color + * @uiWidget color + */ + "backgroundColor"?: string; + /** + * Color of the divider (defaults to default text color if none is set) + * @uiName Border Color + * @uiWidget color + */ + "borderColor"?: string; /** * Overrides max-width of content area * @uiName Content Area Width @@ -631,7 +714,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; @@ -902,6 +985,10 @@ export namespace Components { * @uiName Icon */ "icon"?: string; + /** + * Render the alert with transparent styles + */ + "transparent"?: boolean; /** * Options include "success", "info", "warning", and "error" * @uiName Alert type @@ -941,11 +1028,18 @@ export namespace Components { } interface SqmHero { /** - * Can be an image url, colour or Shoelace variable. - * @uiName Background + * Splash image or background color (for use in the left column) + * @uiName Splash image * @uiWidget Background */ "background"?: string; + /** + * Can only be used when two columns are present + * @uiName Hide the column in mobile view + * @uiEnum ["primary", "secondary", "null"] + * @uiEnumNames ["Primary", "Secondary", "None"] + */ + "columnToHideInMobile"?: "primary" | "secondary" | null; /** * @uiName Columns * @uiEnum [1, 2] @@ -964,8 +1058,8 @@ export namespace Components { */ "paddingSize": "none" | "small" | "medium" | "large"; /** - * Secondary background image or color (for use in the right column) - * @uiName Secondary background + * Content background color or image (for use in the right column) + * @uiName Content background * @uiWidget Background */ "secondaryBackground"?: string; @@ -982,6 +1076,7 @@ export namespace Components { * @uiName Background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundColor"?: string; /** @@ -997,6 +1092,15 @@ export namespace Components { * @uiName Button text */ "buttonText"?: string; + /** + * The type of the button that is used (primary or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Description * @uiWidget textArea @@ -1011,11 +1115,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; /** @@ -1023,6 +1129,7 @@ export namespace Components { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "imagePos": "left" | "center" | "right"; /** @@ -1036,16 +1143,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; /** @@ -1053,6 +1163,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; /** @@ -1060,12 +1171,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; } @@ -1677,6 +1790,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 @@ -1745,10 +1878,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 */ @@ -1891,8 +2045,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 @@ -1901,19 +2094,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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @undocumented * @uiType object @@ -1996,6 +2227,10 @@ export namespace Components { * @uiName Payout missing information subtext */ "payoutMissingInformationText": string; + /** + * @componentState { "title": "Loading", "props": { "states": { "loading": true } } } + */ + "stateController"?: string; /** * Badge text indicating payout status * @uiName Payout badge status text @@ -2053,6 +2288,14 @@ export namespace Components { * @uiName Info required alert header */ "informationRequiredHeader": string; + /** + * @undocumented + * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] } + */ + "stateController"?: string; /** * @uiName Support link text */ @@ -2440,6 +2683,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 @@ -2484,11 +2742,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 */ @@ -3221,7 +3498,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 @@ -3236,6 +3519,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 @@ -3248,7 +3543,7 @@ export namespace Components { * @uiWidget color * @format color */ - "textColor": string; + "textColor"?: string; } interface SqmProgramMenu { } @@ -3300,7 +3595,20 @@ export namespace Components { * @uiWidget color * @uiType string */ - "backgroundColor": string; + "backgroundColor"?: string; + /** + * Border color of container + * @uiName Border color + * @uiWidget color + * @format color + */ + "borderColor"?: string; + /** + * The border radius (in pixels) + * @uiName Border Radius + * @uiType number + */ + "borderRadius"?: number; /** * @uiName Hide border * @uiType boolean @@ -3339,6 +3647,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 @@ -3348,14 +3663,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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -3387,8 +3735,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 @@ -3423,6 +3780,12 @@ export namespace Components { * @uiWidget programSelector */ "programId"?: string; + /** + * @uiName Text Color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; /** * @uiName Title Text */ @@ -3886,6 +4249,13 @@ export namespace Components { * @uiWidget textArea */ "sourceAmountMessage": string; + /** + * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] } + */ + "stateController": string; /** * Shown when a user copies a fuel tank code * @uiName Tooltip text @@ -4149,19 +4519,6 @@ export namespace Components { * @uiName Button text */ "buttonText": string; - /** - * @uiName Button type - * @uiType string - * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"] - * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"] - */ - "buttonType": | "default" - | "primary" - | "success" - | "neutral" - | "warning" - | "danger" - | "text"; /** * Draws a circle button. * @uiName Circle @@ -4224,11 +4581,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; /** @@ -4242,11 +4606,13 @@ export namespace Components { "disabled"?: boolean; /** * @uiName Hide icon + * @uiGroup Style * @default */ "hideicon"?: boolean; /** * @uiName Hide text + * @uiGroup Style * @default */ "hidetext"?: boolean; @@ -4284,6 +4650,7 @@ export namespace Components { | "unknown"; /** * @uiName Display pill + * @uiGroup Style */ "pill"?: boolean; /** @@ -4307,21 +4674,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" @@ -4340,14 +4710,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 + * @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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -4369,8 +4772,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 @@ -4383,14 +4795,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 + * @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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -4412,8 +4857,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 @@ -4427,12 +4881,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 @@ -4474,8 +4950,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 @@ -4486,6 +4987,14 @@ export namespace Components { * @uiGroup Button */ "buttonText": string; + /** + * @uiName Button Style + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Title * @uiGroup Task @@ -4623,6 +5132,12 @@ export namespace Components { * @default */ "steps": boolean; + /** + * @uiName Text color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; } interface SqmTaxAndCash { /** @@ -5007,10 +5522,9 @@ export namespace Components { */ "dashboard_w9RequiredHeader": string; /** - * @undocumented - * @uiType object + * @undocumented */ - "demoData"?: DemoData; + "demoData"?: DemoData; /** * Displayed under a field when it has an invalid entry. * @uiName Form field error message @@ -5082,6 +5596,15 @@ export namespace Components { * @uiGroup General Form Properties */ "searchForCountryText": string; + /** + * @undocumented + * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" } + * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" } + * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" } + * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" } + * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"], "uiGroup": "Dashboard Properties" } + */ + "stateController": string; /** * @uiName Address field label * @uiGroup Step 1 Properties @@ -5835,6 +6358,11 @@ export namespace Components { * @uiName Required tax form description */ "requiredTaxForm"?: string; + /** + * @undocumented + * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "uiGroup": "Dashboard Properties" } + */ + "stateController"?: string; /** * @uiName Payout status badge */ @@ -5961,12 +6489,36 @@ export namespace Components { "w9RequiredHeader": 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 @@ -5996,11 +6548,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 */ @@ -6296,8 +6862,19 @@ export namespace Components { * @uiGroup General Text */ "general_verifyEmailHeader": string; + /** + * @undocumented + * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" } + * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" } + */ + "stateController": string; } interface SqmWidgetVerificationController { + /** + * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false } } + * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true } } + */ + "stateController": string; } } declare global { @@ -6307,12 +6884,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: { @@ -6331,6 +6902,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: { @@ -7065,10 +7642,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; @@ -7196,21 +7773,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 @@ -7493,6 +8055,7 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Additional Settings */ "alignment"?: "left" | "right" | "center"; /** @@ -7500,18 +8063,59 @@ declare namespace LocalJSX { * @uiType object */ "demoData"?: DemoData; + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Additional Settings + */ + "descriptionFontSize"?: number; + /** + * Color of the description text + * @uiName Description text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Additional Settings + */ + "descriptionTextColor"?: string; /** * Controls the order of the stat value & description column * @uiName Flex reverse - * @default + * @default + * @uiGroup Additional Settings */ "flexReverse"?: boolean; /** * The ID of the program that is used to scope stats. Defaults to the program context when no ID is specified. * @uiName Program ID * @uiWidget programSelector + * @uiGroup Additional Settings */ "programId"?: string; + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Additional Settings + */ + "statFontSize"?: number; + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Additional Settings + * @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 Additional Settings + */ + "statTextColor"?: string; /** * Select what type of stat to display. Manual paths are also supported. * @uiWidget statTypeSelectWidget @@ -7536,6 +8140,8 @@ declare namespace LocalJSX { */ "brandFont"?: string; } + interface SqmBrandSelector { + } interface SqmCardFeed { /** * @uiName Column gap @@ -7642,14 +8248,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 + * @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"; /** * Display this message when the coupon code has been cancelled. * @uiWidget textArea @@ -7736,8 +8375,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 @@ -7750,6 +8398,18 @@ declare namespace LocalJSX { "tooltiptext"?: string; } interface SqmDividedLayout { + /** + * Background color of the divider + * @uiName Background Color + * @uiWidget color + */ + "backgroundColor"?: string; + /** + * Color of the divider (defaults to default text color if none is set) + * @uiName Border Color + * @uiWidget color + */ + "borderColor"?: string; /** * Overrides max-width of content area * @uiName Content Area Width @@ -7764,7 +8424,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; @@ -8035,6 +8695,10 @@ declare namespace LocalJSX { * @uiName Icon */ "icon"?: string; + /** + * Render the alert with transparent styles + */ + "transparent"?: boolean; /** * Options include "success", "info", "warning", and "error" * @uiName Alert type @@ -8075,11 +8739,18 @@ declare namespace LocalJSX { } interface SqmHero { /** - * Can be an image url, colour or Shoelace variable. - * @uiName Background + * Splash image or background color (for use in the left column) + * @uiName Splash image * @uiWidget Background */ "background"?: string; + /** + * Can only be used when two columns are present + * @uiName Hide the column in mobile view + * @uiEnum ["primary", "secondary", "null"] + * @uiEnumNames ["Primary", "Secondary", "None"] + */ + "columnToHideInMobile"?: "primary" | "secondary" | null; /** * @uiName Columns * @uiEnum [1, 2] @@ -8098,8 +8769,8 @@ declare namespace LocalJSX { */ "paddingSize"?: "none" | "small" | "medium" | "large"; /** - * Secondary background image or color (for use in the right column) - * @uiName Secondary background + * Content background color or image (for use in the right column) + * @uiName Content background * @uiWidget Background */ "secondaryBackground"?: string; @@ -8116,6 +8787,7 @@ declare namespace LocalJSX { * @uiName Background color * @uiWidget color * @format color + * @uiGroup Style */ "backgroundColor"?: string; /** @@ -8131,6 +8803,15 @@ declare namespace LocalJSX { * @uiName Button text */ "buttonText"?: string; + /** + * The type of the button that is used (primary or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Description * @uiWidget textArea @@ -8145,11 +8826,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; /** @@ -8157,6 +8840,7 @@ declare namespace LocalJSX { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ "imagePos"?: "left" | "center" | "right"; /** @@ -8170,16 +8854,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; /** @@ -8187,6 +8874,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; /** @@ -8194,12 +8882,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; } @@ -8805,6 +9495,26 @@ declare namespace LocalJSX { * @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 @@ -8873,10 +9583,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 */ @@ -9013,14 +9744,53 @@ declare namespace LocalJSX { */ "includeDropdown"?: boolean; /** - * Label on the header menu - * @uiName Menu label + * Label on the header menu + * @uiName Menu label + */ + "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 */ - "menuLabel"?: string; - } - interface SqmNavigationSidebar { - } - interface SqmNavigationSidebarItem { + "borderRadius"?: number; /** * @undocumented * @uiType object @@ -9029,19 +9799,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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @undocumented * @uiType object @@ -9124,6 +9932,10 @@ declare namespace LocalJSX { * @uiName Payout missing information subtext */ "payoutMissingInformationText"?: string; + /** + * @componentState { "title": "Loading", "props": { "states": { "loading": true } } } + */ + "stateController"?: string; /** * Badge text indicating payout status * @uiName Payout badge status text @@ -9181,6 +9993,14 @@ declare namespace LocalJSX { * @uiName Info required alert header */ "informationRequiredHeader"?: string; + /** + * @undocumented + * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] } + */ + "stateController"?: string; /** * @uiName Support link text */ @@ -9568,6 +10388,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 @@ -9612,11 +10447,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 */ @@ -10350,6 +11204,12 @@ declare namespace LocalJSX { * @format color */ "backgroundColor"?: string; + /** + * Amount in pixels + * @uiName Border radius + * @type number + */ + "borderRadius"?: number; /** * @uiName Description * @uiWidget textArea @@ -10364,6 +11224,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 @@ -10429,6 +11301,19 @@ declare namespace LocalJSX { * @uiType string */ "backgroundColor"?: string; + /** + * Border color of container + * @uiName Border color + * @uiWidget color + * @format color + */ + "borderColor"?: string; + /** + * The border radius (in pixels) + * @uiName Border Radius + * @uiType number + */ + "borderRadius"?: number; /** * @uiName Hide border * @uiType boolean @@ -10467,6 +11352,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 @@ -10476,14 +11368,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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -10515,8 +11440,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 @@ -10551,6 +11485,12 @@ declare namespace LocalJSX { * @uiWidget programSelector */ "programId"?: string; + /** + * @uiName Text Color + * @uiType string + * @uiWidget color + */ + "textColor"?: string; /** * @uiName Title Text */ @@ -11000,6 +11940,13 @@ declare namespace LocalJSX { * @uiWidget textArea */ "sourceAmountMessage"?: string; + /** + * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] } + */ + "stateController"?: string; /** * Shown when a user copies a fuel tank code * @uiName Tooltip text @@ -11253,19 +12200,6 @@ declare namespace LocalJSX { * @uiName Button text */ "buttonText"?: string; - /** - * @uiName Button type - * @uiType string - * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"] - * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"] - */ - "buttonType"?: | "default" - | "primary" - | "success" - | "neutral" - | "warning" - | "danger" - | "text"; /** * Draws a circle button. * @uiName Circle @@ -11328,11 +12262,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; /** @@ -11346,11 +12287,13 @@ declare namespace LocalJSX { "disabled"?: boolean; /** * @uiName Hide icon + * @uiGroup Style * @default */ "hideicon"?: boolean; /** * @uiName Hide text + * @uiGroup Style * @default */ "hidetext"?: boolean; @@ -11388,6 +12331,7 @@ declare namespace LocalJSX { | "unknown"; /** * @uiName Display pill + * @uiGroup Style */ "pill"?: boolean; /** @@ -11411,21 +12355,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" @@ -11444,14 +12391,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 + * @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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -11473,8 +12453,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 @@ -11487,14 +12476,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 + * @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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Copy button label */ @@ -11516,8 +12538,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 @@ -11531,12 +12562,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 @@ -11578,8 +12631,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 @@ -11590,6 +12668,14 @@ declare namespace LocalJSX { * @uiGroup Button */ "buttonText"?: string; + /** + * @uiName Button Style + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + "buttonType"?: "primary" | "secondary"; /** * @uiName Title * @uiGroup Task @@ -11727,6 +12813,12 @@ declare namespace LocalJSX { * @default */ "steps"?: boolean; + /** + * @uiName Text color + * @uiWidget color + * @uiGroup Style + */ + "textColor"?: string; } interface SqmTaxAndCash { /** @@ -12111,10 +13203,9 @@ declare namespace LocalJSX { */ "dashboard_w9RequiredHeader"?: string; /** - * @undocumented - * @uiType object + * @undocumented */ - "demoData"?: DemoData; + "demoData"?: DemoData; /** * Displayed under a field when it has an invalid entry. * @uiName Form field error message @@ -12186,6 +13277,15 @@ declare namespace LocalJSX { * @uiGroup General Form Properties */ "searchForCountryText"?: string; + /** + * @undocumented + * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" } + * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" } + * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" } + * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" } + * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"], "uiGroup": "Dashboard Properties" } + */ + "stateController"?: string; /** * @uiName Address field label * @uiGroup Step 1 Properties @@ -12939,6 +14039,11 @@ declare namespace LocalJSX { * @uiName Required tax form description */ "requiredTaxForm"?: string; + /** + * @undocumented + * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "uiGroup": "Dashboard Properties" } + */ + "stateController"?: string; /** * @uiName Payout status badge */ @@ -13065,12 +14170,36 @@ declare namespace LocalJSX { "w9RequiredHeader"?: 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 @@ -13100,10 +14229,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 */ @@ -13399,15 +14542,26 @@ declare namespace LocalJSX { * @uiGroup General Text */ "general_verifyEmailHeader"?: string; + /** + * @undocumented + * @componentState { "title": "Step 1: Enter email", "props": { "showCode": false }, "dependencies": ["sqm-email-verification"], "uiGroup": "Email Verification Step" } + * @componentState { "title": "Step 2: Enter code", "props": { "showCode": true }, "dependencies": ["sqm-code-verification"], "uiGroup": "Code Verification Step" } + */ + "stateController"?: string; } interface SqmWidgetVerificationController { + /** + * @componentState { "title": "Verify email", "slot": "not-verified", "props": { "isAuth": false } } + * @componentState { "title": "Tax and cash", "slot": "verified", "props": { "isAuth": true } } + */ + "stateController"?: string; } 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; @@ -13537,10 +14691,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..91d24de6cf 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 @@ -1,20 +1,24 @@ -import { Component, h, Prop, State } from "@stencil/core"; +import { isDemo, useHost } from "@saasquatch/component-boilerplate"; import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, h, Prop, State } from "@stencil/core"; +import { DemoData } from "../../global/demo"; import { BigStatView, BigStatViewProps } from "./sqm-big-stat-view"; import { useBigStat } from "./useBigStat"; import { useDemoBigStat } from "./useDemoBigStat"; -import { isDemo, useHost } from "@saasquatch/component-boilerplate"; -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"}] + * @uiOrder ["statType", "programId", "*"] * @slotEditor richText * @exampleGroup Statistics * @example Points Balance -

Points Balance

 * @example GiftCards Earned -

Giftcards Earned

 * @example Referrals -

Referrals

 + * @example Other Stat -

Label

 */ @Component({ tag: "sqm-big-stat", @@ -36,6 +40,7 @@ export class BigStat { * * @uiName Flex reverse * @default + * @uiGroup Additional Settings */ @Prop() flexReverse?: boolean = false; /** @@ -45,17 +50,63 @@ export class BigStat { * @uiType string * @uiEnum ["left", "right", "center"] * @uiEnumNames ["Left", "Right", "Center"] + * @uiGroup Additional Settings */ - @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. * * @uiName Program ID * @uiWidget programSelector + * @uiGroup Additional Settings */ @Prop() programId?: string; + /** + * Color of the stat text + * @uiName Stat text color + * @uiWidget color + * @uiType string + * @format color + * @uiGroup Additional Settings + */ + @Prop() statTextColor?: string; + + /** + * Font size of the stat text in pixels + * @uiName Stat font size + * @uiType string + * @uiGroup Additional Settings + */ + @Prop() statFontSize?: number; + + /** + * Font weight of the stat text + * @uiName Stat font weight + * @uiGroup Additional Settings + * @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 Additional Settings + */ + @Prop() descriptionTextColor?: string; + + /** + * Font size of the description text in pixels + * @uiName Description font size + * @uiGroup Additional Settings + */ + @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..3fcc9132be 100644 --- a/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx +++ b/packages/mint-components/src/components/sqm-big-stat/useBigStat.tsx @@ -1,17 +1,17 @@ -import { gql } from "graphql-request"; -import { pathToRegexp } from "path-to-regexp"; -import { useMemo } from "@saasquatch/universal-hooks"; import { - useQuery, + useLocale, useProgramId, + useQuery, useUserIdentity, - useLocale, } from "@saasquatch/component-boilerplate"; import { QueryData } from "@saasquatch/component-boilerplate/dist/hooks/graphql/useBaseQuery"; +import { useMemo } from "@saasquatch/universal-hooks"; import debugFn from "debug"; +import { gql } from "graphql-request"; +import { pathToRegexp } from "path-to-regexp"; +import { useChildElements } from "../../tables/useChildElements"; import { BigStat } from "./sqm-big-stat"; import { BigStatViewProps } from "./sqm-big-stat-view"; -import { useChildElements } from "../../tables/useChildElements"; const debug = debugFn("sq:useBigStat"); const LOADING = "..."; @@ -143,16 +143,28 @@ const customFieldsQuery = ( ); }; -const referralsMonthQuery = (programId: string) => { +const referralsMonthQuery = ( + programId: string, + status?: "started" | "converted" +) => { const programFilter = programId === "classic" ? { programId_exists: false } : { programId_eq: programId }; + const convertedFilter = + status && status == "converted" + ? { dateConverted_exists: true } + : status && status == "started" + ? { dateConverted_exists: false } + : {}; + const filter = { ...programFilter, + ...convertedFilter, dateReferralStarted_timeframe: "this_month", }; + return debugQuery( gql` query ($filter: ReferralFilterInput) { @@ -692,6 +704,112 @@ const rewardsAssignedQuery = ( ); }; +const rewardsExpiredQuery = ( + programId: string, + locale: string, + type: string, + unit: string, + global = "" +) => { + return debugQuery( + gql` + query ( + $programId: ID + $type: RewardType + $unit: String! + $locale: RSLocale + ) { + fallback: formatRewardPrettyValue( + value: 0 + unit: $unit + locale: $locale + formatType: UNIT_FORMATTED + ) + viewer: viewer { + ... on User { + rewardBalanceDetails( + programId: $programId + filter: { type_eq: $type, unit_eq: $unit } + locale: $locale + ) { + ... on CreditRewardBalance { + prettyExpiredCredit + } + } + } + } + } + `, + { + programId: !global && programId !== "classic" ? programId : null, + type, + unit, + locale, + }, + (res) => { + const arr = res.data?.viewer?.rewardBalanceDetails; + const fallback = res.data?.fallback; + return { + value: arr?.[0]?.prettyAssignedCredit || 0, + statvalue: arr?.[0]?.prettyAssignedCredit || fallback, + }; + } + ); +}; + +const rewardsCancelledQuery = ( + programId: string, + locale: string, + type: string, + unit: string, + global = "" +) => { + return debugQuery( + gql` + query ( + $programId: ID + $type: RewardType + $unit: String! + $locale: RSLocale + ) { + fallback: formatRewardPrettyValue( + value: 0 + unit: $unit + locale: $locale + formatType: UNIT_FORMATTED + ) + viewer: viewer { + ... on User { + rewardBalanceDetails( + programId: $programId + filter: { type_eq: $type, unit_eq: $unit } + locale: $locale + ) { + ... on CreditRewardBalance { + prettyCancelledCredit + } + } + } + } + } + `, + { + programId: !global && programId !== "classic" ? programId : null, + type, + unit, + locale, + }, + (res) => { + const arr = res.data?.viewer?.rewardBalanceDetails; + const fallback = res.data?.fallback; + return { + value: arr?.[0]?.prettyAssignedCredit || 0, + statvalue: arr?.[0]?.prettyAssignedCredit || fallback, + }; + } + ); +}; + const rewardsAvailableQuery = ( programId: string, locale: string, @@ -941,6 +1059,14 @@ export const queries: { label: "Rewards Pending", query: rewardsPendingQuery, }, + rewardsExpired: { + label: "Rewards Expired", + query: rewardsExpiredQuery, + }, + rewardsCancelled: { + label: "Rewards Cancelled", + query: rewardsCancelledQuery, + }, rewardsRedeemed: { label: "Rewards Paid", query: rewardsRedeemedQuery, @@ -1015,20 +1141,21 @@ export const queries: { }, }; +// ! Any update to this should be reflected in StatPathBuilder.tsx in the saasquatch repo // this should be exposed in documentation somehow export const StatPaths = [ { name: "programGoals", route: "/(programGoals)/:metricType/:goalId" }, { name: "customFields", route: "/(customFields)/:customField" }, { name: "referralsCount", route: "/(referralsCount)/:status?" }, - { name: "referralsMonth", route: "/(referralsMonth)" }, - { name: "referralsWeek", route: "/(referralsWeek)" }, + { name: "referralsMonth", route: "/(referralsMonth)/:status?" }, // TODO: Add status + { name: "referralsWeek", route: "/(referralsWeek)/:status?" }, // TODO: Add status { name: "rewardsCount", route: "/(rewardsCount)/:global?" }, { name: "rewardsMonth", route: "/(rewardsMonth)/:global?" }, { name: "rewardsWeek", route: "/(rewardsWeek)/:global?" }, { name: "rewardsCountFiltered", route: - "/(rewardsCountFiltered)/:statType([INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?", + "/(rewardsCountFiltered)/:statType([FUELTANK|INTEGRATION|PCT_DISCOUNT|CREDIT]*)?/:unit((?!global)(?!PENDING)(?!CANCELLED)(?!EXPIRED)(?!REDEEMED)(?!AVAILABLE)[a-zA-Z0-9%]+)?/:status([PENDING|CANCELLED|EXPIRED|REDEEMED|AVAILABLE]*)?/:global?", }, { name: "integrationRewardsCountFiltered", @@ -1039,6 +1166,14 @@ export const StatPaths = [ name: "rewardsAssigned", route: "/(rewardsAssigned)/:statType/:unit/:global?", }, + { + name: "rewardsExpired", + route: "/(rewardsExpired)/:statType/:unit/:global?", + }, + { + name: "rewardsCancelled", + route: "/(rewardsCancelled)/:statType/:unit/:global?", + }, { name: "rewardsPending", route: "/(rewardsPending)/:statType/:unit/:global?", @@ -1104,10 +1239,15 @@ export function useBigStat(props: BigStat): BigStatHook { return { props: { value: 0, - statvalue: "!!!", + statvalue: "-", 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 +1287,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..524352c449 100644 --- a/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts +++ b/packages/mint-components/src/components/sqm-big-stat/useDemoBigStat.ts @@ -17,10 +17,14 @@ export function useDemoBigStat(props: BigStat): BigStatHook { return { props: { value: 0, - statvalue: "!!!", + 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-brand/sqm-brand.tsx b/packages/mint-components/src/components/sqm-brand/sqm-brand.tsx index 4e6fbd0815..af0c5826a9 100644 --- a/packages/mint-components/src/components/sqm-brand/sqm-brand.tsx +++ b/packages/mint-components/src/components/sqm-brand/sqm-brand.tsx @@ -47,12 +47,16 @@ export class BrandComponent { return undefined; } - const css = getCss(this.brandColor) ?? ""; + const brandingConfigFont = window.SquatchBrandingConfig?.main?.brandFont; + const css = window.SquatchBrandingConfig?.main?.brandColor + ? "" + : getCss(this.brandColor) ?? ""; const sanitizedFont = (this.brandFont ?? "Nunito Sans").trim() || undefined; useEffect(() => { - if (!sanitizedFont) { + if (!sanitizedFont || brandingConfigFont) { // Nothing required in default case. + // Don't add font if it's set in the global config return; } const sheet = document.createElement("link"); @@ -76,6 +80,11 @@ export class BrandComponent { - resets css variable inheritence for fonts */ + + ${ + brandingConfigFont + ? `` + : ` ::slotted(*) { --sl-font-sans: "${font}", arial; --sl-input-font-family: "${font}", arial; @@ -83,6 +92,8 @@ export class BrandComponent { font-family: "${font}", arial; ${css} + ` + } --sl-focus-ring-color-primary: var(--sl-color-primary-100); --sl-input-border-color-focus: var(--sl-color-primary-500); 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-view.tsx b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx index a7fb5fcad6..ab331d6afd 100644 --- a/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx +++ b/packages/mint-components/src/components/sqm-checkbox-field/sqm-checkbox-field-view.tsx @@ -60,6 +60,13 @@ sl-checkbox::part(label){ sl-checkbox::part(base){ align-items: start; } +sl-checkbox[checked]::part(control){ + background-color: var(--sqm-input-border-color-focus); +} + +sl-checkbox[checked]::part(checked-icon){ + color: var(--sqm-input-background); +} `; jss.setup(preset()); 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..3c3ac91787 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,22 @@ const defaultProps: CouponCodeViewProps = { inputPlaceholderText: "CODE ERROR", couponCodeLabel: "Your coupon code:", error: false, + buttonType: "primary", }; export const CouponCode = () => { return ; }; +export const CouponCodeWithSecondaryButtonType = () => { + 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 c1fdd13bef..1539432b7d 100644 --- a/packages/mint-components/src/components/sqm-coupon-code/readme.md +++ b/packages/mint-components/src/components/sqm-coupon-code/readme.md @@ -1,31 +1,34 @@ # sqm-coupon-code - - ## 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."` | -| `codeSyncErrorRetryText` | `code-sync-error-retry-text` | Display this message when the code fails to load before retrying. | `string` | `"We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds."` | -| `codeSyncErrorText` | `code-sync-error-text` | Display this message when the code fails to load after retrying. | `string` | `"We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance."` | -| `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 | `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"` | `"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."` | +| `codeSyncErrorRetryText` | `code-sync-error-retry-text` | Display this message when the code fails to load before retrying. | `string` | `"We're experiencing an issue generating your coupon code. If it doesn't appear shortly, please contact {supportEmail}. Retrying in {timeRemaining} seconds."` | +| `codeSyncErrorText` | `code-sync-error-text` | Display this message when the code fails to load after retrying. | `string` | `"We're still experiencing an issue generating your coupon code. Please contact {supportEmail} for assistance."` | +| `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"; 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..c29ab3ba10 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"; } -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..bb0ab4aadf 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 or secondary). | `"primary" \| "secondary"` | `"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..ded5cf0e79 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"; } 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 && ( )} */ @Component({ tag: "sqm-pagination", @@ -27,6 +25,17 @@ export class Pagination { */ @Prop() paginationText: string = "{currentPage} of {totalPages}"; + /** + * The type of the button that is used (primary or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" = "secondary"; + /** * @undocumented * @uiType object @@ -60,6 +69,7 @@ function useDemoPagination( totalPages: 5, loading: false, }, + buttonType: props.buttonType, callbacks: { onNext: () => setCurrentPage(currentPage + 1), onPrev: () => setCurrentPage(currentPage - 1), diff --git a/packages/mint-components/src/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.tsx b/packages/mint-components/src/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.tsx index d5bd0d6392..05ba840752 100644 --- a/packages/mint-components/src/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.tsx +++ b/packages/mint-components/src/components/sqm-payout-button-scroll/sqm-payout-button-scroll-view.tsx @@ -17,7 +17,7 @@ const style = { marginLeft: "auto", }, PayoutButtonDescription: { - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-small)", margin: "0", }, 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-container/readme.md b/packages/mint-components/src/components/sqm-portal-container/readme.md index 8fcd758e13..c2175c0db1 100644 --- a/packages/mint-components/src/components/sqm-portal-container/readme.md +++ b/packages/mint-components/src/components/sqm-portal-container/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | ----------------- | ------------------ | ----------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| `backgroundColor` | `background-color` | | `string` | `"#ffffff00"` | +| `backgroundColor` | `background-color` | | `string` | `undefined` | | `center` | `center` | | `boolean` | `undefined` | | `direction` | `direction` | | `"column" \| "row"` | `"column"` | | `display` | `display` | | `"flex" \| "grid"` | `"grid"` | diff --git a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx index 14e6bdf064..cd67591dcf 100644 --- a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx +++ b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container-view.tsx @@ -41,7 +41,7 @@ export function PortalContainerView( maxWidth: props.maxWidth, margin: props.center && "auto", justifyContent: props.justifyContent, - backgroundColor: props.backgroundColor || "transparent", + backgroundColor: props.backgroundColor || "var(--sqm-portal-background)", }, }; diff --git a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container.tsx b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container.tsx index a80a7776c4..4595810031 100644 --- a/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container.tsx +++ b/packages/mint-components/src/components/sqm-portal-container/sqm-portal-container.tsx @@ -90,7 +90,7 @@ export class PortalContainer { * @uiWidget color * @uiType string */ - @Prop() backgroundColor?: string = "#ffffff00"; + @Prop() backgroundColor?: string; constructor() { withHooks(this); 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..6eb973d180 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", "sqm-divided-layout", "sqm-referral-card", "sqm-instant-access-registration", "sqm-portal-frame", "sqm-referred-registration"] */ @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..95f830cba2 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,13 +71,17 @@ const successProps: PortalForgotPasswordViewProps = { submit: async (e) => await e, }, content: { - secondaryButton: "Cancel", + loginText: "Login", messageSlot: "Enter your email below to receive a password reset link.", }, }; export const Default = () => ; +export const DemoDataTest = () => ( + +); + export const ForgotPasswordWithError = () => ( ); 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..4c39aaba57 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,21 +7,28 @@ ## 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` | `"var(--sqm-border-thickness, 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 +### Used by + + - [sqm-stencilbook](../sqm-stencilbook) + ### Depends on - [sqm-form-message](../sqm-form-message) @@ -30,6 +37,7 @@ ```mermaid graph TD; sqm-portal-forgot-password --> sqm-form-message + sqm-stencilbook --> sqm-portal-forgot-password style sqm-portal-forgot-password fill:#f9f,stroke:#333,stroke-width:4px ``` 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 4b4b9d6f40..7d3afe92f8 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 @@ -16,11 +16,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..f3c5bc5e20 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 @@ -6,7 +6,7 @@ import { ProgramExplainerStepView } from "./sqm-program-explainer-step-view"; /** * @uiName Program Explainer Step * @exampleGroup Common Components - * @example Program Explainer Step - + * @example Program Explainer Step - * @validParents ["sqm-program-explainer"] */ @Component({ @@ -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..7ff90f2060 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,9 +5,11 @@ 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 - + * @example Program Explainer - */ @Component({ tag: "sqm-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/readme.md b/packages/mint-components/src/components/sqm-qr-code/readme.md index 7214567d8c..d9727eda37 100644 --- a/packages/mint-components/src/components/sqm-qr-code/readme.md +++ b/packages/mint-components/src/components/sqm-qr-code/readme.md @@ -20,6 +20,19 @@ | `viewCodeText` | `view-code-text` | | `string` | `"View QR code"` | +## Dependencies + +### Depends on + +- [sqm-form-message](../sqm-form-message) + +### Graph +```mermaid +graph TD; + sqm-qr-code --> sqm-form-message + style sqm-qr-code fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* 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..40ec6c359e 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-radio-card/sqm-radio-card-view.tsx b/packages/mint-components/src/components/sqm-radio-card/sqm-radio-card-view.tsx index 459dd1d06c..01bf2fd3ab 100644 --- a/packages/mint-components/src/components/sqm-radio-card/sqm-radio-card-view.tsx +++ b/packages/mint-components/src/components/sqm-radio-card/sqm-radio-card-view.tsx @@ -49,6 +49,13 @@ const vanillaStyle = ` sl-checkbox::part(control) { border-radius: 50%; } + sl-checkbox[checked]::part(control){ + background-color: var(--sqm-input-border-color-focus); + } + + sl-checkbox[checked]::part(checked-icon){ + color: var(--sqm-input-background); + } `; export const RadioCardView = ({ @@ -58,8 +65,8 @@ export const RadioCardView = ({ selected, }: RadioCardViewProps) => { const border = selected - ? "1px solid var(--sl-color-primary-500)" - : "1px solid #CACFD3"; + ? "var(--sqm-border-thickness) solid var(--sqm-primary-color)" + : "var(--sqm-border-thickness) solid 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 +71,30 @@ export class ReferralCard { * @uiWidget color * @uiType string */ - @Prop() backgroundColor: string = "#ffffff"; + @Prop() backgroundColor?: string; + + /** + * Border color of container + * @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 (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 or secondary). | `"primary" \| "secondary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }` | `undefined` | +| `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..2e550ab88c 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", "sqm-referral-codes"] * @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 or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" = "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/ReferralTable.stories.tsx b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx index 06a92541c4..b39ed7a9a4 100644 --- a/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/ReferralTable.stories.tsx @@ -1,30 +1,28 @@ import { h } from "@stencil/core"; +import { Reward } from "../../saasquatch"; import { GenericTableView } from "../../tables/GenericTableView"; +import { + Converted as ConvertedStatus, + DateCell, + Denied as DeniedStatus, + InProgress, + PendingReview as PendingReviewStatus, + Pending as PendingStatus, +} from "./ReferralTableCell.stories"; import { AvailableNoExpiry, - Cancelled, - PendingNoUnpend, - PendingWithUnpend, - Redeemed, Denied, - PendingReview, - PayoutSent, + PayoutCancelled, PayoutFailed, + PayoutSent, PendingNewTaxForm, + PendingNoUnpend, PendingPartnerCreation, + PendingReview, PendingTaxReview, PendingTaxSubmission, - PayoutCancelled, + Redeemed, } from "./ReferralTableRewardsCell.stories"; -import { - DateCell, - PendingReview as PendingReviewStatus, - Pending as PendingStatus, - Denied as DeniedStatus, - Converted as ConvertedStatus, - InProgress, - Pending, -} from "./ReferralTableCell.stories"; import scenario from "./referral-table.feature"; export default { diff --git a/packages/mint-components/src/components/sqm-referral-table/ReferralTableCell.stories.tsx b/packages/mint-components/src/components/sqm-referral-table/ReferralTableCell.stories.tsx index c8838f1755..a1fce9f6a3 100644 --- a/packages/mint-components/src/components/sqm-referral-table/ReferralTableCell.stories.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/ReferralTableCell.stories.tsx @@ -1,4 +1,5 @@ import { h } from "@stencil/core"; +import { Reward } from "../../saasquatch"; import column from "./columns/referral-table-column.feature"; import date from "./columns/referral-table-date-column.feature"; import reward from "./columns/referral-table-rewards-column.feature"; diff --git a/packages/mint-components/src/components/sqm-referral-table/ReferralTableRewardsCell.stories.tsx b/packages/mint-components/src/components/sqm-referral-table/ReferralTableRewardsCell.stories.tsx index 34a2c19ca9..a8d99a611d 100644 --- a/packages/mint-components/src/components/sqm-referral-table/ReferralTableRewardsCell.stories.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/ReferralTableRewardsCell.stories.tsx @@ -1,5 +1,6 @@ import { h } from "@stencil/core"; import { DateTime } from "luxon"; +import { Reward } from "../../saasquatch"; import column from "./columns/referral-table-column.feature"; import date from "./columns/referral-table-date-column.feature"; import rewards from "./columns/referral-table-rewards-column.feature"; 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 5281a5c7f6..7f044a5108 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 @@ -1,6 +1,7 @@ import { Component, h, Prop } from "@stencil/core"; import { DateTime } from "luxon"; import { intl } from "../../../global/global"; +import { ImpactConnection, Reward } from "../../../saasquatch"; import { createStyleSheet } from "../../../styling/JSS"; import { luxonLocale } from "../../../utils/utils"; import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view"; @@ -40,9 +41,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 +50,7 @@ export class ReferralTableRewardsCell { padding: "var(--sl-spacing-x-small) var(--sl-spacing-medium)", }, "&::part(base)": { + border: "var(--sqm-border-thickness) solid var(--sqm-border-color)", opacity: "1", }, "&::part(summary-icon)": { @@ -59,7 +59,6 @@ export class ReferralTableRewardsCell { "&::part(summary-icon[open])": { transform: "rotate(-90deg)", - background: "red", }, }, @@ -72,24 +71,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(--sl-color-white)", }, }, - 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(--sl-color-white)", + }, + }, + WarningBadge: { + paddingLeft: "var(--sl-spacing-xxx-small)", + "&::part(base)": { + textAlign: "center", + maxWidth: "170px", + whiteSpace: "pre-line", + background: "var(--sqm-warning-color-icon)", + color: "var(--sl-color-white)", + }, + }, + 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(--sl-color-white)", }, }, }; 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, @@ -158,7 +209,7 @@ export class ReferralTableRewardsCell { ); }; - const getSLBadgeType = (state: string): string => { + const getSLBadgeType = (state: string): ShoeLaceBadgeType => { switch (state) { case "REDEEMED": case "PAYOUT_APPROVED": @@ -225,11 +276,7 @@ export class ReferralTableRewardsCell {
{state === "PENDING" && reward.dateScheduledFor ? ( @@ -246,11 +293,7 @@ export class ReferralTableRewardsCell { ) : ( @@ -259,11 +302,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..5d53363f7e 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 @@ -1,18 +1,56 @@ import { Component, h, Prop } from "@stencil/core"; +import { FraudStatus } from "../../../saasquatch"; 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(--sl-color-white)", }, }, - 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(--sl-color-white)", + }, + }, + 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(--sl-color-white)", + }, + }, + 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(--sl-color-white)", + }, }, }; @@ -30,6 +68,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 +79,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/columns/ReferralTableColumn.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/ReferralTableColumn.tsx index f36cbbece2..077d676b42 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/ReferralTableColumn.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/ReferralTableColumn.tsx @@ -1,4 +1,5 @@ import { VNode } from "@stencil/core"; +import { ImpactConnection, Referral, Referrer } from "../../../saasquatch"; export interface ReferralTableColumn { renderLabel(): Promise; diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-column.tsx index 381f33ab7e..bdd8e8a802 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-column.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, getElement, h, Host, Method, Prop } from "@stencil/core"; +import { Referral } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { ReferralTableColumn } from "./ReferralTableColumn"; diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-date-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-date-column.tsx index 90e426164c..c3e2aa1440 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-date-column.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-date-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Referral, Referrer } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { ReferralDates } from "../useReferralTable"; import { ReferralTableColumn } from "./ReferralTableColumn"; diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.tsx index f8c40f2edf..ce582c2277 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-rewards-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { ImpactConnection, Referral, Referrer } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { ReferralTableColumn } from "./ReferralTableColumn"; diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-status-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-status-column.tsx index f57fc525e7..71dffc4ba6 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-status-column.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-status-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { FraudStatus, Referral, Referrer } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { ReferralTableColumn } from "./ReferralTableColumn"; diff --git a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx index 9082688579..5844bd424e 100644 --- a/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/columns/sqm-referral-table-user-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Referral, Referrer } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { ReferralTableColumn } from "./ReferralTableColumn"; 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 76cef78875..c130034b21 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 @@ -4,6 +4,7 @@ import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks"; import { Component, h, Prop, VNode } from "@stencil/core"; import deepmerge from "deepmerge"; import { DemoData } from "../../global/demo"; +import { Referral } from "../../saasquatch"; import { GenericTableView, GenericTableViewProps, @@ -18,6 +19,8 @@ import { tryMethod, useReferralTable } from "./useReferralTable"; /** * @uiName Referral Table + * @validParents ["sqm-portal-container","div","sqm-divided-layout","template","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-referral-table/useReferralTable.tsx b/packages/mint-components/src/components/sqm-referral-table/useReferralTable.tsx index d216ba2613..1a414aff1c 100644 --- a/packages/mint-components/src/components/sqm-referral-table/useReferralTable.tsx +++ b/packages/mint-components/src/components/sqm-referral-table/useReferralTable.tsx @@ -9,6 +9,7 @@ import { useEffect, useReducer } from "@saasquatch/universal-hooks"; import { h, VNode } from "@stencil/core"; import debugFn from "debug"; import { gql } from "graphql-request"; +import { ImpactConnection, Referral } from "../../saasquatch"; import { GenericTableViewProps } from "../../tables/GenericTableView"; import { useRerenderListener } from "../../tables/re-render"; import { useChildElements } from "../../tables/useChildElements"; diff --git a/packages/mint-components/src/components/sqm-referred-registration/readme.md b/packages/mint-components/src/components/sqm-referred-registration/readme.md index 5b7e9af41b..50c1a94b11 100644 --- a/packages/mint-components/src/components/sqm-referred-registration/readme.md +++ b/packages/mint-components/src/components/sqm-referred-registration/readme.md @@ -9,7 +9,7 @@ | Property | Attribute | Description | Type | Default | | --------------------------- | ------------------------------ | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -| `backgroundColor` | `background-color` | | `string` | `"#ffffff"` | +| `backgroundColor` | `background-color` | | `string` | `undefined` | | `demoData` | -- | | `{ states?: { error: string; loading: boolean; registrationFormState?: RegistrationFormState; }; content?: { hideBorder?: boolean; fraudErrorMessage?: string; fraudErrorMessageTitle?: string; emailLabel?: string; firstNameLabel?: string; lastNameLabel?: string; registerLabel?: string; includeName?: boolean; topSlot?: VNode; bottomSlot?: VNode; invalidEmailErrorMessage: string; requiredFieldErrorMessage: string; paddingTop?: string; paddingRight?: string; paddingBottom?: string; paddingLeft?: string; backgroundColor?: string; }; }` | `undefined` | | `emailLabel` | `email-label` | | `string` | `"Email"` | | `firstNameLabel` | `first-name-label` | | `string` | `"First Name"` | @@ -31,6 +31,10 @@ ## Dependencies +### Used by + + - [sqm-stencilbook](../sqm-stencilbook) + ### Depends on - [sqm-form-message](../sqm-form-message) @@ -39,6 +43,7 @@ ```mermaid graph TD; sqm-referred-registration --> sqm-form-message + sqm-stencilbook --> sqm-referred-registration style sqm-referred-registration fill:#f9f,stroke:#333,stroke-width:4px ``` 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..eafa1ed385 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({ @@ -143,7 +144,7 @@ export class ReferredRegistration { * @uiGroup Card style * @uiType string */ - @Prop() backgroundColor: string = "#ffffff"; + @Prop() backgroundColor: string; /** * @undocumented diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeList.stories.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeList.stories.tsx index a908b966df..a7539c41ec 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeList.stories.tsx +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeList.stories.tsx @@ -5,7 +5,6 @@ import { } from "./sqm-reward-exchange-list-view"; import * as Data from "./RewardExchangeListData"; import scenario from "./sqm-reward-exchange-list.feature"; -import { RewardExchangeProps } from "./useRewardExchangeList"; export default { title: "Components/Reward Exchange List", @@ -14,35 +13,50 @@ export default { }, }; -const StoryBase = (props: RewardExchangeViewProps) => () => { - return ; +const StoryBase = (props: RewardExchangeViewProps) => { + return ; }; -export const ChooseReward = StoryBase(Data.rewardExchange); -export const CustomErrorMessage = StoryBase(Data.rewardExchangeCustomErrorMsg); -export const LongTextRewardExhange = StoryBase(Data.rewardExchangeLongText); -export const ChooseRewardSelected = StoryBase(Data.rewardExchangeSelected); -export const ChooseAmount = StoryBase(Data.chooseAmountFixed); -export const ChooseAmountNoDescription = StoryBase( - Data.chooseAmountFixedNoDescription -); -export const ChooseAmountVariableAndStepped = StoryBase( - Data.chooseAmountVariable -); -export const ChooseAmountVariableAndSteppedNoDescription = StoryBase( - Data.chooseAmountVariableNoDescription -); -export const chooseAmountVariableAndSteppedDisabled = StoryBase( - Data.chooseAmountVariableDisabled -); -export const chooseAmountVariableAndSteppedUnavailable = StoryBase( - Data.chooseAmountVariableUnavailable -); -export const Confirm = StoryBase(Data.confirmFixed); -export const ConfirmVariableAndStepped = StoryBase(Data.confirmVariable); -export const RedemptionError = StoryBase(Data.redemptionError); -export const QueryError = StoryBase(Data.queryError); -export const SuccessPromo = StoryBase(Data.success); -export const SuccessVariableAndStepped = StoryBase(Data.successVariable); -export const Loading = StoryBase(Data.loading); -export const Empty = StoryBase(Data.empty); +export const ChooseReward = () => StoryBase(Data.rewardExchange); + +export const CustomErrorMessage = () => + StoryBase(Data.rewardExchangeCustomErrorMsg); + +export const LongTextRewardExhange = () => + StoryBase(Data.rewardExchangeLongText); + +export const ChooseRewardSelected = () => + StoryBase(Data.rewardExchangeSelected); + +export const ChooseAmount = () => StoryBase(Data.chooseAmountFixed); + +export const ChooseAmountNoDescription = () => + StoryBase(Data.chooseAmountFixedNoDescription); + +export const ChooseAmountVariableAndStepped = () => + StoryBase(Data.chooseAmountVariable); + +export const ChooseAmountVariableAndSteppedNoDescription = () => + StoryBase(Data.chooseAmountVariableNoDescription); + +export const chooseAmountVariableAndSteppedDisabled = () => + StoryBase(Data.chooseAmountVariableDisabled); + +export const chooseAmountVariableAndSteppedUnavailable = () => + StoryBase(Data.chooseAmountVariableUnavailable); + +export const Confirm = () => StoryBase(Data.confirmFixed); + +export const ConfirmVariableAndStepped = () => StoryBase(Data.confirmVariable); + +export const RedemptionError = () => StoryBase(Data.redemptionError); + +export const QueryError = () => StoryBase(Data.queryError); + +export const SuccessPromo = () => StoryBase(Data.success); + +export const SuccessVariableAndStepped = () => StoryBase(Data.successVariable); + +export const Loading = () => StoryBase(Data.loading); + +export const Empty = () => StoryBase(Data.empty); diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeListData.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeListData.tsx index 9c2c495548..f40b5f773d 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeListData.tsx +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/RewardExchangeListData.tsx @@ -1,4 +1,6 @@ import { h } from "@stencil/core"; +import { RewardExchangeViewProps } from "./sqm-reward-exchange-list-view"; +import { ExchangeItem } from "./useRewardExchangeList"; const baseResponse = ( data, @@ -10,7 +12,7 @@ const baseResponse = ( fueltank = null, noExchangeOptions = false, queryError = false -) => ({ +): RewardExchangeViewProps => ({ states: { content: { text: { @@ -75,17 +77,18 @@ const baseResponse = ( setStage: null, setExchangeState: null, copyFuelTankCode: null, - refs: null, + // refs: null, }, refs: null, }); -const baseReward = { - key: "", - name: "", +const baseReward: ExchangeItem = { + key: "reward", + name: "Demo Reward", description: "Description of reward. Lorem ipsum dolor sit amet, consectetur adipiscing. Id nec semper sapien dignissim rhoncus nunc.", - imageUrl: "", + imageUrl: + "https://res.cloudinary.com/saasquatch/image/upload/v1643653103/squatch-assets/default_rewards_1.png", available: true, unavailableReasonCode: null, ruleType: "FIXED_GLOBAL_REWARD", @@ -102,7 +105,34 @@ const baseReward = { prettyDestinationMaxValue: null, globalRewardKey: "", destinationUnit: null, - steps: [], + steps: [ + { + prettyDestinationValue: "Reward Step 1", + prettySourceValue: "50 Points", + available: true, + unavailableReasonCode: null, + destinationValue: 10, + sourceValue: 1, + globalRewardKey: "reward1", + rewardInput: { + accountId: "zach", + userId: "zach", + }, + }, + { + prettyDestinationValue: "Reward Step 2", + prettySourceValue: "100 Points", + available: false, + unavailableReasonCode: "Not enough points", + destinationValue: 10, + sourceValue: 1, + globalRewardKey: "reward1", + rewardInput: { + accountId: "zach", + userId: "zach", + }, + }, + ], }; const notEnoughPoints = { @@ -262,7 +292,7 @@ export const rewardExchange = { }; export const demoRewardExchange = { - ...baseResponse(demoData), + ...baseResponse(demoData, "chooseReward", baseReward), }; export const rewardExchangeLongText = { diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/progressBar.tsx b/packages/mint-components/src/components/sqm-reward-exchange-list/progressBar.tsx index 278e66dd82..dacd5f1703 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/progressBar.tsx +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/progressBar.tsx @@ -21,15 +21,15 @@ function Dot({
callbacks.setStage("chooseAmount")} @@ -708,7 +709,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} @@ -717,6 +718,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { exportparts="base: primarybutton-base" class="continue" size="large" + type="primary" onClick={() => callbacks.setStage("confirmation")} disabled={isDisabled} > @@ -730,7 +732,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { function confirmation() { const cost = - selectedStep?.prettySourceValue || selectedItem.prettySourceValue; + selectedStep?.prettySourceValue || selectedItem?.prettySourceValue; const amount = selectedStep?.prettyDestinationValue; return ( @@ -742,7 +744,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) {
{states.content.text.rewardNameTitle}
-
{selectedItem.name}
+
{selectedItem?.name}
callbacks.setStage("chooseAmount")} > @@ -778,6 +780,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { @@ -803,12 +806,12 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { }, { sourceValue: - states.selectedItem.prettySourceValue ?? + states.selectedItem?.prettySourceValue ?? states.selectedStep?.prettySourceValue, destinationValue: states.selectedStep?.prettyDestinationValue || states.selectedItem?.name || - states.selectedItem.globalRewardKey, + states.selectedItem?.globalRewardKey, } )}
@@ -880,7 +883,7 @@ export function RewardExchangeView(props: RewardExchangeViewProps) { width: "100px", height: "100px", margin: "9px", - "--border-radius": "4px", + "--border-radius": "var(--sqm-border-radius-normal)", }} >
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..8bc641a5b0 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 @@ -1,24 +1,24 @@ -import { Component, h, Host, Prop, State, VNode } from "@stencil/core"; +import { isDemo } from "@saasquatch/component-boilerplate"; import { withHooks } from "@saasquatch/stencil-hooks"; +import { Component, h, Host, Prop, State } from "@stencil/core"; +import deepmerge from "deepmerge"; +import { DemoData } from "../../global/demo"; +import { parseStates } from "../../utils/parseStates"; +import { getProps } from "../../utils/utils"; +import { demoRewardExchange } from "./RewardExchangeListData"; +import { + RewardExchangeView, + RewardExchangeViewProps, +} from "./sqm-reward-exchange-list-view"; import { - ExchangeState, RewardExchangeProps, - Stages, useRewardExchangeList, - ExchangeStep, } from "./useRewardExchangeList"; -import { - RewardExchangeViewProps, - RewardExchangeView, -} from "./sqm-reward-exchange-list-view"; -import { isDemo } from "@saasquatch/component-boilerplate"; -import deepmerge from "deepmerge"; -import { DemoData } from "../../global/demo"; -import { getProps } from "../../utils/utils"; -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 - @@ -193,6 +193,14 @@ export class SqmRewardExchangeList { */ @Prop() costTitle: string = "Cost to Redeem"; + /** + * @componentState { "title": "Choose reward", "props": { "states": { "redeemStage": "chooseReward" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Reward details", "props": { "states": { "redeemStage": "chooseAmount" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Confirm exchange", "props": { "states": { "redeemStage": "confirmation" } }, "dependencies": ["sqm-reward-exchange-list"] } + * @componentState { "title": "Exchange successful", "props": { "states": { "redeemStage": "success" } }, "dependencies": ["sqm-reward-exchange-list"] } + */ + @Prop() stateController: string = "{}"; + /** * @undocumented * @uiType object @@ -245,40 +253,19 @@ function EmptySlot() { } function useRewardExchangeListDemo(props: RewardExchangeProps) { - return deepmerge( - { - states: { - content: { - text: props, - }, - redeemStage: "chooseReward", - amount: 0, - selectedStep: undefined, - selectedItem: undefined, - open: false, - exchangeError: false, - queryError: false, - loading: false, - noExchangeOptions: false, - empty: EmptySlot(), - }, - - data: { - shareCode: "SHARECODE123", - exchangeList: demoRewardExchange.data.exchangeList, - }, - callbacks: { - exchangeReward: () => {}, - setExchangeState: (_: ExchangeState) => {}, - setStage: (_: Stages) => {}, - resetState: () => {}, - copyFuelTankCode: () => {}, - }, - refs: { - canvasRef: {}, - }, - }, - props.demoData || {}, + const states = parseStates(props.stateController); + const formatted = Object.keys(states).reduce( + (prev, key) => + key === "sqm-reward-exchange-list" + ? { ...prev, ...states[key] } + : { ...prev, [`${key}_stateController`]: states[key] }, + {} + ); + + const finalProps = deepmerge( + { ...demoRewardExchange, content: { text: props } }, + props.demoData || formatted || {}, { arrayMerge: (_, a) => a } ); + return finalProps; } diff --git a/packages/mint-components/src/components/sqm-reward-exchange-list/useRewardExchangeList.ts b/packages/mint-components/src/components/sqm-reward-exchange-list/useRewardExchangeList.ts index ed4dc1a4f4..8e6cb9920d 100644 --- a/packages/mint-components/src/components/sqm-reward-exchange-list/useRewardExchangeList.ts +++ b/packages/mint-components/src/components/sqm-reward-exchange-list/useRewardExchangeList.ts @@ -95,6 +95,7 @@ export interface RewardExchangeProps { rewardRedeemedText: string; costTitle: string; empty: VNode; + stateController: string; demoData?: object; } diff --git a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx index c44bb81a47..0077b11907 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/RewardsTableCell.stories.tsx @@ -1,8 +1,9 @@ import { h } from "@stencil/core"; +import { ImpactConnection, Reward } from "../../saasquatch"; import scenario1 from "./columns/sqm-rewards-table-date-column.feature"; import scenario2 from "./columns/sqm-rewards-table-reward-column.feature"; -import scenario3 from "./columns/sqm-rewards-table-status-column.feature"; import scenario4 from "./columns/sqm-rewards-table-source-column.feature"; +import scenario3 from "./columns/sqm-rewards-table-status-column.feature"; const scenario = scenario1 + scenario2 + scenario3 + scenario4; 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..45fc701b06 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 @@ -1,5 +1,6 @@ import { Component, h, Prop } from "@stencil/core"; import { intl } from "../../../global/global"; +import { Reward } from "../../../saasquatch"; import { createStyleSheet } from "../../../styling/JSS"; const style = { @@ -181,11 +182,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 +202,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..4b34fb63f6 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 @@ -1,6 +1,6 @@ import { Component, h, Prop } from "@stencil/core"; import { intl } from "../../../global/global"; -import { TextSpanView } from "../../sqm-text-span/sqm-text-span-view"; +import { Reward } from "../../../saasquatch"; @Component({ tag: "sqm-rewards-table-source-cell", @@ -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 a8dd64d0c5..a828039752 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 @@ -1,6 +1,7 @@ import { Component, h, Prop } from "@stencil/core"; import { DateTime } from "luxon"; import { intl } from "../../../global/global"; +import { ImpactConnection, Reward } from "../../../saasquatch"; import { createStyleSheet } from "../../../styling/JSS"; import { luxonLocale } from "../../../utils/utils"; @@ -15,15 +16,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(--sl-color-white)", + }, + }, + DangerBadge: { + "&::part(base)": { + padding: "4px 8px", + fontSize: "var(--sl-font-size-small)", + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-danger-color-icon)", + color: "var(--sl-color-white)", + }, + }, + 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(--sl-color-white)", + }, + }, + SuccessBadge: { + "&::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-success-color-icon)", + color: "var(--sl-color-white)", }, }, Date: { fontSize: "var(--sl-font-size-small)", - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", margin: "0", }, }; @@ -208,18 +242,28 @@ export class RewardTableStatusCell { ? this.deniedText : null; + // @ts-ignore + const getBadgeCSSClass = (badgeType: string): 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/RewardTableColumn.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx index 6372c80b21..db9b23081c 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/RewardTableColumn.tsx @@ -1,4 +1,5 @@ import { VNode } from "@stencil/core"; +import { ImpactConnection, Reward } from "../../../saasquatch"; export interface RewardTableColumn { renderLabel(idx?: number): Promise; diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx index 32863f2751..f6f6cf416d 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-date-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Reward } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; @@ -7,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn"; * @uiName Reward Table Date Column * @validParents ["sqm-rewards-table"] * @exampleGroup Rewards - * @example Reward Table Date Column - + * @example Date Column - */ @Component({ tag: "sqm-rewards-table-date-column", diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx index 9194c7e005..6aca10a21d 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-note-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Reward } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; @@ -7,7 +8,7 @@ import { RewardTableColumn } from "./RewardTableColumn"; * @uiName Reward Table Customer Note Column * @validParents ["sqm-rewards-table"] * @exampleGroup Rewards - * @example Reward Table Customer Note Column - + * @example Customer Note Column - */ @Component({ tag: "sqm-rewards-table-customer-note-column", diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx index f61378edff..2a88926a51 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-reward-column.tsx @@ -1,12 +1,13 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Reward } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; /** * @uiName Rewards Table Reward Column * @validParents ["sqm-rewards-table"] * @exampleGroup Rewards - * @example Rewards Table Reward Column - + * @example Reward Column - */ @Component({ tag: "sqm-rewards-table-reward-column", diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx index 3d320bcac1..9b43e98426 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-source-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { Reward } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; diff --git a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx index 1efb6f42f7..f4a4a71bab 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/columns/sqm-rewards-table-status-column.tsx @@ -1,5 +1,6 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, h, Host, Method, Prop } from "@stencil/core"; +import { ImpactConnection, Reward } from "../../../saasquatch"; import { useRequestRerender } from "../../../tables/re-render"; import { RewardTableColumn } from "./RewardTableColumn"; diff --git a/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts b/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts index ebd0a7b60b..f39b2911b2 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts +++ b/packages/mint-components/src/components/sqm-rewards-table/mockRewardData.ts @@ -1,4 +1,5 @@ import { DateTime } from "luxon"; +import { Reward } from "../../saasquatch"; export default (count = 4, status = undefined) => { const data = [...Array(count)].map(() => getMockData(status)) as Reward[]; diff --git a/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts b/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts index 853c95458e..59afe0ab4d 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts +++ b/packages/mint-components/src/components/sqm-rewards-table/mockTaxData.ts @@ -1,3 +1,5 @@ +import { ImpactConnection } from "../../saasquatch"; + export default (): ImpactConnection => { return { connected: true, diff --git a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx index 820e088495..f8180e4a56 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/sqm-rewards-table.tsx @@ -1,6 +1,6 @@ import { isDemo } from "@saasquatch/component-boilerplate"; import { withHooks } from "@saasquatch/stencil-hooks"; -import { useEffect, useReducer, useMemo } from "@saasquatch/universal-hooks"; +import { useEffect, useMemo, useReducer } from "@saasquatch/universal-hooks"; import { Component, h, Prop, VNode } from "@stencil/core"; import deepmerge from "deepmerge"; import { DemoData } from "../../global/demo"; @@ -15,10 +15,12 @@ import { import { useChildElements } from "../../tables/useChildElements"; import mockRewardData from "./mockRewardData"; +import { Referral } from "../../saasquatch"; import { tryMethod, useRewardsTable } from "./useRewardsTable"; /** * @uiName Reward Table + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab","sqb-program-section","sqb-conditional-section"] * @exampleGroup Rewards * @slots [{"name":"", "title":"Table Row"},{"name":"empty", "title":"Empty"},{"name":"loading","title":"Loading"}] * @example Reward Table - diff --git a/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx b/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx index adfb60b1a6..b000379212 100644 --- a/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx +++ b/packages/mint-components/src/components/sqm-rewards-table/useRewardsTable.tsx @@ -7,15 +7,14 @@ import { } from "@saasquatch/component-boilerplate"; import { useEffect, useReducer } from "@saasquatch/universal-hooks"; import { h, VNode } from "@stencil/core"; +import debugFn from "debug"; import { gql } from "graphql-request"; +import { ImpactConnection, Reward } from "../../saasquatch"; +import { GenericTableViewProps } from "../../tables/GenericTableView"; import { useRerenderListener } from "../../tables/re-render"; -import { RewardsTable } from "./sqm-rewards-table"; import { useChildElements } from "../../tables/useChildElements"; import { generateUserError } from "../sqm-referral-table/useReferralTable"; -import { GenericTableViewProps } from "../../tables/GenericTableView"; -import debugFn from "debug"; -import mockRewardData from "./mockRewardData"; -import mockTaxData from "./mockTaxData"; +import { RewardsTable } from "./sqm-rewards-table"; const debug = debugFn("sq:useRewardsTable"); export const CSS_NAMESPACE = "sqm-rewards-table"; diff --git a/packages/mint-components/src/components/sqm-route/sqm-route.tsx b/packages/mint-components/src/components/sqm-route/sqm-route.tsx index b2408cc4d6..b8f5d3ec4e 100644 --- a/packages/mint-components/src/components/sqm-route/sqm-route.tsx +++ b/packages/mint-components/src/components/sqm-route/sqm-route.tsx @@ -5,6 +5,7 @@ export interface RouteProps { /** * @uiName Route + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab"] * @slots [{"name":"","title":"Content"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-router/sqm-router.tsx b/packages/mint-components/src/components/sqm-router/sqm-router.tsx index d180528112..6df2e86c51 100644 --- a/packages/mint-components/src/components/sqm-router/sqm-router.tsx +++ b/packages/mint-components/src/components/sqm-router/sqm-router.tsx @@ -4,6 +4,8 @@ import { useRouter } from "./useRouter"; /** * @uiName Router + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero","sqm-tab", "sqb-program-section", "sqb-conditional-section"] + * @validChildren ["sqm-route"] * @slots [{"name":"","title":"Routes"}] */ @Component({ diff --git a/packages/mint-components/src/components/sqm-scroll/readme.md b/packages/mint-components/src/components/sqm-scroll/readme.md index 9a3fba3a7e..5ec8ef920d 100644 --- a/packages/mint-components/src/components/sqm-scroll/readme.md +++ b/packages/mint-components/src/components/sqm-scroll/readme.md @@ -5,20 +5,19 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ----------- | -| `buttonText` | `button-text` | | `string` | `undefined` | -| `buttonType` | `button-type` | | `"danger" \| "default" \| "neutral" \| "primary" \| "success" \| "text" \| "warning"` | `"default"` | -| `circle` | `circle` | Draws a circle button. | `boolean` | `undefined` | -| `iconName` | `icon-name` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` | -| `iconSlot` | `icon-slot` | | `string` | `undefined` | -| `mobile` | `mobile` | The button becomes full width if the screen size is smaller than 500px | `boolean` | `undefined` | -| `outline` | `outline` | Draws an outlined button. | `boolean` | `undefined` | -| `pill` | `pill` | Draws a pill-style button with rounded edges. | `boolean` | `undefined` | -| `scrollAnimation` | `scroll-animation` | | `"auto" \| "smooth"` | `"smooth"` | -| `scrollId` | `scroll-id` | ID applied to the HTML tag you would like to scroll to. E.g tab-1 | `string` | `undefined` | -| `scrollTagName` | `scroll-tag-name` | The name of the HTML tag you would like to scroll to. E.g referral-table | `string` | `undefined` | -| `size` | `size` | | `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ----------- | +| `buttonText` | `button-text` | | `string` | `undefined` | +| `circle` | `circle` | Draws a circle button. | `boolean` | `undefined` | +| `iconName` | `icon-name` | Full list of valid icon names available in the [Shoelace Icon Library](https://shoelace.style/components/icon). This value is case sensitive. | `string` | `undefined` | +| `iconSlot` | `icon-slot` | | `string` | `undefined` | +| `mobile` | `mobile` | The button becomes full width if the screen size is smaller than 500px | `boolean` | `undefined` | +| `outline` | `outline` | Draws an outlined button. | `boolean` | `undefined` | +| `pill` | `pill` | Draws a pill-style button with rounded edges. | `boolean` | `undefined` | +| `scrollAnimation` | `scroll-animation` | | `"auto" \| "smooth"` | `"smooth"` | +| `scrollId` | `scroll-id` | ID applied to the HTML tag you would like to scroll to. E.g tab-1 | `string` | `undefined` | +| `scrollTagName` | `scroll-tag-name` | The name of the HTML tag you would like to scroll to. E.g referral-table | `string` | `undefined` | +| `size` | `size` | | `string` | `undefined` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx b/packages/mint-components/src/components/sqm-scroll/sqm-scroll.tsx index f683ce85be..a0656286eb 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 */ @@ -16,22 +17,6 @@ export class Scroll { @State() ignored = true; - /** - * @uiName Button type - * @uiType string - * @uiEnum ["default", "primary", "success", "neutral", "warning", "danger", "text"] - * @uiEnumNames ["Default", "Primary", "Success", "Neutral", "Warning", "Danger", "Text"] - - */ - @Prop() buttonType: - | "default" - | "primary" - | "success" - | "neutral" - | "warning" - | "danger" - | "text" = "default"; - /** * @uiName Button text */ @@ -116,86 +101,42 @@ export class Scroll { render() { const { callbacks } = useScroll(this); - const outlineColor = this.buttonType ?? "primary"; - const style = { - Button: { - "& .outline": { - "&::part(base)": { - color: "var(--sl-color-" + outlineColor + "-500)", - borderColor: "var(--sl-color-" + outlineColor + "-500)", - backgroundColor: "transparent", - "&:hover": { - color: "var(--sl-color-primary-text)", - backgroundColor: "var(--sl-color-" + outlineColor + "-500)", - }, - }, - }, - "& .neutral": { - "&::part(base)": { - color: "var(--sl-color-primary-text)", - background: "var(--sl-color-neutral-500)", - "&:hover": { - opacity: "0.8", - }, - }, - }, - "& .mobile": { - "@media (max-width: 499px)": { - width: "100%", - }, - }, - }, - }; - - const sheet = createStyleSheet(style); - const styleString = sheet.toString(); - - const vanillaStyle = ` - :host{ - display: contents; - } - ${ - this.mobile && - ` - @media only screen and (max-width: 499px) { - :host { - display: block; - width: 100%; - } - } - ` + const vanillaStyleString = ` + *::part(secondarybutton-base), + sl-button[type="secondary"]::part(base) { + font-family: var(--sqm-primary-font); + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); } - `; - - let classStack = ""; - if (this.outline && this.buttonType != "default") classStack += "outline "; - if (this.buttonType === "neutral") classStack += "neutral "; - if (this.mobile) classStack += "mobile "; + *::part(secondarybutton-base):hover, + sl-button[type="secondary"]::part(base):hover { + background-color: var(--sqm-secondary-button-background-hover); + color: var(--sqm-secondary-button-color-hover); + border-color: var(--sqm-secondary-button-border-color-hover); + } + `; return ( -

- - - {(this.iconSlot || this.iconName) && ( - - )} - {this.buttonText} - - -
+ + + {(this.iconSlot || this.iconName) && ( + + )} + {this.buttonText} + + ); } } diff --git a/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx b/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx index cf451b65c8..64ef0bab80 100644 --- a/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx +++ b/packages/mint-components/src/components/sqm-share-button/ShareButton.stories.tsx @@ -53,13 +53,15 @@ export const TextStyleWithoutIcon = () => { return Share; }; -export const WithCustomColors = () => { +export const WithCustomColorsAndBranding = () => { const props = { medium: "facebook", type: "text", backgroundcolor: "red", textcolor: "yellow", iconslot: "prefix", + border: "2px solid yellow", + borderradius: 30, } as const; return Facebook; }; diff --git a/packages/mint-components/src/components/sqm-share-button/readme.md b/packages/mint-components/src/components/sqm-share-button/readme.md index 2ecd38695c..2e0d6d7ec3 100644 --- a/packages/mint-components/src/components/sqm-share-button/readme.md +++ b/packages/mint-components/src/components/sqm-share-button/readme.md @@ -7,26 +7,27 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | -| `backgroundcolor` | `backgroundcolor` | | `string` | `undefined` | -| `borderradius` | `borderradius` | Configure border radius with pixel amount | `number` | `undefined` | -| `demoData` | -- | | `{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: "facebook" \| "twitter" \| "email" \| "direct" \| "linkedin" \| "sms" \| "fbmessenger" \| "whatsapp" \| "linemessenger" \| "pinterest" \| "reminder" \| "unknown"; pill?: boolean; type?: "text" \| "warning" \| "info" \| "success" \| "default" \| "primary" \| "danger"; size?: "small" \| "medium" \| "large"; hideicon?: boolean; hidetext?: boolean; iconslot?: "prefix" \| "suffix"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }` | `undefined` | -| `disabled` | `disabled` | | `boolean` | `undefined` | -| `hideicon` | `hideicon` | | `boolean` | `false` | -| `hidetext` | `hidetext` | | `boolean` | `false` | -| `icon` | `icon` | Options available at https://shoelace.style/components/icon Icon used in button. Will try to select an icon based on the share medium if left empty. | `string` | `undefined` | -| `iconslot` | `iconslot` | | `"prefix" \| "suffix"` | `"prefix"` | -| `medium` | `medium` | The social medium to share on. Share messages and links will be pulled from your program config and tagged for analytics. | `"direct" \| "email" \| "facebook" \| "fbmessenger" \| "linemessenger" \| "linkedin" \| "pinterest" \| "reminder" \| "sms" \| "twitter" \| "unknown" \| "whatsapp"` | `undefined` | -| `pill` | `pill` | | `boolean` | `undefined` | -| `programId` | `program-id` | Optional programId, or uses the programId context where this button is rendered. | `string` | `undefined` | -| `sharetext` | `sharetext` | Text used for native sharing (mobile only) | `string` | `undefined` | -| `sharetitle` | `sharetitle` | Title used for native sharing (mobile only) | `string` | `undefined` | -| `size` | `size` | | `"large" \| "medium" \| "small"` | `undefined` | -| `textcolor` | `textcolor` | | `string` | `undefined` | -| `type` | `type` | | `"danger" \| "default" \| "info" \| "primary" \| "success" \| "text" \| "warning"` | `"default"` | -| `undefinedLinkText` | `undefined-link-text` | Alert text shown if the share link is undefined | `string` | `"Error: message link undefined!"` | -| `unsupportedPlatformText` | `unsupported-platform-text` | Alert text shown if the user's device does not support native sharing | `string` | `"Error: not on a supported device"` | +| Property | Attribute | Description | Type | Default | +| ------------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | +| `backgroundcolor` | `backgroundcolor` | | `string` | `undefined` | +| `border` | `border` | | `string` | `undefined` | +| `borderradius` | `borderradius` | Configure border radius with pixel amount | `number` | `undefined` | +| `demoData` | -- | | `{ loading?: boolean; icon?: string; disabled?: boolean; onClick?: () => void; medium?: "facebook" \| "twitter" \| "email" \| "direct" \| "linkedin" \| "sms" \| "fbmessenger" \| "whatsapp" \| "linemessenger" \| "pinterest" \| "reminder" \| "unknown"; border?: string; pill?: boolean; type?: "text" \| "primary" \| "secondary" \| "warning" \| "info" \| "success" \| "danger" \| "default"; size?: "small" \| "medium" \| "large"; hideicon?: boolean; hidetext?: boolean; iconslot?: "prefix" \| "suffix"; hide?: boolean; borderradius?: number; backgroundcolor?: string; textcolor?: string; messageLink?: string; openInSameTab?: boolean; isPlainLink?: boolean; }` | `undefined` | +| `disabled` | `disabled` | | `boolean` | `undefined` | +| `hideicon` | `hideicon` | | `boolean` | `false` | +| `hidetext` | `hidetext` | | `boolean` | `false` | +| `icon` | `icon` | Options available at https://shoelace.style/components/icon Icon used in button. Will try to select an icon based on the share medium if left empty. | `string` | `undefined` | +| `iconslot` | `iconslot` | | `"prefix" \| "suffix"` | `"prefix"` | +| `medium` | `medium` | The social medium to share on. Share messages and links will be pulled from your program config and tagged for analytics. | `"direct" \| "email" \| "facebook" \| "fbmessenger" \| "linemessenger" \| "linkedin" \| "pinterest" \| "reminder" \| "sms" \| "twitter" \| "unknown" \| "whatsapp"` | `undefined` | +| `pill` | `pill` | | `boolean` | `undefined` | +| `programId` | `program-id` | Optional programId, or uses the programId context where this button is rendered. | `string` | `undefined` | +| `sharetext` | `sharetext` | Text used for native sharing (mobile only) | `string` | `undefined` | +| `sharetitle` | `sharetitle` | Title used for native sharing (mobile only) | `string` | `undefined` | +| `size` | `size` | | `"large" \| "medium" \| "small"` | `undefined` | +| `textcolor` | `textcolor` | | `string` | `undefined` | +| `type` | `type` | | `"danger" \| "default" \| "info" \| "primary" \| "secondary" \| "success" \| "text" \| "warning"` | `"default"` | +| `undefinedLinkText` | `undefined-link-text` | Alert text shown if the share link is undefined | `string` | `"Error: message link undefined!"` | +| `unsupportedPlatformText` | `unsupported-platform-text` | Alert text shown if the user's device does not support native sharing | `string` | `"Error: not on a supported device"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx b/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx index ca77f43b8d..0f7e9cd764 100644 --- a/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx +++ b/packages/mint-components/src/components/sqm-share-button/sqm-share-button-view.tsx @@ -21,6 +21,7 @@ export interface ShareButtonViewProps { pill?: boolean; type?: | "primary" + | "secondary" | "success" | "info" | "warning" @@ -28,7 +29,7 @@ export interface ShareButtonViewProps { | "default" | "text"; size?: "small" | "medium" | "large"; - + border?: string; icon?: string; hideicon?: boolean; hidetext?: boolean; @@ -47,7 +48,11 @@ const medium = { facebook: { color: "#1877f2", text: "#fff", icon: "facebook" }, twitter: { color: "#000000", text: "#fff", icon: "twitter-x" }, email: { color: "#666666", text: "#fff", icon: "envelope" }, - direct: { color: "var(--sl-color-primary-500)", text: "#fff", icon: "send" }, + direct: { + color: "var(--sqm-primary-button-background)", + text: "var(--sqm-primary-button-color)", + icon: "send", + }, linkedin: { color: "#0077b5", text: "#fff", icon: "linkedin" }, sms: { color: "#34DA50", text: "#fff", icon: "chat" }, fbmessenger: { color: "#0084ff", text: "#fff", icon: "messenger" }, @@ -71,15 +76,9 @@ const styleString = sheet.toString(); export function ShareButtonView(props: ShareButtonViewProps, children: VNode) { const vanillaStyle = ` - *::part(base) { - border: none; - --sl-focus-ring-color-primary: ${ - props.backgroundcolor - ? props.backgroundcolor - : props.medium - ? medium[props.medium].color - : "" - }80!important; + sl-button::part(base) { + border: ${props.border || "none"}; + font-family: var(--sqm-primary-font); background: ${ props.backgroundcolor @@ -95,28 +94,14 @@ export function ShareButtonView(props: ShareButtonViewProps, children: VNode) { ? medium[props.medium].text : "" }; - border-radius: ${props.borderradius ? props.borderradius + "px" : ""}; + border-radius: ${ + props.borderradius + ? props.borderradius + "px" + : "var(--sqm-primary-button-radius)" + }; } - *::part(base):hover { - border-color: ${ - props.backgroundcolor - ? props.backgroundcolor - : props.medium - ? medium[props.medium].color - : "" - }D1!important; - } - *::part(base):focus { - border-color: ${ - props.backgroundcolor - ? props.backgroundcolor - : props.medium - ? medium[props.medium].color - : "" - }D1!important; - } *::part(label) { position: relative; @@ -140,7 +125,7 @@ export function ShareButtonView(props: ShareButtonViewProps, children: VNode) { type={props.type} onClick={!props.isPlainLink ? props.onClick : undefined} href={props.isPlainLink ? props.messageLink : undefined} - exportparts={`base: ${props.type}sharebutton-base`} + exportparts={`base: ${props.type}button-base`} > {!props.hideicon && ( Share on Facebook * @example X Share Button - Share via X * @example Email Share Button - Share via Email - * @example Web Share Sheet Share Button - Share + * @example Mobile Share Sheet Button - Share * @example LinkedIn Share Button - Share on LinkedIn * @example SMS Share Button - Text a friend - * @example Facebook Messenger Share Button - Share via Messenger + * @example Messenger Share Button - Share via Messenger * @example WhatsApp Share Button - Share via WhatsApp - * @example Line Messenger Share Button - Share via Line Messenger + * @example LINE Share Button - Share via Line Messenger * @example Pinterest Share Button - Share on Pinterest */ @Component({ @@ -68,24 +69,35 @@ export class ShareButton { /** * Configure border radius with pixel amount * @uiName Border radius + * @uiGroup Style */ @Prop() borderradius?: number; /** * @uiName Button background color * @uiWidget color * @format color + * @uiGroup Style */ @Prop() backgroundcolor?: string; + + /** + * @uiName Border + * @uiGroup Style + */ + @Prop() border?: string; /** * @uiName Button text color * @uiWidget color * @format color + * @uiGroup Style */ @Prop() textcolor?: string; /** * @uiName Display pill + * @uiGroup Style */ @Prop() pill?: boolean; + /** * @uiName Disabled */ @@ -93,11 +105,12 @@ export class ShareButton { /** * @uiType string * @uiName Button style - * @uiEnum ["primary" , "success", "info", "warning", "danger", "default", "text" ] - * @uiEnumNames ["Primary", "Success", "Info", "Warning", "Danger", "Default", "Text"] + * @uiEnum ["primary", "secondary", "success", "info", "warning", "danger", "default", "text" ] + * @uiEnumNames ["Primary", "Secondary", "Success", "Info", "Warning", "Danger", "Default", "Text"] */ @Prop() type?: | "primary" + | "secondary" | "success" | "info" | "warning" @@ -109,6 +122,7 @@ export class ShareButton { * @uiType string * @uiEnum ["small", "medium", "large" ] * @uiEnumNames ["Small", "Medium", "Large"] + * @uiGroup Style */ @Prop() size?: "small" | "medium" | "large"; /** @@ -128,11 +142,13 @@ export class ShareButton { @Prop() icon?: string; /** * @uiName Hide icon + * @uiGroup Style * @default */ @Prop() hideicon?: boolean = false; /** * @uiName Hide text + * @uiGroup Style * @default */ @Prop() hidetext?: boolean = false; diff --git a/packages/mint-components/src/components/sqm-share-code/readme.md b/packages/mint-components/src/components/sqm-share-code/readme.md index ea021d3630..28d7e0fdbf 100644 --- a/packages/mint-components/src/components/sqm-share-code/readme.md +++ b/packages/mint-components/src/components/sqm-share-code/readme.md @@ -5,15 +5,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` | -| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` | -| `demoData` | -- | | `{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }` | `undefined` | -| `programId` | `program-id` | The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` | -| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` | -| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` | -| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | +| `backgroundColor` | `background-color` | Background color of share link container | `string` | `undefined` | +| `borderColor` | `border-color` | Border color of share link container | `string` | `undefined` | +| `borderRadius` | `border-radius` | The border radius on the share link container (in pixels) | `string` | `undefined` | +| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` | +| `buttonType` | `button-type` | The type of the button that is used (primary or secondary). | `"primary" \| "secondary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Code"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }` | `undefined` | +| `programId` | `program-id` | The ID of the program that should generate the code. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` | +| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` | +| `textColor` | `text-color` | Color of the text and copy icon | `string` | `undefined` | +| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` | +| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx b/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx index c1920d1872..5ce8385938 100644 --- a/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx +++ b/packages/mint-components/src/components/sqm-share-code/sqm-share-code.tsx @@ -9,6 +9,7 @@ import { useShareCode } from "./useShareCode"; /** * @uiName Share Code + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqb-program-section","sqb-conditional-section", "sqm-titled-section"] * @exampleGroup Sharing * @example Share Code - */ @@ -49,12 +50,39 @@ export class ShareCode { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ @Prop({ attribute: "text-align", }) textAlign: "left" | "center" | "right" = "left"; + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() backgroundColor?: string; + + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() textColor?: string; + + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + @Prop() borderRadius?: string; + /** * @uiName Copy button label */ @@ -70,12 +98,33 @@ export class ShareCode { * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ @Prop({ attribute: "copy-button-style", }) buttonStyle?: "icon" | "button-outside" | "button-below" = "icon"; + /** + * The type of the button that is used (primary or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" = "primary"; + + /** + * Border color of share link container + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() borderColor?: string; + /** * @undocumented * @uiType object @@ -106,6 +155,11 @@ function useDemoShareCode(props: ShareCode): CopyTextViewProps { textAlign: props.textAlign, copyButtonLabel: props.copyButtonLabel, buttonStyle: props.buttonStyle, + backgroundColor: props.backgroundColor, + textColor: props.textColor, + borderRadius: props.borderRadius, + borderColor: props.borderColor, + buttonType: props.buttonType, rewardStatus: "AVAILABLE", open, onClick: () => { diff --git a/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx b/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx index 9e5cafd1d2..72d3b37844 100644 --- a/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx +++ b/packages/mint-components/src/components/sqm-share-link/ShareLink.stories.tsx @@ -77,6 +77,38 @@ export const CopyButtonBelow = () => { > ); }; + +export const CustomStyles = () => { + const props = { + copyString: "https://noah.example.com", + open: false, + tooltiptext: "Copied!", + backgroundColor: "#1ed760", + borderRadius: "30px", + textColor: "#121212", + buttonType: "primary" as const, + }; + return ; +}; + +export const CustomStylesWithDemoHooks = () => { + const props = { + copyString: "https://noah.example.com", + open: false, + tooltiptext: "Copied!", + backgroundColor: "#1ed760", + borderRadius: "30px", + textColor: "red", + buttonType: "primary" as const, + borderColor: "#121212", + }; + return ( + + ); +}; export const FullStack = () => { return ; }; diff --git a/packages/mint-components/src/components/sqm-share-link/readme.md b/packages/mint-components/src/components/sqm-share-link/readme.md index 0355dcd0f1..3973b50392 100644 --- a/packages/mint-components/src/components/sqm-share-link/readme.md +++ b/packages/mint-components/src/components/sqm-share-link/readme.md @@ -5,15 +5,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | -| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` | -| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Link"` | -| `demoData` | -- | | `{ loading?: boolean; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; onClick?: () => void; }` | `undefined` | -| `programId` | `program-id` | The ID of the program that should generate the link. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` | -| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` | -| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` | -| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` | +| Property | Attribute | Description | Type | Default | +| ----------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | +| `backgroundColor` | `background-color` | Background color of share link container | `string` | `undefined` | +| `borderColor` | `border-color` | Border color of share link container | `string` | `undefined` | +| `borderRadius` | `border-radius` | The border radius on the share link container (in pixels) | `string` | `undefined` | +| `buttonStyle` | `copy-button-style` | Set the copy button style and placement | `"button-below" \| "button-outside" \| "icon"` | `"icon"` | +| `buttonType` | `button-type` | The type of the button that is used (primary or secondary). | `"primary" \| "secondary"` | `"primary"` | +| `copyButtonLabel` | `copy-button-label` | | `string` | `"Copy Link"` | +| `demoData` | -- | | `{ loading?: boolean; textColor?: string; buttonType?: "primary" \| "secondary"; copyString?: string; tooltiptext?: string; open?: boolean; copyButtonLabel?: string; disabled?: boolean; textAlign?: "left" \| "right" \| "center"; buttonStyle?: "icon" \| "button-outside" \| "button-below"; error?: boolean; errorText?: string; notificationText?: string; showNotificationText?: boolean; inputPlaceholderText?: string; dateAvailable?: string; isCopied?: boolean; backgroundColor?: string; borderRadius?: string; borderColor?: string; onClick?: () => void; }` | `undefined` | +| `programId` | `program-id` | The ID of the program that should generate the link. Defaults to the program ID in context where this widget is loaded. | `string` | `undefined` | +| `textAlign` | `text-align` | Change the text alignment | `"center" \| "left" \| "right"` | `"left"` | +| `textColor` | `text-color` | Color of the text and copy icon | `string` | `undefined` | +| `tooltiplifespan` | `tooltip-lifespan` | The number of milliseconds that the tooltip appears for | `number` | `1000` | +| `tooltiptext` | `tooltip-text` | Shown inside a tooltip after someone has successfully copied the link to their clipboard | `string` | `"Copied to Clipboard"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx b/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx index 7b2940be7b..83e3e330f6 100644 --- a/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx +++ b/packages/mint-components/src/components/sqm-share-link/sqm-share-link.tsx @@ -10,6 +10,7 @@ import { useShareLink } from "./useShareLink"; /** * @uiName Share Link * @exampleGroup Sharing + * @validParents ["sqm-portal-container", "sqm-titled-section", "div","sqm-hero","sqm-referral-card","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section"] * @example Share Link - */ @Component({ @@ -52,6 +53,7 @@ export class ShareLink { * @uiType string * @uiEnum ["left", "center", "right"] * @uiEnumNames ["Left", "Center", "Right"] + * @uiGroup Style */ @Prop({ attribute: "text-align", @@ -66,13 +68,60 @@ export class ShareLink { }) copyButtonLabel: string = "Copy Link"; + /** + * Background color of share link container + * @uiName Background color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() backgroundColor?: string; + + /** + * Border color of share link container + * @uiName Border color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() borderColor?: string; + + /** + * Color of the text and copy icon + * @uiName Text color + * @uiWidget color + * @format color + * @uiGroup Style + */ + @Prop() textColor?: string; + + /** + * The border radius on the share link container (in pixels) + * @uiName Border Radius + * @uiType number + * @uiGroup Style + */ + @Prop() borderRadius?: string; + + /** + * The type of the button that is used (primary or secondary). + * @uiName Button Type + * @uiType string + * @uiEnum ["primary", "secondary"] + * @uiEnumNames ["Primary", "Secondary"] + * @uiGroup Style + */ + @Prop() + buttonType?: "primary" | "secondary" = "primary"; + /** * Set the copy button style and placement * - * @uiName Style + * @uiName Button style * @uiType string * @uiEnum ["icon", "button-outside", "button-below"] * @uiEnumNames ["Icon", "Button outside", "Button below"] + * @uiGroup Style */ @Prop({ attribute: "copy-button-style", @@ -102,13 +151,20 @@ export class ShareLink { function useDemoShareLink(props: ShareLink): CopyTextViewProps { const [open, setOpen] = useState(false); const copyString = "https://www.example.com/sharelink/abc"; + + console.log("Demo props", props); return deepmerge( { copyString: copyString, tooltiptext: props.tooltiptext, textAlign: props.textAlign, buttonStyle: props.buttonStyle, + backgroundColor: props.backgroundColor, + textColor: props.textColor, + borderRadius: props.borderRadius, + buttonType: props.buttonType, copyButtonLabel: props.copyButtonLabel, + borderColor: props.borderColor, rewardStatus: "AVAILABLE", open, onClick: () => { diff --git a/packages/mint-components/src/components/sqm-stat-container/readme.md b/packages/mint-components/src/components/sqm-stat-container/readme.md index 872d4aa4cd..6c2c90e472 100644 --- a/packages/mint-components/src/components/sqm-stat-container/readme.md +++ b/packages/mint-components/src/components/sqm-stat-container/readme.md @@ -7,10 +7,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------- | --------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -| `display` | `display` | | `"flex" \| "grid"` | `"grid"` | -| `space` | `space` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"xxx-large"` | +| Property | Attribute | Description | Type | Default | +| ------------ | ------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | +| `alignment` | `alignment` | Controls the alignment of the flexbox | `"center" \| "left" \| "right"` | `"center"` | +| `display` | `display` | | `"flex" \| "grid"` | `"flex"` | +| `gap` | `gap` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"x-large"` | +| `hideBorder` | `hide-border` | Hide the seperating border between stats | `boolean` | `undefined` | +| `space` | `space` | | `"large" \| "medium" \| "none" \| "small" \| "x-large" \| "x-small" \| "xx-large" \| "xx-small" \| "xxx-large" \| "xxx-small" \| "xxxx-large"` | `"xxx-large"` | ## Dependencies diff --git a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx index d8d68c10d9..8657ef093c 100644 --- a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx +++ b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container-view.tsx @@ -4,6 +4,9 @@ import { createStyleSheet } from "../../styling/JSS"; export interface StatContainerProps { space: string; display?: "grid" | "flex"; + alignment?: "left" | "right" | "center"; + hideBorder?: boolean; + gap?: string; } export function StatContainerView(props: StatContainerProps, children: VNode) { @@ -14,25 +17,40 @@ export function StatContainerView(props: StatContainerProps, children: VNode) { return `${Math.floor(parseInt(spaceValue) / 2)}rem`; }; - // Dependent on props, not feasiable to move out + // take alignment variable and convert it to CSS flexbox alignment + const alignment = + props.alignment === "center" + ? "center" + : props.alignment === "right" + ? "flex-end" + : "flex-start"; + + // Dependent on props, not feasible to move out const style = { StatContainer: { width: "100%", - display: props.display || "grid", - "grid-template-columns": "repeat(auto-fill, minmax(130px, auto))", - gap: divideSpace(), - // First set of styles applies when shadow DOM is disabled, second set applies when shadow DOM is enabled + display: "flex", + flexWrap: "wrap", + alignItems: "center", + justifyContent: alignment, + flexDirection: "row", + gap: `var(--sl-spacing-${props.gap})`, + + // Apply border styles conditionally based on the hideBorder prop "& > *": { - "border-right": "1px solid #EAEAEA", + "border-right": props.hideBorder + ? "none" + : "var(--sqm-border-thickness) solid var(--sqm-border-color)", "padding-right": divideSpace(), }, "& > :last-child": { "border-right": "none", }, "& > ::slotted(*)": { - "border-right": "1px solid #EAEAEA", + "border-right": props.hideBorder + ? "none" + : "var(--sqm-border-thickness) solid var(--sqm-border-color)", "padding-right": divideSpace(), - height: "100%", }, "& > ::slotted(*:last-child)": { "border-right": "none", @@ -48,7 +66,7 @@ export function StatContainerView(props: StatContainerProps, children: VNode) { display: "flex", }, BorderFix: { - "border-right": "1px solid transparent", + "border-right": "var(--sqm-border-thickness) solid transparent", width: "0px", "margin-left": "-1px", }, diff --git a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx index 5ac5514a92..4081c1235d 100644 --- a/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx +++ b/packages/mint-components/src/components/sqm-stat-container/sqm-stat-container.tsx @@ -6,6 +6,8 @@ import { Spacing } from "../../global/mixins"; /** * @uiName Stat Container + * @validParents ["sqm-portal-container","div","sqm-divided-layout","sqm-brand","template","sqm-hero", "sqb-program-section", "sqb-conditional-section"] + * @validChildren ["sqm-big-stat"] * @slots [{"name":"", "title":"Stats"}] * @exampleGroup Statistics * @example Container with Three Stats -

Points Balance

Giftcards Earned

Referrals

 @@ -27,12 +29,38 @@ export class StatContainer { @Prop() space: Spacing = "xxx-large"; /** + * @undocumented * @uiName Display * @uiType string * @uiEnum ["grid", "flex"] * @uiEnumNames ["Grid", "Flex"] */ - @Prop() display: "grid" | "flex" = "grid"; + @Prop() display: "grid" | "flex" = "flex"; + + /** + * Hide the seperating border between stats + * @uiName Hide border + * @uiType boolean + */ + @Prop() hideBorder?: boolean; + + /** + * Controls the alignment of the flexbox + * + * @uiName Alignment + * @uiType string + * @uiEnum ["left", "right", "center"] + * @uiEnumNames ["Left", "Right", "Center"] + */ + @Prop() alignment?: "left" | "right" | "center" = "center"; + + /** + * @uiName Gap + * @uiType string + * @uiEnum ["none", "xxx-small", "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "xxx-large", "xxxx-large"] + * @uiEnumNames ["None", "XXX-Small", "XX-Small", "X-Small", "Small", "Medium", "Large", "X-Large", "XX-Large", "XXX-Large", "XXXX-Large"] + */ + @Prop() gap: Spacing = "x-large"; constructor() { withHooks(this); diff --git a/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx b/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx new file mode 100644 index 0000000000..01ccac5323 --- /dev/null +++ b/packages/mint-components/src/components/sqm-stencilbook/BrandSelector.tsx @@ -0,0 +1,243 @@ +import { Component, h, Host, State } from "@stencil/core"; +import { BrandingConfiguration } from "../../saasquatch"; +import * as Themes from "./Themes"; + +const LOCAL_STORAGE_BRAND_KEY = "localStorageBrandKey"; +const LOCAL_STORAGE_BRAND_CONFIG_KEY = "localStorageBrandConfigKey"; + +@Component({ + tag: "sqm-brand-selector", + shadow: false, +}) +export class SqmBrandSelector { + @State() selectedBrand: string = "Netflix"; + + constructor() { + const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY); + const initialBrandName = storedBrand; + + this.selectedBrand = initialBrandName; + + // Initialize window.SquatchBrandingConfig based on the loaded brand + const initialConfig = + Themes[initialBrandName as keyof typeof Themes] || Themes.Netflix; + + window.SquatchBrandingConfig = initialConfig; + const event = new CustomEvent("brandingConfigUpdated", { + detail: window.SquatchBrandingConfig, + }); + window.dispatchEvent(event); + } + + componentDidLoad() { + const storedBrand = localStorage.getItem(LOCAL_STORAGE_BRAND_KEY); + const initialBrandName = storedBrand; + + this.selectedBrand = initialBrandName; + } + + disconnectedCallback() {} + + private brands = [ + { + name: "Netflix", + logoUrl: + "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803365/netflix_ftjbrr.png", + }, + { + name: "Amazon", + logoUrl: + "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803366/amazon_mc22fr.png", + }, + { + name: "Spotify", + logoUrl: + "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803510/spotify_j5qi1r.png", + }, + { + name: "Google", + logoUrl: + "https://res.cloudinary.com/saasquatch-staging/image/upload/v1750803168/pngimg.com_-_google_PNG19644_jvypwl.png", + }, + ]; + + private updateBrand(brandName: string) { + this.selectedBrand = brandName; + const configToSet: BrandingConfiguration = + Themes[brandName as keyof typeof Themes] || Themes.Netflix; + const brandConfigString = JSON.stringify(configToSet); + + localStorage.setItem(LOCAL_STORAGE_BRAND_KEY, brandName); + localStorage.setItem(LOCAL_STORAGE_BRAND_CONFIG_KEY, brandConfigString); + + window.SquatchBrandingConfig = configToSet; + window.location.reload(); + + const event = new CustomEvent("brandingConfigUpdated", { + detail: window.SquatchBrandingConfig, + }); + window.dispatchEvent(event); + } + + render() { + return ( + + +
+

Select Branding

+ +
+ {this.brands.map((brand) => ( +
this.updateBrand(brand.name)} + > + { + e.target.src = + "https://placehold.co/80x40/cccccc/000000?text=Logo"; + }} + /> +
+ ))} +
+
+ + ); + } +} diff --git a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx index 90d0a70eb7..d8f2b6512c 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx +++ b/packages/mint-components/src/components/sqm-stencilbook/Themes.tsx @@ -10,42 +10,334 @@ * */ -import { autoColorScaleCss } from "./AutoColor"; +import { BrandingConfiguration } from "../../saasquatch"; -// -export const Default = ` - // No CSS -`; +// @ts-nocheck +export const Default = null; -export const Orangey = ` -:root{ - ${autoColorScaleCss("orange")} -} -`; +export const Netflix: BrandingConfiguration = { + main: { + brandFont: "Netflix Sans, Arial, sans-serif", + brandColor: "#E50914", + }, + border: { + borderColor: "#333333", + borderRadius: 4, + borderThickness: 1, + }, + color: { + textColorShades: { + mainText: "white", + subduedText: "#B3B3B3", + }, + backgroundColor: "#101010", + accentColorShades: { + text: "#E50914", + icon: "#E50914", + border: "#E50914", + background: "#300609", + }, + success: { + text: "#66BB6A", + border: "#4CAF50", + background: "#1B5E20", + iconAndBadge: "#4CAF50", + }, + warning: { + text: "#FFCA28", + border: "#FFA726", + background: "#F57C00", + iconAndBadge: "#FFA726", + }, + critical: { + text: "#EF9A9A", + border: "#E50914", + background: "#B71C1C", + iconAndBadge: "#E50914", + }, + informative: { + text: "#64B5F6", + border: "#42A5F5", + background: "#1976D2", + iconAndBadge: "#42A5F5", + }, + neutral: { + text: "white", + iconAndBadge: "#B3B3B3", + border: "#333333", + background: "#222222", + }, + }, + primaryButton: { + buttonColor: { + background: "#E50914", + border: "transparent", + label: "#FFFFFF", + }, + buttonHoverColor: { + background: "#CC0000", + border: "transparent", + label: "#FFFFFF", + }, + borderRadius: 4, + }, + secondaryButton: { + buttonColor: { + background: "transparent", + border: "#B3B3B3", + label: "#FFFFFF", + }, + buttonHoverColor: { + background: "#333333", + border: "#B3B3B3", + label: "#FFFFFF", + }, + borderRadius: 4, + }, + formFields: { + formFieldColor: { + background: "#222222", + border: "#B3B3B3", + inputText: "#B3B3B3", + }, + hoverStateColor: "#777777", + selectedStateColor: "#E50914", + borderRadius: 4, + }, +}; -export const Netflix = ` -:root{ - ${autoColorScaleCss("#e50914")} -} -`; +export const Amazon: BrandingConfiguration = { + main: { + brandFont: "Amazon Ember, Arial, sans-serif", + brandColor: "#FF9900", + }, + border: { + borderColor: "#D5D9D9", + borderRadius: 4, + borderThickness: 1, + }, + color: { + backgroundColor: "#ffffff", + textColorShades: { + mainText: "#2f2f2f", + subduedText: "#565959", + }, + accentColorShades: { + text: "#FF9900", + icon: "#FF9900", + border: "#FFBF66", + background: "#FFF4DD", + }, + success: { + text: "#198754", + border: "#BCE8B2", + background: "#D4EDDA", + iconAndBadge: "#28A745", + }, + warning: { + text: "#856404", + border: "#FFEBA2", + background: "#FFF3CD", + iconAndBadge: "#FFC107", + }, + critical: { + text: "#721C24", + border: "#F5C6CB", + background: "#F8D7DA", + iconAndBadge: "#DC3545", + }, + informative: { + text: "#004085", + border: "#B8DAFF", + background: "#CCE5FF", + iconAndBadge: "#007BFF", + }, + neutral: { + text: "#232F3E", + iconAndBadge: "#565959", + border: "#D5D9D9", + background: "#F0F2F2", + }, + }, + primaryButton: { + buttonColor: { + background: "#FF9900", + border: "transparent", + label: "#FFFFFF", + }, + buttonHoverColor: { + background: "#EB9100", + border: "transparent", + label: "#FFFFFF", + }, + borderRadius: 4, + }, + secondaryButton: { + buttonColor: { + background: "#FFFFFF", + border: "#888C8C", + label: "#232F3E", + }, + buttonHoverColor: { + background: "#F0F2F2", + border: "#888C8C", + label: "#232F3E", + }, + borderRadius: 4, + }, + formFields: { + formFieldColor: { + background: "#FFFFFF", + border: "#D5D9D9", + inputText: "#2f2f2f", + }, + borderRadius: 4, + hoverStateColor: "#A2A2A2", + selectedStateColor: "#007185", + }, +}; -export const SaaSquatchCorporate = ` -:root{ - ${autoColorScaleCss("#65bd60")} - --sl-font-sans: Arial; -} -`; +export const Spotify: BrandingConfiguration = { + main: { + brandColor: "#1ed760", + }, + border: { + borderColor: "#f4f4f4", + borderRadius: 18, + borderThickness: 1, + }, + color: { + textColorShades: { + mainText: "white", + subduedText: "white", + }, + backgroundColor: "#121212", + accentColorShades: { + icon: "#1ed760", + }, + }, + primaryButton: { + buttonColor: { + background: "#1ed760", + border: "transparent", + label: "#121212", + }, + buttonHoverColor: { + background: "#1DB954", + border: "transparent", + label: "#121212", + }, + borderRadius: 30, + }, + secondaryButton: { + buttonColor: { + background: "#191414", + border: "#FFFFFF", + label: "#FFFFFF", + }, + buttonHoverColor: { + background: "#282828", + border: "#FFFFFF", + label: "#121212", + }, + borderRadius: 30, + }, + formFields: { + formFieldColor: { + background: "#121212", + border: "#7c7c7c", + inputText: "#fff", + }, + borderRadius: 30, + hoverStateColor: "white", + selectedStateColor: "white", + }, +}; -export const NYTimes = ` -:root{ - ${autoColorScaleCss("black")} - --sl-font-sans: Georgia, 'Times New Roman', serif; -} -`; - -export const Klip = ` -:root{ - ${autoColorScaleCss("#4225C4")}; -} - -`; +export const Google: BrandingConfiguration = { + main: { brandColor: "#4285F4", brandFont: "Roboto, Arial, sans-serif" }, + border: { + borderColor: "#DADCE0", + borderRadius: 4, + borderThickness: 1, + }, + color: { + textColorShades: { + mainText: "#212124", + subduedText: "#5F6368", + }, + backgroundColor: "#FFFFFF", + accentColorShades: { + text: "#1A73E8", + border: "#8AB4F8", + background: "#E8F0FE", + icon: "#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: "#BFDBFE", + background: "#E8F0FE", + iconAndBadge: "#4285F4", + }, + neutral: { + text: "#202124", + border: "#DADCE0", + background: "#F8F9FA", + iconAndBadge: "#5F6368", + }, + }, + primaryButton: { + buttonColor: { + background: "#4285F4", + border: "transparent", + label: "#FFFFFF", + }, + buttonHoverColor: { + background: "#3C7CD1", + border: "transparent", + label: "#FFFFFF", + }, + borderRadius: 4, + }, + secondaryButton: { + buttonColor: { + background: "#FFFFFF", + border: "#DADCE0", + label: "#4285F4", + }, + buttonHoverColor: { + background: "#E8F0FE", + border: "#DADCE0", + label: "#4285F4", + }, + borderRadius: 4, + }, + formFields: { + formFieldColor: { + background: "#FFFFFF", + border: "#DADCE0", + inputText: "#202124", + }, + borderRadius: 4, + hoverStateColor: "#9AA0A6", + selectedStateColor: "#4285F4", + }, +}; diff --git a/packages/mint-components/src/components/sqm-stencilbook/readme.md b/packages/mint-components/src/components/sqm-stencilbook/readme.md index 32bb03ccde..8fa5578bf3 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/readme.md +++ b/packages/mint-components/src/components/sqm-stencilbook/readme.md @@ -1,7 +1,5 @@ # sqm-stencilbook - - @@ -9,94 +7,96 @@ ### Depends on -- [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-brand-selector](.) +- [sqm-divided-layout](../sqm-divided-layout) - [sqm-text](../sqm-text) -- [sqm-image](../sqm-image) -- [sqm-leaderboard](../sqm-leaderboard) -- [sqm-router](../sqm-router) -- [sqm-hook-story-container](../sqm-hook-story-container) -- [sqm-navigation-menu](../sqm-navigation-menu) -- [sqm-portal-frame](../sqm-portal-frame) -- [sqm-edit-profile](../sqm-edit-profile) - [sqm-form-message](../sqm-form-message) -- [sqm-divided-layout](../sqm-divided-layout) -- [sqm-reward-exchange-list](../sqm-reward-exchange-list) -- [sqm-rewards-table](../sqm-rewards-table) -- [sqm-rewards-table-reward-column](../sqm-rewards-table/columns) -- [sqm-rewards-table-source-column](../sqm-rewards-table/columns) -- [sqm-rewards-table-status-column](../sqm-rewards-table/columns) -- [sqm-rewards-table-date-column](../sqm-rewards-table/columns) -- [sqm-task-card](../sqm-task-card) -- [sqm-card-feed](../sqm-card-feed) - [sqm-password-field](../sqm-password-field) -- [sqm-portal-login](../sqm-portal-login) -- [sqm-portal-register](../sqm-portal-register) +- [sqm-hook-story-container](../sqm-hook-story-container) +- [sqm-big-stat](../sqm-big-stat) +- [sqm-stat-container](../sqm-stat-container) +- [sqm-brand](../sqm-brand) - [sqm-checkbox-field](../sqm-checkbox-field) -- [sqm-portal-change-marketing](../sqm-portal-change-marketing) +- [sqm-portal-register](../sqm-portal-register) +- [sqm-name-fields](../sqm-name-fields) +- [sqm-coupon-code](../sqm-coupon-code) +- [sqm-dropdown-field](../sqm-dropdown-field) +- [sqm-edit-profile](../sqm-edit-profile) +- [sqm-empty](../sqm-empty) +- [sqm-hero-image](../sqm-hero-image) +- [sqm-portal-login](../sqm-portal-login) +- [sqm-hero](../sqm-hero) +- [sqm-portal-change-password](../sqm-portal-change-password) +- [sqm-referred-registration](../sqm-referred-registration) +- [sqm-titled-section](../sqm-titled-section) +- [sqm-portal-footer](../sqm-portal-footer) +- [sqm-image](../sqm-image) +- [sqm-input-field](../sqm-input-field) - [sqm-table-row](../sqm-table-row) - [sqm-table-cell](../sqm-table-cell) +- [sqm-invoice-table](../sqm-invoice-table) +- [sqm-invoice-table-download-cell](../sqm-invoice-table/cells) +- [sqm-invoice-table-date-cell](../sqm-invoice-table/cells) +- [sqm-invoice-table-download-column](../sqm-invoice-table/columns) +- [sqm-invoice-table-date-column](../sqm-invoice-table/columns) +- [sqm-invoice-table-data-column](../sqm-invoice-table/columns) +- [sqm-leaderboard](../sqm-leaderboard) +- [sqm-link-button](../sqm-link-button) +- [sqm-marketing-emails-checkbox](../sqm-marketing-emails-checkbox) +- [sqm-pagination](../sqm-pagination) +- [sqm-payout-button-scroll](../sqm-payout-button-scroll) +- [sqm-portal-container](../sqm-portal-container) +- [sqm-portal-change-marketing](../sqm-portal-change-marketing) +- [sqm-share-button](../sqm-share-button) +- [sqm-scroll](../sqm-scroll) +- [sqm-portal-forgot-password](../sqm-portal-forgot-password) +- [sqm-navigation-menu](../sqm-navigation-menu) +- [sqm-portal-frame](../sqm-portal-frame) +- [sqm-program-explainer-step](../sqm-program-explainer-step) +- [sqm-program-explainer](../sqm-program-explainer) +- [sqm-program-menu](../sqm-program-menu) +- [sqm-share-code](../sqm-share-code) +- [sqm-share-link](../sqm-share-link) +- [sqm-timeline](../sqm-timeline) +- [sqm-timeline-entry](../sqm-timeline) +- [sqm-referral-card](../sqm-referral-card) +- [sqm-referral-code](../sqm-referral-code) +- [sqm-referral-codes](../sqm-referral-codes) +- [sqm-referral-iframe](../sqm-referral-iframe) - [sqm-referral-table-user-cell](../sqm-referral-table/cells) - [sqm-referral-table-date-cell](../sqm-referral-table/cells) - [sqm-referral-table-cell](../sqm-referral-table/cells) - [sqm-referral-table-status-cell](../sqm-referral-table/cells) - [sqm-referral-table](../sqm-referral-table) - [sqm-referral-table-rewards-cell](../sqm-referral-table/cells) -- [sqm-user-name](../sqm-user-name) -- [sqm-program-menu](../sqm-program-menu) -- [sqm-hero](../sqm-hero) -- [sqm-portal-change-password](../sqm-portal-change-password) -- [sqm-referral-iframe](../sqm-referral-iframe) -- [sqm-marketing-emails-checkbox](../sqm-marketing-emails-checkbox) -- [sqm-name-fields](../sqm-name-fields) -- [sqm-dropdown-field](../sqm-dropdown-field) -- [sqm-input-field](../sqm-input-field) -- [sqm-program-explainer](../sqm-program-explainer) -- [sqm-program-explainer-step](../sqm-program-explainer-step) -- [sqm-brand](../sqm-brand) -- [sqm-portal-container](../sqm-portal-container) -- [sqm-scroll](../sqm-scroll) +- [sqm-referral-table-user-column](../sqm-referral-table/columns) +- [sqm-referral-table-status-column](../sqm-referral-table/columns) +- [sqm-referral-table-date-column](../sqm-referral-table/columns) +- [sqm-referral-table-rewards-column](../sqm-referral-table/columns) +- [sqm-reward-exchange-list](../sqm-reward-exchange-list) - [sqm-rewards-table-reward-cell](../sqm-rewards-table/cells) - [sqm-rewards-table-source-cell](../sqm-rewards-table/cells) - [sqm-rewards-table-status-cell](../sqm-rewards-table/cells) - [sqm-rewards-table-date-cell](../sqm-rewards-table/cells) - [sqm-rewards-table-customer-note-cell](../sqm-rewards-table/cells) -- [sqm-referral-table-user-column](../sqm-referral-table/columns) -- [sqm-referral-table-status-column](../sqm-referral-table/columns) -- [sqm-referral-table-date-column](../sqm-referral-table/columns) -- [sqm-referral-table-rewards-column](../sqm-referral-table/columns) -- [sqm-hero-image](../sqm-hero-image) -- [sqm-share-code](../sqm-share-code) -- [sqm-timeline](../sqm-timeline) -- [sqm-timeline-entry](../sqm-timeline) -- [sqm-referral-card](../sqm-referral-card) -- [sqm-portal-footer](../sqm-portal-footer) -- [sqm-titled-section](../sqm-titled-section) -- [sqm-referral-code](../sqm-referral-code) -- [sqm-coupon-code](../sqm-coupon-code) -- [sqm-link-button](../sqm-link-button) +- [sqm-rewards-table](../sqm-rewards-table) +- [sqm-rewards-table-reward-column](../sqm-rewards-table/columns) +- [sqm-rewards-table-source-column](../sqm-rewards-table/columns) +- [sqm-rewards-table-status-column](../sqm-rewards-table/columns) +- [sqm-rewards-table-date-column](../sqm-rewards-table/columns) +- [sqm-router](../sqm-router) +- [sqm-task-card](../sqm-task-card) +- [sqm-card-feed](../sqm-card-feed) +- [sqm-user-name](../sqm-user-name) +- [sqm-code-verification](../sqm-widget-verification/sqm-code-verification) +- [sqm-email-verification](../sqm-widget-verification/sqm-email-verification) +- [sqm-banking-info-form](../tax-and-cash/sqm-banking-info-form) - [sqm-payout-details-card](../tax-and-cash/sqm-payout-details-card) - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form) - [sqm-indirect-tax-form](../tax-and-cash/sqm-indirect-tax-form) - [sqm-docusign-form](../tax-and-cash/sqm-docusign-form) -- [sqm-banking-info-form](../tax-and-cash/sqm-banking-info-form) - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard) -- [sqm-tax-and-cash](../tax-and-cash/sqm-tax-and-cash) -- [sqm-invoice-table](../sqm-invoice-table) -- [sqm-invoice-table-download-cell](../sqm-invoice-table/cells) -- [sqm-invoice-table-date-cell](../sqm-invoice-table/cells) -- [sqm-invoice-table-download-column](../sqm-invoice-table/columns) -- [sqm-invoice-table-date-column](../sqm-invoice-table/columns) -- [sqm-invoice-table-data-column](../sqm-invoice-table/columns) -- [sqm-email-verification](../sqm-widget-verification/sqm-email-verification) -- [sqm-code-verification](../sqm-widget-verification/sqm-code-verification) -- [sqm-payout-button-scroll](../sqm-payout-button-scroll) - [sqm-payout-status-alert](../tax-and-cash/sqm-payout-status-alert) -- [sqm-referral-codes](../sqm-referral-codes) - [sqm-lead-input-field](../sqm-lead-form) - [sqm-lead-dropdown-field](../sqm-lead-form) - [sqm-lead-form](../sqm-lead-form) @@ -104,152 +104,151 @@ ### Graph ```mermaid graph TD; - 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-brand-selector + sqm-stencilbook --> sqm-divided-layout sqm-stencilbook --> sqm-text - sqm-stencilbook --> sqm-image - sqm-stencilbook --> sqm-leaderboard - sqm-stencilbook --> sqm-router - sqm-stencilbook --> sqm-hook-story-container - sqm-stencilbook --> sqm-navigation-menu - sqm-stencilbook --> sqm-portal-frame - sqm-stencilbook --> sqm-edit-profile sqm-stencilbook --> sqm-form-message - sqm-stencilbook --> sqm-divided-layout - sqm-stencilbook --> sqm-reward-exchange-list - sqm-stencilbook --> sqm-rewards-table - sqm-stencilbook --> sqm-rewards-table-reward-column - sqm-stencilbook --> sqm-rewards-table-source-column - sqm-stencilbook --> sqm-rewards-table-status-column - sqm-stencilbook --> sqm-rewards-table-date-column - sqm-stencilbook --> sqm-task-card - sqm-stencilbook --> sqm-card-feed sqm-stencilbook --> sqm-password-field - sqm-stencilbook --> sqm-portal-login - sqm-stencilbook --> sqm-portal-register + sqm-stencilbook --> sqm-hook-story-container + sqm-stencilbook --> sqm-big-stat + sqm-stencilbook --> sqm-stat-container + sqm-stencilbook --> sqm-brand sqm-stencilbook --> sqm-checkbox-field - sqm-stencilbook --> sqm-portal-change-marketing + sqm-stencilbook --> sqm-portal-register + sqm-stencilbook --> sqm-name-fields + sqm-stencilbook --> sqm-coupon-code + sqm-stencilbook --> sqm-dropdown-field + sqm-stencilbook --> sqm-edit-profile + sqm-stencilbook --> sqm-empty + sqm-stencilbook --> sqm-hero-image + sqm-stencilbook --> sqm-portal-login + sqm-stencilbook --> sqm-hero + sqm-stencilbook --> sqm-portal-change-password + sqm-stencilbook --> sqm-referred-registration + sqm-stencilbook --> sqm-titled-section + sqm-stencilbook --> sqm-portal-footer + sqm-stencilbook --> sqm-image + sqm-stencilbook --> sqm-input-field sqm-stencilbook --> sqm-table-row sqm-stencilbook --> sqm-table-cell + sqm-stencilbook --> sqm-invoice-table + sqm-stencilbook --> sqm-invoice-table-download-cell + sqm-stencilbook --> sqm-invoice-table-date-cell + sqm-stencilbook --> sqm-invoice-table-download-column + sqm-stencilbook --> sqm-invoice-table-date-column + sqm-stencilbook --> sqm-invoice-table-data-column + sqm-stencilbook --> sqm-leaderboard + sqm-stencilbook --> sqm-link-button + sqm-stencilbook --> sqm-marketing-emails-checkbox + sqm-stencilbook --> sqm-pagination + sqm-stencilbook --> sqm-payout-button-scroll + sqm-stencilbook --> sqm-portal-container + sqm-stencilbook --> sqm-portal-change-marketing + sqm-stencilbook --> sqm-share-button + sqm-stencilbook --> sqm-scroll + sqm-stencilbook --> sqm-portal-forgot-password + sqm-stencilbook --> sqm-navigation-menu + sqm-stencilbook --> sqm-portal-frame + sqm-stencilbook --> sqm-program-explainer-step + sqm-stencilbook --> sqm-program-explainer + sqm-stencilbook --> sqm-program-menu + sqm-stencilbook --> sqm-share-code + sqm-stencilbook --> sqm-share-link + sqm-stencilbook --> sqm-timeline + sqm-stencilbook --> sqm-timeline-entry + sqm-stencilbook --> sqm-referral-card + sqm-stencilbook --> sqm-referral-code + sqm-stencilbook --> sqm-referral-codes + sqm-stencilbook --> sqm-referral-iframe sqm-stencilbook --> sqm-referral-table-user-cell sqm-stencilbook --> sqm-referral-table-date-cell sqm-stencilbook --> sqm-referral-table-cell sqm-stencilbook --> sqm-referral-table-status-cell sqm-stencilbook --> sqm-referral-table sqm-stencilbook --> sqm-referral-table-rewards-cell - sqm-stencilbook --> sqm-user-name - sqm-stencilbook --> sqm-program-menu - sqm-stencilbook --> sqm-hero - sqm-stencilbook --> sqm-portal-change-password - sqm-stencilbook --> sqm-referral-iframe - sqm-stencilbook --> sqm-marketing-emails-checkbox - sqm-stencilbook --> sqm-name-fields - sqm-stencilbook --> sqm-dropdown-field - sqm-stencilbook --> sqm-input-field - sqm-stencilbook --> sqm-program-explainer - sqm-stencilbook --> sqm-program-explainer-step - sqm-stencilbook --> sqm-brand - sqm-stencilbook --> sqm-portal-container - sqm-stencilbook --> sqm-scroll + sqm-stencilbook --> sqm-referral-table-user-column + sqm-stencilbook --> sqm-referral-table-status-column + sqm-stencilbook --> sqm-referral-table-date-column + sqm-stencilbook --> sqm-referral-table-rewards-column + sqm-stencilbook --> sqm-reward-exchange-list sqm-stencilbook --> sqm-rewards-table-reward-cell sqm-stencilbook --> sqm-rewards-table-source-cell sqm-stencilbook --> sqm-rewards-table-status-cell sqm-stencilbook --> sqm-rewards-table-date-cell sqm-stencilbook --> sqm-rewards-table-customer-note-cell - sqm-stencilbook --> sqm-referral-table-user-column - sqm-stencilbook --> sqm-referral-table-status-column - sqm-stencilbook --> sqm-referral-table-date-column - sqm-stencilbook --> sqm-referral-table-rewards-column - sqm-stencilbook --> sqm-hero-image - sqm-stencilbook --> sqm-share-code - sqm-stencilbook --> sqm-timeline - sqm-stencilbook --> sqm-timeline-entry - sqm-stencilbook --> sqm-referral-card - sqm-stencilbook --> sqm-portal-footer - sqm-stencilbook --> sqm-titled-section - sqm-stencilbook --> sqm-referral-code - sqm-stencilbook --> sqm-coupon-code - sqm-stencilbook --> sqm-link-button + sqm-stencilbook --> sqm-rewards-table + sqm-stencilbook --> sqm-rewards-table-reward-column + sqm-stencilbook --> sqm-rewards-table-source-column + sqm-stencilbook --> sqm-rewards-table-status-column + sqm-stencilbook --> sqm-rewards-table-date-column + sqm-stencilbook --> sqm-router + sqm-stencilbook --> sqm-task-card + sqm-stencilbook --> sqm-card-feed + sqm-stencilbook --> sqm-user-name + sqm-stencilbook --> sqm-code-verification + sqm-stencilbook --> sqm-email-verification + sqm-stencilbook --> sqm-banking-info-form sqm-stencilbook --> sqm-payout-details-card sqm-stencilbook --> sqm-user-info-form sqm-stencilbook --> sqm-indirect-tax-form sqm-stencilbook --> sqm-docusign-form - sqm-stencilbook --> sqm-banking-info-form sqm-stencilbook --> sqm-tax-and-cash-dashboard - sqm-stencilbook --> sqm-tax-and-cash - sqm-stencilbook --> sqm-invoice-table - sqm-stencilbook --> sqm-invoice-table-download-cell - sqm-stencilbook --> sqm-invoice-table-date-cell - sqm-stencilbook --> sqm-invoice-table-download-column - sqm-stencilbook --> sqm-invoice-table-date-column - sqm-stencilbook --> sqm-invoice-table-data-column - sqm-stencilbook --> sqm-email-verification - sqm-stencilbook --> sqm-code-verification - sqm-stencilbook --> sqm-payout-button-scroll sqm-stencilbook --> sqm-payout-status-alert - sqm-stencilbook --> sqm-referral-codes sqm-stencilbook --> sqm-lead-input-field sqm-stencilbook --> sqm-lead-dropdown-field sqm-stencilbook --> sqm-lead-form + sqm-portal-register --> sqm-form-message + sqm-portal-register --> sqm-password-field + sqm-coupon-code --> sqm-form-message + sqm-edit-profile --> sqm-form-message sqm-empty --> sqm-portal-container sqm-empty --> sqm-titled-section sqm-empty --> sqm-text - sqm-leaderboard --> sqm-empty - sqm-edit-profile --> sqm-form-message - sqm-reward-exchange-list --> sqm-empty - sqm-rewards-table --> sqm-empty - sqm-rewards-table --> sqm-table-row - sqm-rewards-table --> sqm-table-cell - sqm-rewards-table-reward-column --> sqm-rewards-table-reward-cell - sqm-rewards-table-source-column --> sqm-rewards-table-source-cell - sqm-rewards-table-status-column --> sqm-rewards-table-status-cell - sqm-rewards-table-date-column --> sqm-rewards-table-date-cell sqm-portal-login --> sqm-form-message - sqm-portal-register --> sqm-form-message - sqm-portal-register --> sqm-password-field + sqm-portal-change-password --> sqm-form-message + sqm-portal-change-password --> sqm-password-field + sqm-referred-registration --> sqm-form-message + sqm-invoice-table --> sqm-empty + sqm-invoice-table --> sqm-table-row + sqm-invoice-table --> sqm-table-cell + sqm-invoice-table-download-column --> sqm-invoice-table-download-cell + sqm-invoice-table-date-column --> sqm-invoice-table-date-cell + sqm-invoice-table-data-column --> sqm-invoice-table-data-cell + sqm-leaderboard --> sqm-empty + sqm-payout-button-scroll --> sqm-scroll sqm-portal-change-marketing --> sqm-form-message + sqm-portal-forgot-password --> sqm-form-message + sqm-referral-codes --> sqm-empty sqm-referral-table --> sqm-empty sqm-referral-table --> sqm-table-row sqm-referral-table --> sqm-table-cell - sqm-portal-change-password --> sqm-form-message - sqm-portal-change-password --> sqm-password-field sqm-referral-table-user-column --> sqm-referral-table-user-cell sqm-referral-table-status-column --> sqm-referral-table-status-cell sqm-referral-table-date-column --> sqm-referral-table-date-cell sqm-referral-table-rewards-column --> sqm-referral-table-rewards-cell - sqm-coupon-code --> sqm-form-message - sqm-user-info-form --> sqm-payout-details-card - sqm-user-info-form --> sqm-user-info-form - sqm-user-info-form --> sqm-indirect-tax-form - sqm-user-info-form --> sqm-docusign-form - sqm-user-info-form --> sqm-banking-info-form - sqm-user-info-form --> sqm-tax-and-cash-dashboard - sqm-user-info-form --> sqm-tax-and-cash - sqm-banking-info-form --> sqm-code-verification + sqm-reward-exchange-list --> sqm-empty + sqm-rewards-table --> sqm-empty + sqm-rewards-table --> sqm-table-row + sqm-rewards-table --> sqm-table-cell + sqm-rewards-table-reward-column --> sqm-rewards-table-reward-cell + sqm-rewards-table-source-column --> sqm-rewards-table-source-cell + sqm-rewards-table-status-column --> sqm-rewards-table-status-cell + sqm-rewards-table-date-column --> sqm-rewards-table-date-cell sqm-code-verification --> sqm-form-message + sqm-email-verification --> sqm-form-message + sqm-banking-info-form --> sqm-code-verification + sqm-banking-info-form --> sqm-form-message + sqm-user-info-form --> sqm-form-message + sqm-indirect-tax-form --> sqm-form-message + sqm-docusign-form --> sqm-form-message sqm-tax-and-cash-dashboard --> sqm-payout-details-card + sqm-tax-and-cash-dashboard --> sqm-form-message sqm-tax-and-cash-dashboard --> sqm-invoice-table sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column - sqm-invoice-table --> sqm-empty - sqm-invoice-table --> sqm-table-row - sqm-invoice-table --> sqm-table-cell - sqm-invoice-table-download-column --> sqm-invoice-table-download-cell - sqm-invoice-table-date-column --> sqm-invoice-table-date-cell - sqm-invoice-table-data-column --> sqm-invoice-table-data-cell - sqm-tax-and-cash --> sqm-user-info-form - sqm-tax-and-cash --> sqm-indirect-tax-form - sqm-tax-and-cash --> sqm-docusign-form - sqm-tax-and-cash --> sqm-banking-info-form - sqm-tax-and-cash --> sqm-tax-and-cash-dashboard - sqm-payout-button-scroll --> sqm-scroll sqm-payout-status-alert --> sqm-scroll - sqm-referral-codes --> sqm-empty + sqm-payout-status-alert --> sqm-form-message sqm-lead-form --> sqm-form-message sqm-lead-form --> sqm-lead-input-field style sqm-stencilbook fill:#f9f,stroke:#333,stroke-width:4px 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 6c24fd1671..59aca2d61e 100644 --- a/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx +++ b/packages/mint-components/src/components/sqm-stencilbook/sqm-stencilbook.tsx @@ -1,113 +1,111 @@ -import { h, Component, Host, State } from "@stencil/core"; -import { useStencilbook } from "@saasquatch/stencilbook"; import { useState, withHooks } from "@saasquatch/stencil-hooks"; +import { useStencilbook } from "@saasquatch/stencilbook"; +import { Component, h, Host, State } from "@stencil/core"; -import * as ShareButton from "../sqm-share-button/ShareButton.stories"; -import * as EmptyState from "../sqm-empty/EmptyState.stories"; -import * as Pagination from "../sqm-pagination/Pagination.stories"; -import * as ShareLink from "../sqm-share-link/ShareLink.stories"; +import * as NewPortal from "../../stories/NewPortal.stories"; +import * as PortalTemplates from "../../stories/PortalTemplates.stories"; +import * as PoweredByImg from "../../stories/PoweredByImg.stories"; +import * as Widget from "../../stories/Widget.stories"; +import * as BaseRegistrationForm from "../sqm-base-registration/BaseRegistrationForm.stories"; import * as BigStat from "../sqm-big-stat/BigStat.stories"; -import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories"; -import * as Router from "../sqm-router/Router.stories"; -import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories"; -import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories"; -import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories"; -import * as UseShareLink from "../sqm-share-link/UseShareLink.stories"; -import * as UseShareButton from "../sqm-share-button/UseShareButton.stories"; import * as UseBigStat from "../sqm-big-stat/UseBigStat.stories"; +import * as BrandStories from "../sqm-brand/SqmBrand.stories"; +import * as CardFeed from "../sqm-card-feed/CardFeed.stories"; +import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories"; +import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories"; +import * as CloseButton from "../sqm-close-button/CloseButton.stories"; +import * as CouponCode from "../sqm-coupon-code/CouponCode.stories"; +import * as DividedLayout from "../sqm-divided-layout/DividedLayout.stories"; +import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories"; +import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories"; +import * as EditProfile from "../sqm-edit-profile/EditProfileForm.stories"; import * as UseEditProfile from "../sqm-edit-profile/UseEditProfile.stories"; -import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories"; +import * as EmptyState from "../sqm-empty/EmptyState.stories"; import * as FormMessage from "../sqm-form-message/FormMessage.stories"; -import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories"; -import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories"; -import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories"; -import * as NewPortal from "../../stories/NewPortal.stories"; -import * as Widget from "../../stories/Widget.stories"; +import * as HeroImage from "../sqm-hero-image/HeroImage.stories"; +import * as Hero from "../sqm-hero/Hero.stories"; +import * as Image from "../sqm-image/Image.stories"; +import * as InputField from "../sqm-input-field/InputField.stories"; +import * as UseInputField from "../sqm-input-field/UseInputField.stories"; +import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories"; +import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories"; +import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories"; +import * as LeaderboardRank from "../sqm-leaderboard-rank/LeaderboardRank.stories"; +import * as Leaderboard from "../sqm-leaderboard/Leaderboard.stories"; +import * as UseLeaderboard from "../sqm-leaderboard/UseLeaderboard.stories"; +import * as LinkButton from "../sqm-link-button/LinkButton.stories"; +import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories"; +import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories"; +import * as NameFields from "../sqm-name-fields/NameFields.stories"; import * as SidebarItem from "../sqm-navigation-sidebar-item/SidebarItem.stories"; import * as NavigationSidebar from "../sqm-navigation-sidebar/NavigationSidebar.stories"; +import * as Pagination from "../sqm-pagination/Pagination.stories"; +import * as PasswordField from "../sqm-password-field/PasswordField.stories"; +import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories"; +import * as ChangeMarketing from "../sqm-portal-change-marketing/ChangeMarketing.stories"; +import * as ChangePassword from "../sqm-portal-change-password/ChangePassword.stories"; +import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories"; +import * as PortalEmailVerification from "../sqm-portal-email-verification/PortalEmailVerification.stories"; +import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories"; +import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories"; +import * as PortalFrame from "../sqm-portal-frame/PortalFrame.stories"; +import * as PortalGoogleRegistrationFormStories from "../sqm-portal-google-registration-form/PortalGoogleRegistrationForm.stories"; import * as PortalLogin from "../sqm-portal-login/PortalLogin.stories"; +import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories"; import * as PortalRegister from "../sqm-portal-register/PortalRegister.stories"; import * as NewPortalRegistrationForm from "../sqm-portal-registration-form/PortalRegistrationForm.stories"; -import * as PortalForgotPassword from "../sqm-portal-forgot-password/PortalForgotPassword.stories"; -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"; -import * as PortalProfile from "../sqm-portal-profile/PortalProfile.stories"; +import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories"; +import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories"; +import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories"; +import * as QRCode from "../sqm-qr-code/QRCode.stories"; +import * as RadioCard from "../sqm-radio-card/RadioCard.stories"; +import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories"; +import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories"; +import * as ReferralCodes from "../sqm-referral-codes/ReferralCodes.stories"; +import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories"; import * as ReferralTable from "../sqm-referral-table/ReferralTable.stories"; import * as ReferralTableCell from "../sqm-referral-table/ReferralTableCell.stories"; import * as ReferralTableRewardsCell from "../sqm-referral-table/ReferralTableRewardsCell.stories"; -import * as UserName from "../sqm-user-name/UserName.stories"; -import * as PasswordField from "../sqm-password-field/PasswordField.stories"; -import * as TaskCard from "../sqm-task-card/TaskCard.stories"; -import * as PortalTemplates from "../../stories/PortalTemplates.stories"; -import * as ProgramMenu from "../sqm-program-menu/ProgramMenu.stories"; -import * as PoweredByImg from "../../stories/PoweredByImg.stories"; -import * as PortalFooter from "../sqm-portal-footer/PortalFooter.stories"; -import * as Hero from "../sqm-hero/Hero.stories"; -import * as ReferralIframe from "../sqm-referral-iframe/ReferralIframe.stories"; -import * as NameFields from "../sqm-name-fields/NameFields.stories"; -import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories"; -import * as MarketingEmailsCheckbox from "../sqm-marketing-emails-checkbox/MarketingEmailsCheckbox.stories"; -import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories"; -import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories"; -import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories"; -import * as InputField from "../sqm-input-field/InputField.stories"; -import * as UseInputField from "../sqm-input-field/UseInputField.stories"; +import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories"; import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories"; -import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories"; -import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories"; -import * as BrandStories from "../sqm-brand/SqmBrand.stories"; -import * as CardFeed from "../sqm-card-feed/CardFeed.stories"; -import * as PortalContainer from "../sqm-portal-container/PortalContainer.stories"; -import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories"; +import * as UseRewardExchangeList from "../sqm-reward-exchange-list/UseRewardExchangeList.stories"; import * as RewardsTable from "../sqm-rewards-table/RewardsTable.stories"; -import * as UseReferralTable from "../sqm-referral-table/UseReferralTable.stories"; -import * as HeroImage from "../sqm-hero-image/HeroImage.stories"; -import * as ReferralCard from "../sqm-referral-card/ReferralCard.stories"; -import * as Timeline from "../sqm-timeline/Timeline.stories"; -import * as Image from "../sqm-image/Image.stories"; -import * as TitledSection from "../sqm-titled-section/TitledSection.stories"; +import * as RewardsTableCell from "../sqm-rewards-table/RewardsTableCell.stories"; +import * as UseRewardsTable from "../sqm-rewards-table/UseRewardsTable.stories"; +import * as Router from "../sqm-router/Router.stories"; import * as Scroll from "../sqm-scroll/Scroll.stories"; -import * as Tabs from "../sqm-tabs/Tabs.stories"; +import * as ShareButton from "../sqm-share-button/ShareButton.stories"; +import * as UseShareButton from "../sqm-share-button/UseShareButton.stories"; import * as ShareCode from "../sqm-share-code/ShareCode.stories"; -import * as ReferralCode from "../sqm-referral-code/ReferralCode.stories"; -import * as EmailRegistration from "../views/EmailRegistration.stories"; -import * as CouponCode from "../sqm-coupon-code/CouponCode.stories"; -import * as LogoutCurrentUser from "../sqm-logout-current-user/LogoutCurrentUser.stories"; -import * as LinkButton from "../sqm-link-button/LinkButton.stories"; -import * as CloseButton from "../sqm-close-button/CloseButton.stories"; -import * as TaxForm from "../tax-and-cash/TaxForm.stories"; -import * as TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories"; -import * as RadioCard from "../sqm-radio-card/RadioCard.stories"; +import * as ShareLink from "../sqm-share-link/ShareLink.stories"; +import * as UseShareLink from "../sqm-share-link/UseShareLink.stories"; +import * as Tabs from "../sqm-tabs/Tabs.stories"; +import * as TaskCard from "../sqm-task-card/TaskCard.stories"; +import * as UseTaskCard from "../sqm-task-card/UseTaskCard.stories"; import * as ProgressBar from "../sqm-task-card/progress-bar/ProgressBar.stories"; -import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories"; -import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories"; -import * as InvoiceTable from "../sqm-invoice-table/InvoiceTable.stories"; -import * as InvoiceTableCells from "../sqm-invoice-table/InvoiceTableCell.stories"; -import * as UseInvoiceTableCells from "../sqm-invoice-table/UseInvoiceTable.stories"; -import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories"; +import * as Text from "../sqm-text/Text.stories"; +import * as Timeline from "../sqm-timeline/Timeline.stories"; +import * as TitledSection from "../sqm-titled-section/TitledSection.stories"; +import * as UserName from "../sqm-user-name/UserName.stories"; import * as WidgetCodeVerification from "../sqm-widget-verification/sqm-code-verification/WidgetCodeVerification.stories"; -import * as PayoutButtonScroll from "../sqm-payout-button-scroll/PayoutButtonScroll.stories"; +import * as WidgetEmailVerification from "../sqm-widget-verification/sqm-email-verification/WidgetEmailVerification.stories"; +import * as BankingInfoForm from "../tax-and-cash/BankingForm.stories"; +import * as TaxForm from "../tax-and-cash/TaxForm.stories"; +import * as PayoutDetailsCard from "../tax-and-cash/sqm-payout-details-card/PayoutDetailsCard.stories"; 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 TaxFormSlots from "../tax-and-cash/sqm-user-info-form/small-views/SlotViews.stories"; +import * as EmailRegistration from "../views/EmailRegistration.stories"; import * as LeadForm from "../sqm-lead-form/LeadForm.stories"; import * as LeadInputField from "../sqm-lead-form/LeadInputField.stories"; import * as LeadFormDropdownField from "../sqm-lead-form/LeadFormDropdownField.stories"; import * as LeadCheckboxField from "../sqm-lead-form/LeadCheckboxField.stories"; -import * as Themes from "./Themes"; +import { ShadowViewAddon } from "../../ShadowViewAddon"; import { CucumberAddon } from "./CucumberAddon"; import { HookStoryAddon } from "./HookStoryAddon"; -import { ShadowViewAddon } from "../../ShadowViewAddon"; -import { ResizerStylesheet } from "./Resizer"; +import * as Themes from "./Themes"; const stories = [ InvoiceTable, @@ -141,7 +139,6 @@ const stories = [ PortalEmailVerification, PortalResetPassword, PortalVerifyEmail, - AssetCard, DividedLayout, ChangePassword, PortalProfile, @@ -199,13 +196,13 @@ const stories = [ NewPortalRegistrationForm, ChangeMarketing, BaseRegistrationForm, - PortalRegistrationForm, PortalGoogleRegistrationFormStories, WidgetEmailVerification, WidgetCodeVerification, PayoutButtonScroll, PayoutStatusAlert, QRCode, + Text, LeadForm, LeadInputField, LeadFormDropdownField, @@ -221,8 +218,7 @@ const stories = [ tag: "sqm-stencilbook", }) export class StencilStorybook { - @State() - ignored = true; + @State() ignored = true; constructor() { withHooks(this); @@ -241,7 +237,7 @@ export class StencilStorybook { const theme = Themes[selectedTheme]; return ( -
{t} ))} -
-
-
- -
- setCheckerboard(!checkerboard)} - onChange={() => - document.documentElement.style.setProperty( - "--checker-color-1", - checkerboard ? "#ebebeb" : "#ffffff00" - ) - } - > - -
- - +
*/} + + {/* */} + {/* */} {children} @@ -299,7 +279,7 @@ function ColorToken({ type = "primary" }: { type?: string }) { return ( diff --git a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx index 6549a86f84..d90ab8a009 100644 --- a/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx +++ b/packages/mint-components/src/components/sqm-tabs/Tabs.stories.tsx @@ -20,6 +20,19 @@ export const SimpleTabs = () => ( >
); +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 +28,18 @@ export const TabsView: FunctionalComponent = ({ sl-tab-panel::part(base) { padding: ${padding}; } + + sl-tab::part(base) { + color: ${textColor}; + font-family: var(--sqm-primary-font); + } + + + + sl-tab-group::part(tabs) { + border-bottom: 2px solid var(--sqm-border-color); + font-family: var(--sqm-primary-font); + } `; return ( @@ -43,6 +61,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 {
- - + {intl.formatMessage( { id: "cannotChangeInfoAlert", @@ -388,9 +354,10 @@ export const IndirectTaxFormView = (props: IndirectTaxFormViewProps) => { ), } )} - +
{ {text.continueButton} { const setStep = useSetParent(TAX_CONTEXT_NAMESPACE); - const [option, setOption] = useState(null); + const [option, setOption] = useState("otherRegion"); const [demoFormState, setDemoFormState] = useState({}); return deepmerge( diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.tsx index 1ad44d0a8b..724f9fb1d0 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-indirect-tax-form/useIndirectTaxForm.tsx @@ -14,19 +14,21 @@ import { } from "@saasquatch/universal-hooks"; import { gql } from "graphql-request"; import JSONPointer from "jsonpointer"; +import { CurrentTaxDocument } from "../../../saasquatch"; import { - CountriesQuery, COUNTRIES_QUERY_NAMESPACE, + CountriesQuery, + TAX_CONTEXT_NAMESPACE, + TAX_FORM_CONTEXT_NAMESPACE, TaxContext, TaxCountry, TaxDocumentType, - TAX_CONTEXT_NAMESPACE, - TAX_FORM_CONTEXT_NAMESPACE, - UserFormContext, - UserQuery, USER_FORM_CONTEXT_NAMESPACE, USER_QUERY_NAMESPACE, -} from "../sqm-tax-and-cash/data"; + UserFormContext, + UserQuery, +} from "../data"; +import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys"; import { IndirectDetailsSlotViewProps } from "../sqm-user-info-form/small-views/IndirectTaxDetailsView"; import { INDIRECT_TAX_PROVINCES, @@ -34,7 +36,6 @@ import { } from "../subregions"; import { getCountryObj, validTaxDocument } from "../utils"; import { IndirectTaxForm } from "./sqm-indirect-tax-form"; -import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys"; type ConnectPartnerResult = { createImpactConnection: { diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md index dc5ae79d41..48f9003c6f 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/readme.md @@ -12,6 +12,7 @@ | `accountText` | `account-text` | Shown before the participant’s bank account information. | `string` | `"Account"` | | `demoData` | -- | | `{ [x: string]: any; [x: number]: any; }` | `undefined` | | `payoutMissingInformationText` | `payout-missing-information-text` | Text displayed for existing publishers that do not have saved banking information. | `string` | `"Missing banking information, go to Impact.com to resolve."` | +| `stateController` | `state-controller` | | `string` | `"{}"` | | `statusBadgeText` | `status-badge-text` | Badge text indicating payout status | `string` | `"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }"` | | `thresholdPayoutText` | `threshold-payout-text` | Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid. | `string` | `"Next payout occurs when balance is {thresholdBalance}"` | @@ -22,14 +23,12 @@ - [sqm-stencilbook](../../sqm-stencilbook) - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard) - - [sqm-user-info-form](../sqm-user-info-form) ### Graph ```mermaid graph TD; sqm-stencilbook --> sqm-payout-details-card sqm-tax-and-cash-dashboard --> sqm-payout-details-card - sqm-user-info-form --> sqm-payout-details-card style sqm-payout-details-card fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx index c96b05b7de..6deb396346 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card-view.tsx @@ -32,12 +32,12 @@ const style = { display: "grid", gridTemplateColumns: "1fr", gridGap: "var(--sl-spacing-large)", - background: "var(--sl-color-neutral-0)", + background: "inherit", boxShadow: "0px 2px 4px rgba(28, 28, 33, 0.12)", - borderRadius: "4px", + borderRadius: "var(--sqm-border-radius-normal)", padding: "var(--sl-spacing-large)", minHeight: "150px", - border: "1px solid var(--sl-color-gray-200)", + border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", maxWidth: "450px", }, StatusContainer: { @@ -47,7 +47,7 @@ const style = { }, MainCurrencyLabel: { fontWeight: "var(--sl-font-weight-normal)", - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", }, MainCurrency: { margin: 0, @@ -56,13 +56,14 @@ const style = { }, SubduedRegularText: { fontSize: "var(--sl-font-size-small)", - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", margin: 0, width: "auto", }, PaypalEmail: { - borderRight: "1px solid var(--sl-color-gray-200)", + borderRight: + "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", paddingRight: "var(--sl-spacing-small)", "@media (max-width: 499px)": { borderRight: "none", @@ -70,7 +71,7 @@ const style = { }, }, PaypalDetailsContainer: { - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", display: "flex", gap: "var(--sl-spacing-small)", justifyContent: "flex-start", @@ -92,7 +93,7 @@ const style = { }, }, AccountDetailsContainer: { - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", display: "flex", gap: "var(--sl-spacing-small)", justifyContent: "flex-start", @@ -105,7 +106,8 @@ const style = { gap: "var(--sl-spacing-xx-small) var(--sl-spacing-small)", paddingTop: "var(--sq-spacing-xx-small)", "& > :not(:last-child)": { - borderRight: "1px solid var(--sl-color-gray-200)", + borderRight: + "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", }, "& > :nth-child(3)": { border: "none", @@ -122,7 +124,7 @@ const style = { }, W9Container: { paddingTop: "var(--sl-spacing-large)", - borderTop: "1px solid var(--sl-color-gray-200)", + borderTop: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", }, SkeletonOne: { width: "25%", @@ -136,27 +138,25 @@ const style = { width: "50%", height: "34px", }, - Alert: { + + SuccessBadge: { "&::part(base)": { - backgroundColor: "var(--sl-color-warning-100)", - border: "1px solid var(--sl-color-warning-200)", - padding: "0 16px", - }, - "& sl-icon": { - margin: 0, + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-success-color-icon)", + color: "var(--sl-color-white)", }, + }, - "& sl-icon::part(base)": { - color: "var(--sl-color-warning-500)", - margin: 0, + PrimaryBadge: { + "&::part(base)": { + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-informative-color-icon)", + color: "var(--sl-color-white)", }, }, - AlertContent: { - display: "flex", - alignItems: "flex-start", - justifyContent: "flex-start", - flexDirection: "column", - }, + Container: { display: "flex", flexDirection: "column", @@ -186,6 +186,8 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) { const renderStatusBadge = (status: string, statusBadgeText: string) => { const badgeType = status === "nextPayout" ? "success" : "primary"; + const badgeClass = + badgeType === "success" ? classes.SuccessBadge : classes.PrimaryBadge; const statusText = intl.formatMessage( { id: "badgeText", @@ -197,7 +199,7 @@ export function PayoutDetailsCardView(props: PayoutDetailsCardViewProps) { ); return ( - + {statusText} ); diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.tsx index fcdc17ed62..a429001a50 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/sqm-payout-details-card.tsx @@ -3,9 +3,9 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, Host, Prop, h } from "@stencil/core"; import deepmerge from "deepmerge"; import { DemoData } from "../../../global/demo"; +import { getProps } from "../../../utils/utils"; import { PayoutDetailsCardView } from "./sqm-payout-details-card-view"; import { usePayoutDetailsCard } from "./usePayoutDetailsCard"; -import { getProps } from "../../../utils/utils"; /** * @uiName Payout Details Card @@ -40,6 +40,12 @@ export class PayoutDetailsCard { */ @Prop() payoutMissingInformationText: string = "Missing banking information, go to Impact.com to resolve."; + + /** + * @componentState { "title": "Loading", "props": { "states": { "loading": true } } } + */ + @Prop() stateController?: string = "{}"; + /** * @undocumented */ diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.ts b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.ts index 11080216c7..7a8723d357 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.ts +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-details-card/usePayoutDetailsCard.ts @@ -1,9 +1,9 @@ +import { useParentQueryValue } from "@saasquatch/component-boilerplate"; import { DateTime } from "luxon"; import { intl } from "../../../global/global"; -import { USER_QUERY_NAMESPACE, UserQuery } from "../sqm-tax-and-cash/data"; +import { USER_QUERY_NAMESPACE, UserQuery } from "../data"; import { PayoutDetailsCard } from "./sqm-payout-details-card"; import { PayoutDetailsCardViewProps } from "./sqm-payout-details-card-view"; -import { useParentQueryValue } from "@saasquatch/component-boilerplate"; export function usePayoutDetailsCard( props: PayoutDetailsCard diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md index 1702956bcb..abcb371a67 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/readme.md @@ -20,6 +20,7 @@ | `informationRequiredButtonText` | `information-required-button-text` | | `string` | `"Payouts & Tax Settings"` | | `informationRequiredDescription` | `information-required-description` | | `string` | `"Submit your banking details and tax documents to receive your rewards."` | | `informationRequiredHeader` | `information-required-header` | | `string` | `"Payout and tax information required"` | +| `stateController` | `state-controller` | | `string` | `"{}"` | | `supportLink` | `support-link` | | `string` | `"support team"` | | `termsAndConditions` | `terms-and-conditions` | | `string` | `"Terms and Conditions"` | | `verificationFailedInternalDescription` | `verification-failed-internal-description` | | `string` | `"Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}."` | @@ -45,11 +46,13 @@ ### Depends on - [sqm-scroll](../../sqm-scroll) +- [sqm-form-message](../../sqm-form-message) ### Graph ```mermaid graph TD; sqm-payout-status-alert --> sqm-scroll + sqm-payout-status-alert --> sqm-form-message sqm-stencilbook --> sqm-payout-status-alert style sqm-payout-status-alert fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx index ee7f4cb529..df36ca33c6 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view.tsx @@ -59,33 +59,6 @@ const style = { margin: "0", marginBottom: "var(--sl-spacing-small)", }, - ErrorAlertContainer: { - "&::part(base)": { - backgroundColor: "var(--sl-color-red-100)", - borderTop: "none", - }, - "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", - }, - }, - WarningAlertContainer: { - "&::part(base)": { - backgroundColor: "var(--sl-color-yellow-100)", - borderTop: "none", - }, - "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", - }, - }, - InfoAlertContainer: { - "&::part(base)": { - backgroundColor: "var(--sl-color-sky-100)", - borderTop: "none", - }, - "& sl-icon::part(base)": { - color: "var(--sl-color-blue-500)", - }, - }, Dialog: { "&::part(panel)": { height: "600px", @@ -102,6 +75,14 @@ const style = { }, }; +const vanillaStyle = ` + a { + color: inherit; + text-decoration: underline; + cursor: pointer; + } +`; + const sheet = createStyleSheet(style); const styleString = sheet.toString(); @@ -114,9 +95,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { header: text.errorHeader, description: text.errorDescription, buttonText: null, - alertType: "critical", - icon: "exclamation-triangle", - class: sheet.classes.ErrorAlertContainer, + alertType: "error", }; switch (status) { @@ -126,8 +105,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { description: text.informationRequiredDescription, buttonText: text.informationRequiredButtonText, alertType: "info", - icon: "info-circle", - class: sheet.classes.InfoAlertContainer, }; case "VERIFICATION:REQUIRED": return { @@ -147,8 +124,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { ), buttonText: text.verificationRequiredButtonText, alertType: "warning", - icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; case "VERIFICATION:INTERNAL": return { @@ -167,8 +142,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { } ), alertType: "warning", - icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; case "VERIFICATION:REVIEW": return { @@ -187,8 +160,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { } ), alertType: "warning", - icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; case "VERIFICATION:FAILED": return { @@ -206,9 +177,7 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { ), } ), - alertType: "critical", - icon: "exclamation-octagon", - class: sheet.classes.ErrorAlertContainer, + alertType: "error", }; case "OVER_W9_THRESHOLD": if (states.enforceUsTaxComplianceOption === "CASH_ONLY_DEFER_W9") { @@ -233,7 +202,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { buttonText: text.w9RequiredButtonText, alertType: "warning", icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; } else { return { @@ -257,7 +225,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { buttonText: null, alertType: "warning", icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; } case "ACCOUNT_REVIEW": @@ -279,7 +246,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { buttonText: null, alertType: "warning", icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; case "HOLD": return { @@ -299,8 +265,6 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { ), buttonText: null, alertType: "warning", - icon: "exclamation-triangle", - class: sheet.classes.WarningAlertContainer, }; default: return; @@ -327,30 +291,46 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { ); case "INFORMATION_REQUIRED": return data.type === "SquatchJS2" ? ( - +
+ +
) : data.type === "SquatchPortal" ? ( - - {text.informationRequiredButtonText} - +
+ + {text.informationRequiredButtonText} + +
) : ( // Demo case - - {text.informationRequiredButtonText} - +
+ + {text.informationRequiredButtonText} + +
); case "VERIFICATION:REQUIRED": return ( - - {text.verificationRequiredButtonText} - +
+ + {text.verificationRequiredButtonText} + +
); default: return; @@ -369,19 +349,12 @@ export function PayoutStatusAlertView(props: PayoutStatusAlertViewProps) { return (
- - - {alertDetails.header} -

- {alertDetails.description} -

+ + +

{alertDetails.header}

+

{alertDetails.description}

{getButton(states.status)} - +
); } diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx index e3fbb6f80d..5d1a5e4542 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert.tsx @@ -9,9 +9,11 @@ import { PayoutStatusAlertViewProps, } from "./sqm-payout-status-alert-view"; import { usePayoutStatus } from "./usePayoutStatus"; +import { parseStates } from "../../../utils/parseStates"; /** * @uiName Payout Status Alert + * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqm-brand","sqb-program-section","sqb-conditional-section"] * @exampleGroup Tax and Cash * @example Payout Status Alert - */ @@ -130,6 +132,15 @@ export class PayoutStatusAlert { @Prop() errorDescription: string = "There was an error with determining your payout status."; + /** + * @undocumented + * @componentState { "title": "Payout Info Required", "props": { "states": { "status": "INFORMATION_REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Verification Required", "props": { "states": { "status": "VERIFICATION:REQUIRED" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Identity Verification", "props": { "states": { "status": "VERIFICATION:REVIEW" } }, "dependencies": ["sqm-payout-status-alert"] } + * @componentState { "title": "Account Hold", "props": { "states": { "status": "HOLD" } }, "dependencies": ["sqm-payout-status-alert"] } + */ + @Prop() stateController?: string = "{}"; + /** * @undocumented * @uiType object @@ -156,13 +167,21 @@ export class PayoutStatusAlert { function useDemoPayoutStatusAlert( props: PayoutStatusAlert ): PayoutStatusAlertViewProps { + const states = parseStates(props.stateController); + const formatted = Object.keys(states).reduce( + (prev, key) => + key === "sqm-payout-status-alert" + ? { ...prev, ...states[key] } + : { ...prev, [`${key}_stateController`]: states[key] }, + {} + ); return deepmerge( { states: { error: false, status: "INFORMATION_REQUIRED", loading: false, - showVerifyIdentity: false, + veriffLoading: false, }, data: { type: "SquatchAdmin" }, text: props.getTextProps(), @@ -171,7 +190,7 @@ function useDemoPayoutStatusAlert( onClick: () => console.log("show"), }, }, - props.demoData || {}, + formatted || props.demoData || {}, { arrayMerge: (_, a) => a } ); } diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts index ea7a2805b8..7102a67f1a 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts +++ b/packages/mint-components/src/components/tax-and-cash/sqm-payout-status-alert/usePayoutStatus.ts @@ -1,8 +1,8 @@ import { getEnvironmentSDK, useQuery } from "@saasquatch/component-boilerplate"; import { useEffect, useState } from "@saasquatch/stencil-hooks"; import { gql } from "graphql-request"; +import { UserQuery } from "../data"; import { TAX_FORM_UPDATED_EVENT_KEY } from "../eventKeys"; -import { UserQuery } from "../sqm-tax-and-cash/data"; import { useVeriffApp, VERIFF_COMPLETE_EVENT_KEY } from "../useVeriffApp"; import { PayoutStatusAlert } from "./sqm-payout-status-alert"; diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md index 18cd9a9211..1630f1ce78 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/readme.md @@ -1,7 +1,5 @@ # sqm-tax-document-submitted - - @@ -51,6 +49,7 @@ | `replaceTaxFormModalBodyText` | `replace-tax-form-modal-body-text` | | `string` | `"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout."` | | `replaceTaxFormModalHeader` | `replace-tax-form-modal-header` | | `string` | `"Replace existing tax form"` | | `requiredTaxForm` | `required-tax-form` | Additional text displayed next to the tax form's status badge | `string` | `"Your payouts are on hold until you submit a {taxFormType} tax form."` | +| `stateController` | `state-controller` | | `string` | `"{}"` | | `statusBadgeText` | `status-badge-text` | | `string` | `"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }"` | | `statusTextActive` | `status-text-active` | | `string` | `"Active"` | | `statusTextNotActive` | `status-text-not-active` | | `string` | `"Invalid Tax Form"` | @@ -86,11 +85,11 @@ - [sqm-stencilbook](../../sqm-stencilbook) - [sqm-tax-and-cash](../sqm-tax-and-cash) - - [sqm-user-info-form](../sqm-user-info-form) ### Depends on - [sqm-payout-details-card](../sqm-payout-details-card) +- [sqm-form-message](../../sqm-form-message) - [sqm-invoice-table](../../sqm-invoice-table) - [sqm-invoice-table-download-column](../../sqm-invoice-table/columns) - [sqm-invoice-table-date-column](../../sqm-invoice-table/columns) @@ -100,6 +99,7 @@ ```mermaid graph TD; sqm-tax-and-cash-dashboard --> sqm-payout-details-card + sqm-tax-and-cash-dashboard --> sqm-form-message sqm-tax-and-cash-dashboard --> sqm-invoice-table sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column @@ -115,7 +115,6 @@ graph TD; sqm-invoice-table-data-column --> sqm-invoice-table-data-cell sqm-stencilbook --> sqm-tax-and-cash-dashboard sqm-tax-and-cash --> sqm-tax-and-cash-dashboard - sqm-user-info-form --> sqm-tax-and-cash-dashboard style sqm-tax-and-cash-dashboard fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx index 0227b4260c..31393007a1 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard-view.tsx @@ -2,7 +2,7 @@ import { h, VNode } from "@stencil/core"; import { intl } from "../../../global/global"; import { createStyleSheet } from "../../../styling/JSS"; import { PayoutStatus } from "../sqm-payout-status-alert/usePayoutStatus"; -import { TaxDocumentType } from "../sqm-tax-and-cash/data"; +import { TaxDocumentType } from "../data"; export interface TaxAndCashDashboardProps { states: { @@ -122,9 +122,6 @@ const style = { backgroundColor: "var(--sl-color-red-100)", borderTop: "none", }, - "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", - }, }, WarningAlertContainer: { "&::part(base)": { @@ -132,9 +129,6 @@ const style = { borderTop: "none", maxWidth: "600px", }, - "& sl-icon::part(base)": { - color: "var(--sl-color-warning-500)", - }, }, WarningHoldAlertContainer: { marginLeft: "-20px", @@ -142,9 +136,10 @@ const style = { maxWidth: "850px", border: "none", backgroundColor: "transparent", + color: "var(--sqm-text)", }, "& sl-icon::part(base)": { - color: "var(--sl-color-warning-500)", + color: "var(--sqm-warning-color-icon)", }, }, ErrorHoldAlertContainer: { @@ -153,9 +148,10 @@ const style = { maxWidth: "850px", border: "none", backgroundColor: "transparent", + color: "var(--sqm-text)", }, "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", + color: "var(--sqm-danger-color-icon)", }, }, ExpiringSoonAlertContainer: { @@ -178,7 +174,7 @@ const style = { display: "flex", gap: "var(--sl-spacing-x-small)", "&::part(base)": { - color: "var(--sl-color-green-500)", + color: "var(--sqm-text)", }, }, IndirectTaxPreviewDetails: { @@ -187,12 +183,13 @@ const style = { flexDirection: "column", lineHeight: "var(--sl-spacing-medium)", fontSize: "var(--sl-font-size-small)", + color: "var(--sqm-text-subdued)", }, InvoiceTableContainer: { marginTop: "var(--sl-spacing-medium)", }, NotRegisteredIndirectTaxText: { - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", }, TaxDocumentsContainer: { marginTop: "var(--sl-spacing-xx-large)", @@ -213,7 +210,6 @@ const style = { "& p": { margin: "0", paddingTop: "2px", - color: "var(--sl-color-gray-500)", }, }, StatusAlert: { @@ -248,7 +244,7 @@ const style = { }, TaxDocSubtext: { margin: "0", - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", lineHeight: "var(--sl-spacing-medium)", fontSize: "var(--sl-font-size-small)", marginLeft: "1px", @@ -269,13 +265,13 @@ const style = { gap: "6px", }, DescriptionText: { - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-x-small)", marginBottom: "none", maxWidth: "492px", }, PageDescriptionText: { - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-medium)", marginTop: "0", }, @@ -307,11 +303,56 @@ const style = { }, }, DialogButton: { margin: "auto", width: "100%" }, + SuccessBadge: { + "&::part(base)": { + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-success-color-icon)", + }, + }, + WarningBadge: { + "&::part(base)": { + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-warning-color-icon)", + }, + }, + ErrorBadge: { + "&::part(base)": { + textAlign: "center", + whiteSpace: "pre-line", + background: "var(--sqm-danger-color-icon)", + }, + }, + SubduedText: { + color: "var(--sqm-text-subdued)", + }, }; const sheet = createStyleSheet(style); const styleString = sheet.toString(); +const vanillaStyle = ` + :host{ + display: block; + } + + sl-button[type="secondary"]::part(base) { + font-family: var(--sqm-primary-font); + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); + } + + sl-button[type="secondary"]::part(base):hover { + background-color: var(--sqm-secondary-button-background-hover); + color: var(--sqm-secondary-button-color-hover); + border-color: var(--sqm-secondary-button-border-color-hover); + } + + `; + export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { const { states, text, callbacks, slots } = props; @@ -346,7 +387,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { {text.w9RequiredButtonText} ), - alertType: "info", + alertType: "warning", icon: "info-circle", class: sheet.classes.WarningHoldAlertContainer, }; @@ -452,7 +493,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { ), } ), - alertType: "critical", + alertType: "error", icon: "exclamation-octagon", class: sheet.classes.ErrorHoldAlertContainer, }; @@ -506,10 +547,10 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { const statusMap = { NOT_VERIFIED: (
- + {text.statusTextNotVerified} -

+

{intl.formatMessage( { id: `badgeTextAwaitingReview`, @@ -524,10 +565,10 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { ), ACTIVE: (

- + {text.statusTextActive} -

+

{intl.formatMessage( { id: `badgeTextSubmittedOn`, @@ -545,10 +586,10 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { ), INACTIVE: (

- + {text.statusTextNotActive} -

{text.invalidForm}

+

{text.invalidForm}

), undefined: ( @@ -577,7 +618,6 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { exportparts="base: alert-base, icon:alert-icon" type="danger" open - class={sheet.classes.ErrorAlertContainer} > @@ -652,7 +692,10 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { return (
- + {states.loadingError && (
{ )} {alertInfo && ( - - {alertInfo.header}

{alertInfo.description}

{alertInfo.buttonText && ( @@ -736,7 +779,7 @@ export const TaxAndCashDashboardView = (props: TaxAndCashDashboardProps) => { ) : (
)} - + )} { {states.canEditPayoutInfo && ( diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx index 8719aff23b..260826aac6 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/sqm-tax-and-cash-dashboard.tsx @@ -400,6 +400,12 @@ export class TaxAndCashDashboard { */ @Prop() demoData?: DemoData; + /** + * @undocumented + * @componentState { "title": "Payouts on hold", "props": { "states": { "payoutStatus": "HOLD" } }, "uiGroup": "Dashboard Properties" } + */ + @Prop() stateController?: string = "{}"; + constructor() { withHooks(this); } @@ -445,6 +451,7 @@ export class TaxAndCashDashboard { function useDemoTaxAndCashDashboard( props: TaxAndCashDashboard ): UseTaxAndCashDashboardResult { + // @ts-ignore return deepmerge( { states: { @@ -453,16 +460,25 @@ function useDemoTaxAndCashDashboard( documentTypeString: "W-9", status: "ACTIVE", country: "United States", - indirectTaxNumber: 55555555, + indirectTaxNumber: "55555555", indirectTaxType: "Indirect Tax", - noFormNeeded: true, + noFormNeeded: false, disabled: false, loading: false, showNewFormDialog: false, hasHold: false, - showVerifyIdentity: false, + + subRegion: "CA", + subRegionTaxNumber: undefined, + qstNumber: undefined, + isBusinessEntity: false, + province: undefined, + notRegistered: true, + loadingError: false, + payoutStatus: "DONE", veriffLoading: false, + canEditPayoutInfo: true, }, callbacks: { onClick: () => console.debug("check step"), @@ -472,8 +488,19 @@ function useDemoTaxAndCashDashboard( onVerifyClick: () => console.log("verify"), }, text: props.getTextProps(), + slots: { + payoutDetailsCardSlot: ( + + ), + }, }, - props.demoData || {}, + props.demoData || props.stateController || {}, { arrayMerge: (_, a) => a } ); } diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.tsx index ef09db6ded..7ae412f7e1 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash-dashboard/useTaxAndCashDashboard.tsx @@ -18,7 +18,7 @@ import { TaxContext, USER_QUERY_NAMESPACE, UserQuery, -} from "../sqm-tax-and-cash/data"; +} from "../data"; import { INDIRECT_TAX_PROVINCES, INDIRECT_TAX_SPAIN_REGIONS, diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/ErrorView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/ErrorView.tsx index 26444e57cf..e2ed182b88 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/ErrorView.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/ErrorView.tsx @@ -1,47 +1,15 @@ -import { Host, h } from "@stencil/core"; -import { createStyleSheet } from "../../../styling/JSS"; +import { h } from "@stencil/core"; interface ErrorProps { loadingErrorAlertHeader: string; loadingErrorAlertDescription: string; } -const styles = { - Alert: { - "&::part(base)": { - backgroundColor: "var(--sl-color-danger-100)", - border: "1px solid var(--sl-color-danger-200)", - padding: "0 16px", - }, - "& sl-icon": { - margin: 0, - }, - - "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", - margin: 0, - }, - }, -}; - export const ErrorView = (props: ErrorProps) => { - const sheet = createStyleSheet(styles); - const styleString = sheet.toString(); - const { classes } = sheet; return ( -
- - - - {props.loadingErrorAlertHeader} -
- {props.loadingErrorAlertDescription} - -
+ +

{props.loadingErrorAlertHeader}

+

{props.loadingErrorAlertDescription}

+ ); }; diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md index 8b0196be35..ec72f92271 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/readme.md @@ -5,195 +5,191 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `backButton` | `back-button` | | `string` | `"Back"` | -| `cancelButton` | `cancel-button` | | `string` | `"Cancel"` | -| `continueButton` | `continue-button` | | `string` | `"Continue"` | -| `dashboard_accountReviewDescription` | `dashboard_account-review-description` | | `string` | `"This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise. It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}."` | -| `dashboard_accountReviewHeader` | `dashboard_account-review-header` | | `string` | `"Your account is under review"` | -| `dashboard_accountText` | `dashboard_account-text` | Shown before the participant’s bank account information. | `string` | `"Account"` | -| `dashboard_badgeTextAwaitingReview` | `dashboard_badge-text-awaiting-review` | Additional text displayed next to the tax form's status badge. | `string` | `"Awaiting review. Submitted on {dateSubmitted}."` | -| `dashboard_badgeTextSubmittedOn` | `dashboard_badge-text-submitted-on` | Additional text displayed next to the tax form's status badge | `string` | `"Submitted on {dateSubmitted}."` | -| `dashboard_badgeTextSubmittedOnW8` | `dashboard_badge-text-submitted-on-w-8` | Additional text displayed next to the tax form's status badge. | `string` | `"Submitted on {dateSubmitted}. Valid for three years after submission."` | -| `dashboard_bankingInformationSectionHeader` | `dashboard_banking-information-section-header` | | `string` | `"Payout Information"` | -| `dashboard_dateColumnTitle` | `dashboard_date-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Date"` | -| `dashboard_earningsAfterTaxColumnTitle` | `dashboard_earnings-after-tax-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Earnings after tax"` | -| `dashboard_earningsColumnTitle` | `dashboard_earnings-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Earnings"` | -| `dashboard_editPaymentInformationButton` | `dashboard_edit-payment-information-button` | | `string` | `"Edit Payout Information"` | -| `dashboard_indirectTaxColumnTitle` | `dashboard_indirect-tax-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Indirect tax"` | -| `dashboard_indirectTaxDetails` | `dashboard_indirect-tax-details` | Displayed to participants who have submitted their indirect tax information. | `string` | `"{indirectTaxType} number: {indirectTaxNumber}"` | -| `dashboard_indirectTaxInfoCanada` | `dashboard_indirect-tax-info-canada` | If the participant is registered for indirect tax in Canada, display the province they’re registered in. | `string` | `"Registered in {province}, {country}"` | -| `dashboard_indirectTaxInfoOtherCountry` | `dashboard_indirect-tax-info-other-country` | If the participant is registered for indirect tax, display the country they’re registered in. | `string` | `"Registered in {country}"` | -| `dashboard_indirectTaxInfoSectionHeader` | `dashboard_indirect-tax-info-section-header` | | `string` | `"Indirect tax"` | -| `dashboard_indirectTaxInfoSpain` | `dashboard_indirect-tax-info-spain` | If the participant is registered for indirect tax in Spain, display the region they’re registered in. | `string` | `"Registered in {country}, {subRegion}"` | -| `dashboard_indirectTaxTooltipSupport` | `dashboard_indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our {supportLink}."` | -| `dashboard_invalidForm` | `dashboard_invalid-form` | Additional text displayed next to the tax form's status badge. | `string` | `"Make sure your information is correct and submit new form."` | -| `dashboard_invoiceColumnTitle` | `dashboard_invoice-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Invoice"` | -| `dashboard_invoiceDescription` | `dashboard_invoice-description` | | `string` | `"View and download your invoices to report your earnings and stay tax compliant."` | -| `dashboard_invoiceEmptyStateHeader` | `dashboard_invoice-empty-state-header` | | `string` | `"View your invoice details"` | -| `dashboard_invoiceEmptyStateText` | `dashboard_invoice-empty-state-text` | | `string` | `"Refer a friend to view the status of your invoices and rewards earned"` | -| `dashboard_invoiceHeader` | `dashboard_invoice-header` | | `string` | `"Invoices"` | -| `dashboard_invoiceMoreLabel` | `dashboard_invoice-more-label` | | `string` | `"Next"` | -| `dashboard_invoicePrevLabel` | `dashboard_invoice-prev-label` | | `string` | `"Prev"` | -| `dashboard_newFormButton` | `dashboard_new-form-button` | | `string` | `"Submit new form"` | -| `dashboard_noFormNeededSubtext` | `dashboard_no-form-needed-subtext` | No other statuses or badges will be displayed in the tax form section in this case. | `string` | `"Tax documents are only required if you are based in the US or joining the referral program of a US based brand."` | -| `dashboard_notRegisteredForTax` | `dashboard_not-registered-for-tax` | | `string` | `"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact our {supportLink} to add your information to stay tax compliant."` | -| `dashboard_payoutFromImpact` | `dashboard_payout-from-impact` | Displayed under the payout details card. | `string` | `"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com."` | -| `dashboard_payoutHoldAlertDescription` | `dashboard_payout-hold-alert-description` | Part of the alert displayed at the top of the page when there’s been an issue preventing payouts. | `string` | `"Please contact our {supportLink} or check your inbox for an email from our referral program provider, impact.com."` | -| `dashboard_payoutHoldAlertHeader` | `dashboard_payout-hold-alert-header` | Part of the alert displayed at the top of the page when there’s been an issue preventing payouts. | `string` | `"Your payout is on hold"` | -| `dashboard_payoutMissingInformationText` | `dashboard_payout-missing-information-text` | Text displayed for existing publishers that do not have saved banking information. | `string` | `"Missing banking information, go to Impact.com to resolve."` | -| `dashboard_qstNumber` | `dashboard_qst-number` | Displayed to participants registered in Quebec, Canada. | `string` | `"QST number: {qstNumber}"` | -| `dashboard_replaceTaxFormModalBodyText` | `dashboard_replace-tax-form-modal-body-text` | | `string` | `"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout."` | -| `dashboard_replaceTaxFormModalHeader` | `dashboard_replace-tax-form-modal-header` | | `string` | `"Replace existing tax form"` | -| `dashboard_requiredTaxForm` | `dashboard_required-tax-form` | Additional text displayed next to the tax form's status badge | `string` | `"Your payouts are on hold until you submit a {taxFormType} tax form."` | -| `dashboard_statusBadgeText` | `dashboard_status-badge-text` | | `string` | `"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }"` | -| `dashboard_statusTextActive` | `dashboard_status-text-active` | | `string` | `"Active"` | -| `dashboard_statusTextNotActive` | `dashboard_status-text-not-active` | | `string` | `"Invalid Tax Form"` | -| `dashboard_statusTextNotVerified` | `dashboard_status-text-not-verified` | Displayed when the participant submitted their form but it is awaiting review. | `string` | `"Not Verified"` | -| `dashboard_statusTextRequired` | `dashboard_status-text-required` | Displayed when the participant has not submitted their required tax form. | `string` | `"Required"` | -| `dashboard_subRegionTaxNumber` | `dashboard_sub-region-tax-number` | | `string` | `"Income tax number: {subRegionTaxNumber}"` | -| `dashboard_taxAlertHeaderNotActiveW8` | `dashboard_tax-alert-header-not-active-w-8` | Part of the alert displayed at the top of the page. | `string` | `"{documentType} tax form is invalid"` | -| `dashboard_taxAlertHeaderNotActiveW9` | `dashboard_tax-alert-header-not-active-w-9` | Part of the alert displayed at the top of the page. | `string` | `"Your W-9 tax form has personal information that doesn’t match your profile"` | -| `dashboard_taxAlertNotActiveMessageW8` | `dashboard_tax-alert-not-active-message-w-8` | Part of the alert displayed at the top of the page. | `string` | `"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form."` | -| `dashboard_taxAlertNotActiveMessageW9` | `dashboard_tax-alert-not-active-message-w-9` | Part of the alert displayed at the top of the page. | `string` | `"Please resubmit a new {documentType} form."` | -| `dashboard_taxDocumentSectionHeader` | `dashboard_tax-document-section-header` | | `string` | `"Tax documents"` | -| `dashboard_taxDocumentSectionSubHeader` | `dashboard_tax-document-section-sub-header` | Displayed under the tax document section header. | `string` | `"{documentType} tax form"` | -| `dashboard_termsAndConditions` | `dashboard_terms-and-conditions` | | `string` | `"Terms and Conditions"` | -| `dashboard_thresholdPayoutText` | `dashboard_threshold-payout-text` | Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid. | `string` | `"Next payout occurs when balance is {thresholdBalance}"` | -| `dashboard_verificationFailedInternalDescription` | `dashboard_verification-failed-internal-description` | | `string` | `"Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}."` | -| `dashboard_verificationFailedInternalHeader` | `dashboard_verification-failed-internal-header` | | `string` | `"Identity Verification Unsuccessful"` | -| `dashboard_verificationRequiredButtonText` | `dashboard_verification-required-button-text` | Part of the alert displayed at the top of the page when the user needs to verify their identity. | `string` | `"Start Verification"` | -| `dashboard_verificationRequiredDescription` | `dashboard_verification-required-description` | Part of the alert displayed at the top of the page when the user needs to verify their identity | `string` | `"Complete your verification to start receiving your cash rewards. It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}."` | -| `dashboard_verificationRequiredHeader` | `dashboard_verification-required-header` | Part of the alert displayed at the top of the page when the user needs to verify their identity. | `string` | `"Verify your identity"` | -| `dashboard_verificationRequiredInternalDescription` | `dashboard_verification-required-internal-description` | | `string` | `"Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}."` | -| `dashboard_verificationRequiredInternalHeader` | `dashboard_verification-required-internal-header` | | `string` | `"Identity Verification in Progress"` | -| `dashboard_verificationReviewInternalDescription` | `dashboard_verification-review-internal-description` | | `string` | `"Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}."` | -| `dashboard_verificationReviewInternalHeader` | `dashboard_verification-review-internal-header` | | `string` | `"Identity Verification Under Review"` | -| `dashboard_w9RequiredButtonText` | `dashboard_w-9-required-button-text` | | `string` | `"Submit W-9"` | -| `dashboard_w9RequiredDescription` | `dashboard_w-9-required-description` | | `string` | `"You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form."` | -| `dashboard_w9RequiredHeader` | `dashboard_w-9-required-header` | | `string` | `"Your next payout is on hold"` | -| `demoData` | -- | | `{ loading?: boolean; setStep?: (value: string) => void; step?: string; context?: TaxContext; namespace?: string; }` | `undefined` | -| `fieldInvalidError` | `field-invalid-error` | Displayed under a field when it has an invalid entry. | `string` | `"{fieldName} is invalid"` | -| `fieldRequiredError` | `field-required-error` | Displayed under a field that is missing required information. | `string` | `"{fieldName} is required"` | -| `formStep` | `form-step` | | `string` | `"Step {step} of {count}"` | -| `generalErrorDescription` | `general-error-description` | Part of the alert displayed at the top of the page. | `string` | `"Please review your information and try again. If this problem continues, contact our {supportLink}."` | -| `generalErrorTitle` | `general-error-title` | Part of the alert displayed at the top of the page. | `string` | `"There was a problem submitting your information"` | -| `invalidCharacterError` | `invalid-character-error` | Displayed under a field that includes invalid characters (non-ASCII). | `string` | `"{fieldName} includes characters that aren't supported."` | -| `isPartnerAlertDescription` | `is-partner-alert-description` | Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com. | `string` | `"If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email."` | -| `isPartnerAlertHeader` | `is-partner-alert-header` | Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com. | `string` | `"An account with this email already exists with our referral program provider, impact.com"` | -| `loadingErrorAlertDescription` | `loading-error-alert-description` | Part of the alert displayed at the top of the page. | `string` | `"Please refresh the page and try again. If this problem continues, contact our {supportLink}."` | -| `loadingErrorAlertHeader` | `loading-error-alert-header` | Part of the alert displayed at the top of the page. | `string` | `"There was a problem loading your form"` | -| `searchForCountryText` | `search-for-country-text` | Placeholder text displayed in the country search dropdown | `string` | `"Search for country.."` | -| `step1_address` | `step-1_address` | | `string` | `"Address"` | -| `step1_allowBankingCollection` | `step-1_allow-banking-collection` | Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}. | `string` | `"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information"` | -| `step1_city` | `step-1_city` | | `string` | `"City"` | -| `step1_country` | `step-1_country` | | `string` | `"Country"` | -| `step1_currency` | `step-1_currency` | | `string` | `"Currency"` | -| `step1_currencyHelpText` | `step-1_currency-help-text` | | `string` | `"Choose your preferred payout currency"` | -| `step1_email` | `step-1_email` | | `string` | `"Email"` | -| `step1_firstName` | `step-1_first-name` | | `string` | `"First name"` | -| `step1_lastName` | `step-1_last-name` | | `string` | `"Last name"` | -| `step1_personalInformation` | `step-1_personal-information` | | `string` | `"Personal Information"` | -| `step1_phoneNumber` | `step-1_phone-number` | | `string` | `"Phone number"` | -| `step1_postalCode` | `step-1_postal-code` | | `string` | `"Postal code"` | -| `step1_province` | `step-1_province` | | `string` | `"Province"` | -| `step1_region` | `step-1_region` | | `string` | `"Region"` | -| `step1_searchForCurrencyText` | `step-1_search-for-currency-text` | Placeholder text displayed in the currency search dropdown | `string` | `"Search for currency.."` | -| `step1_state` | `step-1_state` | | `string` | `"State"` | -| `step1_termsAndConditionsLabel` | `step-1_terms-and-conditions-label` | The link text that appears in the terms and conditions checkbox | `string` | `"terms and conditions"` | -| `step1_termsAndConditionsLink` | `step-1_terms-and-conditions-link` | The link that appears in the terms and conditions checkbox | `string` | `"https://terms.advocate.impact.com/PayoutTermsAndConditions.html"` | -| `step2_cannotChangeInfoAlert` | `step-2_cannot-change-info-alert` | Communicate that after this step, only Support can change personal and indirect tax information. | `string` | `"Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing."` | -| `step2_indirectTax` | `step-2_indirect-tax` | | `string` | `"Indirect Tax"` | -| `step2_indirectTaxDescription` | `step-2_indirect-tax-description` | Displayed under the title of this step. | `string` | `"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments."` | -| `step2_indirectTaxDetails` | `step-2_indirect-tax-details` | Displayed with indirect tax registration options. | `string` | `"Indirect tax details"` | -| `step2_indirectTaxNumber` | `step-2_indirect-tax-number` | | `string` | `"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}"` | -| `step2_indirectTaxNumberError` | `step-2_indirect-tax-number-error` | | `string` | `"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required"` | -| `step2_isRegisteredQST` | `step-2_is-registered-q-s-t` | Displayed to participants registered for indirect tax in Quebec, Canada. | `string` | `"I am registered for QST Tax"` | -| `step2_isRegisteredSubRegionIncomeTax` | `step-2_is-registered-sub-region-income-tax` | Displayed to participants registered for indirect tax in Spain. | `string` | `"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me."` | -| `step2_notRegistered` | `step-2_not-registered` | | `string` | `"Not registered for indirect tax"` | -| `step2_notRegisteredSubtext` | `step-2_not-registered-subtext` | Participants based in the US are considered not registered. | `string` | `"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered."` | -| `step2_otherRegion` | `step-2_other-region` | | `string` | `"Registered for indirect tax"` | -| `step2_otherRegionSubtext` | `step-2_other-region-subtext` | Selecting this option will display fields to enter indirect tax details. | `string` | `"If you’ve registered with your tax authority, add your information to stay tax compliant."` | -| `step2_province` | `step-2_province` | | `string` | `"Province"` | -| `step2_qstNumber` | `step-2_qst-number` | Displayed to participants registered for QST. | `string` | `"QST number"` | -| `step2_selectedRegion` | `step-2_selected-region` | | `string` | `"Country / region of indirect tax"` | -| `step2_subRegion` | `step-2_sub-region` | Displayed to participants registered in Spain. | `string` | `"Sub-region"` | -| `step2_subRegionTaxNumberLabel` | `step-2_sub-region-tax-number-label` | | `string` | `"Income Tax Number"` | -| `step3_businessEntity` | `step-3_business-entity` | An option for the participant type field. Used to determine which W-8 form is required. | `string` | `"I represent a business"` | -| `step3_docusignError` | `step-3_docusign-error` | This appears inside the Docusign frame. | `string` | `"There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}."` | -| `step3_docusignExpired` | `step-3_docusign-expired` | This appears inside the Docusign frame. | `string` | `"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue."` | -| `step3_docusignSessionWarning` | `step-3_docusign-session-warning` | Remind participants their session will time out after 20 minutes of inactivity. | `string` | `"For your security, we automatically end your session when you have not interacted with the form after 20 minutes."` | -| `step3_exitButton` | `step-3_exit-button` | | `string` | `"Exit"` | -| `step3_individualParticipant` | `step-3_individual-participant` | An option for the participant type field. Used to determine which W-8 form is required. | `string` | `"I am an individual participant"` | -| `step3_modalButtonText` | `step-3_modal-button-text` | | `string` | `"I understand"` | -| `step3_modalDescription` | `step-3_modal-description` | | `string` | `"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout."` | -| `step3_modalTitle` | `step-3_modal-title` | | `string` | `"Important Note"` | -| `step3_participantType` | `step-3_participant-type` | | `string` | `"Participant type"` | -| `step3_refreshButton` | `step-3_refresh-button` | | `string` | `"Refresh Page"` | -| `step3_taxForm` | `step-3_tax-form` | | `string` | `"Tax form"` | -| `step3_taxFormDescription` | `step-3_tax-form-description` | Displayed at the top of the page to participants based in the US. | `string` | `"Participants based in the US need to submit a {documentType} form."` | -| `step3_taxFormDescriptionBusinessEntity` | `step-3_tax-form-description-business-entity` | Displayed at the top of the page to participants representing a business. | `string` | `"Participants residing outside of the US working with a US Brand need to submit a {documentType} form."` | -| `step3_taxFormDescriptionIndividualParticipant` | `step-3_tax-form-description-individual-participant` | Displayed at the top of the page to individuals joining a US program who reside outside the country. | `string` | `"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form."` | -| `step3_taxFormLabel` | `step-3_tax-form-label` | Display the type of tax form that the participant must submit. | `string` | `"{documentType} Tax Form"` | -| `step4_agencyCodeLabel` | `step-4_agency-code-label` | | `string` | `"Agency code"` | -| `step4_bankAccountNumberLabel` | `step-4_bank-account-number-label` | | `string` | `"Bank account number"` | -| `step4_bankAccountTypeLabel` | `step-4_bank-account-type-label` | | `string` | `"Bank account type"` | -| `step4_bankAddressLabel` | `step-4_bank-address-label` | | `string` | `"Bank address"` | -| `step4_bankCityLabel` | `step-4_bank-city-label` | | `string` | `"Bank city"` | -| `step4_bankLocationLabel` | `step-4_bank-location-label` | | `string` | `"Bank country location"` | -| `step4_bankNameLabel` | `step-4_bank-name-label` | | `string` | `"Bank name"` | -| `step4_bankPostalCodeLabel` | `step-4_bank-postal-code-label` | | `string` | `"Bank postal code"` | -| `step4_bankStateLabel` | `step-4_bank-state-label` | | `string` | `"Bank Province / State"` | -| `step4_beneficiaryAccountNameDescription` | `step-4_beneficiary-account-name-description` | | `string` | `"The beneficiary name of your bank account. Ensure this matches the name on your tax form."` | -| `step4_beneficiaryAccountNameLabel` | `step-4_beneficiary-account-name-label` | | `string` | `"Account holder name"` | -| `step4_branchCodeLabel` | `step-4_branch-code-label` | | `string` | `"Branch code"` | -| `step4_businessSelectItemLabel` | `step-4_business-select-item-label` | One of three options listed for the classification field | `string` | `"Business"` | -| `step4_checkingSelectItemLabel` | `step-4_checking-select-item-label` | | `string` | `"Checking"` | -| `step4_classificationCPFLabel` | `step-4_classification-c-p-f-label` | | `string` | `"Classification CPF"` | -| `step4_classificationEntityLabel` | `step-4_classification-entity-label` | | `string` | `"Classification entity"` | -| `step4_classificationLabel` | `step-4_classification-label` | Label text for the classification input field | `string` | `"Classification"` | -| `step4_directlyToBankAccount` | `step-4_directly-to-bank-account` | | `string` | `"Directly to my bank account"` | -| `step4_eftWithdrawalLabel` | `step-4_eft-withdrawal-label` | Default payment method to the participants’ bank account. | `string` | `"EFT Withdrawal (free)"` | -| `step4_foreignSelectItemLabel` | `step-4_foreign-select-item-label` | One of three options listed for the classification field | `string` | `"Foreign"` | -| `step4_fxWireProcessingFeeLabel` | `step-4_fx-wire-processing-fee-label` | | `string` | `"FX Wire (Processing Fee {currency}{defaultFxFee}.00)"` | -| `step4_ibanLabel` | `step-4_iban-label` | | `string` | `"IBAN"` | -| `step4_individualSelectItemLabel` | `step-4_individual-select-item-label` | One of three options listed for the classification field | `string` | `"Individual"` | -| `step4_modalButtonText` | `step-4_modal-button-text` | | `string` | `"I understand, update my information"` | -| `step4_modalDescription` | `step-4_modal-description` | | `string` | `"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped."` | -| `step4_modalTitle` | `step-4_modal-title` | | `string` | `"Important Note"` | -| `step4_patronymicNameLabel` | `step-4_patronymic-name-label` | | `string` | `"Patronymic name"` | -| `step4_payPalInputLabel` | `step-4_pay-pal-input-label` | Displayed to participants who choose PayPal as their payout method | `string` | `"PayPal email"` | -| `step4_paymentDayFifteenthOfMonthLabelText` | `step-4_payment-day-fifteenth-of-month-label-text` | One of two payment day options | `string` | `"15th of the month"` | -| `step4_paymentDayFirstOfMonthLabelText` | `step-4_payment-day-first-of-month-label-text` | One of two payment day options | `string` | `"1st of the month"` | -| `step4_paymentDaySelectLabel` | `step-4_payment-day-select-label` | Let the participant choose what day of the month they’ll get paid | `string` | `"Payment Day"` | -| `step4_paymentMethod` | `step-4_payment-method` | | `string` | `"Payment method"` | -| `step4_paymentMethodSubtext` | `step-4_payment-method-subtext` | | `string` | `"Payouts will be sent from our referral program provider, impact.com."` | -| `step4_paymentSchedule` | `step-4_payment-schedule` | | `string` | `"Payment schedule"` | -| `step4_paymentScheduleBalanceThreshold` | `step-4_payment-schedule-balance-threshold` | | `string` | `"Pay me when my balance reaches a threshold"` | -| `step4_paymentScheduleFixedDay` | `step-4_payment-schedule-fixed-day` | | `string` | `"Pay me on a fixed day of the month"` | -| `step4_paymentThresholdSelectLabel` | `step-4_payment-threshold-select-label` | Participant use this field to select the balance at which they want to be paid | `string` | `"Payment threshold"` | -| `step4_routingCodeLabel` | `step-4_routing-code-label` | | `string` | `"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }"` | -| `step4_savingsSelectItemLabel` | `step-4_savings-select-item-label` | Label text for the savings account type select item | `string` | `"Savings"` | -| `step4_swiftCodeLabel` | `step-4_swift-code-label` | | `string` | `"SWIFT code"` | -| `step4_taxAndPayouts` | `step-4_tax-and-payouts` | | `string` | `"Payouts"` | -| `step4_taxPayerIdLabel` | `step-4_tax-payer-id-label` | | `string` | `"Beneficiary INN"` | -| `step4_toPayPalAccount` | `step-4_to-pay-pal-account` | | `string` | `"PayPal (2% processing fee capped to {feeCap})"` | -| `step4_verifyEmailDescriptionText` | `step-4_verify-email-description-text` | | `string` | `"Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com."` | -| `step4_verifyEmailHeaderText` | `step-4_verify-email-header-text` | | `string` | `"Verify your email"` | -| `step4_voCodeLabel` | `step-4_vo-code-label` | | `string` | `"VO code"` | -| `supportLink` | `support-link` | Link text for contacting support team | `string` | `"support team"` | -| `taxAndPayoutsDescription` | `tax-and-payouts-description` | Displayed at the top of the page on all set up steps. | `string` | `"Submit your tax documents and add your banking information to receive your rewards."` | -| `termsAndConditions` | `terms-and-conditions` | Link text for Terms and Conditions | `string` | `"Terms and Conditions"` | +| Property | Attribute | Description | Type | Default | +| --------------------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `backButton` | `back-button` | | `string` | `"Back"` | +| `cancelButton` | `cancel-button` | | `string` | `"Cancel"` | +| `continueButton` | `continue-button` | | `string` | `"Continue"` | +| `dashboard_accountReviewDescription` | `dashboard_account-review-description` | | `string` | `"This process takes 48 hours, payouts are on hold until it's completed. You will receive an email from our referral provider, Impact.com, if any issues arise. It contains details on how to resolve this issue. If you need further assistance, please reach out to our {supportLink}."` | +| `dashboard_accountReviewHeader` | `dashboard_account-review-header` | | `string` | `"Your account is under review"` | +| `dashboard_accountText` | `dashboard_account-text` | Shown before the participant’s bank account information. | `string` | `"Account"` | +| `dashboard_badgeTextAwaitingReview` | `dashboard_badge-text-awaiting-review` | Additional text displayed next to the tax form's status badge. | `string` | `"Awaiting review. Submitted on {dateSubmitted}."` | +| `dashboard_badgeTextSubmittedOn` | `dashboard_badge-text-submitted-on` | Additional text displayed next to the tax form's status badge | `string` | `"Submitted on {dateSubmitted}."` | +| `dashboard_badgeTextSubmittedOnW8` | `dashboard_badge-text-submitted-on-w-8` | Additional text displayed next to the tax form's status badge. | `string` | `"Submitted on {dateSubmitted}. Valid for three years after submission."` | +| `dashboard_bankingInformationSectionHeader` | `dashboard_banking-information-section-header` | | `string` | `"Payout Information"` | +| `dashboard_dateColumnTitle` | `dashboard_date-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Date"` | +| `dashboard_earningsAfterTaxColumnTitle` | `dashboard_earnings-after-tax-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Earnings after tax"` | +| `dashboard_earningsColumnTitle` | `dashboard_earnings-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Earnings"` | +| `dashboard_editPaymentInformationButton` | `dashboard_edit-payment-information-button` | | `string` | `"Edit Payout Information"` | +| `dashboard_indirectTaxColumnTitle` | `dashboard_indirect-tax-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Indirect tax"` | +| `dashboard_indirectTaxDetails` | `dashboard_indirect-tax-details` | Displayed to participants who have submitted their indirect tax information. | `string` | `"{indirectTaxType} number: {indirectTaxNumber}"` | +| `dashboard_indirectTaxInfoCanada` | `dashboard_indirect-tax-info-canada` | If the participant is registered for indirect tax in Canada, display the province they’re registered in. | `string` | `"Registered in {province}, {country}"` | +| `dashboard_indirectTaxInfoOtherCountry` | `dashboard_indirect-tax-info-other-country` | If the participant is registered for indirect tax, display the country they’re registered in. | `string` | `"Registered in {country}"` | +| `dashboard_indirectTaxInfoSectionHeader` | `dashboard_indirect-tax-info-section-header` | | `string` | `"Indirect tax"` | +| `dashboard_indirectTaxInfoSpain` | `dashboard_indirect-tax-info-spain` | If the participant is registered for indirect tax in Spain, display the region they’re registered in. | `string` | `"Registered in {country}, {subRegion}"` | +| `dashboard_indirectTaxTooltipSupport` | `dashboard_indirect-tax-tooltip-support` | | `string` | `"To make changes to your indirect tax information, please contact our {supportLink}."` | +| `dashboard_invalidForm` | `dashboard_invalid-form` | Additional text displayed next to the tax form's status badge. | `string` | `"Make sure your information is correct and submit new form."` | +| `dashboard_invoiceColumnTitle` | `dashboard_invoice-column-title` | Part of the Invoice table displayed at the bottom of the page. | `string` | `"Invoice"` | +| `dashboard_invoiceDescription` | `dashboard_invoice-description` | | `string` | `"View and download your invoices to report your earnings and stay tax compliant."` | +| `dashboard_invoiceEmptyStateHeader` | `dashboard_invoice-empty-state-header` | | `string` | `"View your invoice details"` | +| `dashboard_invoiceEmptyStateText` | `dashboard_invoice-empty-state-text` | | `string` | `"Refer a friend to view the status of your invoices and rewards earned"` | +| `dashboard_invoiceHeader` | `dashboard_invoice-header` | | `string` | `"Invoices"` | +| `dashboard_invoiceMoreLabel` | `dashboard_invoice-more-label` | | `string` | `"Next"` | +| `dashboard_invoicePrevLabel` | `dashboard_invoice-prev-label` | | `string` | `"Prev"` | +| `dashboard_newFormButton` | `dashboard_new-form-button` | | `string` | `"Submit new form"` | +| `dashboard_noFormNeededSubtext` | `dashboard_no-form-needed-subtext` | No other statuses or badges will be displayed in the tax form section in this case. | `string` | `"Tax documents are only required if you are based in the US or joining the referral program of a US based brand."` | +| `dashboard_notRegisteredForTax` | `dashboard_not-registered-for-tax` | | `string` | `"Not registered for indirect tax. If you’ve previously registered with your tax authority, contact our {supportLink} to add your information to stay tax compliant."` | +| `dashboard_payoutFromImpact` | `dashboard_payout-from-impact` | Displayed under the payout details card. | `string` | `"Your balance may take up to 24 hours to update. Payouts will be sent from our referral program provider, impact.com."` | +| `dashboard_payoutHoldAlertDescription` | `dashboard_payout-hold-alert-description` | Part of the alert displayed at the top of the page when there’s been an issue preventing payouts. | `string` | `"Please contact our {supportLink} or check your inbox for an email from our referral program provider, impact.com."` | +| `dashboard_payoutHoldAlertHeader` | `dashboard_payout-hold-alert-header` | Part of the alert displayed at the top of the page when there’s been an issue preventing payouts. | `string` | `"Your payout is on hold"` | +| `dashboard_payoutMissingInformationText` | `dashboard_payout-missing-information-text` | Text displayed for existing publishers that do not have saved banking information. | `string` | `"Missing banking information, go to Impact.com to resolve."` | +| `dashboard_qstNumber` | `dashboard_qst-number` | Displayed to participants registered in Quebec, Canada. | `string` | `"QST number: {qstNumber}"` | +| `dashboard_replaceTaxFormModalBodyText` | `dashboard_replace-tax-form-modal-body-text` | | `string` | `"Submitting a new tax form will remove your existing form. Make sure to sign and complete your new tax form to prevent any issues with your next payout."` | +| `dashboard_replaceTaxFormModalHeader` | `dashboard_replace-tax-form-modal-header` | | `string` | `"Replace existing tax form"` | +| `dashboard_requiredTaxForm` | `dashboard_required-tax-form` | Additional text displayed next to the tax form's status badge | `string` | `"Your payouts are on hold until you submit a {taxFormType} tax form."` | +| `dashboard_statusBadgeText` | `dashboard_status-badge-text` | | `string` | `"{badgeText, select, payoutToday {Payout Today} nextPayout {Next Payout} }"` | +| `dashboard_statusTextActive` | `dashboard_status-text-active` | | `string` | `"Active"` | +| `dashboard_statusTextNotActive` | `dashboard_status-text-not-active` | | `string` | `"Invalid Tax Form"` | +| `dashboard_statusTextNotVerified` | `dashboard_status-text-not-verified` | Displayed when the participant submitted their form but it is awaiting review. | `string` | `"Not Verified"` | +| `dashboard_statusTextRequired` | `dashboard_status-text-required` | Displayed when the participant has not submitted their required tax form. | `string` | `"Required"` | +| `dashboard_subRegionTaxNumber` | `dashboard_sub-region-tax-number` | | `string` | `"Income tax number: {subRegionTaxNumber}"` | +| `dashboard_taxAlertHeaderNotActiveW8` | `dashboard_tax-alert-header-not-active-w-8` | Part of the alert displayed at the top of the page. | `string` | `"{documentType} tax form is invalid"` | +| `dashboard_taxAlertHeaderNotActiveW9` | `dashboard_tax-alert-header-not-active-w-9` | Part of the alert displayed at the top of the page. | `string` | `"Your W-9 tax form has personal information that doesn’t match your profile"` | +| `dashboard_taxAlertNotActiveMessageW8` | `dashboard_tax-alert-not-active-message-w-8` | Part of the alert displayed at the top of the page. | `string` | `"Your tax form may have expired or has personal information that doesn’t match your profile. Please submit a new {documentType} form."` | +| `dashboard_taxAlertNotActiveMessageW9` | `dashboard_tax-alert-not-active-message-w-9` | Part of the alert displayed at the top of the page. | `string` | `"Please resubmit a new {documentType} form."` | +| `dashboard_taxDocumentSectionHeader` | `dashboard_tax-document-section-header` | | `string` | `"Tax documents"` | +| `dashboard_taxDocumentSectionSubHeader` | `dashboard_tax-document-section-sub-header` | Displayed under the tax document section header. | `string` | `"{documentType} tax form"` | +| `dashboard_termsAndConditions` | `dashboard_terms-and-conditions` | | `string` | `"Terms and Conditions"` | +| `dashboard_thresholdPayoutText` | `dashboard_threshold-payout-text` | Display participants' payout preference on the payout information card, indicating the balance at which they want to get paid. | `string` | `"Next payout occurs when balance is {thresholdBalance}"` | +| `dashboard_verificationFailedInternalDescription` | `dashboard_verification-failed-internal-description` | | `string` | `"Identity verification has failed. Our team is reviewing the report and will contact you with further information. If you don't hear from us contact our {supportLink}."` | +| `dashboard_verificationFailedInternalHeader` | `dashboard_verification-failed-internal-header` | | `string` | `"Identity Verification Unsuccessful"` | +| `dashboard_verificationRequiredButtonText` | `dashboard_verification-required-button-text` | Part of the alert displayed at the top of the page when the user needs to verify their identity. | `string` | `"Start Verification"` | +| `dashboard_verificationRequiredDescription` | `dashboard_verification-required-description` | Part of the alert displayed at the top of the page when the user needs to verify their identity | `string` | `"Complete your verification to start receiving your cash rewards. It should only take a few minutes verify. If you run in to an issue verifying your identity contact our {supportLink}."` | +| `dashboard_verificationRequiredHeader` | `dashboard_verification-required-header` | Part of the alert displayed at the top of the page when the user needs to verify their identity. | `string` | `"Verify your identity"` | +| `dashboard_verificationRequiredInternalDescription` | `dashboard_verification-required-internal-description` | | `string` | `"Identity verification submission has been received. Our system is currently performing additional checks and analyzing the results. You will be updated shortly. If you don't hear from us contact our {supportLink}."` | +| `dashboard_verificationRequiredInternalHeader` | `dashboard_verification-required-internal-header` | | `string` | `"Identity Verification in Progress"` | +| `dashboard_verificationReviewInternalDescription` | `dashboard_verification-review-internal-description` | | `string` | `"Identity verification requires further review due to a potential error. Our team is reviewing the information and will update you shortly. If you don't hear from us contact our {supportLink}."` | +| `dashboard_verificationReviewInternalHeader` | `dashboard_verification-review-internal-header` | | `string` | `"Identity Verification Under Review"` | +| `dashboard_w9RequiredButtonText` | `dashboard_w-9-required-button-text` | | `string` | `"Submit W-9"` | +| `dashboard_w9RequiredDescription` | `dashboard_w-9-required-description` | | `string` | `"You have surpassed the $600 threshold requiring a W-9 form or have multiple accounts with impact.com. To remove the hold, please submit your W-9 form."` | +| `dashboard_w9RequiredHeader` | `dashboard_w-9-required-header` | | `string` | `"Your next payout is on hold"` | +| `demoData` | -- | | `{ step1_firstName?: string; step1_lastName?: string; step1_email?: string; step1_country?: string; step1_phoneNumber?: string; step1_address?: string; step1_city?: string; step1_state?: string; step1_province?: string; step1_region?: string; step1_postalCode?: string; step1_currency?: string; step1_currencyHelpText?: string; step1_allowBankingCollection?: string; step1_personalInformation?: string; step1_termsAndConditionsLabel?: string; step1_termsAndConditionsLink?: string; step1_searchForCurrencyText?: string; step2_indirectTax?: string; step2_indirectTaxDescription?: string; step2_indirectTaxDetails?: string; step2_otherRegion?: string; step2_otherRegionSubtext?: string; step2_notRegistered?: string; step2_notRegisteredSubtext?: string; step2_selectedRegion?: string; step2_indirectTaxNumber?: string; step2_province?: string; step2_indirectTaxNumberError?: string; step2_qstNumber?: string; step2_isRegisteredQST?: string; step2_isRegisteredSubRegionIncomeTax?: string; step2_subRegion?: string; step2_subRegionTaxNumberLabel?: string; step2_cannotChangeInfoAlert?: string; step3_taxForm?: string; step3_taxFormLabel?: string; step3_participantType?: string; step3_businessEntity?: string; step3_individualParticipant?: string; step3_taxFormDescription?: string; step3_taxFormDescriptionIndividualParticipant?: string; step3_taxFormDescriptionBusinessEntity?: string; step3_docusignExpired?: string; step3_docusignSessionWarning?: string; step3_docusignError?: string; step3_refreshButton?: string; step3_exitButton?: string; step3_modalTitle?: string; step3_modalDescription?: string; step3_modalButtonText?: string; step4_taxAndPayouts?: string; step4_directlyToBankAccount?: string; step4_toPayPalAccount?: string; step4_paymentScheduleBalanceThreshold?: string; step4_paymentScheduleFixedDay?: string; step4_paymentDaySelectLabel?: string; step4_paymentThresholdSelectLabel?: string; step4_paymentDayFirstOfMonthLabelText?: string; step4_paymentDayFifteenthOfMonthLabelText?: string; step4_paymentMethod?: string; step4_paymentSchedule?: string; step4_paymentMethodSubtext?: string; step4_payPalInputLabel?: string; step4_bankLocationLabel?: string; step4_beneficiaryAccountNameLabel?: string; step4_beneficiaryAccountNameDescription?: string; step4_bankAccountTypeLabel?: string; step4_checkingSelectItemLabel?: string; step4_savingsSelectItemLabel?: string; step4_bankAccountNumberLabel?: string; step4_ibanLabel?: string; step4_swiftCodeLabel?: string; step4_routingCodeLabel?: string; step4_bankNameLabel?: string; step4_classificationEntityLabel?: string; step4_businessSelectItemLabel?: string; step4_individualSelectItemLabel?: string; step4_foreignSelectItemLabel?: string; step4_classificationCPFLabel?: string; step4_patronymicNameLabel?: string; step4_voCodeLabel?: string; step4_agencyCodeLabel?: string; step4_branchCodeLabel?: string; step4_classificationLabel?: string; step4_taxPayerIdLabel?: string; step4_bankAddressLabel?: string; step4_bankCityLabel?: string; step4_bankStateLabel?: string; step4_bankPostalCodeLabel?: string; step4_eftWithdrawalLabel?: string; step4_fxWireProcessingFeeLabel?: string; step4_verifyEmailHeaderText?: string; step4_verifyEmailDescriptionText?: string; step4_modalTitle?: string; step4_modalDescription?: string; step4_modalButtonText?: string; dashboard_statusTextActive?: string; dashboard_statusTextNotActive?: string; dashboard_statusTextNotVerified?: string; dashboard_statusTextRequired?: string; dashboard_requiredTaxForm?: string; dashboard_badgeTextSubmittedOn?: string; dashboard_badgeTextSubmittedOnW8?: string; dashboard_badgeTextAwaitingReview?: string; dashboard_taxAlertHeaderNotActiveW9?: string; dashboard_taxAlertHeaderNotActiveW8?: string; dashboard_taxAlertNotActiveMessageW9?: string; dashboard_taxAlertNotActiveMessageW8?: string; dashboard_invalidForm?: string; dashboard_bankingInformationSectionHeader?: string; dashboard_taxDocumentSectionHeader?: string; dashboard_taxDocumentSectionSubHeader?: string; dashboard_noFormNeededSubtext?: string; dashboard_indirectTaxInfoSectionHeader?: string; dashboard_indirectTaxInfoCanada?: string; dashboard_indirectTaxInfoOtherCountry?: string; dashboard_indirectTaxInfoSpain?: string; dashboard_indirectTaxTooltipSupport?: string; dashboard_indirectTaxDetails?: string; dashboard_newFormButton?: string; dashboard_editPaymentInformationButton?: string; dashboard_notRegisteredForTax?: string; dashboard_qstNumber?: string; dashboard_subRegionTaxNumber?: string; dashboard_statusBadgeText?: string; dashboard_thresholdPayoutText?: string; dashboard_accountText?: string; dashboard_invoiceColumnTitle?: string; dashboard_dateColumnTitle?: string; dashboard_earningsColumnTitle?: string; dashboard_indirectTaxColumnTitle?: string; dashboard_payoutFromImpact?: string; dashboard_earningsAfterTaxColumnTitle?: string; dashboard_payoutHoldAlertHeader?: string; dashboard_payoutHoldAlertDescription?: string; dashboard_payoutMissingInformationText?: string; dashboard_invoiceDescription?: string; dashboard_invoicePrevLabel?: string; dashboard_invoiceMoreLabel?: string; dashboard_invoiceHeader?: string; dashboard_invoiceEmptyStateHeader?: string; dashboard_invoiceEmptyStateText?: string; dashboard_replaceTaxFormModalHeader?: string; dashboard_replaceTaxFormModalBodyText?: string; dashboard_verificationRequiredHeader?: string; dashboard_verificationRequiredDescription?: string; dashboard_verificationRequiredInternalHeader?: string; dashboard_verificationRequiredInternalDescription?: string; dashboard_verificationReviewInternalHeader?: string; dashboard_verificationReviewInternalDescription?: string; dashboard_verificationFailedInternalHeader?: string; dashboard_verificationFailedInternalDescription?: string; dashboard_verificationRequiredButtonText?: string; dashboard_w9RequiredHeader?: string; dashboard_w9RequiredDescription?: string; dashboard_accountReviewHeader?: string; dashboard_accountReviewDescription?: string; dashboard_termsAndConditions?: string; dashboard_w9RequiredButtonText?: string; formStep?: string; generalErrorTitle?: string; generalErrorDescription?: string; fieldRequiredError?: string; invalidCharacterError?: string; fieldInvalidError?: string; continueButton?: string; backButton?: string; cancelButton?: string; isPartnerAlertHeader?: string; isPartnerAlertDescription?: string; searchForCountryText?: string; loadingErrorAlertHeader?: string; loadingErrorAlertDescription?: string; taxAndPayoutsDescription?: string; supportLink?: string; termsAndConditions?: string; stateController?: string; demoData?: Partial>; disconnectedCallback?: () => void; getGeneralStepTextProps?: (prefix: string) => PickPrefix & { generalErrorTitle: string; generalErrorDescription: string; fieldRequiredError: string; invalidCharacterError: string; fieldInvalidError: string; continueButton: string; backButton: string; cancelButton: string; isPartnerAlertHeader: string; isPartnerAlertDescription: string; loadingErrorAlertHeader: string; loadingErrorAlertDescription: string; taxAndPayoutsDescription: string; searchForCountryText: string; formStep: string; supportLink: string; }; render?: () => any; }` | `undefined` | +| `fieldInvalidError` | `field-invalid-error` | Displayed under a field when it has an invalid entry. | `string` | `"{fieldName} is invalid"` | +| `fieldRequiredError` | `field-required-error` | Displayed under a field that is missing required information. | `string` | `"{fieldName} is required"` | +| `formStep` | `form-step` | | `string` | `"Step {step} of {count}"` | +| `generalErrorDescription` | `general-error-description` | Part of the alert displayed at the top of the page. | `string` | `"Please review your information and try again. If this problem continues, contact our {supportLink}."` | +| `generalErrorTitle` | `general-error-title` | Part of the alert displayed at the top of the page. | `string` | `"There was a problem submitting your information"` | +| `invalidCharacterError` | `invalid-character-error` | Displayed under a field that includes invalid characters (non-ASCII). | `string` | `"{fieldName} includes characters that aren't supported."` | +| `isPartnerAlertDescription` | `is-partner-alert-description` | Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com. | `string` | `"If you don’t recognize this referral program provider or believe this is a mistake, please contact our {supportLink} or sign up for this referral program with a different email."` | +| `isPartnerAlertHeader` | `is-partner-alert-header` | Part of the alert displayed at the top of the page if the participant is already a registered partner on impact.com. | `string` | `"An account with this email already exists with our referral program provider, impact.com"` | +| `loadingErrorAlertDescription` | `loading-error-alert-description` | Part of the alert displayed at the top of the page. | `string` | `"Please refresh the page and try again. If this problem continues, contact our {supportLink}."` | +| `loadingErrorAlertHeader` | `loading-error-alert-header` | Part of the alert displayed at the top of the page. | `string` | `"There was a problem loading your form"` | +| `searchForCountryText` | `search-for-country-text` | Placeholder text displayed in the country search dropdown | `string` | `"Search for country.."` | +| `stateController` | `state-controller` | | `string` | `"{}"` | +| `step1_address` | `step-1_address` | | `string` | `"Address"` | +| `step1_allowBankingCollection` | `step-1_allow-banking-collection` | Edit the property called terms and conditions text to change what's displayed for {termsAndConditionsLink}. | `string` | `"I have read the {termsAndConditionsLink} and allow impact.com to collect my tax and banking information"` | +| `step1_city` | `step-1_city` | | `string` | `"City"` | +| `step1_country` | `step-1_country` | | `string` | `"Country"` | +| `step1_currency` | `step-1_currency` | | `string` | `"Currency"` | +| `step1_currencyHelpText` | `step-1_currency-help-text` | | `string` | `"Choose your preferred payout currency"` | +| `step1_email` | `step-1_email` | | `string` | `"Email"` | +| `step1_firstName` | `step-1_first-name` | | `string` | `"First name"` | +| `step1_lastName` | `step-1_last-name` | | `string` | `"Last name"` | +| `step1_personalInformation` | `step-1_personal-information` | | `string` | `"Personal Information"` | +| `step1_phoneNumber` | `step-1_phone-number` | | `string` | `"Phone number"` | +| `step1_postalCode` | `step-1_postal-code` | | `string` | `"Postal code"` | +| `step1_province` | `step-1_province` | | `string` | `"Province"` | +| `step1_region` | `step-1_region` | | `string` | `"Region"` | +| `step1_searchForCurrencyText` | `step-1_search-for-currency-text` | Placeholder text displayed in the currency search dropdown | `string` | `"Search for currency.."` | +| `step1_state` | `step-1_state` | | `string` | `"State"` | +| `step1_termsAndConditionsLabel` | `step-1_terms-and-conditions-label` | The link text that appears in the terms and conditions checkbox | `string` | `"terms and conditions"` | +| `step1_termsAndConditionsLink` | `step-1_terms-and-conditions-link` | The link that appears in the terms and conditions checkbox | `string` | `"https://terms.advocate.impact.com/PayoutTermsAndConditions.html"` | +| `step2_cannotChangeInfoAlert` | `step-2_cannot-change-info-alert` | Communicate that after this step, only Support can change personal and indirect tax information. | `string` | `"Changes to your personal and indirect tax information can only be made through our {supportLink} after you complete this step. Make sure these are correct before continuing."` | +| `step2_indirectTax` | `step-2_indirect-tax` | | `string` | `"Indirect Tax"` | +| `step2_indirectTaxDescription` | `step-2_indirect-tax-description` | Displayed under the title of this step. | `string` | `"Indirect taxes (e.g. VAT, HST, GST) are transaction based taxes often applied to goods and services. Service providers are typically required to register with their tax authority and collect these taxes on behalf governments."` | +| `step2_indirectTaxDetails` | `step-2_indirect-tax-details` | Displayed with indirect tax registration options. | `string` | `"Indirect tax details"` | +| `step2_indirectTaxNumber` | `step-2_indirect-tax-number` | | `string` | `"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}}"` | +| `step2_indirectTaxNumberError` | `step-2_indirect-tax-number-error` | | `string` | `"{taxType, select, GST {GST number} HST {HST number} VAT {VAT number} CT {CT number} SST {SST number} GENERAL {Indirect tax number}} is required"` | +| `step2_isRegisteredQST` | `step-2_is-registered-q-s-t` | Displayed to participants registered for indirect tax in Quebec, Canada. | `string` | `"I am registered for QST Tax"` | +| `step2_isRegisteredSubRegionIncomeTax` | `step-2_is-registered-sub-region-income-tax` | Displayed to participants registered for indirect tax in Spain. | `string` | `"I am an individual registered for Income Tax purposes in Spain, and withholding tax will apply to any payments made to me."` | +| `step2_notRegistered` | `step-2_not-registered` | | `string` | `"Not registered for indirect tax"` | +| `step2_notRegisteredSubtext` | `step-2_not-registered-subtext` | Participants based in the US are considered not registered. | `string` | `"If you’ve never set up indirect tax with your tax authority, then you’re likely not considered registered."` | +| `step2_otherRegion` | `step-2_other-region` | | `string` | `"Registered for indirect tax"` | +| `step2_otherRegionSubtext` | `step-2_other-region-subtext` | Selecting this option will display fields to enter indirect tax details. | `string` | `"If you’ve registered with your tax authority, add your information to stay tax compliant."` | +| `step2_province` | `step-2_province` | | `string` | `"Province"` | +| `step2_qstNumber` | `step-2_qst-number` | Displayed to participants registered for QST. | `string` | `"QST number"` | +| `step2_selectedRegion` | `step-2_selected-region` | | `string` | `"Country / region of indirect tax"` | +| `step2_subRegion` | `step-2_sub-region` | Displayed to participants registered in Spain. | `string` | `"Sub-region"` | +| `step2_subRegionTaxNumberLabel` | `step-2_sub-region-tax-number-label` | | `string` | `"Income Tax Number"` | +| `step3_businessEntity` | `step-3_business-entity` | An option for the participant type field. Used to determine which W-8 form is required. | `string` | `"I represent a business"` | +| `step3_docusignError` | `step-3_docusign-error` | This appears inside the Docusign frame. | `string` | `"There was a problem displaying this form. Please refresh the page. If this problem continues, contact our {supportLink}."` | +| `step3_docusignExpired` | `step-3_docusign-expired` | This appears inside the Docusign frame. | `string` | `"For your security and privacy, we automatically end your session after 20 minutes of inactivity. Please refresh and re-enter your tax information to continue."` | +| `step3_docusignSessionWarning` | `step-3_docusign-session-warning` | Remind participants their session will time out after 20 minutes of inactivity. | `string` | `"For your security, we automatically end your session when you have not interacted with the form after 20 minutes."` | +| `step3_exitButton` | `step-3_exit-button` | | `string` | `"Exit"` | +| `step3_individualParticipant` | `step-3_individual-participant` | An option for the participant type field. Used to determine which W-8 form is required. | `string` | `"I am an individual participant"` | +| `step3_modalButtonText` | `step-3_modal-button-text` | | `string` | `"I understand"` | +| `step3_modalDescription` | `step-3_modal-description` | | `string` | `"Remember the name you enter in your tax form. It must exactly match the bank account holder name configured in the next step. {br}{br}Otherwise you will have to resubmit your form again and there will be delays receiving your payout."` | +| `step3_modalTitle` | `step-3_modal-title` | | `string` | `"Important Note"` | +| `step3_participantType` | `step-3_participant-type` | | `string` | `"Participant type"` | +| `step3_refreshButton` | `step-3_refresh-button` | | `string` | `"Refresh Page"` | +| `step3_taxForm` | `step-3_tax-form` | | `string` | `"Tax form"` | +| `step3_taxFormDescription` | `step-3_tax-form-description` | Displayed at the top of the page to participants based in the US. | `string` | `"Participants based in the US need to submit a {documentType} form."` | +| `step3_taxFormDescriptionBusinessEntity` | `step-3_tax-form-description-business-entity` | Displayed at the top of the page to participants representing a business. | `string` | `"Participants residing outside of the US working with a US Brand need to submit a {documentType} form."` | +| `step3_taxFormDescriptionIndividualParticipant` | `step-3_tax-form-description-individual-participant` | Displayed at the top of the page to individuals joining a US program who reside outside the country. | `string` | `"Participants residing outside of the US, joining the referral program of a US-based company, need to submit a {documentType} form."` | +| `step3_taxFormLabel` | `step-3_tax-form-label` | Display the type of tax form that the participant must submit. | `string` | `"{documentType} Tax Form"` | +| `step4_agencyCodeLabel` | `step-4_agency-code-label` | | `string` | `"Agency code"` | +| `step4_bankAccountNumberLabel` | `step-4_bank-account-number-label` | | `string` | `"Bank account number"` | +| `step4_bankAccountTypeLabel` | `step-4_bank-account-type-label` | | `string` | `"Bank account type"` | +| `step4_bankAddressLabel` | `step-4_bank-address-label` | | `string` | `"Bank address"` | +| `step4_bankCityLabel` | `step-4_bank-city-label` | | `string` | `"Bank city"` | +| `step4_bankLocationLabel` | `step-4_bank-location-label` | | `string` | `"Bank country location"` | +| `step4_bankNameLabel` | `step-4_bank-name-label` | | `string` | `"Bank name"` | +| `step4_bankPostalCodeLabel` | `step-4_bank-postal-code-label` | | `string` | `"Bank postal code"` | +| `step4_bankStateLabel` | `step-4_bank-state-label` | | `string` | `"Bank Province / State"` | +| `step4_beneficiaryAccountNameDescription` | `step-4_beneficiary-account-name-description` | | `string` | `"The beneficiary name of your bank account. Ensure this matches the name on your tax form."` | +| `step4_beneficiaryAccountNameLabel` | `step-4_beneficiary-account-name-label` | | `string` | `"Account holder name"` | +| `step4_branchCodeLabel` | `step-4_branch-code-label` | | `string` | `"Branch code"` | +| `step4_businessSelectItemLabel` | `step-4_business-select-item-label` | One of three options listed for the classification field | `string` | `"Business"` | +| `step4_checkingSelectItemLabel` | `step-4_checking-select-item-label` | | `string` | `"Checking"` | +| `step4_classificationCPFLabel` | `step-4_classification-c-p-f-label` | | `string` | `"Classification CPF"` | +| `step4_classificationEntityLabel` | `step-4_classification-entity-label` | | `string` | `"Classification entity"` | +| `step4_classificationLabel` | `step-4_classification-label` | Label text for the classification input field | `string` | `"Classification"` | +| `step4_directlyToBankAccount` | `step-4_directly-to-bank-account` | | `string` | `"Directly to my bank account"` | +| `step4_eftWithdrawalLabel` | `step-4_eft-withdrawal-label` | Default payment method to the participants’ bank account. | `string` | `"EFT Withdrawal (free)"` | +| `step4_foreignSelectItemLabel` | `step-4_foreign-select-item-label` | One of three options listed for the classification field | `string` | `"Foreign"` | +| `step4_fxWireProcessingFeeLabel` | `step-4_fx-wire-processing-fee-label` | | `string` | `"FX Wire (Processing Fee {currency}{defaultFxFee}.00)"` | +| `step4_ibanLabel` | `step-4_iban-label` | | `string` | `"IBAN"` | +| `step4_individualSelectItemLabel` | `step-4_individual-select-item-label` | One of three options listed for the classification field | `string` | `"Individual"` | +| `step4_modalButtonText` | `step-4_modal-button-text` | | `string` | `"I understand, update my information"` | +| `step4_modalDescription` | `step-4_modal-description` | | `string` | `"Updating payment information places your account and payouts on hold for up to 48 hours while we verify your change. Payments scheduled during the hold period are skipped."` | +| `step4_modalTitle` | `step-4_modal-title` | | `string` | `"Important Note"` | +| `step4_patronymicNameLabel` | `step-4_patronymic-name-label` | | `string` | `"Patronymic name"` | +| `step4_payPalInputLabel` | `step-4_pay-pal-input-label` | Displayed to participants who choose PayPal as their payout method | `string` | `"PayPal email"` | +| `step4_paymentDayFifteenthOfMonthLabelText` | `step-4_payment-day-fifteenth-of-month-label-text` | One of two payment day options | `string` | `"15th of the month"` | +| `step4_paymentDayFirstOfMonthLabelText` | `step-4_payment-day-first-of-month-label-text` | One of two payment day options | `string` | `"1st of the month"` | +| `step4_paymentDaySelectLabel` | `step-4_payment-day-select-label` | Let the participant choose what day of the month they’ll get paid | `string` | `"Payment Day"` | +| `step4_paymentMethod` | `step-4_payment-method` | | `string` | `"Payment method"` | +| `step4_paymentMethodSubtext` | `step-4_payment-method-subtext` | | `string` | `"Payouts will be sent from our referral program provider, impact.com."` | +| `step4_paymentSchedule` | `step-4_payment-schedule` | | `string` | `"Payment schedule"` | +| `step4_paymentScheduleBalanceThreshold` | `step-4_payment-schedule-balance-threshold` | | `string` | `"Pay me when my balance reaches a threshold"` | +| `step4_paymentScheduleFixedDay` | `step-4_payment-schedule-fixed-day` | | `string` | `"Pay me on a fixed day of the month"` | +| `step4_paymentThresholdSelectLabel` | `step-4_payment-threshold-select-label` | Participant use this field to select the balance at which they want to be paid | `string` | `"Payment threshold"` | +| `step4_routingCodeLabel` | `step-4_routing-code-label` | | `string` | `"{bankCountry, select, AU {BSB number} CA {Routing number} CZ {Bank code} HK {Clearing code} SG {Clearing code} US {ABA routing number} NZ {BSB number} ZA {Bank/Branch number} IN {IFSC} CNY {CNAPS} other {Routing code} }"` | +| `step4_savingsSelectItemLabel` | `step-4_savings-select-item-label` | Label text for the savings account type select item | `string` | `"Savings"` | +| `step4_swiftCodeLabel` | `step-4_swift-code-label` | | `string` | `"SWIFT code"` | +| `step4_taxAndPayouts` | `step-4_tax-and-payouts` | | `string` | `"Payouts"` | +| `step4_taxPayerIdLabel` | `step-4_tax-payer-id-label` | | `string` | `"Beneficiary INN"` | +| `step4_toPayPalAccount` | `step-4_to-pay-pal-account` | | `string` | `"PayPal (2% processing fee capped to {feeCap})"` | +| `step4_verifyEmailDescriptionText` | `step-4_verify-email-description-text` | | `string` | `"Verify your email to update your payment settings. Enter the code sent to {email} from our referral provider, impact.com."` | +| `step4_verifyEmailHeaderText` | `step-4_verify-email-header-text` | | `string` | `"Verify your email"` | +| `step4_voCodeLabel` | `step-4_vo-code-label` | | `string` | `"VO code"` | +| `supportLink` | `support-link` | Link text for contacting support team | `string` | `"support team"` | +| `taxAndPayoutsDescription` | `tax-and-payouts-description` | Displayed at the top of the page on all set up steps. | `string` | `"Submit your tax documents and add your banking information to receive your rewards."` | +| `termsAndConditions` | `terms-and-conditions` | Link text for Terms and Conditions | `string` | `"Terms and Conditions"` | ## Dependencies -### Used by - - - [sqm-stencilbook](../../sqm-stencilbook) - - [sqm-user-info-form](../sqm-user-info-form) - ### Depends on - [sqm-user-info-form](../sqm-user-info-form) @@ -201,6 +197,7 @@ - [sqm-docusign-form](../sqm-docusign-form) - [sqm-banking-info-form](../sqm-banking-info-form) - [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard) +- [sqm-form-message](../../sqm-form-message) ### Graph ```mermaid @@ -210,10 +207,15 @@ graph TD; sqm-tax-and-cash --> sqm-docusign-form sqm-tax-and-cash --> sqm-banking-info-form sqm-tax-and-cash --> sqm-tax-and-cash-dashboard - sqm-user-info-form --> sqm-tax-and-cash + sqm-tax-and-cash --> sqm-form-message + sqm-user-info-form --> sqm-form-message + sqm-indirect-tax-form --> sqm-form-message + sqm-docusign-form --> sqm-form-message sqm-banking-info-form --> sqm-code-verification + sqm-banking-info-form --> sqm-form-message sqm-code-verification --> sqm-form-message sqm-tax-and-cash-dashboard --> sqm-payout-details-card + sqm-tax-and-cash-dashboard --> sqm-form-message sqm-tax-and-cash-dashboard --> sqm-invoice-table sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column @@ -227,7 +229,6 @@ graph TD; sqm-invoice-table-download-column --> sqm-invoice-table-download-cell sqm-invoice-table-date-column --> sqm-invoice-table-date-cell sqm-invoice-table-data-column --> sqm-invoice-table-data-cell - sqm-stencilbook --> sqm-tax-and-cash style sqm-tax-and-cash fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx index 8f3c0aee4c..25e0780781 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/sqm-tax-and-cash.tsx @@ -3,10 +3,11 @@ import { withHooks } from "@saasquatch/stencil-hooks"; import { Component, Prop, h } from "@stencil/core"; import deepmerge from "deepmerge"; import { DemoData } from "../../../global/demo"; +import { parseStates } from "../../../utils/parseStates"; import { getProps } from "../../../utils/utils"; import { ErrorView } from "./ErrorView"; import LoadingView from "./LoadingView"; -import { TAX_CONTEXT_NAMESPACE } from "./data"; +import { TAX_CONTEXT_NAMESPACE } from "../data"; import { extractProps } from "./extractProps"; import { UseTaxAndCashResultType, useTaxAndCash } from "./useTaxAndCash"; import { intl } from "../../../global/global"; @@ -14,6 +15,7 @@ import { intl } from "../../../global/global"; /** * @uiName Tax and Cash * @exampleGroup Tax and Cash + * @validParents ["sqm-portal-container","div","sqm-hero","sqm-instant-access-registration","sqb-program-section","sqb-conditional-section", "template"] * @example Tax and Cash Multi Step Form - */ @Component({ @@ -1202,9 +1204,18 @@ export class TaxAndCashMonolith { /** * * @undocumented - * @uiType object + * @componentState { "title": "Step 1: Personal information", "props": { "step": "/1" }, "dependencies": ["sqm-user-info-form"], "uiGroup": "Step 1 Properties" } + * @componentState { "title": "Step 2: Indirect tax", "props": { "step": "/2" }, "dependencies": ["sqm-indirect-tax-form"], "uiGroup": "Step 2 Properties" } + * @componentState { "title": "Step 3: Tax form", "props": { "step": "/3" }, "dependencies": ["sqm-docusign-form"], "uiGroup": "Step 3 Properties" } + * @componentState { "title": "Step 4: Payment method", "props": { "step": "/4" }, "dependencies": ["sqm-banking-info-form"], "uiGroup": "Step 4 Properties" } + * @componentState { "title": "Dashboard", "props": { "step": "/dashboard" }, "dependencies": ["sqm-tax-and-cash-dashboard"], "uiGroup": "Dashboard Properties" } */ - @Prop() demoData?: DemoData; + @Prop() stateController: string = "{}"; + + /** + * @undocumented + */ + @Prop() demoData?: DemoData; constructor() { withHooks(this); @@ -1285,6 +1296,9 @@ export class TaxAndCashMonolith { return ( ); case "/error": @@ -1321,12 +1335,21 @@ function useDemoTaxAndCash(props: TaxAndCashMonolith) { initialValue: "/1", }); + const states = parseStates(props.stateController); + const formatted = Object.keys(states).reduce( + (prev, key) => + key === "sqm-tax-and-cash" + ? { ...prev, ...states[key] } + : { ...prev, [`${key}_stateController`]: states[key] }, + {} + ); + return deepmerge( { step, setStep, }, - props.demoData || {}, + props.demoData || formatted || {}, { arrayMerge: (_, a) => a } ); } diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.tsx index 9b939497bf..2d3cd65de2 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-and-cash/useTaxAndCash.tsx @@ -31,7 +31,7 @@ import { USER_QUERY_NAMESPACE, UserFormContext, UserQuery, -} from "./data"; +} from "../data"; function getCurrentStep(user: UserQuery["user"]) { if (!user.impactConnection?.connected || !user.impactConnection?.publisher) { diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-tax-form.feature b/packages/mint-components/src/components/tax-and-cash/sqm-tax-form.feature index 9470952be2..cecfac2a35 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-tax-form.feature +++ b/packages/mint-components/src/components/tax-and-cash/sqm-tax-form.feature @@ -235,3 +235,26 @@ Feature: Tax Form Flow And the request for the user returns with errors Then the form / dashboard is not shown And an error banner is shown + + @motivating + Scenario Outline: sqm-tax-and-cash editor states + Given html loaded in a raisins editor + And the html includes "" + When "sqm-tax-and-cash" is selected in the editor + Then a state dropdown appears with the following states + | state | + | Step 1 | + | Step 2 | + | Step 3 | + | Step 4 | + | Dashboard | + When is selected + Then "sqm-tax-and-cash" displays the + + Examples: + | state | UI | + | Step 1 | user information form | + | Step 2 | indirect tax form | + | Step 3 | complyexchange iframe | + | Step 4 | banking/withdrawal information form | + | Dashboard | tax dashboard | \ No newline at end of file diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md index 84b9f1657b..3af1d2293a 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/readme.md @@ -50,40 +50,17 @@ - [sqm-stencilbook](../../sqm-stencilbook) - [sqm-tax-and-cash](../sqm-tax-and-cash) - - [sqm-user-info-form](.) ### Depends on -- [sqm-payout-details-card](../sqm-payout-details-card) -- [sqm-user-info-form](.) -- [sqm-indirect-tax-form](../sqm-indirect-tax-form) -- [sqm-docusign-form](../sqm-docusign-form) -- [sqm-banking-info-form](../sqm-banking-info-form) -- [sqm-tax-and-cash-dashboard](../sqm-tax-and-cash-dashboard) -- [sqm-tax-and-cash](../sqm-tax-and-cash) +- [sqm-form-message](../../sqm-form-message) ### Graph ```mermaid graph TD; - sqm-user-info-form --> sqm-user-info-form - sqm-banking-info-form --> sqm-code-verification - sqm-code-verification --> sqm-form-message - sqm-tax-and-cash-dashboard --> sqm-payout-details-card - sqm-tax-and-cash-dashboard --> sqm-invoice-table - sqm-tax-and-cash-dashboard --> sqm-invoice-table-download-column - sqm-tax-and-cash-dashboard --> sqm-invoice-table-date-column - sqm-tax-and-cash-dashboard --> sqm-invoice-table-data-column - sqm-invoice-table --> sqm-empty - sqm-invoice-table --> sqm-table-row - sqm-invoice-table --> sqm-table-cell - sqm-empty --> sqm-portal-container - sqm-empty --> sqm-titled-section - sqm-empty --> sqm-text - sqm-invoice-table-download-column --> sqm-invoice-table-download-cell - sqm-invoice-table-date-column --> sqm-invoice-table-date-cell - sqm-invoice-table-data-column --> sqm-invoice-table-data-cell - sqm-tax-and-cash --> sqm-user-info-form + sqm-user-info-form --> sqm-form-message sqm-stencilbook --> sqm-user-info-form + sqm-tax-and-cash --> sqm-user-info-form style sqm-user-info-form fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.tsx index dfb281f473..405dafa71b 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/DocusignExpiredView.tsx @@ -17,7 +17,7 @@ const style = { gap: "10px", margin: "auto", textAlign: "center", - border: "1px solid var(--sl-color-gray-200)", + border: "var(--sqm-border-thickness) solid var(--sqm-border-color)", }, }; diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx index aa5ccdb588..5fca562096 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/small-views/IndirectTaxDetailsView.tsx @@ -2,7 +2,7 @@ import { h } from "@stencil/core"; import { intl } from "../../../../global/global"; import { createStyleSheet } from "../../../../styling/JSS"; import { vatLabels } from "../../countries"; -import { TaxCountry } from "../../sqm-tax-and-cash/data"; +import { TaxCountry } from "../../data"; import { INDIRECT_TAX_PROVINCES } from "../../subregions"; import { formatErrorMessage } from "../../utils"; @@ -81,7 +81,7 @@ const style = { gap: "16px", }, HR: { - border: "1px solid #E0E0E0", + border: "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", margin: "10px 0", }, Input: { maxWidth: "500px" }, @@ -96,12 +96,13 @@ const style = { ErrorInput: { maxWidth: "500px", "&::part(base)": { - border: "1px solid var(--sl-color-danger-500)", + border: + "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)", borderRadius: "var(--sl-input-border-radius-medium)", }, "&::part(help-text)": { - color: "var(--sl-color-danger-500)", + color: "var(--sqm-danger-color-text)", }, }, }; @@ -118,6 +119,20 @@ const vanillaStyle = ` padding: 0; box-sizing: border-box; } + sl-menu-item::part(base) { + color: var(--sqm-input-color); + } + + sl-menu-item::part(base):hover { + background-color: var(--sqm-input-border-color-hover); + } + sl-checkbox[checked]::part(control){ + background-color: var(--sqm-input-border-color-focus); + } + + sl-checkbox[checked]::part(checked-icon){ + color: var(--sqm-input-background); + } `; export type TaxType = diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx index ddd15fb31e..14508a7f8a 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form-view.tsx @@ -1,10 +1,11 @@ import { h } from "@stencil/core"; import { intl } from "../../../global/global"; import { createStyleSheet } from "../../../styling/JSS"; -import { GeneralLoadingView } from "../TaxForm.stories"; -import { FORM_STEPS } from "../sqm-tax-and-cash/data"; -import { formatErrorMessage, validateBillingField } from "../utils"; +// import { GeneralLoadingView } from "../TaxForm.stories"; +import { FORM_STEPS } from "../data"; import { PHONE_EXTENSIONS } from "../phoneExtensions"; +import LoadingView from "../sqm-tax-and-cash/LoadingView"; +import { formatErrorMessage, validateBillingField } from "../utils"; export interface UserInfoFormViewProps { states: { @@ -124,16 +125,17 @@ const style = { FormWrapper: {}, ErrorInput: { "&::part(base)": { - border: "1px solid var(--sl-color-danger-500)", + border: + "var(--sqm-border-thickness, 1px) solid var(--sqm-danger-color-border)", borderRadius: "var(--sl-input-border-radius-medium)", }, "&::part(help-text)": { - color: "var(--sl-color-danger-500)", + color: "var(--sqm-danger-color-text)", }, }, ErrorText: { - color: "var(--sl-color-danger-500)", + color: "var(--sqm-danger-color-text)", marginTop: "10px", }, TextContainer: { @@ -165,9 +167,6 @@ const style = { justifyContent: "flex-start", flexDirection: "column", }, - DescriptionText: { - color: "var(--sl-color-neutral-500)", - }, BoldText: { fontWeight: "bold", @@ -177,29 +176,9 @@ const style = { borderRadius: "50%", }, }, - AlertContainer: { - "&::part(base)": { - backgroundColor: "var(--sl-color-red-100)", - borderTop: "none", - padding: "0 16px", - }, - "& sl-icon::part(base)": { - color: "var(--sl-color-danger-500)", - }, - }, - PartnerAlertContainer: { - "&::part(base)": { - backgroundColor: "var(--sl-color-sky-100)", - borderTop: "none", - padding: "0 16px", - }, - "& sl-icon::part(base)": { - color: "var(--sl-color-blue-500)", - }, - }, PageDescriptionText: { - color: "var(--sl-color-neutral-500)", + color: "var(--sqm-text-subdued)", fontSize: "var(--sl-font-size-medium)", }, @@ -209,7 +188,7 @@ const style = { gap: "4px", "& p": { fontSize: "var(--sl-font-size-small)", - color: "var(--sl-input-label-color)", + color: "var(--sqm-input-label-color)", fontWeight: "var(--sl-font-weight-semibold)", }, }, @@ -238,11 +217,15 @@ const vanillaStyle = ` padding: 0; box-sizing: border-box; } + a { + color: var(--sqm-text); + color: inherit !important; + text-decoration: underline; + } p { line-height: 18px; - color: var(--sl-color-gray-800); - font-size: var(--sl-font-size-small); + font-size: var(--sl-font-size-small); } sl-radio-group::part(base) { @@ -253,7 +236,159 @@ const vanillaStyle = ` sl-select#phoneNumberCountryCode::part(menu) { min-width: 250px; } - `; + + sl-button[type="primary"]::part(base){ + background-color: var(--sqm-primary-button-background); + color: var(--sqm-primary-button-color); + border-color: var(--sqm-primary-button-color-border); + border-radius: var(--sqm-primary-button-radius); + } + + sl-button[type="primary"]::part(base):hover{ + background-color: var(--sqm-primary-button-background-hover); + } + + sl-button[type="primary"]::part(base):focus{ + box-shadow: none; + } + + sl-button[type="secondary"]::part(base){ + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); + } + + sl-button[type="secondary"]::part(base):hover{ + background-color: var(--sqm-secondary-button-background-hover); + } + + + +*::part(primarybutton-base){ + background-color: var(--sqm-primary-button-background); + color: var(--sqm-primary-button-color); + border-color: var(--sqm-primary-button-color-border); + border-radius: var(--sqm-primary-button-radius); +} + +*::part(primarybutton-base):hover{ + background-color: var(--sqm-primary-button-background-hover); +} + +*::part(primarybutton-base):focus{ + box-shadow: none; +} + +*::part(secondarybutton-base){ + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); +} + +*::part(secondarybutton-base):hover{ + background-color: var(--sqm-secondary-button-background-hover); +} + +*::part(secondarybutton-base){ + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); + width: max-content; + display: flex; + margin: auto; +} + +*::part(secondarybutton-base):hover{ + background: var(--sqm-secondary-button-background-hover); +} + + sl-input::part(label), + sl-select::part(label), + sl-textarea::part(label){ + font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small)); + font-weight: var(--sl-font-weight-semibold); + color: var(--sqm-input-label-color, var(--sqm-text), black); + } + + /* Corrected: Target sl-input, sl-select, sl-textarea base elements */ + sl-input::part(base), + sl-dropdown::part(base), + sl-textarea::part(base){ + background-color: var(--sqm-input-background, #fff); + border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem); + color: var(--sqm-input-color, white); + border-width: var(--sqm-border-thickness, 1px); + border-style: solid; + border-color: var(--sqm-input-border-color, #ccc); + } + + + sl-select::part(menu) { + background: var(--sqm-input-background, inherit); + color: var(--sqm-input-color, inherit); + border:none; + } + + sl-menu-item::part(base) { + color: var(--sqm-input-color); + } + + sl-menu-item::part(base):hover { + background-color: var(--sqm-input-border-color-hover); + } + + sl-select::part(panel) { + border-radius: var(--sqm-border-radius-normal); + } + + sl-select::part(help-text) { + color: var(--sqm-text-subdued, var(--sl-input-help-text-color, #6c757d)); + } + + sl-input::part(base):focus, + sl-select::part(base):focus, /* Corrected part name for sl-select */ + sl-textarea::part(base):focus { /* Corrected part name for sl-textarea */ + border: var(--sqm-input-focus-border, 1px solid var(--sl-input-border-color-focus, #007bff)); /* Added fallback for --sl-input-border-color-focus */ + } + + sl-input[disabled]::part(base), + sl-select[disabled]::part(base), + sl-textarea[disabled]::part(base){ + background: var(--sqm-input-disabled-background, #f5f5f5); + border-color: var(--sl-input-border-color-disabled, #e0e0e0); /* Example disabled border color */ + } + + + sl-input::part(input):-webkit-autofill { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; + } + + sl-input::part(input):-webkit-autofill:hover { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; + } + + sl-input::part(input):-webkit-autofill:focus { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; + } + + sl-checkbox::part(label){ + color: var(--sqm-text); + } + + sl-checkbox[checked]::part(control){ + background-color: var(--sqm-input-border-color-focus); + } + + sl-checkbox[checked]::part(checked-icon){ + color: var(--sqm-input-background); + } +`; export const UserInfoFormView = (props: UserInfoFormViewProps) => { const { @@ -306,39 +441,35 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => { {styleString} {vanillaStyle} + {states.loadingError && (
- - - {text.error.loadingErrorAlertHeader} -
- {intl.formatMessage( - { - id: "loadingErrorAlertDescription", - defaultMessage: text.error.loadingErrorAlertDescription, - }, - { - supportLink: ( - - {text.supportLink} - - ), - } - )} - -
+ +

{text.error.loadingErrorAlertHeader}

+

+ {intl.formatMessage( + { + id: "loadingErrorAlertDescription", + defaultMessage: text.error.loadingErrorAlertDescription, + }, + { + supportLink: ( + + {text.supportLink} + + ), + } + )} +

+
)} + {states.loading ? ( - + ) : (
@@ -360,66 +491,59 @@ export const UserInfoFormView = (props: UserInfoFormViewProps) => {

+ {formState.errors?.general && ( - - - {text.error.generalTitle} -
- {intl.formatMessage( - { - id: "generalDescription", - defaultMessage: text.error.generalDescription, - }, - { - supportLink: ( - - {text.supportLink} - - ), - } - )} - + +

{text.error.generalTitle}

+

+ {intl.formatMessage( + { + id: "generalDescription", + defaultMessage: text.error.generalDescription, + }, + { + supportLink: ( + + {text.supportLink} + + ), + } + )} +

+ )} + {(states.isPartner || states.isUser) && ( - - - {text.isPartnerAlertHeader} -
- {intl.formatMessage( - { - id: "isPartnerAlertDescription", - defaultMessage: text.isPartnerAlertDescription, - }, - { - supportLink: ( - - {text.supportLink} - - ), - } - )} - + +

{text.isPartnerAlertHeader}

+

+ {intl.formatMessage( + { + id: "isPartnerAlertDescription", + defaultMessage: text.isPartnerAlertDescription, + }, + { + supportLink: ( + + {text.supportLink} + + ), + } + )} +

+ )}
{
{ e.target.value = e.target.checked; diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.tsx index 95358c2e1e..1b26e7e765 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/sqm-user-info-form.tsx @@ -1,12 +1,12 @@ import { isDemo, useSetParent } from "@saasquatch/component-boilerplate"; import { withHooks } from "@saasquatch/stencil-hooks"; -import { Component, Host, Prop, State, h } from "@stencil/core"; +import { Component, h, Prop, State } from "@stencil/core"; import deepmerge from "deepmerge"; import { DemoData } from "../../../global/demo"; import { getProps } from "../../../utils/utils"; -import { TAX_CONTEXT_NAMESPACE } from "../sqm-tax-and-cash/data"; +import { TAX_CONTEXT_NAMESPACE } from "../data"; import { UserInfoFormView } from "./sqm-user-info-form-view"; -import { UseUserInfoFormResult, useUserInfoForm } from "./useUserInfoForm"; +import { useUserInfoForm, UseUserInfoFormResult } from "./useUserInfoForm"; /** * @uiName User Information Form @@ -213,19 +213,17 @@ export class TaxForm { const props = isDemo() ? useDemoUserInfoForm(this) : useUserInfoForm(this); return ( - - - + ); } } @@ -233,10 +231,11 @@ export class TaxForm { function useDemoUserInfoForm(props: TaxForm): UseUserInfoFormResult { const setStep = useSetParent(TAX_CONTEXT_NAMESPACE); + // @ts-ignore return deepmerge( { setStep, - onSubmit: () => { + onSubmit: async () => { setStep("/2"); }, onRadioClick: () => {}, diff --git a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.tsx b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.tsx index 98ca925cb5..c5b0085dc1 100644 --- a/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.tsx +++ b/packages/mint-components/src/components/tax-and-cash/sqm-user-info-form/useUserInfoForm.tsx @@ -1,3 +1,8 @@ +import { + useParent, + useParentQueryValue, + useParentValue, +} from "@saasquatch/component-boilerplate"; import { useEffect, useMemo, @@ -17,15 +22,10 @@ import { USER_QUERY_NAMESPACE, UserFormContext, UserQuery, -} from "../sqm-tax-and-cash/data"; +} from "../data"; +import { ADDRESS_REGIONS, AddressRegions } from "../subregions"; import { objectIsFull } from "../utils"; import { TaxForm } from "./sqm-user-info-form"; -import { - useParent, - useParentQueryValue, - useParentValue, -} from "@saasquatch/component-boilerplate"; -import { AddressRegions, ADDRESS_REGIONS } from "../subregions"; // returns either error message if invalid or undefined if valid export type ValidationErrorFunction = (input: { diff --git a/packages/mint-components/src/components/tax-and-cash/utils.ts b/packages/mint-components/src/components/tax-and-cash/utils.ts index 59635296e8..6064fcf003 100644 --- a/packages/mint-components/src/components/tax-and-cash/utils.ts +++ b/packages/mint-components/src/components/tax-and-cash/utils.ts @@ -1,5 +1,5 @@ import { intl } from "../../global/global"; -import { TaxDocumentType } from "./sqm-tax-and-cash/data"; +import { TaxDocumentType } from "./data"; export function validTaxDocument(requiredType: TaxDocumentType | undefined) { const validTypes = ["W9", "W8BENE", "W8BEN"]; diff --git a/packages/mint-components/src/components/views/copy-text-view.tsx b/packages/mint-components/src/components/views/copy-text-view.tsx index 8960e3155a..a81ad65d74 100644 --- a/packages/mint-components/src/components/views/copy-text-view.tsx +++ b/packages/mint-components/src/components/views/copy-text-view.tsx @@ -18,45 +18,14 @@ export interface CopyTextViewProps { dateAvailable?: string; loading?: boolean; isCopied?: boolean; + backgroundColor?: string; + textColor?: string; + borderRadius?: string; + buttonType?: "primary" | "secondary"; + borderColor?: string; onClick?: () => void; } -const style = { - HostBlock: HostBlock, - inputStyle: { - "&::part(input)": { textOverflow: "ellipsis", width: "100%" }, - "&::part(base)": { cursor: "pointer", overflow: "visible" }, - width: "100%", - }, - inputErrorStyle: { - "&::part(base)": { - border: "2px solid red", - }, - }, - ContainerDiv: { - display: "flex", - alignItems: "flex-start", - flexDirection: "column", - justifyContent: "center", - gap: "var(--sl-spacing-x-small)", - width: "100%", - }, - containerStyle: { - display: "flex", - alignItems: "center", - gap: "var(--sl-spacing-x-small)", - width: "100%", - }, - errorTextStyle: { - margin: "0", - color: "var(--sl-color-danger-500)", - }, - notificationTextStyle: { - margin: "0", - color: "var(--sl-color-neutral-500)", - }, -}; - const vanillaStyle = ` :host{ display: block; @@ -81,11 +50,74 @@ const disabledStyles = ` } `; -const sheet = createStyleSheet(style); -const styleString = sheet.toString(); - export function CopyTextView(props: CopyTextViewProps) { const { buttonStyle = "icon" } = props; + const style = { + HostBlock: HostBlock, + inputStyle: { + "&::part(input)": { + textOverflow: "ellipsis", + width: "100%", + color: props.textColor || "var(--sl-input-color)", + }, + "&::part(base)": { + "--sl-input-border-radius": + `${props.borderRadius}px` || "var(--sqm-border-radius-normal)", + "--sl-input-border-color": "var(--sqm-border-color)", + "--sl-input-border-color-hover": "#999999", + "--sl-input-border-color-focus": "#999999", + "--sl-input-color-hover": "var(--sqm-input-color-hover)", + "--sl-input-color-focus": "var(--sqm-input-color-focus)", + "--sl-input-color-disabled": "var(--sqm-input-disabled-color)", + "--sl-input-background-color-focus": "var(--sqm-input-background)", + "--sl-input-background-color-hover": "var(--sqm-input-background)", + cursor: "pointer", + overflow: "visible", + borderRadius: + `${props.borderRadius}px` || "var(--sqm-border-radius-normal)", + background: props.backgroundColor || "var(--sqm-input-background)", + border: `var(--sqm-border-thickness) solid ${ + props.borderColor || "var(--sqm-input-border-color)" + }`, + }, + width: "100%", + }, + icon: { + "&::part(base)": { + color: props.textColor || "var(--sqm-text)", + }, + }, + inputErrorStyle: { + // "&::part(base)": { + // border: "1px solid red", + // }, + }, + ContainerDiv: { + display: "flex", + alignItems: "flex-start", + flexDirection: "column", + justifyContent: "center", + gap: "var(--sl-spacing-x-small)", + width: "100%", + }, + containerStyle: { + display: "flex", + alignItems: "center", + gap: "var(--sl-spacing-x-small)", + width: "100%", + }, + errorTextStyle: { + margin: "0", + color: "var(--sqm-danger-color-text)", + }, + notificationTextStyle: { + margin: "0", + color: "inherit", + }, + }; + + const sheet = createStyleSheet(style); + const styleString = sheet.toString(); const error = !props.loading && props.error; const inputText = error ? props.inputPlaceholderText : props.copyString; @@ -109,6 +141,7 @@ export function CopyTextView(props: CopyTextViewProps) { > {buttonStyle === "icon" ? ( props.onClick?.()} name="files" @@ -116,7 +149,7 @@ export function CopyTextView(props: CopyTextViewProps) { /> ) : ( props.onClick?.()} size={"medium"} style={{ width: `${buttonStyle === "button-below" && "100%"}` }} @@ -148,7 +181,7 @@ export function CopyTextView(props: CopyTextViewProps) { class={`${sheet.classes.inputStyle} ${ error ? sheet.classes.inputErrorStyle : "" }`} - exportparts="base: input-base, input: input-label" + // exportparts="base: input-base, input: input-field" value={props.loading ? "Loading..." : inputText} readonly disabled={disabled} diff --git a/packages/mint-components/src/components/views/email-registration-view.tsx b/packages/mint-components/src/components/views/email-registration-view.tsx index 53843e1cce..c439f472db 100644 --- a/packages/mint-components/src/components/views/email-registration-view.tsx +++ b/packages/mint-components/src/components/views/email-registration-view.tsx @@ -101,7 +101,11 @@ export function EmailRegistrationView(props: EmailRegistrationViewProps) { part="sqm-base" class={sheet.classes.Wrapper} style={{ - border: `${content.hideBorder ? "none" : "1px solid #eaeaea"}`, + border: `${ + content.hideBorder + ? "none" + : "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)" + }`, backgroundColor: content.backgroundColor, "padding-top": `var(--sl-spacing-${content.paddingTop})`, "padding-right": `var(--sl-spacing-${content.paddingRight})`, diff --git a/packages/mint-components/src/global/global.ts b/packages/mint-components/src/global/global.ts index eb7e55d365..00b59d7e37 100644 --- a/packages/mint-components/src/global/global.ts +++ b/packages/mint-components/src/global/global.ts @@ -1,12 +1,15 @@ -import "@formatjs/intl-relativetimeformat/polyfill"; import "@formatjs/intl-relativetimeformat/dist/locale-data/en"; +import "@formatjs/intl-relativetimeformat/polyfill"; -import "@formatjs/intl-pluralrules/polyfill"; +import { createIntl, createIntlCache } from "@formatjs/intl"; import "@formatjs/intl-pluralrules/dist/locale-data/en"; -import "babel-polyfill"; +import "@formatjs/intl-pluralrules/polyfill"; +import { + getEnvironmentSDK, + setUseHostImplementation, +} from "@saasquatch/component-boilerplate"; import { useHost } from "@saasquatch/stencil-hooks"; -import { setUseHostImplementation } from "@saasquatch/component-boilerplate"; -import { createIntl, createIntlCache } from "@formatjs/intl"; +import "babel-polyfill"; import debugFn from "debug"; setUseHostImplementation(useHost); @@ -64,8 +67,8 @@ import { SlTag, SlTextarea, SlTooltip, - setBasePath, registerIconLibrary, + setBasePath, } from "@saasquatch/shoelace"; try { @@ -127,10 +130,27 @@ try { import { insertCSS } from "../insertcss"; -import CSS from "./styles"; +import { insertFont } from "../insertfont"; +import { parseBrandingConfig } from "./styles"; -try { - insertCSS(CSS as any); -} catch (error) { - debug(error); +const applyStyles = (css: string, font: string) => { + try { + insertCSS(css); + insertFont(font); + } catch (error) { + debug(error); + } +}; + +if (getEnvironmentSDK().type === "None") { + window.addEventListener("message", ({ data }) => { + if (!data?.brandingConfig) return; + + window.SquatchBrandingConfig = data.brandingConfig; + const { styles, font } = parseBrandingConfig(data.brandingConfig); + applyStyles(styles, font); + }); } + +const { styles, font } = parseBrandingConfig(window.SquatchBrandingConfig); +applyStyles(styles, font); diff --git a/packages/mint-components/src/global/mixins.scss b/packages/mint-components/src/global/mixins.scss index 5a36341233..014677e4c0 100644 --- a/packages/mint-components/src/global/mixins.scss +++ b/packages/mint-components/src/global/mixins.scss @@ -2,11 +2,11 @@ p, .P { font-size: var(--sl-font-size-small); - color: var(--sl-color-gray-800); + color: var(--sqm-text); margin-top: 0px; &.Subtitle { - color: var(--sl-color-gray-500); + color: var(--sqm-text-subdued); margin: 0px; } } diff --git a/packages/mint-components/src/global/mixins.ts b/packages/mint-components/src/global/mixins.ts index eae8e507ff..c48fbcb077 100644 --- a/packages/mint-components/src/global/mixins.ts +++ b/packages/mint-components/src/global/mixins.ts @@ -30,11 +30,11 @@ export const HostBlock = { export const P = { "font-size": "var(--sl-font-size-small)", - color: "var(--sl-color-gray-800)", + color: "var(--sqm-text)", "margin-top": "0px", "&.Subtitle": { - color: "var(--sl-color-gray-500)", + color: "var(--sqm-text-subdued)", margin: "0px", }, }; @@ -78,21 +78,21 @@ export const ErrorStyles = { }; export const Wrapper = { - "box-sizing": "border-box", + boxSizing: "border-box", width: "100%", - "max-width": "var(--sqm-content-max-width)", + maxWidth: "var(--sqm-content-max-width)", height: "auto", - "background-color": "var(--sqm-content-background)", display: "flex", padding: "var(--sl-spacing-xxx-large)", - border: "1px solid #eaeaea", - "border-radius": "8px", + background: "var(--sqm-portal-background)", + border: "var(--sqm-border-thickness) solid var(--sqm-border-color)", + borderRadius: "var(--sqm-border-radius-normal)", }; export const AuthWrapper = { margin: "auto", ...Wrapper, - "max-width": "500px", + maxWidth: "500px", ...Column, ...gap({ direction: "column", size: "var(--sl-spacing-x-large)" }), }; diff --git a/packages/mint-components/src/global/styles.ts b/packages/mint-components/src/global/styles.ts index 69db9a9180..6b308e2554 100644 --- a/packages/mint-components/src/global/styles.ts +++ b/packages/mint-components/src/global/styles.ts @@ -71,7 +71,16 @@ --teal-7: #004551; } */ -const style = ` +import { BrandingConfiguration } from "../saasquatch"; + +declare global { + interface Window { + SquatchBrandingConfig: BrandingConfiguration | null; + } +} + +export const parseBrandingConfig = (config: BrandingConfiguration | null) => ({ + styles: ` /* vietnamese */ @font-face { font-family: 'Nunito Sans'; @@ -509,41 +518,27 @@ html { --sl-focus-ring-color-success: var(--sl-color-success-100); --sl-focus-ring-color-info: var(--sl-color-info-100); --sl-focus-ring-color-warning: var(--sl-color-warning-100); - --sl-focus-ring-color-danger: #var(--sl-color-danger-100);; - --sl-focus-ring-width: 3px; + --sl-focus-ring-color-danger: #var(--sl-color-danger-100); + --sl-focus-ring-width: 0px; --sl-button-font-size-small: var(--sl-font-size-x-small); --sl-button-font-size-medium: var(--sl-font-size-small); --sl-button-font-size-large: var(--sl-font-size-medium); --sl-input-height-small: 1.875rem; --sl-input-height-medium: 2.5rem; --sl-input-height-large: 3.125rem; - --sl-input-background-color: var(--sl-color-white); - --sl-input-background-color-hover: var(--sl-color-white); - --sl-input-background-color-focus: var(--sl-color-white); - --sl-input-background-color-disabled: var(--sl-color-gray-100); - --sl-input-border-color: var(--sl-color-gray-300); - --sl-input-border-color-hover: var(--sl-color-gray-400); - --sl-input-border-color-focus: var(--sl-color-primary-500); - --sl-input-border-color-disabled: var(--sl-color-gray-300); - --sl-input-border-width: 1px; --sl-input-border-radius-small: var(--sl-border-radius-medium); - --sl-input-border-radius-medium: var(--sl-border-radius-medium); --sl-input-border-radius-large: var(--sl-border-radius-medium); - --sl-input-font-family: var(--sl-font-sans); + --sl-input-font-family: var(--sqm-primary-font); --sl-input-font-weight: var(--sl-font-weight-normal); --sl-input-font-size-small: var(--sl-font-size-small); --sl-input-font-size-medium: var(--sl-font-size-medium); --sl-input-font-size-large: var(--sl-font-size-large); --sl-input-letter-spacing: var(--sl-letter-spacing-normal); - --sl-input-color: var(--sl-color-gray-700); - --sl-input-color-hover: var(--sl-color-gray-700); - --sl-input-color-focus: var(--sl-color-gray-700); --sl-input-color-disabled: var(--sl-color-gray-900); --sl-input-icon-color: var(--sl-color-gray-400); --sl-input-icon-color-hover: var(--sl-color-gray-600); --sl-input-icon-color-focus: var(--sl-color-gray-600); --sl-input-placeholder-color: var(--sl-color-gray-400); - --sl-input-placeholder-color-disabled: var(--sl-color-gray-600); --sl-input-spacing-small: var(--sl-spacing-small); --sl-input-spacing-medium: var(--sl-spacing-medium); --sl-input-spacing-large: var(--sl-spacing-large); @@ -557,7 +552,7 @@ html { --sl-input-help-text-color: var(--sl-color-gray-400); --sl-toggle-size: 1rem; --sl-overlay-background-color: #37415180; - --sl-panel-background-color: var(--sl-color-white); + --sl-panel-background-color: var(--sqm-portal-background); --sl-panel-border-color: var(--sl-color-gray-200); --sl-tooltip-border-radius: var(--sl-border-radius-medium); --sl-tooltip-background-color: var(--sl-color-gray-900); @@ -575,75 +570,335 @@ html { --sl-z-index-toast: 950; --sl-z-index-tooltip: 1000; } + + + :root { --sqm-header-background: var(--sl-color-white); --sqm-footer-background: var(--sl-color-white); --sqm-color-text-error: #e63717; --sqm-content-max-width: 700px; --sqm-content-background: var(--sl-color-white); - --sqm-portal-background: transparent; + --sqm-portal-background: ${ + config?.color?.backgroundColor || "hsla(0, 0%, 100%, 1)" + }; + --sqm-primary-font: ${config?.main?.brandFont || "Nunito Sans"}; --widget-background-color: var(--sl-color-white); --sqm-portal-main-width: 900px; --sqm-max-width: 100%; + --sqm-skeleton-background: hsl(240, 4%, 91%); + --sqm-text: ${ + config?.color?.textColorShades?.mainText || "hsl(240, 4%, 16%)" + }; + --sqm-text-subdued: ${ + config?.color?.textColorShades?.subduedText || "hsl(240, 3%, 46%)" + }; + + --sqm-primary-color: ${config?.main?.brandColor || "hsl(0, 0%, 7%)"}; + --sqm-primary-button-background:${ + config?.primaryButton?.buttonColor?.background || "hsl(0, 0%, 7%)" + }; + --sqm-primary-button-background-hover: ${ + config?.primaryButton?.buttonHoverColor?.background || "hsl(0, 0%, 25%)" + }; + --sqm-primary-button-color-hover: ${ + config?.primaryButton?.buttonHoverColor?.label || "hsla(0, 0%, 100%, 1)" + }; + --sqm-primary-button-border-color-hover: ${ + config?.primaryButton?.buttonHoverColor?.border || "hsl(0, 0%, 25%)" + }; + --sqm-primary-button-color: ${ + config?.primaryButton?.buttonColor?.label || "hsla(0, 0%, 100%, 1)" + }; + --sqm-primary-button-color-border: ${ + config?.primaryButton?.buttonColor?.border || "hsl(0, 0%, 7%)" + }; + --sqm-primary-button-radius: ${ + config?.primaryButton?.borderRadius + ? config?.primaryButton?.borderRadius + "px" + : "4px" + }; + --sqm-secondary-button-background: ${ + config?.secondaryButton?.buttonColor?.background || "hsl(0, 0%, 100%)" + }; + --sqm-secondary-button-background-hover: ${ + config?.secondaryButton?.buttonHoverColor?.background || "hsl(0, 0%, 7%)" + }; + --sqm-secondary-button-color-hover: ${ + config?.secondaryButton?.buttonHoverColor?.label || "hsl(0, 0%, 100%)" + }; + --sqm-secondary-button-border-color-hover: ${ + config?.secondaryButton?.buttonHoverColor?.border || "hsl(0, 0%, 7%)" + }; + --sqm-secondary-button-color: ${ + config?.secondaryButton?.buttonColor?.label || "hsl(0, 0%, 7%)" + }; + --sqm-secondary-button-color-border: ${ + config?.secondaryButton?.buttonColor?.border || "hsl(0, 0%, 100%)" + }; + --sqm-secondary-button-radius: ${ + config?.secondaryButton?.borderRadius + ? config?.secondaryButton?.borderRadius + "px" + : "4px" + }; + + --sqm-border-radius-normal: ${ + config?.border?.borderRadius ? config?.border?.borderRadius + "px" : "4px" + }; + --sqm-border-color: ${config?.border?.borderColor || "hsl(240, 4%, 91%)"}; + + --sqm-border-thickness: ${ + config?.border?.borderThickness + ? config?.border?.borderThickness + "px" + : "1px" + }; + + --sqm-accent-color-icon: ${ + config?.color?.accentColorShades?.icon || "hsl(0, 0%, 7%)" + }; + --sqm-accent-color-text: ${ + config?.color?.accentColorShades?.text || "hsl(0, 0%, 7%)" + }; + --sqm-accent-color-border: ${ + config?.color?.accentColorShades?.border || "hsl(240, 6%, 90%)" + }; + --sqm-accent-color-background: ${ + config?.color?.accentColorShades?.background || "hsl(0, 0%, 93%)" + }; + + --sqm-success-color-icon: ${ + config?.color?.success?.iconAndBadge || "hsl(142, 71%, 45%)" + }; + --sqm-success-color-text: ${ + config?.color?.success?.text || "hsl(164, 74%, 15%)" + }; + --sqm-success-color-border: ${ + config?.color?.success?.border || "hsl(141, 79%, 85%)" + }; + --sqm-success-color-background: ${ + config?.color?.success?.background || "hsl(141, 84%, 93%)" + }; + + --sqm-warning-color-icon: ${ + config?.color?.warning?.iconAndBadge || "hsl(38, 92%, 50%)" + }; + --sqm-warning-color-text: ${ + config?.color?.warning?.text || "hsl(38, 70%, 24%)" + }; + --sqm-warning-color-border: ${ + config?.color?.warning?.border || "hsl(48, 97%, 85%)" + }; + --sqm-warning-color-background: ${ + config?.color?.warning?.background || "hsl(48, 97%, 85%)" + }; + + --sqm-danger-color-icon: ${ + config?.color?.critical?.iconAndBadge || "hsl(0, 84%, 60%)" + }; + --sqm-danger-color-text: ${ + config?.color?.critical?.text || "hsl(0, 57%, 26%)" + }; + --sqm-danger-color-border: ${ + config?.color?.critical?.border || "hsl(0, 97%, 85%)" + }; + --sqm-danger-color-background: ${ + config?.color?.critical?.background || "hsl(0, 93%, 94%)" + }; + + --sqm-informative-color-icon: ${ + config?.color?.informative?.iconAndBadge || "hsl(221, 83%, 53%)" + }; + --sqm-informative-color-text: ${ + config?.color?.informative?.text || "hsl(221, 75%, 20%)" + }; + --sqm-informative-color-border: ${ + config?.color?.informative?.border || "hsl(213, 97%, 85%)" + }; + --sqm-informative-color-background: ${ + config?.color?.informative?.background || "hsl(214, 95%, 93%)" + }; + + --sqm-input-background: ${ + config?.formFields?.formFieldColor?.background || "hsla(0, 0%, 100%, 1)" + }; + --sqm-input-border-color: ${ + config?.formFields?.formFieldColor?.border || "hsl(240, 6%, 90%)" + }; + --sqm-input-border-radius: ${ + config?.formFields?.borderRadius + ? config?.formFields?.borderRadius + "px" + : "4px" + }; + --sqm-input-color: ${ + config?.formFields?.formFieldColor?.inputText || "hsl(0, 0%, 7%)" + }; + --sqm-input-label-color: var(--sqm-text); + --sqm-input-border-color-focus: ${ + config?.formFields?.selectedStateColor || "hsl(0, 0%, 7%)" + }; + --sqm-input-border-color-hover: ${ + config?.formFields?.hoverStateColor || "hsl(0, 0%, 91%)" + }; + + --sqm-input-label-font-size: inherit; + --sqm-input-disabled-color: var(--sqm-text-subdued); + --sqm-input-disabled-background: ${ + config?.formFields?.disabledBackgroundColor || "#F4F4F5" + }; + + sl-select::part(display-input), + sl-select::part(base), + sl-dropdown::part(display-input), + sl-dropdown::part(base), + sl-input::part(input) + { + color: var(--sqm-input-color); + } + + --sl-color-primary-100: var(--sqm-primary-color); + --sl-color-primary-200: var(--sqm-primary-color); + --sl-color-primary-300: var(--sqm-primary-color); + --sl-color-primary-400: var(--sqm-primary-color); + --sl-color-primary-500: var(--sqm-primary-color); + + --sl-input-border-radius-medium: var(--sqm-input-border-radius, var(--sqm-border-radius-normal)); + --sl-input-color-hover: var(--sqm-input-color-hover); + --sl-input-color-focus: var(--sqm-input-color-focus); + --sl-input-color-disabled: var(--sqm-input-disabled-color); + --sl-input-border-color-disabled: #7c7c7c; + --sl-input-border-color-focus: var(--sqm-input-border-color-focus, #999999); + --sl-input-border-color: var(--sqm-input-border-color, #7c7c7c); + --sl-input-border-color-hover: var(--sqm-input-border-color-hover, #999999); + --sl-input-background-color-focus: var(--sqm-input-background, #ffffff); + --sl-input-border-radius: var(--sqm-input-border-radius, var(--sqm-border-radius-normal)); + --sl-input-background-color: var(--sqm-input-background, #ffffff); + --sl-input-color: var(--sqm-input-color, var(--sqm-text), #333); + --sl-input-placeholder-color: var(--sqm-text-subdued, var(--sl-color-neutral-500)); + --sl-input-background-color-hover: var(--sqm-input-background, #ffffff); + --sl-input-border-width: var(--sqm-border-thickness, 1px); + --sl-input-border-style: solid; + + +/* --- Disabled State --- */ +--sl-input-background-color-disabled: var(--sqm-input-disabled-background, var(--sl-color-neutral-100)); +--sl-input-color-disabled: var(--sqm-input-disabled-color, var(--sl-color-neutral-500)); /* Your current: var(--sqm-input-disabled-color) */ +--sl-input-placeholder-color-disabled: var(--sl-color-neutral-400); + +/* --- Invalid/Error State --- */ +--sl-input-background-color-invalid: var(--sl-color-danger-50); +--sl-input-border-color-invalid: var(--sl-color-danger-500); +--sl-input-color-invalid: var(--sl-color-danger-700); + +/* --- Internal Elements (Prefix, Suffix, Clear Icon) --- */ +--sl-input-icon-color: var(--sl-color-neutral-500); +--sl-input-icon-size: var(--sl-font-size-medium); +--sl-input-clear-icon-color: var(--sl-color-neutral-500); +--sl-input-clear-icon-color-hover: var(--sl-color-neutral-700); + +/* --- Box Shadow --- */ +--sl-input-box-shadow: none; /* Typically no box shadow by default */ +--sl-input-box-shadow-focus: 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color); } body { - font-family: var(--sl-font-sans); + font-family: var(--sqm-primary-font); font-size: var(--sl-font-size-medium); font-weight: var(--sl-font-weight-normal); letter-spacing: var(--sl-letter-spacing-small); - color: var(--sl-color-gray-800); + color: var(--sqm-text); line-height: var(--sl-line-height-normal); margin: 0; - background-color: var(--sqm-portal-background); + background-color: var(--sqm-portal-background) !important; +} + +.story-div { + background: var(--sqm-portal-background) !important; + color: var(--sqm-text) !important; } -// .terms-link, -// .terms-link:visited { -// color: var(--sl-color-gray-500); -// text-decoration: none; -// } -// .terms-link:hover { -// color: var(--sl-color-gray-600); -// } +sl-spinner { + --sl-color-primary-500: var(--sqm-accent-color-icon); + --sl-spinner-stroke-width: 4px; +} -h1, h2, h3, h4{ - line-height: var(--sl-line-height-dense); +sl-select::part(menu) { + background: var(--sqm-input-background, inherit); + color: var(--sqm-input-color, inherit); + border:none; } +sl-select::part(panel) { + border-radius: var(--sqm-border-radius-normal); +} -h2, .Title { - font-size: var(--sl-font-size-large); - font-weight: var(--sl-font-weight-semibold); - margin: 0; +/** AL: Shading variables **/ +sl-alert[type="success"]::part(icon) { + color: var(--sqm-success-icon-color, var(--sl-color-success-500)); } -.H4 { - font-size: var(--sl-font-size-medium); - font-weight: var(--sl-font-weight-semibold); - margin: 0; + +sl-alert[type="success"]::part(base) { + background-color: var(--sqm-success-icon-color, var(--sl-color-success-100)); } -.P { - font-size: var(--sl-font-size-small); - color: var(--sl-color-gray-800); - margin-top: 0px; + +sl-alert[type="warning"]::part(icon) { + color: var(--sqm-warning-icon-color, var(--sl-color-warning-500)); } -.Title { - text-align: center; +sl-alert[type="warning"]::part(base) { + background-color: var(--sqm-warning-icon-color, var(--sl-color-warning-100)); } -.Subtitle { - text-align: center; - margin-bottom: 0px; - color: var(--sl-color-gray-500); +sl-alert[type="danger"]::part(icon) { + color: var(--sqm-danger-icon-color, var(--sl-color-danger-500)); } -.SupportText{ - margin-top: var(--sl-spacing-small); - text-align: center; + +sl-alert[type="danger"]::part(base) { + background-color: var(--sqm-danger-icon-color, var(--sl-color-danger-100)); } -sl-button::part(base){ - width: 100%; +sl-alert[type="info"]::part(icon) { + color: var(--sqm-info-icon-color, var(--sl-color-info-500)); +} + +sl-alert[type="info"]::part(base) { + background-color: var(--sqm-info-icon-color, var(--sl-color-info-100)); +} + +sl-alert[type="neutral"]::part(icon) { + color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-500)); +} + +sl-alert[type="neutral"]::part(base) { + background-color: var(--sqm-neutral-icon-color, var(--sl-color-neutral-100)); +} + +sl-badge[type="success"]::part(base) { + background-color: var(--sqm-success-badge-background, var(--sl-color-success-100)); + color: var(--sqm-success-badge-text-color, var(--sl-color-success-700)); +} + +sl-badge[type="warning"]::part(base) { + background-color: var(--sqm-warning-badge-background, var(--sl-color-warning-100)); + color: var(--sqm-warning-badge-text-color, var(--sl-color-warning-700)); +} + +sl-badge[type="danger"]::part(base) { + background-color: var(--sqm-danger-badge-background, var(--sl-color-danger-100)); + color: var(--sqm-danger-badge-text-color, var(--sl-color-danger-700)); +} + +sl-badge[type="info"]::part(base) { + background-color: var(--sqm-info-badge-background, var(--sl-color-info-100)); + color: var(--sqm-info-badge-text-color, var(--sl-color-info-700)); +} + +sl-badge[type="neutral"]::part(base) { + background-color: var(--sqm-neutral-badge-background, var(--sl-color-neutral-100)); + color: var(--sqm-neutral-badge-text-color, var(--sl-color-neutral-700)); +} + +h1, h2, h3, h4{ + line-height: var(--sl-line-height-dense); } sqm-share-button{ @@ -656,80 +911,157 @@ sqm-hero img { } sl-details::part(base){ - background-color: var(--sl-color-white); - border-color: var(--sl-color-gray-300) + background-color: inherit; + border-color: var(--sqm-border-color); } + sl-details::part(summary) { font-size: var(--sl-font-size-medium); font-weight: var(--sl-font-weight-semibold); margin: 0px; } -*::part(defaultbutton-base){ - background-color: rgba(0,0,0,0); - color: var(--sl-color-gray-800); - border-color: var(--sl-color-gray-800); -} -*::part(defaultbutton-base):hover{ - background-color: rgba(20,20,20,.08); + +*::part(primarybutton-base), +sl-button[type="primary"]::part(base) { + font-family: var(--sqm-primary-font); + width: 100%; + background-color: var(--sqm-primary-button-background); + color: var(--sqm-primary-button-color); + border-color: var(--sqm-primary-button-color-border); + border-radius: var(--sqm-primary-button-radius); } -*::part(defaultbutton-base):active{ - background-color: rgba(20,20,20,.16); + +*::part(primarybutton-base):hover, +sl-button[type="primary"]::part(base):hover{ + background-color: var(--sqm-primary-button-background-hover); + border-color: var(--sqm-primary-button-border-color-hover); + color: var(--sqm-primary-button-color-hover); } -*::part(defaultbutton-base):focus{ + + +*::part(primarybutton-base):focus, +sl-button[type="primary"]::part(base):focus { box-shadow: none; } -*::part(primarybutton-base){ - background-color: var(--sl-color-primary-400); - color: var(--sl-color-white); - border-color: var(--sl-color-primary-400); -} -*::part(primarybutton-base):hover{ - background-color: var(--sl-color-primary-300); - border-color: var(--sl-color-primary-300); -} -*::part(primarybutton-base):active{ - background-color: var(--sl-color-primary-500); - border-color: var(--sl-color-primary-500); + +*::part(secondarybutton-base), +sl-button[type="secondary"]::part(base) { +font-family: var(--sqm-primary-font); + background-color: var(--sqm-secondary-button-background); + color: var(--sqm-secondary-button-color); + border-color: var(--sqm-secondary-button-color-border); + border-radius: var(--sqm-secondary-button-radius); } -*::part(primarybutton-base):focus{ - box-shadow: none; +*::part(secondarybutton-base):hover, +sl-button[type="secondary"]::part(base):hover { + background-color: var(--sqm-secondary-button-background-hover); + color: var(--sqm-secondary-button-color-hover); + border-color: var(--sqm-secondary-button-border-color-hover); } *::part(input-label), *::part(select-label), *::part(textarea-label){ - font-size: var(--sl-input-font-size-small); + font-family: var(--sqm-primary-font); + font-size: var(--sqm-input-label-font-size, var(--sl-input-font-size-small)); font-weight: var(--sl-font-weight-semibold); + color: var(--sqm-input-label-color, var(--sqm-text), black); } -sl-input::part(label){ - font-size: var(--sl-input-label-font-size-small); - font-weight: var(--sl-font-weight-semibold); +*::part(input-base), *::part(select-base), *::part(textarea-base){ + font-family: var(--sqm-primary-font); + background-color: var(--sqm-input-background, #fff); + border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem); + color: var(--sqm-input-color, white); + border-width: var(--sqm-border-thickness, 1px); } -*::part(menuitem-base):hover{ - background-color: var(--sl-color-gray-200); - color: var(--sl-color-gray-700); +*::part(input-base):hover, *::part(select-base):hover, *::part(textarea-base):hover{ + border-color: var(--sqm-border-color-hover); } -.poweredBy { - color: var(--sl-color-gray-400); - font-size: var(--sl-font-size-xx-small); +*::part(input-base):focus, *::part(select-base):focus, *::part(textarea-base):focus{ + border-color: var(--sqm-border-color-focus); } -.poweredBy:hover { - color: var(--sl-color-gray-900); +sqm-name-fields::part(input-base) { + font-family: var(--sqm-primary-font); + background-color: var(--sqm-input-background, #fff); + border-radius: var(--sqm-input-border-radius, var(--sl-input-border-radius-large), 0.25rem); + color: var(--sqm-input-color, white); + border-width: var(--sqm-border-thickness, 1px); } -.FooterEmail{ - text-decoration: none; - font-size: var(--sl-font-size-medium); - color: var(--sl-color-gray-800); - margin: 0px; - cursor:pointer; +sl-input::part(base):focus, +sl-select::part(form-control-wrapper):focus, +sl-textarea::part(textarea-label):focus { + border-color: var(--sqm-border-color-focus); +} + +*::part(input-label):disabled, *::part(select-label):disabled, *::part(textarea-label):disabled{ + background: var(--sqm-input-disabled-background, #f5f5f5); + color: var(--sqm-input-disabled-color, var(--sl-color-gray-600)); +} + +*::part(input):-webkit-autofill { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; +} + +*::part(input):-webkit-autofill:hover { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; +} + +*::part(input):-webkit-autofill:focus { + box-shadow: 0 0 0 50px var(--sqm-input-background, #fff) inset !important; + -webkit-text-fill-color: var(--sqm-input-color, white) !important; +} + +*::part(input)::placeholder, +*::part(select)::placeholder, +*::part(textarea)::placeholder { + font-family: var(--sqm-primary-font); + color: var(--sqm-text-subdued); +} + +*::part(input)::-webkit-input-placeholder, +*::part(select)::-webkit-input-placeholder, +*::part(textarea)::-webkit-input-placeholder { + font-family: var(--sqm-primary-font); + color: var(--sqm-text-subdued); } +*::part(input)::-moz-placeholder, +*::part(select)::-moz-placeholder, +*::part(textarea)::-moz-placeholder { + font-family: var(--sqm-primary-font); + opacity: 1; /* Firefox adds an opacity to placeholders by default */ + color: var(--sqm-text-subdued); +} +*::part(input)::-ms-input-placeholder, +*::part(select)::-ms-input-placeholder, +*::part(textarea)::-ms-input-placeholder { + font-family: var(--sqm-primary-font); + color: var(--sqm-text-subdued); +} -`; +a { + font-family: var(--sqm-primary-font); + color: inherit; + text-decoration: underline; + cursor: pointer; +} + + +sl-icon::part(base) { + color: var(--sqm-text); +} + +sl-icon::part(base):hover { + color: var(--sqm-accent-color-icon); +} -export default style; +`, + font: config?.main?.brandFont, +}); diff --git a/packages/mint-components/src/index.html b/packages/mint-components/src/index.html index 1a3a0b9066..dcf65df0a1 100644 --- a/packages/mint-components/src/index.html +++ b/packages/mint-components/src/index.html @@ -1,16 +1,51 @@ + + + + Mint Components Stencilbook + + - - - - Mint Components Stencilbook - - - + - - - + + - \ No newline at end of file + + + diff --git a/packages/mint-components/src/insertfont.ts b/packages/mint-components/src/insertfont.ts new file mode 100644 index 0000000000..ab37be7123 --- /dev/null +++ b/packages/mint-components/src/insertfont.ts @@ -0,0 +1,21 @@ +import { buildFontsCssUrl } from "./fonts/GoogleFonts"; + +export function insertFont(font: string) { + if (font === undefined) { + throw new Error("insert-font: No font was provided"); + } + + const container = document.querySelector("head"); + const url = buildFontsCssUrl(font); + + const existingLink = container.querySelector(`link#brandFontStylesheet`); + if (existingLink?.getAttribute("href") === url) return; + + if (existingLink) container.removeChild(existingLink); + + const link = document.createElement("link"); + link.setAttribute("rel", "stylesheet"); + link.setAttribute("href", url); + link.setAttribute("id", "brandFontStylesheet"); + container.appendChild(link); +} diff --git a/packages/mint-components/src/saasquatch.d.ts b/packages/mint-components/src/saasquatch.d.ts index 777fd82fb9..77d06a0da5 100644 --- a/packages/mint-components/src/saasquatch.d.ts +++ b/packages/mint-components/src/saasquatch.d.ts @@ -187,3 +187,145 @@ interface Invoice { indirectTax: string; netEarnings: string; } + +interface ColorShadeConfig { + text?: string; + icon?: string; + border?: string; + background?: string; + iconAndBadge?: string; +} + +interface WidgetSizeDimension { + value?: number; + unit?: "PX" | "%"; +} + +interface WidgetSizeConfig { + minWidth?: WidgetSizeDimension; + maxWidth?: WidgetSizeDimension; +} + +export interface BrandingConfiguration { + /** + * Defines all branding related styles. + */ + main?: { + brandColor?: string; + brandFont?: string; + }; + color?: { + backgroundColor?: string; + textColorShades?: { + mainText: string; + subduedText: string; + }; + accentColorShades?: { + icon?: string; + text?: string; + border?: string; + background?: string; + }; + success?: { + text?: string; + iconAndBadge?: string; + border?: string; + background?: string; + }; + warning?: { + text?: string; + iconAndBadge?: string; + border?: string; + background?: string; + }; + critical?: { + text?: string; + iconAndBadge?: string; + border?: string; + background?: string; + }; + informative?: { + text?: string; + iconAndBadge?: string; + border?: string; + background?: string; + }; + neutral?: { + text?: string; + iconAndBadge?: string; + border?: string; + background?: string; + [k: string]: unknown; + }; + }; + primaryButton?: { + buttonColor?: { + background?: string; + label?: string; + border?: string; + }; + buttonHoverColor?: { + background?: string; + label?: string; + border?: string; + }; + borderRadius?: number; + }; + secondaryButton?: { + buttonColor?: { + background?: string; + label?: string; + border?: string; + }; + buttonHoverColor?: { + background?: string; + label?: string; + border?: string; + }; + borderRadius?: number; + }; + /** + * Defines form field colors. + */ + formFields?: { + formFieldColor?: { + background?: string; + inputText?: string; + border?: string; + }; + borderRadius?: number; + disabledBackgroundColor?: string; + selectedStateColor?: string; + hoverStateColor?: string; + }; + border?: { + borderRadius?: number; + borderThickness?: number; + borderColor?: string; + }; + /** + * Defines widget dimensions. + */ + widgetSize?: { + embeddedWidgets?: { + minWidth?: { + value: number; + unit: "px" | "%"; + }; + maxWidth?: { + value: number; + unit: "px" | "%"; + }; + }; + popupWidgets?: { + minWidth?: { + value: number; + unit: "px" | "%"; + }; + maxWidth?: { + value: number; + unit: "px" | "%"; + }; + }; + }; +} diff --git a/packages/mint-components/src/stories/PortalTemplates.stories.tsx b/packages/mint-components/src/stories/PortalTemplates.stories.tsx index 71743e2469..c94402ecf9 100644 --- a/packages/mint-components/src/stories/PortalTemplates.stories.tsx +++ b/packages/mint-components/src/stories/PortalTemplates.stories.tsx @@ -1,35 +1,26 @@ import { useState } from "@saasquatch/universal-hooks"; import { h } from "@stencil/core"; import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon"; +import activityTemplate from "../templates/Activity.html"; +import dashboardTemplate from "../templates/Dashboard.html"; +import editProfileTemplate from "../templates/EditProfile.html"; +import emailVerificationTemplate from "../templates/EmailVerification.html"; +import emailVerifiedTemplate from "../templates/EmailVerified.html"; +import forgotPasswordTemplate from "../templates/ForgotPassword.html"; +import leadSubmitTemplate from "../templates/LeadSubmit.html"; +import loginTemplate from "../templates/Login.html"; +import multiProgramTemplate from "../templates/MultiProgramPortal.html"; +import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html"; import portalTemplate from "../templates/Portal.html"; import portalLeadSubmitTemplate from "../templates/PortalLeadSubmit.html"; -import taxAndCashTemplate from "../templates/TaxAndCash.html"; import portalLeadSubmitTemplateWithDashboard from "../templates/PortalLeadSubmitWithDashboard.html"; import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html"; -import multiProgramTemplate from "../templates/MultiProgramPortal.html"; -import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html"; -import dashboardTemplate from "../templates/Dashboard.html"; -import leadSubmitTemplate from "../templates/LeadSubmit.html"; -import editProfileTemplate from "../templates/EditProfile.html"; -import activityTemplate from "../templates/Activity.html"; -import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html"; -import verifyEmailTemplate from "../templates/VerifyEmail.html"; -import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html"; -import loginTemplate from "../templates/Login.html"; import registerTemplate from "../templates/Register.html"; -import forgotPasswordTemplate from "../templates/ForgotPassword.html"; import resetPasswordTemplate from "../templates/ResetPassword.html"; -import emailVerifiedTemplate from "../templates/EmailVerified.html"; -import emailVerificationTemplate from "../templates/EmailVerification.html"; - -import LoginReadme from "../components/sqm-portal-login/readme.md"; -import ReferralIframeReadme from "../components/sqm-referral-iframe/readme.md"; -import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md"; -import RegisterReadme from "../components/sqm-portal-register/readme.md"; -import EditProfileReadme from "../components/sqm-portal-profile/readme.md"; -import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md"; -import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md"; -import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md"; +import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html"; +import taxAndCashTemplate from "../templates/TaxAndCash.html"; +import taxPayoutReminderEmailTemplate from "../templates/TaxPayoutReminderEmail.html"; +import verifyEmailTemplate from "../templates/VerifyEmail.html"; import { DefaultTemplateView } from "../utils/DefaultTemplateView"; import { TemplateView } from "../utils/TemplateView"; @@ -94,31 +85,17 @@ export const TaxAndCash = createHookStory(() => { export const Login = createHookStory(() => { const { states, callbacks } = useTemplate(loginTemplate); - return ( - - ); + return ; }); export const ForgotPassword = createHookStory(() => { const { states, callbacks } = useTemplate(forgotPasswordTemplate); - return ( - - ); + return ; }); export const Register = createHookStory(() => { const { states, callbacks } = useTemplate(registerTemplate); - return ( - - ); + return ; }); export const Dashboard = createHookStory(() => { @@ -128,13 +105,7 @@ export const Dashboard = createHookStory(() => { export const LeadSubmitIframe = createHookStory(() => { const { states, callbacks } = useTemplate(leadSubmitTemplate); - return ( - - ); + return ; }); export const Activity = createHookStory(() => { @@ -144,46 +115,22 @@ export const Activity = createHookStory(() => { export const EditProfile = createHookStory(() => { const { states, callbacks } = useTemplate(editProfileTemplate); - return ( - - ); + return ; }); export const ResetPassword = createHookStory(() => { const { states, callbacks } = useTemplate(resetPasswordTemplate); - return ( - - ); + return ; }); export const EmailVerification = createHookStory(() => { const { states, callbacks } = useTemplate(emailVerificationTemplate); - return ( - - ); + return ; }); export const EmailVerified = createHookStory(() => { const { states, callbacks } = useTemplate(emailVerifiedTemplate); - return ( - - ); + return ; }); export const Widget = createHookStory(() => { diff --git a/packages/mint-components/src/tables/GenericTableView.tsx b/packages/mint-components/src/tables/GenericTableView.tsx index d8af5d2dde..dd7e3d8e5d 100644 --- a/packages/mint-components/src/tables/GenericTableView.tsx +++ b/packages/mint-components/src/tables/GenericTableView.tsx @@ -53,9 +53,11 @@ export function GenericTableView(props: GenericTableViewProps) { tableLayout: "fixed", width: "100%", "& tbody tr": { - borderBottom: "1px solid var(--sl-color-neutral-200)", + borderBottom: + "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", "&:first-child": { - borderTop: "1px solid var(--sl-color-neutral-200)", + borderTop: + "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", }, }, "& th": { @@ -76,8 +78,9 @@ export function GenericTableView(props: GenericTableViewProps) { }, "& tr": { display: "block", - background: "#FFFFFF", - border: "1px solid var(--sl-color-neutral-200)", + background: "inherit", + border: + "var(--sqm-border-thickness, 1px) solid var(--sqm-border-color)", boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)", borderRadius: "var(--sl-border-radius-large)", padding: "var(--sl-spacing-medium)", @@ -192,7 +195,7 @@ export function GenericTableView(props: GenericTableViewProps) { disabled={!states.hasPrev} loading={show === "loading"} onClick={callbacks.prevPage} - exportparts="base: defaultbutton-base" + exportparts="base: secondarybutton-base" class={!states.hasPrev ? sheet.classes.ButtonDisabled : ""} > {data.textOverrides.prevLabel} @@ -202,7 +205,7 @@ export function GenericTableView(props: GenericTableViewProps) { loading={show === "loading"} disabled={!states.hasNext} onClick={callbacks.nextPage} - exportparts="base: defaultbutton-base" + exportparts="base: secondarybutton-base" class={!states.hasNext ? sheet.classes.ButtonDisabled : ""} > {data.textOverrides.moreLabel} diff --git a/packages/mint-components/src/templates/MultiProgramPortal.html b/packages/mint-components/src/templates/MultiProgramPortal.html index 70bcd71385..6eb06d4d0b 100644 --- a/packages/mint-components/src/templates/MultiProgramPortal.html +++ b/packages/mint-components/src/templates/MultiProgramPortal.html @@ -60,8 +60,8 @@ diff --git a/packages/mint-components/src/templates/MultiProgramPortalWithDashboard.html b/packages/mint-components/src/templates/MultiProgramPortalWithDashboard.html index f54e98ab2b..ec9a741745 100644 --- a/packages/mint-components/src/templates/MultiProgramPortalWithDashboard.html +++ b/packages/mint-components/src/templates/MultiProgramPortalWithDashboard.html @@ -54,8 +54,8 @@ diff --git a/packages/mint-components/src/templates/Portal.html b/packages/mint-components/src/templates/Portal.html index 2eef5425aa..9e27ae3ea3 100644 --- a/packages/mint-components/src/templates/Portal.html +++ b/packages/mint-components/src/templates/Portal.html @@ -60,8 +60,8 @@ diff --git a/packages/mint-components/src/templates/PortalLeadSubmit.html b/packages/mint-components/src/templates/PortalLeadSubmit.html index 0d07389c38..9e717f8934 100644 --- a/packages/mint-components/src/templates/PortalLeadSubmit.html +++ b/packages/mint-components/src/templates/PortalLeadSubmit.html @@ -60,8 +60,8 @@ diff --git a/packages/mint-components/src/templates/PortalLeadSubmitWithDashboard.html b/packages/mint-components/src/templates/PortalLeadSubmitWithDashboard.html index 08789fac4d..224db73378 100644 --- a/packages/mint-components/src/templates/PortalLeadSubmitWithDashboard.html +++ b/packages/mint-components/src/templates/PortalLeadSubmitWithDashboard.html @@ -60,8 +60,8 @@ diff --git a/packages/mint-components/src/templates/PortalWithDashboard.html b/packages/mint-components/src/templates/PortalWithDashboard.html index bb8dbc86be..aff5c78e9e 100644 --- a/packages/mint-components/src/templates/PortalWithDashboard.html +++ b/packages/mint-components/src/templates/PortalWithDashboard.html @@ -60,8 +60,8 @@ diff --git a/packages/mint-components/src/templates/ResetPasswordEmail.html b/packages/mint-components/src/templates/ResetPasswordEmail.html index eee9eb3638..1b16a3dbbe 100644 --- a/packages/mint-components/src/templates/ResetPasswordEmail.html +++ b/packages/mint-components/src/templates/ResetPasswordEmail.html @@ -348,10 +348,14 @@ -moz-border-radius: 5px; width: 100%; width: calc(100% - 2px); - border-top: 1px solid #2270ee; - border-right: 1px solid #2270ee; - border-bottom: 1px solid #2270ee; - border-left: 1px solid #2270ee; + border-top: var(--sqm-border-thickness, 1px) solid + #2270ee; + border-right: var(--sqm-border-thickness, 1px) + solid #2270ee; + border-bottom: var(--sqm-border-thickness, 1px) + solid #2270ee; + border-left: var(--sqm-border-thickness, 1px) + solid #2270ee; padding-top: 5px; padding-bottom: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, @@ -446,4 +450,4 @@ - \ No newline at end of file + diff --git a/packages/mint-components/src/templates/TaxAndCash.html b/packages/mint-components/src/templates/TaxAndCash.html index 3e98840652..1e729107f4 100644 --- a/packages/mint-components/src/templates/TaxAndCash.html +++ b/packages/mint-components/src/templates/TaxAndCash.html @@ -61,8 +61,8 @@ diff --git a/packages/mint-components/src/templates/TaxPayoutReminderEmail.html b/packages/mint-components/src/templates/TaxPayoutReminderEmail.html index 78c5a7f21f..c5a4151fb2 100644 --- a/packages/mint-components/src/templates/TaxPayoutReminderEmail.html +++ b/packages/mint-components/src/templates/TaxPayoutReminderEmail.html @@ -349,10 +349,10 @@ -moz-border-radius: 5px; width: 100%; width: calc(100% - 2px); - border-top: 1px solid #2270ee; - border-right: 1px solid #2270ee; - border-bottom: 1px solid #2270ee; - border-left: 1px solid #2270ee; + border-top: var(--sqm-border-thickness, 1px) solid #2270ee; + border-right: var(--sqm-border-thickness, 1px) solid #2270ee; + border-bottom: var(--sqm-border-thickness, 1px) solid #2270ee; + border-left: var(--sqm-border-thickness, 1px) solid #2270ee; padding-top: 5px; padding-bottom: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, diff --git a/packages/mint-components/src/templates/VerifyEmail.html b/packages/mint-components/src/templates/VerifyEmail.html index d550e7570a..0dab6ce4db 100644 --- a/packages/mint-components/src/templates/VerifyEmail.html +++ b/packages/mint-components/src/templates/VerifyEmail.html @@ -348,10 +348,10 @@ -moz-border-radius: 5px; width: 100%; width: calc(100% - 2px); - border-top: 1px solid #2270ee; - border-right: 1px solid #2270ee; - border-bottom: 1px solid #2270ee; - border-left: 1px solid #2270ee; + border-top: var(--sqm-border-thickness, 1px) solid #2270ee; + border-right: var(--sqm-border-thickness, 1px) solid #2270ee; + border-bottom: var(--sqm-border-thickness, 1px) solid #2270ee; + border-left: var(--sqm-border-thickness, 1px) solid #2270ee; padding-top: 5px; padding-bottom: 5px; font-family: 'Helvetica Neue', Helvetica, Arial, diff --git a/packages/mint-components/src/utils/parseStates.ts b/packages/mint-components/src/utils/parseStates.ts new file mode 100644 index 0000000000..d5cd7ff270 --- /dev/null +++ b/packages/mint-components/src/utils/parseStates.ts @@ -0,0 +1,11 @@ +export function parseStates(states) { + if (typeof states === "string") { + try { + return JSON.parse(states); + } catch (e) { + return undefined; + } + } + + if (typeof states === "object") return states; +} diff --git a/packages/mint-components/src/utils/utils.ts b/packages/mint-components/src/utils/utils.ts index cd2d23f69f..b55d52fb89 100644 --- a/packages/mint-components/src/utils/utils.ts +++ b/packages/mint-components/src/utils/utils.ts @@ -60,3 +60,9 @@ export function sanitizeUrlPath(path: string): URL { return cleanUrl; } + +export function capitalizeFirstLetter(word: string): string { + return word[0].toUpperCase() + word.slice(1); +} + +console.log(capitalizeFirstLetter("warning")); diff --git a/packages/stencilbook/src/stencil-storybook.tsx b/packages/stencilbook/src/stencil-storybook.tsx index c3ac07352a..3397275448 100644 --- a/packages/stencilbook/src/stencil-storybook.tsx +++ b/packages/stencilbook/src/stencil-storybook.tsx @@ -6,218 +6,218 @@ import { Style } from "./stencil-storybook.styles"; import { css } from "@emotion/css"; import { organiseStories } from "./organiseStories"; import { - StorybookDefaultExport, - SubStories, - AddOn, - OrganisedStoryWithSubs, - StoryWithSubs, - Selection, + StorybookDefaultExport, + SubStories, + AddOn, + OrganisedStoryWithSubs, + StoryWithSubs, + Selection, } from "."; function loadStory(imps: any) { - // TODO: Validate if something doesn't export things in Component Story Format (CSF) - const { default: defaultStory, ...rest } = imps; - return { - story: defaultStory as StorybookDefaultExport, - subs: rest as SubStories, - }; + // TODO: Validate if something doesn't export things in Component Story Format (CSF) + const { default: defaultStory, ...rest } = imps; + return { + story: defaultStory as StorybookDefaultExport, + subs: rest as SubStories, + }; } function getStoryFromKey(key: string, stories: OrganisedStoryWithSubs) { - if (!key) return undefined; - - const keys = decodeURIComponent(key).split("-"); - const group = keys[0]; - const parentTitle = keys[1]; - const subKey = keys[2]; - - const s = stories?.[group]?.find( - (element) => element.story.title === parentTitle - ); - const subStory = s?.subs?.[subKey]; - - const selectedStory = { - key, - story: subStory, - parent: s?.story, - label: subStory?.name, - }; - - if ( - selectedStory.key && - selectedStory.story && - selectedStory.parent && - selectedStory.label - ) - return selectedStory; - else return undefined; + if (!key) return undefined; + + const keys = decodeURIComponent(key).split("-"); + const group = keys[0]; + const parentTitle = keys[1]; + const subKey = keys[2]; + + const s = stories?.[group]?.find( + (element) => element.story.title === parentTitle + ); + const subStory = s?.subs?.[subKey]; + + const selectedStory = { + key, + story: subStory, + parent: s?.story, + label: subStory?.name, + }; + + if ( + selectedStory.key && + selectedStory.story && + selectedStory.parent && + selectedStory.label + ) + return selectedStory; + else return undefined; } export type Return = { - class: string; - children: VNode; - View: FunctionalComponent<{}>; - selected: Selection; + class: string; + children: VNode; + View: FunctionalComponent<{}>; + selected: Selection; }; export function useStencilbook( - imports: unknown[], - { - h = StencilH, - title = "Stencilbook", - homepage =

Select a story!

, - addons = [], - }: { - h?: typeof StencilH; - title?: string; - homepage?: VNode; - addons?: AddOn[]; - } + imports: unknown[], + { + h = StencilH, + title = "Stencilbook", + homepage =

Select a story!

, + addons = [], + }: { + h?: typeof StencilH; + title?: string; + homepage?: VNode; + addons?: AddOn[]; + } ): Return { - const stories: OrganisedStoryWithSubs = useMemo( - () => - imports - .map(loadStory) - .reduce(organiseStories, { _: [] as StoryWithSubs[] }), - imports - ); - - const urlStoryKey = decodeURIComponent(window.location.hash).replace("#", ""); - const [Selected, setSelectedInternal] = useState( - getStoryFromKey(urlStoryKey, stories) - ); - const selectedKey = Selected?.key; - - function setSelectedStory(key: string) { - window.location.hash = encodeURIComponent(key); - setSelectedInternal(getStoryFromKey(key, stories)); - } - - const [showSidebar, setShowSidebar] = useState(true); - const [darkCanvas, setDarkCanvas] = useState(false); - - const WidthSelector = () => { - // Not the best way to display these buttons but don't wanna put too much time - return ( -
- - -
- ); - }; - - // Mobile/tablet widths are based on avocode designs - const containerWidth = "1124px"; - const responsiveWidth = css` - max-width: ${containerWidth}; - margin-left: ${showSidebar ? "250px" : "0px"}; - `; - - const hide = css` - display: none; - `; - - if (darkCanvas) { - document.body.style.backgroundColor = "#232323"; - } else { - document.body.style.backgroundColor = "#fafafa"; - } - - const InnerFn = ({ selected }: { selected: Selection }) => { - const Component = addons.reduce((PrevFn, AddOnFn) => { - return () => ( - - - - ); - }, selected?.story); - return ; - }; - - const GoHome = () => { - setSelectedInternal(undefined); - }; - - const View = () => ( -
-
-
GoHome()}> -

{title}

-
-
    - {Object.keys(stories) - .sort() - .map((group) => { - return ( -
    - {group !== "_" &&

    {group}

    } - {stories[group].map((s) => { - return ( -
  • -
    - - {s.story.title} - - {s.subs && - Object.keys(s.subs).map((subKey) => { - const key = `${group}-${s.story.title}-${subKey}`; - const subStory = s.subs[subKey]; - const subStoryView = () => ; - const label = - subStory.storyName || startCase(subKey); - return ( -
    - setSelectedStory(key)}> - {label} - -
    - ); - })} -
    -
    • - ); - })} -
    - ); - })} -
-
- -
- {!selectedKey && homepage} - {selectedKey && ( -
- {/* 
{selected.specs}
*/} -

{Selected.label}

- -
- )} -
-
- ); - - return { - class: Style, - children: , - View, - selected: Selected, - }; + const stories: OrganisedStoryWithSubs = useMemo( + () => + imports + .map(loadStory) + .reduce(organiseStories, { _: [] as StoryWithSubs[] }), + imports + ); + + const urlStoryKey = decodeURIComponent(window.location.hash).replace("#", ""); + const [Selected, setSelectedInternal] = useState( + getStoryFromKey(urlStoryKey, stories) + ); + const selectedKey = Selected?.key; + + function setSelectedStory(key: string) { + window.location.hash = encodeURIComponent(key); + setSelectedInternal(getStoryFromKey(key, stories)); + } + + const [showSidebar, setShowSidebar] = useState(true); + const [darkCanvas, setDarkCanvas] = useState(false); + + const WidthSelector = () => { + // Not the best way to display these buttons but don't wanna put too much time + return ( +
+ + +
+ ); + }; + + // Mobile/tablet widths are based on avocode designs + const containerWidth = "1124px"; + const responsiveWidth = css` + max-width: ${containerWidth}; + margin-left: ${showSidebar ? "250px" : "0px"}; + `; + + const hide = css` + display: none; + `; + + if (darkCanvas) { + document.body.style.backgroundColor = "#232323"; + } else { + document.body.style.backgroundColor = "#fafafa"; + } + + const InnerFn = ({ selected }: { selected: Selection }) => { + const Component = addons.reduce((PrevFn, AddOnFn) => { + return () => ( + + + + ); + }, selected?.story); + return ; + }; + + const GoHome = () => { + setSelectedInternal(undefined); + }; + + const View = () => ( +
+
+
GoHome()}> +

{title}

+
+
    + {Object.keys(stories) + .sort() + .map((group) => { + return ( +
    + {group !== "_" &&

    {group}

    } + {stories[group].map((s) => { + return ( +
  • +
    + + {s.story.title} + + {s.subs && + Object.keys(s.subs).map((subKey) => { + const key = `${group}-${s.story.title}-${subKey}`; + const subStory = s.subs[subKey]; + const subStoryView = () => ; + const label = + subStory.storyName || startCase(subKey); + return ( +
    + setSelectedStory(key)}> + {label} + +
    + ); + })} +
    +
    • + ); + })} +
    + ); + })} +
+
+ +
+ {!selectedKey && homepage} + {selectedKey && ( +
+ {/* 
{selected.specs}
*/} +

{Selected.label}

+ +
+ )} +
+
+ ); + + return { + class: Style, + children: , + View, + selected: Selected, + }; }