@constructor-io/constructorio-ui-quizzes 1.3.6 → 1.3.8

package/lib/cjs/components/ControlBar/ControlBar.js

@@ -5,9 +5,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
 const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
     return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
         showBackButton && react_1.default.createElement(BackButton_1.default, { onClick: backButtonHandler }),
+        instructions && react_1.default.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
         react_1.default.createElement(CTAButton_1.default, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
 }
 exports.default = ControlBar;

package/lib/cjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -25,11 +25,11 @@ function CoverTypeQuestion() {
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
       `, "data-question-key": question.key },
+            hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : '',
             react_1.default.createElement("div", { className: 'cio-question-content' },
                 react_1.default.createElement(QuestionTitle_1.default, { title: question === null || question === void 0 ? void 0 : question.title }),
                 react_1.default.createElement(QuestionDescription_1.default, { description: question.description }),
-                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })),
-            hasImage ? (0, utils_1.renderImages)(question.images, 'cio-question-image-container') : ''));
+                react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text }))));
     }
     return null;
 }

package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -14,10 +14,12 @@ function SelectTypeQuestion() {
     let question;
     let type;
     let hasImages = false;
+    let instructions;
     if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         type = question.type;
         hasImages = question.options.some((option) => option.images);
+        instructions = type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     const [selected, setSelected] = (0, react_1.useState)({});
     const isDisabled = Object.keys(selected).length === 0;
@@ -76,7 +78,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
                 react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
-            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text })));
+            react_1.default.createElement(ControlBar_1.default, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !(state === null || state === void 0 ? void 0 : state.quiz.isFirstQuestion), ctaButtonText: question === null || question === void 0 ? void 0 : question.cta_text, instructions: instructions })));
     }
     return null;
 }

package/lib/cjs/utils.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.defaultOnQuizResultsLoadedCode = exports.defaultOnQuizResultClickCode = exports.defaultOnAddToCartClickCode = exports.getStoryParams = exports.renderImages = void 0;
+exports.convertPrimaryColorsToString = exports.rgbToHsl = exports.sleep = exports.getFilterValuesFromExpression = exports.isFunction = exports.getPreferredColorScheme = exports.getQuestionTypes = exports.stringify = exports.stringifyWithDefaults = exports.functionStrings = exports.getStoryParams = exports.renderImages = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const actions_1 = require("./components/CioQuiz/actions");
@@ -41,29 +41,35 @@ ${templateCode}
     };
 };
 exports.getStoryParams = getStoryParams;
-exports.defaultOnAddToCartClickCode = `"onAddToCartClick": (item) => console.dir(item)`;
-exports.defaultOnQuizResultClickCode = `"onQuizResultClick": (result, position) => console.dir(result, position)`;
-exports.defaultOnQuizResultsLoadedCode = `"onQuizResultsLoaded": (results) => console.dir(results)`;
+exports.functionStrings = {
+    onAddToCartClick: `(item) => console.dir(item)`,
+    onQuizResultClick: `(result, position) => console.dir(result, position)`,
+    onQuizResultsLoaded: `(results) => console.dir(results)`,
+    cioJsClient: `cioJsClient`,
+};
 const stringifyWithDefaults = (obj) => {
-    const { resultsPageOptions, cioJsClient } = obj, rest = tslib_1.__rest(obj, ["resultsPageOptions", "cioJsClient"]);
-    const { onAddToCartClick, onQuizResultsLoaded, onQuizResultClick } = resultsPageOptions;
-    let res = JSON.stringify(Object.assign(Object.assign({}, rest), { resultsPageOptions }), null, '  ');
-    if (cioJsClient) {
-        res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
-  "resultsPageOptions": {`);
-    }
-    if (onQuizResultsLoaded) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${exports.defaultOnQuizResultsLoadedCode},`);
-    }
-    if (onQuizResultClick) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${exports.defaultOnQuizResultClickCode},`);
-    }
-    if (onAddToCartClick) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${exports.defaultOnAddToCartClickCode},`);
-    }
+    // Stringify non-function values normally. Add a template block for functions to be replaced later
+    const customJsonTransformer = (key, value) => {
+        if (value instanceof Function) {
+            return `${key}_CODE`;
+        }
+        if (key === 'cioJsClient') {
+            return `${key}_CODE`;
+        }
+        return value;
+    };
+    let res = JSON.stringify(obj, customJsonTransformer, '  ');
+    // Replace template blocks with function strings
+    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
+        const [codePlaceholder, key] = match;
+        const functionString = exports.functionStrings[key];
+        if (functionString) {
+            res = res.replaceAll(codePlaceholder, functionString);
+        }
+        else {
+            console.error(`Function string for ${key} not found.`); // eslint-disable-line
+        }
+    });
     return res;
 };
 exports.stringifyWithDefaults = stringifyWithDefaults;

package/lib/mjs/components/ControlBar/ControlBar.js

@@ -2,9 +2,10 @@ import React from 'react';
 import BackButton from '../BackButton/BackButton';
 import CTAButton from '../CTAButton/CTAButton';
 function ControlBar(props) {
-    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
+    const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
     return (React.createElement("div", { className: 'cio-question-buttons-container' },
         showBackButton && React.createElement(BackButton, { onClick: backButtonHandler }),
+        instructions && React.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
         React.createElement(CTAButton, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
 }
 export default ControlBar;

package/lib/mjs/components/CoverTypeQuestion/CoverTypeQuestion.js

@@ -21,11 +21,11 @@ export default function CoverTypeQuestion() {
         cio-container${hasImage ? '--with-image' : ''}
         cio-cover-question-container${hasImage ? '--with-image' : ''}
       `, "data-question-key": question.key },
