Add pick-list and yes/no poll components

demo/index.html

@@ -472,6 +472,7 @@ <h3>Pendo Demo Controls</h3>
         <button class="demo-btn" onclick="showGuide('nps-survey')">Show NPS Survey</button>
         <button class="demo-btn" onclick="showGuide('feedback')">Show Feedback Poll</button>
         <button class="demo-btn" onclick="showGuide('banner')">Show Banner</button>
+        <button class="demo-btn" onclick="showGuide('yes-no-poll')">Show Yes/No Poll</button>
     </div>
 
     <!-- Load guide-components -->
@@ -483,6 +484,9 @@ <h3>Pendo Demo Controls</h3>
     <script src="/demo/mock-guides.js"></script>
 
     <script>
+        // Register guide-components custom elements
+        PendoGuideComponents.registerGuideComponents();
+
         // Initialize mock pendo
         window.pendo = new MockPendo({
             visitor: { id: 'demo-visitor-123' },

demo/mock-guides.js

@@ -269,6 +269,29 @@ const mockGuides = [
                             <pendo-paragraph>On a scale of 1-10, how easy was the onboarding process?</pendo-paragraph>
                             <pendo-number-scale poll-id="ease-rating" min="1" max="10" low-label="Very Difficult" high-label="Very Easy"></pendo-number-scale>
                         </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
+                            <pendo-button action="next-step" variant="primary">Continue</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'feedback-step-4',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Tell Us About You</pendo-title>
+                            <pendo-paragraph>What is your primary role?</pendo-paragraph>
+                            <pendo-pick-list poll-id="role-select" display="select"
+                                options='{"pm":"Product Manager","eng":"Engineer","design":"Designer","qa":"QA","other":"Other"}'
+                                placeholder="Choose your role…"></pendo-pick-list>
+                            <pendo-paragraph style="margin-top: 16px;">Which feature do you use most?</pendo-paragraph>
+                            <pendo-pick-list poll-id="feature-pick" display="radio"
+                                options='{"dash":"Dashboard","reports":"Reports","integrations":"Integrations","admin":"Admin Settings"}'></pendo-pick-list>
+                        </pendo-guide-content>
                         <pendo-guide-footer>
                             <pendo-button action="previous-step" variant="secondary">Back</pendo-button>
                             <pendo-button action="dismiss" variant="primary">Submit</pendo-button>
@@ -339,6 +362,74 @@ const mockGuides = [
                 fontColor: '#ffffff'
             }
         }
+    },
+
+    // Yes/No Poll - PositiveNegative poll type
+    {
+        id: 'yes-no-poll',
+        name: 'Yes/No Poll',
+        steps: [
+            {
+                id: 'yes-no-step-1',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Quick Question</pendo-title>
+                            <pendo-yes-no
+                                poll-id="feature-useful"
+                                question="Did you find this feature helpful?"
+                                yes-label="Yes, very helpful"
+                                no-label="Not really">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="next-step" variant="primary">Next</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            },
+            {
+                id: 'yes-no-step-2',
+                layoutType: 'lightbox',
+                htmlContent: `
+                    <pendo-guide>
+                        <pendo-close-button></pendo-close-button>
+                        <pendo-guide-content>
+                            <pendo-title>Thumbs Up or Down?</pendo-title>
+                            <pendo-yes-no
+                                poll-id="thumbs-rating"
+                                question="Would you recommend this to a colleague?"
+                                display="thumbs">
+                            </pendo-yes-no>
+                        </pendo-guide-content>
+                        <pendo-guide-footer>
+                            <pendo-button action="dismiss" variant="primary">Done</pendo-button>
+                        </pendo-guide-footer>
+                    </pendo-guide>
+                `
+            }
+        ],
+        buildingBlocks: {
+            container: {
+                background: '#ffffff',
+                borderRadius: '12px',
+                shadowColor: 'rgba(0, 0, 0, 0.15)',
+                shadowOffsetVertical: '8px',
+                shadowRadius: '24px'
+            },
+            primaryButton: {
+                background: '#4F46E5',
+                fontColor: '#ffffff'
+            },
+            title: {
+                fontColor: '#1f2937'
+            },
+            paragraph: {
+                fontColor: '#6b7280'
+            }
+        }
     }
 ];
 

demo/mock-pendo.js

