All Changes related to content editor and Mint Component branding

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

packages/bedrock-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/bedrock-components",
   "title": "Bedrock Components",
-  "version": "1.4.10",
+  "version": "1.4.12-2",
   "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",

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": "Logged In", "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": "Logged In", "slot": "logged-in", "props": { "overrideToken": true } }
+         */
+        "stateController"?: string;
     }
     interface SqbConditionalSection {
         /**

packages/bedrock-components/src/components/sqb-auth-template-switch/readme.md

@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property          | Attribute          | Description | Type     | Default |
+| ----------------- | ------------------ | ----------- | -------- | ------- |
+| `stateController` | `state-controller` |             | `string` | `"{}"`  |
+
+
 ## Dependencies
 
 ### Used by

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 "<sqb-auth-template-switch></sqb-auth-template-switch>"
+    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"

packages/bedrock-components/src/components/sqb-auth-template-switch/sqb-auth-template-switch.tsx

@@ -1,30 +1,37 @@
-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);
   }
 
   disconnectedCallback() {}
 
   render() {
-    const { setContainer, setSlot } = useAuthTemplateSwitch();
+    const stateProps = JSON.parse(this.stateController)["sqb-auth-template-switch"];
+    const { setContainer, setSlot } = useAuthTemplateSwitch(stateProps?.overrideToken);
 
     return (
       <Host>
-        <div ref={setSlot} style={{ display: 'contents' }}>
+        <div ref={setSlot} style={{ display: "contents" }}>
           <slot name="logged-out" />
           <slot name="logged-in" />
         </div>

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<HTMLDivElement>(undefined);
   const [slot, setSlot] = useState<HTMLDivElement>(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<HTMLTemplateElement>(`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;
     }
 

packages/bedrock-components/src/components/sqb-conditional-section/sqb-conditional-section.tsx

@@ -1,19 +1,20 @@
-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.
  *
  * @uiName Conditional Section
  * @exampleGroup Advanced
  * @slots [{"name":"","title":"Section Content"}]
- * @example Conditional Section On Segment - <sqb-conditional-section condition="'vip' in user.segments"><p>Add your conditional content here!</p></sqb-conditional-section>
- * @example Conditional Section On Custom Field - <sqb-conditional-section condition="user.customFields.foo = true"><p>Add your conditional content here!</p></sqb-conditional-section>
+ * @validParents ["sqm-portal-container","div","template","sqm-instant-access-registration","sqb-program-section"]
+ * @example Conditional Area / Segment - <sqb-conditional-section condition="'vip' in user.segments"><p>Add your conditional content here!</p></sqb-conditional-section>
+ * @example Conditional Area / Field - <sqb-conditional-section condition="user.customFields.foo = true"><p>Add your conditional content here!</p></sqb-conditional-section>
  */
 @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 (
       <Host style={{ display }}>
         <slot />

packages/bedrock-components/src/components/sqb-program-section/sqb-program-section.tsx

@@ -1,25 +1,26 @@
-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
  *
  * @uiName Program Section
  * @exampleGroup Advanced
  * @slots [{"name":"","title":"Section Content"}]
+ * @validParents ["sqm-portal-container","div","template","sqm-instant-access-registration","sqb-program-section"]
  * @example Program Section - <sqb-program-section>Add your program specific content here!</sqb-program-section>
  */
 @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 (
-      <Host style={{ display: 'contents' }}>
+      <Host style={{ display: "contents" }}>
         <slot></slot>
       </Host>
     );