+            hasImage ? renderImages(question.images, 'cio-question-image-container') : '',
             React.createElement("div", { className: 'cio-question-content' },
                 React.createElement(QuestionTitle, { title: question?.title }),
                 React.createElement(QuestionDescription, { description: question.description }),
-                React.createElement(ControlBar, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })),
-            hasImage ? renderImages(question.images, 'cio-question-image-container') : ''));
+                React.createElement(ControlBar, { nextButtonHandler: onNextClick, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text }))));
     }
     return null;
 }

package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js

@@ -10,10 +10,12 @@ function SelectTypeQuestion() {
     let question;
     let type;
     let hasImages = false;
+    let instructions;
     if (state?.quiz.currentQuestion) {
         question = state.quiz.currentQuestion.next_question;
         type = question.type;
         hasImages = question.options.some((option) => option.images);
+        instructions = type === QuestionTypes.MultipleSelect && 'Select one or more options';
     }
     const [selected, setSelected] = useState({});
     const isDisabled = Object.keys(selected).length === 0;
@@ -71,7 +73,7 @@ function SelectTypeQuestion() {
                 }, role: 'button', tabIndex: 0, key: option.id },
                 option.images ? renderImages(option.images, 'cio-question-option-image') : '',
                 React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
-            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })));
+            React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text, instructions: instructions })));
     }
     return null;
 }

package/lib/mjs/utils.js

@@ -35,29 +35,35 @@ ${templateCode}
         },
     };
 };
-export const defaultOnAddToCartClickCode = `"onAddToCartClick": (item) => console.dir(item)`;
-export const defaultOnQuizResultClickCode = `"onQuizResultClick": (result, position) => console.dir(result, position)`;
-export const defaultOnQuizResultsLoadedCode = `"onQuizResultsLoaded": (results) => console.dir(results)`;
+export const functionStrings = {
+    onAddToCartClick: `(item) => console.dir(item)`,
+    onQuizResultClick: `(result, position) => console.dir(result, position)`,
+    onQuizResultsLoaded: `(results) => console.dir(results)`,
+    cioJsClient: `cioJsClient`,
+};
 export const stringifyWithDefaults = (obj) => {
-    const { resultsPageOptions, cioJsClient, ...rest } = obj;
-    const { onAddToCartClick, onQuizResultsLoaded, onQuizResultClick } = resultsPageOptions;
-    let res = JSON.stringify({ ...rest, resultsPageOptions }, null, '  ');
-    if (cioJsClient) {
-        res = res.replace('"resultsPageOptions": {', `"cioJsClient": cioJsClient,
-  "resultsPageOptions": {`);
-    }
-    if (onQuizResultsLoaded) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${defaultOnQuizResultsLoadedCode},`);
-    }
-    if (onQuizResultClick) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${defaultOnQuizResultClickCode},`);
-    }
-    if (onAddToCartClick) {
-        res = res.replace('"resultsPageOptions": {', `"resultsPageOptions": {
-    ${defaultOnAddToCartClickCode},`);
-    }
+    // Stringify non-function values normally. Add a template block for functions to be replaced later
+    const customJsonTransformer = (key, value) => {
+        if (value instanceof Function) {
+            return `${key}_CODE`;
+        }
+        if (key === 'cioJsClient') {
+            return `${key}_CODE`;
+        }
+        return value;
+    };
+    let res = JSON.stringify(obj, customJsonTransformer, '  ');
+    // Replace template blocks with function strings
+    Array.from(res.matchAll(/"(\w*)_CODE"/g)).forEach((match) => {
+        const [codePlaceholder, key] = match;
+        const functionString = functionStrings[key];
+        if (functionString) {
+            res = res.replaceAll(codePlaceholder, functionString);
+        }
+        else {
+            console.error(`Function string for ${key} not found.`); // eslint-disable-line
+        }
+    });
     return res;
 };
 export const stringify = (obj) => JSON.stringify(obj, null, '  ');