@@ -479,33 +479,38 @@ class MockPendo {
 
         // Listen for pendo-action events
         container.addEventListener('pendo-action', (e) => {
-            const { action, params } = e.detail;
-            console.log('[MockPendo] Action:', action, params);
-
-            switch (action) {
-                case 'next-step':
-                    step._guide.advanceStep();
-                    break;
-
-                case 'previous-step':
-                    step._guide.previousStep();
-                    break;
-
-                case 'dismiss':
-                    step._guide.hide();
-                    break;
-
-                case 'link':
-                    if (params?.url) {
-                        window.open(params.url, params.target || '_blank');
-                    }
-                    break;
-
-                case 'launch-guide':
-                    if (params?.guideId) {
-                        pendo.showGuideById(params.guideId);
-                    }
-                    break;
+            const { actions } = e.detail;
+            console.log('[MockPendo] Actions:', actions);
+
+            // Process each action in the array
+            for (const actionObj of actions) {
+                const { action } = actionObj;
+
+                switch (action) {
+                    case 'next-step':
+                        step._guide.advanceStep();
+                        break;
+
+                    case 'previous-step':
+                        step._guide.previousStep();
+                        break;
+
+                    case 'dismiss':
+                        step._guide.hide();
+                        break;
+
+                    case 'link':
+                        if (actionObj.url) {
+                            window.open(actionObj.url, actionObj.target || '_blank');
+                        }
+                        break;
+
+                    case 'launch-guide':
+                        if (actionObj.guideId) {
+                            pendo.showGuideById(actionObj.guideId);
+                        }
+                        break;
+                }
             }
         });
 

package.json

@@ -19,8 +19,8 @@
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "serve": "npx serve -l 3001",
-    "harness": "npm run build && npx serve -l 3001",
+    "serve": "npx serve -l 8082",
+    "harness": "npm run build && npx serve -l 8082",
     "test": "vitest",
     "test:a11y": "vitest run --grep a11y"
   },

src/elements/pendo-button.js

@@ -138,6 +138,4 @@ class PendoButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-button', PendoButton);
-
 export { PendoButton };

src/elements/pendo-close-button.js

@@ -37,6 +37,4 @@ class PendoCloseButton extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-close-button', PendoCloseButton);
-
 export { PendoCloseButton };

src/elements/pendo-divider.js

@@ -13,6 +13,4 @@ class PendoDivider extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-divider', PendoDivider);
-
 export { PendoDivider };

src/elements/pendo-guide.js

@@ -118,6 +118,4 @@ class PendoGuide extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-guide', PendoGuide);
-
 export { PendoGuide };

src/elements/pendo-image.js

@@ -41,6 +41,4 @@ class PendoImage extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-image', PendoImage);
-
 export { PendoImage };

src/elements/pendo-input.js

@@ -232,4 +232,3 @@ export class PendoInput extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-input', PendoInput);

src/elements/pendo-link.js

@@ -40,4 +40,3 @@ export class PendoLink extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-link', PendoLink);

src/elements/pendo-list.js

@@ -69,5 +69,3 @@ export class PendoListItem extends PendoBaseElement {
     // Content is processed by parent PendoList
 }
 
-customElements.define('pendo-list', PendoList);
-customElements.define('pendo-list-item', PendoListItem);

src/elements/pendo-text.js

@@ -12,6 +12,4 @@ class PendoText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-text', PendoText);
-
 export { PendoText };

src/elements/pendo-title.js

@@ -21,6 +21,4 @@ class PendoTitle extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-title', PendoTitle);
-
 export { PendoTitle };

src/elements/pendo-video.js

@@ -101,6 +101,4 @@ class PendoVideo extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-video', PendoVideo);
-
 export { PendoVideo };

src/index.js

@@ -2,7 +2,7 @@
  * @pendo/guide-components
  *
  * Custom elements for rendering Pendo HTML guides.
- * Import this module to register all pendo-* custom elements.
+ * Call registerGuideComponents() to register all pendo-* custom elements.
  */
 
 // Base class (exported for extension)
@@ -31,9 +31,14 @@ export { PendoNps } from './polls/pendo-nps.js';
 export { PendoNumberScale } from './polls/pendo-number-scale.js';
 export { PendoOpenText } from './polls/pendo-open-text.js';
 export { PendoEmojiScale } from './polls/pendo-emoji-scale.js';
+export { PendoPickList } from './polls/pendo-pick-list.js';
+export { PendoYesNo } from './polls/pendo-yes-no.js';
 
 // Configuration API
 export { configurePendoComponents } from './configure.js';
 
+// Registration (deferred — consumers call this when ready)
+export { registerGuideComponents } from './register.js';
+
 // Import styles (will be extracted by build)
 import './styles/defaults.css';

src/polls/pendo-emoji-scale.js

@@ -122,4 +122,3 @@ export class PendoEmojiScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-emoji-scale', PendoEmojiScale);

src/polls/pendo-nps.js

@@ -120,4 +120,3 @@ export class PendoNps extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-nps', PendoNps);

src/polls/pendo-number-scale.js

@@ -125,4 +125,3 @@ export class PendoNumberScale extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-number-scale', PendoNumberScale);

src/polls/pendo-open-text.js

@@ -137,4 +137,3 @@ export class PendoOpenText extends PendoBaseElement {
     }
 }
 
-customElements.define('pendo-open-text', PendoOpenText);