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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/constructorio-ui-quizzes-bundled.js +13 -13
  2. package/lib/cjs/components/ControlBar/ControlBar.js +2 -1
  3. package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js +3 -1
  4. package/lib/mjs/components/ControlBar/ControlBar.js +2 -1
  5. package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js +3 -1
  6. package/lib/styles.css +12 -0
  7. package/lib/types/components/ControlBar/ControlBar.d.ts +1 -0
  8. package/package.json +1 -1
package/lib/cjs/components/ControlBar/ControlBar.js CHANGED
@@ -5,9 +5,10 @@ const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const BackButton_1 = tslib_1.__importDefault(require("../BackButton/BackButton"));
6
6
  const CTAButton_1 = tslib_1.__importDefault(require("../CTAButton/CTAButton"));
7
7
  function ControlBar(props) {
8
- const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
8
+ const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
9
9
  return (react_1.default.createElement("div", { className: 'cio-question-buttons-container' },
10
10
  showBackButton && react_1.default.createElement(BackButton_1.default, { onClick: backButtonHandler }),
11
+ instructions && react_1.default.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
11
12
  react_1.default.createElement(CTAButton_1.default, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
12
13
  }
13
14
  exports.default = ControlBar;
package/lib/cjs/components/SelectTypeQuestion/SelectTypeQuestion.js CHANGED
@@ -14,10 +14,12 @@ function SelectTypeQuestion() {
14
14
  let question;
15
15
  let type;
16
16
  let hasImages = false;
17
+ let instructions;
17
18
  if (state === null || state === void 0 ? void 0 : state.quiz.currentQuestion) {
18
19
  question = state.quiz.currentQuestion.next_question;
19
20
  type = question.type;
20
21
  hasImages = question.options.some((option) => option.images);
22
+ instructions = type === actions_1.QuestionTypes.MultipleSelect && 'Select one or more options';
21
23
  }
22
24
  const [selected, setSelected] = (0, react_1.useState)({});
23
25
  const isDisabled = Object.keys(selected).length === 0;
@@ -76,7 +78,7 @@ function SelectTypeQuestion() {
76
78
  }, role: 'button', tabIndex: 0, key: option.id },
77
79
  option.images ? (0, utils_1.renderImages)(option.images, 'cio-question-option-image') : '',
78
80
  react_1.default.createElement("div", { className: 'cio-question-option-value' }, option === null || option === void 0 ? void 0 : option.value))))),
79
- 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 })));
81
+ 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 })));
80
82
  }
81
83
  return null;
82
84
  }
package/lib/mjs/components/ControlBar/ControlBar.js CHANGED
@@ -2,9 +2,10 @@ import React from 'react';
2
2
  import BackButton from '../BackButton/BackButton';
3
3
  import CTAButton from '../CTAButton/CTAButton';
4
4
  function ControlBar(props) {
5
- const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, } = props;
5
+ const { showBackButton, backButtonHandler, ctaButtonText, nextButtonHandler, isNextButtonDisabled, instructions, } = props;
6
6
  return (React.createElement("div", { className: 'cio-question-buttons-container' },
7
7
  showBackButton && React.createElement(BackButton, { onClick: backButtonHandler }),
8
+ instructions && React.createElement("div", { className: 'cio-question-buttons-container-text' }, instructions),
8
9
  React.createElement(CTAButton, { disabled: isNextButtonDisabled, ctaText: ctaButtonText, onClick: nextButtonHandler })));
9
10
  }
10
11
  export default ControlBar;
package/lib/mjs/components/SelectTypeQuestion/SelectTypeQuestion.js CHANGED
@@ -10,10 +10,12 @@ function SelectTypeQuestion() {
10
10
  let question;
11
11
  let type;
12
12
  let hasImages = false;
13
+ let instructions;
13
14
  if (state?.quiz.currentQuestion) {
14
15
  question = state.quiz.currentQuestion.next_question;
15
16
  type = question.type;
16
17
  hasImages = question.options.some((option) => option.images);
18
+ instructions = type === QuestionTypes.MultipleSelect && 'Select one or more options';
17
19
  }
18
20
  const [selected, setSelected] = useState({});
19
21
  const isDisabled = Object.keys(selected).length === 0;
@@ -71,7 +73,7 @@ function SelectTypeQuestion() {
71
73
  }, role: 'button', tabIndex: 0, key: option.id },
72
74
  option.images ? renderImages(option.images, 'cio-question-option-image') : '',
73
75
  React.createElement("div", { className: 'cio-question-option-value' }, option?.value))))),
74
- React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text })));
76
+ React.createElement(ControlBar, { nextButtonHandler: onNextClick, isNextButtonDisabled: isDisabled, backButtonHandler: previousQuestion, showBackButton: !state?.quiz.isFirstQuestion, ctaButtonText: question?.cta_text, instructions: instructions })));
75
77
  }
76
78
  return null;
77
79
  }
package/lib/styles.css CHANGED
@@ -192,6 +192,9 @@
192
192
  background-color: rgba(255, 255, 255, 0.87);
193
193
  align-items: center;
194
194
  }
195
+ .cio-question-buttons-container-text {
196
+ display: none;
197
+ }
195
198
  .cio-question-cta-button {
196
199
  background: var(--primary-color);
197
200
  color: #ffffff;
@@ -594,6 +597,15 @@
594
597
  .cio-result-card {
595
598
  flex-basis: 30%;
596
599
  }
600
+
601
+ /* Control Bar Instructions */
602
+ .cio-question-buttons-container-text {
603
+ text-align: center;
604
+ flex-grow: 1;
605
+ color: var(--gray-dust-100);
606
+ font-size: 1.125rem;
607
+ display: block;
608
+ }
597
609
  }
598
610
 
599
611
  /* Big Tablet */
package/lib/types/components/ControlBar/ControlBar.d.ts CHANGED
@@ -5,6 +5,7 @@ interface ControlBarProps {
5
5
  backButtonHandler?: () => void;
6
6
  nextButtonHandler: () => void;
7
7
  ctaButtonText?: string;
8
+ instructions?: string;
8
9
  }
9
10
  declare function ControlBar(props: ControlBarProps): JSX.Element;
10
11
  export default ControlBar;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@constructor-io/constructorio-ui-quizzes",
3
- "version": "1.3.6",
3
+ "version": "1.3.7",
4
4
  "description": "Constructor.io Quizzes UI library for web applications",
5
5
  "author": "constructor.io",
6
6
  "license": "MIT",