package/lib/styles.css

@@ -69,7 +69,6 @@
 /* Container */
 .cio-container {
   display: flex;
-  align-items: center;
   justify-content: center;
   margin-top: 2rem;
   padding-bottom: var(--bottom-bar-height);
@@ -129,7 +128,6 @@
 .cio-question-content {
   display: flex;
   flex-direction: column;
-  height: 100%;
   padding: 1rem;
 }
 
@@ -157,6 +155,7 @@
   width: 100%;
   object-fit: cover;
   max-height: var(--container-image-small-height);
+  height: var(--container-image-small-height); /* Fixed height for layout shifts*/
   display: flex;
 }
 
@@ -192,6 +191,9 @@
   background-color: rgba(255, 255, 255, 0.87);
   align-items: center;
 }
+.cio-question-buttons-container-text {
+  display: none;
+}
 .cio-question-cta-button {
   background: var(--primary-color);
   color: #ffffff;
@@ -254,7 +256,6 @@
 
 /* Cover Page Component */
 .cio-cover-question-container--with-image {
-  flex-direction: column-reverse;
   padding: 0;
   padding-bottom: var(--bottom-bar-height);
 }
@@ -594,6 +595,15 @@
   .cio-result-card {
     flex-basis: 30%;
   }
+
+  /* Control Bar Instructions */
+    .cio-question-buttons-container-text {
+    text-align: center;
+    flex-grow: 1;
+    color: var(--gray-dust-100);
+    font-size: 1.125rem;
+    display: block;
+  }
 }
 
 /* Big Tablet */
@@ -608,6 +618,9 @@
     align-items: center;
     flex-direction: row;
   }
+  .cio-cover-question-container--with-image {
+    flex-direction: row-reverse;
+  }
 
   /* Input */
   .cio-question-input-text {

package/lib/types/components/ControlBar/ControlBar.d.ts

@@ -5,6 +5,7 @@ interface ControlBarProps {
     backButtonHandler?: () => void;
     nextButtonHandler: () => void;
     ctaButtonText?: string;
+    instructions?: string;
 }
 declare function ControlBar(props: ControlBarProps): JSX.Element;
 export default ControlBar;

package/lib/types/utils.d.ts

@@ -12,9 +12,12 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
         };
     };
 };
-export declare const defaultOnAddToCartClickCode = "\"onAddToCartClick\": (item) => console.dir(item)";
-export declare const defaultOnQuizResultClickCode = "\"onQuizResultClick\": (result, position) => console.dir(result, position)";
-export declare const defaultOnQuizResultsLoadedCode = "\"onQuizResultsLoaded\": (results) => console.dir(results)";
+export declare const functionStrings: {
+    onAddToCartClick: string;
+    onQuizResultClick: string;
+    onQuizResultsLoaded: string;
+    cioJsClient: string;
+};
 export declare const stringifyWithDefaults: (obj: {
     cioJsClient?: any;
     resultsPageOptions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@constructor-io/constructorio-ui-quizzes",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "Constructor.io Quizzes UI library for web applications",
   "author": "constructor.io",
   "license": "MIT",